From b6fcbc6e735cbfc12d8af7ed8533fc99c9b32829 Mon Sep 17 00:00:00 2001
From: xingyuv <xingyu4j@vip.qq.com>
Date: Fri, 14 Apr 2023 15:44:24 +0800
Subject: [PATCH] fix: dark
---
index.html | 123 +++++++++++++++++++++++++++++++----------------------
1 file changed, 72 insertions(+), 51 deletions(-)
diff --git a/index.html b/index.html
index 1ceb150a..09e0d2c7 100644
--- a/index.html
+++ b/index.html
@@ -1,20 +1,25 @@
<!DOCTYPE html>
-<html lang="en">
+<html lang="en" id="htmlRoot">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
- <meta
- name="viewport"
- content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
- />
- <!-- 由 vite 注入 VITE_GLOB_APP_TITLE 变量，在 .env 内配置 -->
- <title><%= VITE_GLOB_APP_TITLE %></title>
+ <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+ <title>%VITE_GLOB_APP_TITLE%</title>
<link rel="icon" href="/favicon.ico" />
</head>
<body>
+ <script>
+ (() => {
+ var htmlRoot = document.getElementById('htmlRoot');
+ var theme = window.localStorage.getItem('__APP__DARK__MODE__');
+ if (htmlRoot && theme) {
+ htmlRoot.setAttribute('data-theme', theme);
+ theme = htmlRoot = null;
+ }
+ })();
+ </script>
<div id="app">
- <!-- 页面加载后会删除 loading 节点，所以无需担心污染 -->
<style>
html[data-theme='dark'] .app-loading {
background-color: #2c344a;
@@ -24,109 +29,125 @@
color: rgb(255 255 255 / 85%);
}
- .loading {
+ .app-loading {
display: flex;
- position: fixed;
+ width: 100%;
+ height: 100%;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ background-color: #f4f7f9;
+ }
+
+ .app-loading .app-loading-wrap {
+ position: absolute;
top: 50%;
left: 50%;
- flex-direction: column;
- align-items: center;
- justify-content: center;
+ display: flex;
transform: translate3d(-50%, -50%, 0);
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
}
- .logo {
- display: block;
- width: 100px;
- margin: 0 auto;
- margin-bottom: 10px;
+ .app-loading .dots {
+ display: flex;
+ padding: 98px;
+ justify-content: center;
+ align-items: center;
}
- .title {
+ .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;
+ color: rgb(0 0 0 / 85%);
+ justify-content: center;
+ align-items: center;
}
- .dots {
- display: inline-block;
+ .app-loading .app-loading-logo {
+ display: block;
+ width: 90px;
+ margin: 0 auto 20px;
+ }
+
+ .dot {
position: relative;
- box-sizing: border-box;
+ display: inline-block;
width: 48px;
height: 48px;
margin-top: 30px;
- transform: rotate(45deg);
- animation: rotate 1s infinite linear;
font-size: 32px;
+ transform: rotate(45deg);
+ box-sizing: border-box;
+ animation: antRotate 1.2s infinite linear;
}
- .dots i {
- display: block;
+ .dot i {
position: absolute;
+ display: block;
width: 20px;
height: 20px;
+ background-color: #0065cc;
+ border-radius: 100%;
+ opacity: 30%;
transform: scale(0.75);
+ animation: antSpinMove 1s infinite linear alternate;
transform-origin: 50% 50%;
- animation: spin-move 1s infinite linear alternate;
- border-radius: 100%;
- opacity: 0.3;
- background-color: #0065cc;
}
- .dots i:nth-child(1) {
+ .dot i:nth-child(1) {
top: 0;
left: 0;
}
- .dots i:nth-child(2) {
+ .dot i:nth-child(2) {
top: 0;
right: 0;
animation-delay: 0.4s;
}
- .dots i:nth-child(3) {
+ .dot i:nth-child(3) {
right: 0;
bottom: 0;
animation-delay: 0.8s;
}
- .dots i:nth-child(4) {
+ .dot i:nth-child(4) {
bottom: 0;
left: 0;
animation-delay: 1.2s;
}
-
- @keyframes rotate {
+ @keyframes antRotate {
to {
transform: rotate(405deg);
}
}
-
- @keyframes rotate {
+ @keyframes antRotate {
to {
transform: rotate(405deg);
}
}
-
- @keyframes spin-move {
+ @keyframes antSpinMove {
to {
- opacity: 1;
+ opacity: 100%;
}
}
-
- @keyframes spin-move {
+ @keyframes antSpinMove {
to {
- opacity: 1;
+ opacity: 100%;
}
}
</style>
- <div class="loading">
- <img src="/resource/img//logo.png" class="logo" alt="Logo" />
- <span class="dots"><i></i><i></i><i></i><i></i></span>
- <div class="title"><%= VITE_GLOB_APP_TITLE %></div>
+ <div class="app-loading">
+ <div class="app-loading-wrap">
+ <img src="/resource/img/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>