Files

115 lines
2.5 KiB
HTML
Raw Permalink Normal View History

2026-01-05 17:06:16 +08:00
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
</head>
<body>
<div id="root" style="display: contents;">
<style>
body {
padding: 0;
margin: 0;
}
/* 首屏loading */
.firstScreen-loading {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
/* background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); */
}
.loading,
.loading>div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #44b449;
}
.loading.la-dark {
color: #333;
}
.loading>div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 128px;
height: 128px;
}
.loading>div {
position: absolute;
top: 50%;
left: 50%;
background: transparent;
border-style: solid;
border-width: 3px;
border-radius: 100%;
animation: ball-clip-rotate-multiple-rotate 1s ease-in-out infinite;
}
.loading>div:first-child {
position: absolute;
width: 128px;
height: 128px;
border-right-color: transparent;
border-left-color: transparent;
}
.loading>div:last-child {
width: 64px;
height: 64px;
border-top-color: transparent;
border-bottom-color: transparent;
animation-duration: 0.8s;
animation-direction: reverse;
}
@keyframes ball-clip-rotate-multiple-rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
50% {
transform: translate(-50%, -50%) rotate(180deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* loading END */
</style>
<div class="firstScreen-loading">
<div class="loading">
<div></div>
<div></div>
</div>
<div style="margin-top: 24px;font-size: 20px;color: #666;">
正在加载系统资源,请耐心等待
</div>
</div>
</div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>