From 2af71bcf522c485ea005184c977986374a7dcc4a Mon Sep 17 00:00:00 2001 From: Sanakey <714737083@qq.com> Date: 星期六, 28 九月 2024 09:47:10 +0800 Subject: [PATCH] Merge branch 'feng-v1-editor' of http://192.168.100.20:9090/r/onbus_crm into li-v1 --- index.html | 195 ++++++++++++++++++++++++++++++++---------------- 1 files changed, 130 insertions(+), 65 deletions(-) diff --git a/index.html b/index.html index 9c9dbbd..41d55cf 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,6 @@ -<!DOCTYPE html> -<html lang="en"> +<!doctype html> +<html lang="zh" id="htmlRoot"> <head> - <%= viteHtmlPluginOptions.hmScript %> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="renderer" content="webkit" /> @@ -9,72 +8,138 @@ name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" /> - - <title></title> + <title><%= VITE_GLOB_APP_TITLE %></title> <link rel="icon" href="/favicon.ico" /> - <%= viteHtmlPluginOptions.injectConfig %> - - <style> - @keyframes load { - 0% { - -webkit-transform: rotate(-360deg); - transform: rotate(-360deg); - } - - 100% { - -webkit-transform: rotate(0); - transform: rotate(0); - } - } - - .app-loading { - width: 100%; - height: 100%; - background: #f0f2f5; - } - - .app-loading .app-loading-wrap { - position: absolute; - top: 50%; - left: 50%; - -webkit-transform: translate3d(-50%, -50%, 0); - transform: translate3d(-50%, -50%, 0); - } - - .app-loading .g-loading { - display: block; - width: 48px; - 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: rgba(0, 0, 0, 0.85); - } - </style> </head> <body> <div id="app"> - <section class="app-loading"> - <section class="app-loading-wrap"> - <img src="./resource/img/logo.png" class="logo" alt="Logo" /> - <img src="./resource/img/loading.svg" alt="" class="g-loading" /> - <h1 class="app-loading__tip"><%= viteHtmlPluginOptions.title %></h1> - </section> - </section> + <style> + html { + /* same as ant-design-vue/dist/reset.css setting, avoid the title line-height changed */ + line-height: 1.15; + } + + html[data-theme='dark'] .app-loading { + background-color: #2c344a; + } + + html[data-theme='dark'] .app-loading .app-loading-title { + color: rgb(255 255 255 / 85%); + } + + .app-loading { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + background-color: #f4f7f9; + } + + .app-loading .app-loading-wrap { + display: flex; + position: absolute; + top: 50%; + left: 50%; + flex-direction: column; + align-items: center; + justify-content: center; + transform: translate3d(-50%, -50%, 0); + } + + .app-loading .dots { + display: flex; + align-items: center; + justify-content: center; + padding: 98px; + } + + .app-loading .app-loading-title { + display: flex; + align-items: center; + justify-content: center; + margin-top: 30px; + color: rgb(0 0 0 / 85%); + font-size: 30px; + } + + .app-loading .app-loading-logo { + display: block; + width: 90px; + margin: 0 auto; + margin-bottom: 20px; + } + + .dot { + display: inline-block; + position: relative; + box-sizing: border-box; + width: 48px; + height: 48px; + margin-top: 30px; + transform: rotate(45deg); + animation: ant-rotate 1.2s infinite linear; + font-size: 32px; + } + + .dot i { + display: block; + position: absolute; + width: 20px; + height: 20px; + transform: scale(0.75); + transform-origin: 50% 50%; + animation: ant-spin-move 1s infinite linear alternate; + border-radius: 100%; + opacity: 0.3; + background-color: #0065cc; + } + + .dot i:nth-child(1) { + top: 0; + left: 0; + } + + .dot i:nth-child(2) { + top: 0; + right: 0; + animation-delay: 0.4s; + } + + .dot i:nth-child(3) { + right: 0; + bottom: 0; + animation-delay: 0.8s; + } + + .dot i:nth-child(4) { + bottom: 0; + left: 0; + animation-delay: 1.2s; + } + + @keyframes ant-rotate { + to { + transform: rotate(405deg); + } + } + + @keyframes ant-spin-move { + to { + opacity: 1; + } + } + </style> + <div class="app-loading"> + <div class="app-loading-wrap"> + <img src="/logo.png" class="app-loading-logo" alt="Logo" /> + <div class="app-loading-dots"> + <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span> + </div> + <div class="app-loading-title"><%= VITE_GLOB_APP_TITLE %></div> + </div> + </div> </div> <script type="module" src="/src/main.ts"></script> </body> -- Gitblit v1.8.0