From 4f98978edacbe72610a226267628ab20b57cfc4e Mon Sep 17 00:00:00 2001 From: vben Date: Sun, 1 Nov 2020 13:22:31 +0800 Subject: [PATCH] feat: global loading add text --- CHANGELOG.zh_CN.md | 4 ++ build/vite/plugin/index.ts | 1 + index.html | 108 +++++++++++++++----------------- public/resource/img/loading.svg | 17 +---- 4 files changed, 56 insertions(+), 74 deletions(-) diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 73e203b77..a511d1deb 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -1,5 +1,9 @@ ## Wip +### ✨ Features + +- 全局 loading 添加文本 + ### ⚡ Performance Improvements - Layout 界面布局样式调整 diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts index 80179264c..9a184e361 100644 --- a/build/vite/plugin/index.ts +++ b/build/vite/plugin/index.ts @@ -37,6 +37,7 @@ export function createVitePlugins(viteEnv: ViteEnv) { : '', // Insert Baidu statistics code hmScript: isSiteMode() ? hmScript : '', + title: VITE_GLOB_APP_TITLE, }, }) ); diff --git a/index.html b/index.html index 53ce89ccb..d7a609d20 100644 --- a/index.html +++ b/index.html @@ -9,79 +9,71 @@ name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" /> + <%= viteHtmlPluginOptions.injectConfig %> - - -
- + .app-loading .g-loading { + display: block; + width: 64px; + margin: 30px auto; + -webkit-animation: load 1.2s linear infinite; + animation: load 1.2s linear infinite; + -webkit-transform-origin: center center; + transform-origin: center center; + } + + .app-loading .app-loading-wrap img.logo { + display: block; + width: 90px; + margin: 0 auto; + margin-bottom: 20px; + } + + .app-loading .app-loading-wrap .app-loading__tip { + display: block; + margin: 20px auto 0 0; + font-size: 30px; + color: #2c3a61; + } + + + +
+

<%= viteHtmlPluginOptions.title %>

diff --git a/public/resource/img/loading.svg b/public/resource/img/loading.svg index b85b89286..c956a635a 100644 --- a/public/resource/img/loading.svg +++ b/public/resource/img/loading.svg @@ -18,21 +18,6 @@ .bottom { fill: #9dbfe4; } - @keyframes load { - 0% { - transform: rotate(-360deg); - } - - 100% { - transform: rotate(0); - } - } - - .load { - animation: load 1.4s linear infinite; - transform-origin: center center; - } - svg { display: block; } @@ -42,7 +27,7 @@ min-width: 100px; margin-top: 4px; font-size: 13px; - color: #303133; + color: #2C3A61; text-align: left; }