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');