台账

src/views/pms/stat/maintain.vue

@@ -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);
 }
 
 // 响应式优化