147 lines
4.3 KiB
HTML
147 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" href="/favicon.ico" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta
|
|
name="keywords"
|
|
content="基于 vue3 + CompositionAPI + typescript + vite3 + element plus 的后台开源免费管理系统！"
|
|
/>
|
|
<meta
|
|
name="description"
|
|
content="基于 vue3 + CompositionAPI + typescript + vite3 + element plus 的后台开源免费管理系统！"
|
|
/>
|
|
<title>%VITE_APP_TITLE%</title>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<style>
|
|
.app-loading {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
background: #f0f2f5;
|
|
}
|
|
|
|
.app-loading .app-loading-wrap {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
display: flex;
|
|
-webkit-transform: translate3d(-50%, -50%, 0);
|
|
transform: translate3d(-50%, -50%, 0);
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.app-loading .app-loading-title {
|
|
margin-bottom: 30px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
color: #333;
|
|
}
|
|
|
|
.app-loading .app-loading-logo {
|
|
width: 100px;
|
|
margin: 0 auto 15px auto;
|
|
}
|
|
|
|
.app-loading .app-loading-spinner {
|
|
position: relative;
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
.app-loading .app-loading-spinner::before,
|
|
.app-loading .app-loading-spinner::after {
|
|
content: '';
|
|
position: absolute;
|
|
border: 3px solid #1677ff;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.app-loading .app-loading-spinner::before {
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-top-color: transparent;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
.app-loading .app-loading-spinner::after {
|
|
top: 10px;
|
|
left: 10px;
|
|
right: 10px;
|
|
bottom: 10px;
|
|
border-bottom-color: transparent;
|
|
animation: spin 1.5s linear infinite reverse;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.app-loading .pulse-dot {
|
|
position: relative;
|
|
width: 40px;
|
|
height: 40px;
|
|
margin: 20px auto 0;
|
|
}
|
|
|
|
.app-loading .pulse-dot::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 12px;
|
|
height: 12px;
|
|
background: #1677ff;
|
|
border-radius: 50%;
|
|
animation: pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
transform: translate(-50%, -50%) scale(1);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: translate(-50%, -50%) scale(1.5);
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
</style>
|
|
<div class="app-loading">
|
|
<div class="app-loading-wrap">
|
|
<div class="app-loading-title">
|
|
<div class="app-loading-logo" style="display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; margin: 0 auto 15px auto; background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%); border-radius: 20px; box-shadow: 0 8px 24px rgba(22, 119, 255, 0.3);">
|
|
<svg viewBox="0 0 1024 1024" width="60" height="60" fill="white">
|
|
<path d="M512 64L128 256v512l384 192 384-192V256L512 64zm0 72l304 152v448L512 888 208 736V288L512 136z"/>
|
|
<path d="M288 512h128l64-160 96 288 64-128h128" stroke="white" stroke-width="40" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="app-loading-title">%VITE_APP_TITLE%</div>
|
|
</div>
|
|
<div class="app-loading-spinner"></div>
|
|
<div class="pulse-dot"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|