diff --git a/index.html b/index.html
index b3e5791..342ca61 100644
--- a/index.html
+++ b/index.html
@@ -8,186 +8,13 @@
+
<%= title %>
-
-
-
-
Z
-
m
-
t
-
l
-
w
-
z
-
y
-
-
A
-
d
-
m
-
i
-
n
-
-
-
+
+
diff --git a/public/resource/loading.css b/public/resource/loading.css
index 8da11d7..8ca7c7e 100644
--- a/public/resource/loading.css
+++ b/public/resource/loading.css
@@ -1,4 +1,4 @@
-#app .loading-wrapper {
+#app .app-loading-wrapper {
position: fixed;
left: 0;
top: 0;
@@ -12,12 +12,12 @@
background-color: #f5f4f5;
}
-#app .loading-wrapper .app-logo {
+#app .app-loading-wrapper .app-logo {
width: 1em;
height: 1em;
}
-#app .loading-wrapper .app-title {
+#app .app-loading-wrapper .app-title {
display: flex;
font-family: 'Segoe UI';
font-weight: 600;
@@ -27,7 +27,7 @@
color: #617eef;
}
-.letter {
+#app .app-loading-wrapper .app-title-letter {
letter-spacing: 1px;
animation-name: opacity;
animation-duration: 3s;
@@ -35,56 +35,6 @@
animation-timing-function: ease;
}
-.l-1 {
- animation-delay: 0.28s;
-}
-
-.l-2 {
- animation-delay: 0.4s;
-}
-
-.l-3 {
- animation-delay: 0.52s;
-}
-
-.l-4 {
- animation-delay: 0.64s;
-}
-
-.l-5 {
- animation-delay: 0.76s;
-}
-
-.l-6 {
- animation-delay: 0.88s;
- width: 2px;
- height: 2px;
-}
-
-.l-7 {
- animation-delay: 1s;
-}
-
-.l-8 {
- animation-delay: 1.12s;
-}
-
-.l-9 {
- animation-delay: 1.24s;
-}
-
-.l-10 {
- animation-delay: 1.36s;
-}
-
-.l-11 {
- animation-delay: 1.48s;
-}
-
-.l-12 {
- animation-delay: 1.6s;
-}
-
@keyframes opacity {
30% {
transform: translateX(1px);
diff --git a/public/resource/loading.js b/public/resource/loading.js
index f9aa943..007ac81 100644
--- a/public/resource/loading.js
+++ b/public/resource/loading.js
@@ -1,44 +1,38 @@
-/**
- * 初始化加载效果的svg格式logo
- * @param {string} id - 元素id
- */
-function initSvgLogo(id) {
- const svgStr = ``;
- const appEl = document.querySelector(id);
+const appSelector = '.app-loading-wrapper'
+const appLogoTitle = 'Zmtlwzy Admin'
+
+initSvgLogo()
+genLogoTitle(appLogoTitle)
+
+function initSvgLogo(selector = appSelector) {
+ const svgStr = ``;
+ const appEl = document.querySelector(selector);
const div = document.createElement('div');
div.innerHTML = svgStr;
+ div.setAttribute('class', 'app-logo')
if (appEl) {
appEl.appendChild(div);
}
}
-function addThemeColorCssVars() {
- const key = '__THEME_COLOR__';
- const defaultColor = '#1890ff';
- const themeColor = window.localStorage.getItem(key) || defaultColor;
- const cssVars = `--primary-color: ${themeColor}`;
- document.documentElement.style.cssText = cssVars;
+function genLogoTitle(title,selector=appSelector ) {
+ const appEl = document.querySelector(selector);
+ const div = document.createElement('div');
+ div.setAttribute('class', 'app-title')
+
+ for (let i = 0; i < title.length; i++) {
+ const letter = title[i]
+ let letterNode = document.createElement('span');
+ if(letter === ' ') {
+ div.innerHTML = div.innerHTML + ' '
+ } else {
+ letterNode.innerHTML = letter
+ letterNode.setAttribute('class', 'app-title-letter')
+ letterNode.style.animationDelay = `${280 + 120 * i}ms`
+ div.appendChild(letterNode)
+ }
+ }
+ if (appEl) {
+ appEl.appendChild(div);
+ }
}
-
-addThemeColorCssVars();
-
-initSvgLogo('#loadingLogo');