|
|
@@ -828,7 +828,7 @@ onUnmounted(() => {
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
position: relative;
|
|
|
- background: #0a0e27;
|
|
|
+ background: #041c3d;
|
|
|
font-family: 'Microsoft YaHei', Arial, sans-serif;
|
|
|
overflow: hidden;
|
|
|
display: flex;
|
|
|
@@ -872,8 +872,8 @@ onUnmounted(() => {
|
|
|
height: 100%;
|
|
|
background: radial-gradient(ellipse at center,
|
|
|
rgba(0, 100, 200, 0.2) 0%,
|
|
|
- rgba(10, 14, 39, 0.8) 50%,
|
|
|
- #0a0e27 100%);
|
|
|
+ rgba(9, 45, 82, 0.8) 50%,
|
|
|
+ #041c3d 100%);
|
|
|
}
|
|
|
|
|
|
.tech-particles {
|
|
|
@@ -885,13 +885,13 @@ onUnmounted(() => {
|
|
|
|
|
|
.particle {
|
|
|
position: absolute;
|
|
|
- background: rgba(0, 255, 255, 0.8);
|
|
|
+ background: rgba(30, 144, 255, 0.8);
|
|
|
border-radius: 50%;
|
|
|
bottom: -10px;
|
|
|
animation: particleFloat linear infinite;
|
|
|
box-shadow:
|
|
|
- 0 0 10px rgba(0, 255, 255, 0.8),
|
|
|
- 0 0 20px rgba(0, 153, 255, 0.6);
|
|
|
+ 0 0 10px rgba(30, 144, 255, 0.8),
|
|
|
+ 0 0 20px rgba(0, 191, 255, 0.6);
|
|
|
}
|
|
|
|
|
|
@keyframes particleFloat {
|
|
|
@@ -923,9 +923,10 @@ onUnmounted(() => {
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
padding: 0 40px;
|
|
|
- background: linear-gradient(180deg, rgba(0, 20, 50, 0.9) 0%, rgba(10, 14, 39, 0.7) 100%);
|
|
|
- border-bottom: 2px solid rgba(0, 153, 255, 0.3);
|
|
|
- box-shadow: 0 4px 20px rgba(0, 153, 255, 0.2);
|
|
|
+ background: rgba(9, 45, 82, 0.9);
|
|
|
+ border-bottom: 1px solid rgba(30, 144, 255, 0.3);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ box-shadow: 0 4px 20px rgba(30, 144, 255, 0.2);
|
|
|
}
|
|
|
|
|
|
.header-left {
|
|
|
@@ -938,34 +939,24 @@ onUnmounted(() => {
|
|
|
.logo-box {
|
|
|
width: 50px;
|
|
|
height: 50px;
|
|
|
- background: linear-gradient(135deg, #00ff88 0%, #0099ff 100%);
|
|
|
- border-radius: 8px;
|
|
|
+ background: linear-gradient(135deg, rgba(30, 144, 255, 0.3), rgba(0, 191, 255, 0.3));
|
|
|
+ border: 1px solid rgba(30, 144, 255, 0.5);
|
|
|
+ border-radius: 10px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- font-size: 28px;
|
|
|
- color: #fff;
|
|
|
- box-shadow: 0 0 20px rgba(0, 153, 255, 0.6);
|
|
|
- animation: logoGlow 2s ease-in-out infinite;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #00bfff;
|
|
|
+ box-shadow: 0 0 20px rgba(30, 144, 255, 0.2);
|
|
|
}
|
|
|
|
|
|
-@keyframes logoGlow {
|
|
|
|
|
|
- 0%,
|
|
|
- 100% {
|
|
|
- box-shadow: 0 0 20px rgba(0, 153, 255, 0.6);
|
|
|
- }
|
|
|
-
|
|
|
- 50% {
|
|
|
- box-shadow: 0 0 30px rgba(0, 255, 136, 0.8);
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
.logo-text {
|
|
|
- font-size: 32px;
|
|
|
+ font-size: 24px;
|
|
|
font-weight: bold;
|
|
|
- color: #00ff88;
|
|
|
- text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
|
|
|
+ color: #fff;
|
|
|
+ text-shadow: 0 0 10px rgba(30, 144, 255, 0.5);
|
|
|
letter-spacing: 2px;
|
|
|
}
|
|
|
|
|
|
@@ -976,11 +967,11 @@ onUnmounted(() => {
|
|
|
}
|
|
|
|
|
|
.system-title {
|
|
|
- font-size: 48px;
|
|
|
+ font-size: 32px;
|
|
|
font-weight: bold;
|
|
|
color: #fff;
|
|
|
- text-shadow: 0 0 20px rgba(0, 153, 255, 0.8);
|
|
|
- letter-spacing: 8px;
|
|
|
+ text-shadow: 0 0 15px rgba(30, 144, 255, 0.7);
|
|
|
+ letter-spacing: 3px;
|
|
|
}
|
|
|
|
|
|
.header-right {
|
|
|
@@ -990,14 +981,14 @@ onUnmounted(() => {
|
|
|
}
|
|
|
|
|
|
.date-display {
|
|
|
- font-size: 24px;
|
|
|
- color: #00ffff;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #7ec8ff;
|
|
|
font-weight: 600;
|
|
|
- padding: 10px 20px;
|
|
|
- background: rgba(0, 153, 255, 0.1);
|
|
|
- border: 1px solid rgba(0, 153, 255, 0.3);
|
|
|
- border-radius: 8px;
|
|
|
- box-shadow: inset 0 0 10px rgba(0, 153, 255, 0.2);
|
|
|
+ padding: 6px 12px;
|
|
|
+ background: rgba(30, 144, 255, 0.2);
|
|
|
+ border: 1px solid rgba(30, 144, 255, 0.3);
|
|
|
+ border-radius: 20px;
|
|
|
+ box-shadow: inset 0 0 10px rgba(30, 144, 255, 0.2);
|
|
|
}
|
|
|
|
|
|
/* ========== 主内容区域 ========== */
|
|
|
@@ -1095,115 +1086,75 @@ onUnmounted(() => {
|
|
|
.card-content {
|
|
|
position: relative;
|
|
|
height: 100%;
|
|
|
- background: linear-gradient(135deg, rgba(10, 25, 50, 0.95) 0%, rgba(15, 30, 60, 0.95) 100%);
|
|
|
- border-radius: 18px;
|
|
|
+ background: linear-gradient(135deg, rgba(9, 45, 82, 0.8) 0%, rgba(5, 30, 60, 0.8) 100%);
|
|
|
+ border-radius: 16px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- gap: 30px;
|
|
|
- backdrop-filter: blur(15px);
|
|
|
+ gap: 40px;
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
overflow: hidden;
|
|
|
- box-shadow: inset 0 0 50px rgba(0, 255, 255, 0.1), 0 15px 50px rgba(0, 0, 0, 0.6);
|
|
|
+ box-shadow: inset 0 0 50px rgba(30, 144, 255, 0.1), 0 15px 50px rgba(0, 0, 0, 0.6);
|
|
|
}
|
|
|
|
|
|
.card-icon {
|
|
|
- width: 130px;
|
|
|
- height: 130px;
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
border-radius: 50%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- font-size: 80px;
|
|
|
+ font-size: 60px;
|
|
|
color: #fff;
|
|
|
- border: 4px solid;
|
|
|
- transition: all 0.4s ease;
|
|
|
- animation: iconPulse 2s ease-in-out infinite;
|
|
|
+ box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ border: none;
|
|
|
}
|
|
|
|
|
|
.card-icon.blue {
|
|
|
- background: linear-gradient(135deg, rgba(0, 153, 255, 0.3), rgba(0, 255, 255, 0.3));
|
|
|
- border-color: rgba(0, 255, 255, 0.8);
|
|
|
- box-shadow: 0 0 50px rgba(0, 153, 255, 1), inset 0 0 30px rgba(0, 255, 255, 0.3);
|
|
|
+ background: linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8));
|
|
|
+ border: 2px solid rgba(59, 130, 246, 0.6);
|
|
|
+ box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
|
|
|
}
|
|
|
|
|
|
.card-icon.green {
|
|
|
- background: linear-gradient(135deg, rgba(0, 255, 136, 0.3), rgba(0, 200, 100, 0.3));
|
|
|
- border-color: rgba(0, 255, 136, 0.8);
|
|
|
- box-shadow: 0 0 50px rgba(0, 255, 136, 1), inset 0 0 30px rgba(0, 255, 136, 0.3);
|
|
|
+ background: linear-gradient(135deg, rgba(16, 185, 129, 0.8), rgba(52, 211, 153, 0.8));
|
|
|
+ border: 2px solid rgba(16, 185, 129, 0.6);
|
|
|
+ box-shadow: 0 0 30px rgba(16, 185, 129, 0.3);
|
|
|
}
|
|
|
|
|
|
.card-icon.orange {
|
|
|
- background: linear-gradient(135deg, rgba(255, 153, 0, 0.3), rgba(255, 100, 0, 0.3));
|
|
|
- border-color: rgba(255, 153, 0, 0.8);
|
|
|
- box-shadow: 0 0 50px rgba(255, 153, 0, 1), inset 0 0 30px rgba(255, 153, 0, 0.3);
|
|
|
+ background: linear-gradient(135deg, rgba(249, 115, 22, 0.8), rgba(234, 88, 12, 0.8));
|
|
|
+ border: 2px solid rgba(249, 115, 22, 0.6);
|
|
|
+ box-shadow: 0 0 30px rgba(249, 115, 22, 0.3);
|
|
|
}
|
|
|
|
|
|
.card-icon.purple {
|
|
|
- background: linear-gradient(135deg, rgba(153, 51, 255, 0.3), rgba(102, 0, 204, 0.3));
|
|
|
- border-color: rgba(153, 51, 255, 0.8);
|
|
|
- box-shadow: 0 0 50px rgba(153, 51, 255, 1), inset 0 0 30px rgba(153, 51, 255, 0.3);
|
|
|
+ background: linear-gradient(135deg, rgba(168, 85, 247, 0.8), rgba(147, 51, 234, 0.8));
|
|
|
+ border: 2px solid rgba(168, 85, 247, 0.6);
|
|
|
+ box-shadow: 0 0 30px rgba(168, 85, 247, 0.3);
|
|
|
}
|
|
|
|
|
|
.card-icon.red {
|
|
|
- background: linear-gradient(135deg, rgba(255, 71, 87, 0.3), rgba(220, 20, 60, 0.3));
|
|
|
- border-color: rgba(255, 71, 87, 0.8);
|
|
|
- box-shadow: 0 0 50px rgba(255, 71, 87, 1), inset 0 0 30px rgba(255, 71, 87, 0.3);
|
|
|
+ background: linear-gradient(135deg, rgba(239, 68, 68, 0.8), rgba(220, 38, 38, 0.8));
|
|
|
+ border: 2px solid rgba(239, 68, 68, 0.6);
|
|
|
+ box-shadow: 0 0 30px rgba(239, 68, 68, 0.3);
|
|
|
}
|
|
|
|
|
|
-@keyframes iconPulse {
|
|
|
|
|
|
- 0%,
|
|
|
- 100% {
|
|
|
- transform: scale(1);
|
|
|
- }
|
|
|
|
|
|
- 50% {
|
|
|
- transform: scale(1.08);
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
-.action-card:hover .card-icon {
|
|
|
- transform: scale(1.15) rotate(10deg);
|
|
|
-}
|
|
|
|
|
|
.card-label {
|
|
|
- font-size: 42px;
|
|
|
+ font-size: 28px;
|
|
|
font-weight: bold;
|
|
|
color: #fff;
|
|
|
- text-shadow: 0 0 20px rgba(0, 255, 255, 1), 0 0 40px rgba(0, 153, 255, 0.8);
|
|
|
- letter-spacing: 4px;
|
|
|
-}
|
|
|
-
|
|
|
-.card-decoration {
|
|
|
- position: absolute;
|
|
|
- inset: 0;
|
|
|
- pointer-events: none;
|
|
|
+ text-shadow: 0 0 10px rgba(30, 144, 255, 0.5);
|
|
|
+ letter-spacing: 1px;
|
|
|
}
|
|
|
|
|
|
-.deco-line {
|
|
|
- position: absolute;
|
|
|
- bottom: 30px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- width: 70%;
|
|
|
- height: 4px;
|
|
|
- background: linear-gradient(90deg, transparent, #00ffff 20%, #ff00ff 50%, #00ffff 80%, transparent);
|
|
|
- box-shadow: 0 0 20px rgba(0, 255, 255, 1);
|
|
|
- animation: lineFlow 2s ease-in-out infinite;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes lineFlow {
|
|
|
-
|
|
|
- 0%,
|
|
|
- 100% {
|
|
|
- opacity: 0.6;
|
|
|
- }
|
|
|
-
|
|
|
- 50% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
.deco-corner {
|
|
|
position: absolute;
|