liukai
/
fast-iot-web
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: dark

main
xingyuv 2 years ago
parent
4f30f96371
commit
b6fcbc6e73
1 changed files with 72 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 123
      index.html

123
index.html
Unescape View File

@ -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>