diff --git a/index.html b/index.html index b23f3ce..22b335a 100644 --- a/index.html +++ b/index.html @@ -8,11 +8,30 @@ + + <%= title %> -
+
+ + +
+ +
+
+
+
+
+
+
+
+
<%= title %>
+
+ + +
diff --git a/public/resource/loading.css b/public/resource/loading.css new file mode 100644 index 0000000..b64f192 --- /dev/null +++ b/public/resource/loading.css @@ -0,0 +1,91 @@ +.loading-container { + position: fixed; + left: 0; + top: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} + +.loading-svg { + width: 128px; + height: 128px; + color: var(--primaryColor); +} + +.loading-spin__container { + width: 56px; + height: 56px; + margin: 36px 0; +} + +.loading-spin { + position: relative; + height: 100%; + animation: loadingSpin 1s linear infinite; +} + +.left-0 { + left: 0; +} +.right-0 { + right: 0; +} +.top-0 { + top: 0; +} +.bottom-0 { + bottom: 0; +} + +.loading-spin-item { + position: absolute; + height: 16px; + width: 16px; + background-color: var(--primaryColor); + border-radius: 8px; + -webkit-animation: loadingPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + animation: loadingPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +@keyframes loadingSpin { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes loadingPulse { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: .5; + } +} + +.loading-delay-500 { + -webkit-animation-delay: 500ms; + animation-delay: 500ms; +} +.loading-delay-1000 { + -webkit-animation-delay: 1000ms; + animation-delay: 1000ms; +} +.loading-delay-1500 { + -webkit-animation-delay: 1500ms; + animation-delay: 1500ms; +} + +.loading-title { + font-size: 28px; + font-weight: 500; + color: #6a6a6a; +} diff --git a/public/resource/loading.js b/public/resource/loading.js new file mode 100644 index 0000000..08b9ae5 --- /dev/null +++ b/public/resource/loading.js @@ -0,0 +1,25 @@ +/** + * 初始化加载效果的svg格式logo + * @param {string} id - 元素id + */ +function initSvgLogo(id) { + const svgStr = ``; + const appEl = document.querySelector(id); + const div = document.createElement('div'); + div.innerHTML = svgStr; + if (appEl) { + appEl.appendChild(div); + } +} + +function addThemeColorCssVars() { + const key = '__THEME_COLOR__' + const defaultColor = '#316c72'; + const themeColor = window.localStorage.getItem(key) || defaultColor; + const cssVars = `--primaryColor: ${themeColor}`; + document.documentElement.style.cssText = cssVars; +} + +addThemeColorCssVars(); + +initSvgLogo('#loadingLogo'); diff --git a/src/components/AppProvider/index.vue b/src/components/AppProvider/index.vue index 85a2872..7902250 100644 --- a/src/components/AppProvider/index.vue +++ b/src/components/AppProvider/index.vue @@ -30,6 +30,9 @@ watch( (vars) => { for (const key in vars) { useCssVar(`--${key}`, document.documentElement).value = vars[key] + if (key === 'primaryColor') { + window.localStorage.setItem('__THEME_COLOR__', vars[key]) + } } }, { immediate: true }