|
|
@@ -887,18 +887,27 @@ onUnmounted(() => {
|
|
|
// 图表卡片增强样式
|
|
|
.chart-card-enhanced {
|
|
|
border-radius: 12px;
|
|
|
- border: 1px solid #e5e7eb;
|
|
|
+ border: 1px solid rgba(207, 220, 237, 0.9);
|
|
|
transition: all 0.3s ease;
|
|
|
+ background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
|
|
|
+ box-shadow:
|
|
|
+ inset 0 1px 0 rgba(255, 255, 255, 0.96),
|
|
|
+ inset 0 -12px 26px rgba(212, 226, 244, 0.2),
|
|
|
+ 0 10px 24px rgba(32, 66, 120, 0.07);
|
|
|
|
|
|
&:hover {
|
|
|
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
|
|
- border-color: #d1d5db;
|
|
|
+ box-shadow:
|
|
|
+ inset 0 1px 0 rgba(255, 255, 255, 0.98),
|
|
|
+ inset 0 -14px 30px rgba(208, 223, 244, 0.24),
|
|
|
+ 0 16px 30px rgba(32, 66, 120, 0.1);
|
|
|
+ border-color: rgba(193, 209, 231, 0.95);
|
|
|
}
|
|
|
|
|
|
:deep(.el-card__header) {
|
|
|
padding: 16px 20px;
|
|
|
- border-bottom: 1px solid #f3f4f6;
|
|
|
- background: linear-gradient(to right, #fafafa, #ffffff);
|
|
|
+ border-bottom: 1px solid rgba(223, 232, 245, 0.95);
|
|
|
+ background: linear-gradient(90deg, rgba(244, 248, 255, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
|
|
|
+ box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.78);
|
|
|
}
|
|
|
|
|
|
:deep(.el-card__body) {
|
|
|
@@ -922,14 +931,16 @@ onUnmounted(() => {
|
|
|
width: 8px;
|
|
|
height: 8px;
|
|
|
border-radius: 50%;
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
|
|
|
+ background: linear-gradient(135deg, #84aef7 0%, #5e87d8 100%);
|
|
|
+ box-shadow:
|
|
|
+ 0 0 0 4px rgba(122, 162, 235, 0.12),
|
|
|
+ 0 2px 6px rgba(86, 124, 189, 0.24);
|
|
|
}
|
|
|
|
|
|
.chart-title {
|
|
|
font-size: 16px;
|
|
|
font-weight: 600;
|
|
|
- color: #1f2937;
|
|
|
+ color: #233554;
|
|
|
letter-spacing: 0.3px;
|
|
|
}
|
|
|
|
|
|
@@ -943,10 +954,13 @@ onUnmounted(() => {
|
|
|
align-items: center;
|
|
|
padding: 12px;
|
|
|
transition: all 0.2s ease;
|
|
|
+ border-radius: 12px;
|
|
|
|
|
|
&:hover {
|
|
|
- background: rgba(102, 126, 234, 0.03);
|
|
|
- border-radius: 8px;
|
|
|
+ background: linear-gradient(180deg, rgba(244, 248, 255, 0.9) 0%, rgba(237, 244, 255, 0.95) 100%);
|
|
|
+ box-shadow:
|
|
|
+ inset 0 1px 0 rgba(255, 255, 255, 0.86),
|
|
|
+ inset 0 -8px 16px rgba(212, 225, 243, 0.22);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -961,12 +975,17 @@ onUnmounted(() => {
|
|
|
gap: 6px;
|
|
|
margin-top: 8px;
|
|
|
padding: 6px 12px;
|
|
|
- background: #f9fafb;
|
|
|
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(242, 247, 255, 0.96) 100%);
|
|
|
+ border: 1px solid rgba(216, 228, 244, 0.95);
|
|
|
border-radius: 20px;
|
|
|
transition: all 0.2s ease;
|
|
|
+ box-shadow:
|
|
|
+ inset 0 1px 0 rgba(255, 255, 255, 0.9),
|
|
|
+ 0 4px 10px rgba(58, 90, 145, 0.06);
|
|
|
|
|
|
.chart-item:hover & {
|
|
|
- background: #f3f4f6;
|
|
|
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(238, 244, 255, 0.98) 100%);
|
|
|
+ border-color: rgba(201, 217, 239, 0.98);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1009,13 +1028,18 @@ onUnmounted(() => {
|
|
|
|
|
|
.label-text {
|
|
|
font-size: 13px;
|
|
|
- color: #6b7280;
|
|
|
+ color: #64748f;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.bar-chart-container {
|
|
|
height: 350px;
|
|
|
width: 100%;
|
|
|
+ border-radius: 12px;
|
|
|
+ background: linear-gradient(180deg, rgba(252, 254, 255, 0.9) 0%, rgba(244, 249, 255, 0.92) 100%);
|
|
|
+ box-shadow:
|
|
|
+ inset 0 1px 0 rgba(255, 255, 255, 0.92),
|
|
|
+ inset 0 -10px 20px rgba(217, 230, 245, 0.16);
|
|
|
}
|
|
|
|
|
|
// 响应式优化
|
