AMAZEHOME/dns-server
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面数据更新优化

Browse Source
This commit is contained in:
Alex Yang
2025-11-26 00:48:04 +08:00
parent 5ad91654cc
commit b73f1be3dd
2 changed files with 179 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
static/index.html
View File

@@ -51,7 +51,95 @@
}
}
</style>
</head>
<!-- 数字光晕效果样式 -->
<style>
/* 数字光晕效果基础样式 */
.number-glow {
animation: glow-pulse 2s ease-in-out;
}
/* 蓝色光晕效果 */
.number-glow-blue {
animation: glow-blue 2s ease-in-out;
}
/* 红色光晕效果 */
.number-glow-red {
animation: glow-red 2s ease-in-out;
}
/* 绿色光晕效果 */
.number-glow-green {
animation: glow-green 2s ease-in-out;
}
/* 黄色光晕效果 */
.number-glow-yellow {
animation: glow-yellow 2s ease-in-out;
}
/* 光晕动画定义 */
@keyframes glow-pulse {
0% {
text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
50% {
text-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
}
100% {
text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
}
@keyframes glow-blue {
0% {
text-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
}
50% {
text-shadow: 0 0 20px rgba(59, 130, 246, 0.7);
}
100% {
text-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
}
}
@keyframes glow-red {
0% {
text-shadow: 0 0 5px rgba(239, 68, 68, 0.3);
}
50% {
text-shadow: 0 0 20px rgba(239, 68, 68, 0.7);
}
100% {
text-shadow: 0 0 5px rgba(239, 68, 68, 0.3);
}
}
@keyframes glow-green {
0% {
text-shadow: 0 0 5px rgba(16, 185, 129, 0.3);
}
50% {
text-shadow: 0 0 20px rgba(16, 185, 129, 0.7);
}
100% {
text-shadow: 0 0 5px rgba(16, 185, 129, 0.3);
}
}
@keyframes glow-yellow {
0% {
text-shadow: 0 0 5px rgba(250, 204, 21, 0.3);
}
50% {
text-shadow: 0 0 20px rgba(250, 204, 21, 0.7);
}
100% {
text-shadow: 0 0 5px rgba(250, 204, 21, 0.3);
}
}
</style>
</head>
<body class="bg-gray-50 text-dark font-sans">
<div class="flex h-screen overflow-hidden">
<!-- 侧边栏 -->
@@ -140,7 +228,7 @@
<!-- 统计卡片 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- 查询总量卡片 -->
<div class="bg-white rounded-lg p-6 card-shadow relative overflow-hidden">
<div class="bg-blue-50 rounded-lg p-6 card-shadow relative overflow-hidden">
<!-- 颜色蒙版 -->
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-primary opacity-10"></div>
<div class="relative z-10">
@@ -166,7 +254,7 @@
</div>
<!-- 屏蔽数量卡片 -->
<div class="bg-white rounded-lg p-6 card-shadow relative overflow-hidden">
<div class="bg-red-50 rounded-lg p-6 card-shadow relative overflow-hidden">
<!-- 颜色蒙版 -->
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-danger opacity-10"></div>
<div class="relative z-10">
@@ -192,7 +280,7 @@
</div>
<!-- 正常解析卡片 -->
<div class="bg-white rounded-lg p-6 card-shadow relative overflow-hidden">
<div class="bg-green-50 rounded-lg p-6 card-shadow relative overflow-hidden">
<!-- 颜色蒙版 -->
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-success opacity-10"></div>
<div class="relative z-10">
@@ -218,7 +306,7 @@
</div>
<!-- 错误数量卡片 -->
<div class="bg-white rounded-lg p-6 card-shadow relative overflow-hidden">
<div class="bg-yellow-50 rounded-lg p-6 card-shadow relative overflow-hidden">
<!-- 颜色蒙版 -->
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-warning opacity-10"></div>
<div class="relative z-10">