bd4rr/vue-naive-admin
1
0
Fork 0
mirror of https://github.com/zclzone/vue-naive-admin.git synced 2025-12-28 12:10:20 +08:00
Code Activity

feat: 增加设置主题色功能

Browse Source
This commit is contained in:
zclzone
2024-05-10 20:02:55 +08:00
parent 621c34a1fb
commit cf3c4b9020
15 changed files with 3259 additions and 2714 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
index.html
View File

@@ -5,23 +5,90 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/favicon.png" />
<link rel="stylesheet" href="/resource/loading.css" />
<style>
.loading-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
}
.dark .loading-container {
background-color: #232324;
color: rgba(255, 255, 255, 0.9);
}
.loading-container .loading {
--speed-of-animation: 0.9s;
--gap: 12px;
--first-color: #4c86f9;
--second-color: #49a84c;
--third-color: #f6bb02;
--fourth-color: #26a69a;
--fifth-color: #2196f3;
margin: auto;
width: 160px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
gap: var(--gap);
}
.loading-container .loading span {
width: 6px;
height: 80px;
background: var(--first-color);
animation: scale var(--speed-of-animation) ease-in-out infinite;
}
.loading-container .loading span:nth-child(2) {
background: var(--second-color);
animation-delay: -0.8s;
}
.loading-container .loading span:nth-child(3) {
background: var(--third-color);
animation-delay: -0.7s;
}
.loading-container .loading span:nth-child(4) {
background: var(--fourth-color);
animation-delay: -0.6s;
}
.loading-container .loading span:nth-child(5) {
background: var(--fifth-color);
animation-delay: -0.5s;
}
@keyframes scale {
0%,
40%,
100% {
transform: scaleY(0.25);
}
20% {
transform: scaleY(1);
}
}
</style>
<title><%= title %></title>
</head>
<body class="dark:text-#e9e9e9 auto-bg">
<div id="app">
<!-- 白屏时的loading效果 -->
<div class="loading-container">
<div class="loading-spin__container">
<div class="loading-spin">
<div class="left-0 top-0 loading-spin-item"></div>
<div class="left-0 bottom-0 loading-spin-item loading-delay-500"></div>
<div class="right-0 top-0 loading-spin-item loading-delay-1000"></div>
<div class="right-0 bottom-0 loading-spin-item loading-delay-1500"></div>
</div>
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="loading-title"><%= title %></div>
</div>
<script src="/resource/loading.js"></script>
</div>
<script type="module" src="/src/main.js"></script>
</body>