2024-04-23 18:03:59 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<link rel="icon" href="/favicon.ico" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
<title>后台管理系统</title>
|
2024-05-21 15:15:41 +08:00
|
|
|
<!--【必须】在index.html 文件中添加打印所需样式(此cdn可能不稳定):-->
|
|
|
|
|
<link
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
type="text/css"
|
|
|
|
|
media="print"
|
2024-05-22 17:26:44 +08:00
|
|
|
href="/public/print-lock.css"
|
2024-05-21 15:15:41 +08:00
|
|
|
/>
|
2024-04-23 18:03:59 +08:00
|
|
|
<style>
|
|
|
|
|
* {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
.preload {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
width: 100vw;
|
|
|
|
|
}
|
2024-05-21 15:15:41 +08:00
|
|
|
|
2024-04-23 18:03:59 +08:00
|
|
|
.circular {
|
|
|
|
|
height: 42px;
|
|
|
|
|
width: 42px;
|
|
|
|
|
animation: loading-rotate 2s linear infinite;
|
|
|
|
|
}
|
2024-05-21 15:15:41 +08:00
|
|
|
|
2024-04-23 18:03:59 +08:00
|
|
|
.circular .path {
|
|
|
|
|
animation: loading-dash 1.5s ease-in-out infinite;
|
|
|
|
|
stroke-dasharray: 90, 150;
|
|
|
|
|
stroke-dashoffset: 0;
|
|
|
|
|
stroke-width: 2;
|
|
|
|
|
stroke: #4073fa;
|
|
|
|
|
stroke-linecap: round;
|
|
|
|
|
}
|
2024-05-21 15:15:41 +08:00
|
|
|
|
2024-04-23 18:03:59 +08:00
|
|
|
@keyframes loading-rotate {
|
|
|
|
|
100% {
|
|
|
|
|
transform: rotate(1turn);
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-05-21 15:15:41 +08:00
|
|
|
|
2024-04-23 18:03:59 +08:00
|
|
|
@keyframes loading-dash {
|
|
|
|
|
0% {
|
|
|
|
|
stroke-dasharray: 90, 150;
|
|
|
|
|
stroke-dashoffset: -40px;
|
|
|
|
|
}
|
2024-05-21 15:15:41 +08:00
|
|
|
|
2024-04-23 18:03:59 +08:00
|
|
|
100% {
|
|
|
|
|
stroke-dasharray: 90, 150;
|
|
|
|
|
stroke-dashoffset: -120px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="app">
|
|
|
|
|
<div class="preload">
|
|
|
|
|
<svg viewBox="25 25 50 50" class="circular">
|
|
|
|
|
<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
|
|
|
|
|
</svg>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<script type="module" src="/src/main.ts"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
