修改首页的样式

src/views/home/data.js

@@ -117,7 +117,7 @@ export const columns = [
 
 export const barOption = (series, itemStyle = {}) => {
   const axisLabel = {
-    color: 'rgba(224, 242, 254, 0.72)',
+    color: 'rgba(203, 231, 244, 0.72)',
     fontSize: Math.max(11, window.innerHeight * 0.011),
     hideOverlap: true
   };
@@ -179,8 +179,9 @@ export const barOption = (series, itemStyle = {}) => {
       },
       trigger: 'item',
       borderWidth: 1,
-      borderColor: 'rgba(56, 189, 248, 0.35)',
-      backgroundColor: 'rgba(8, 18, 33, 0.92)',
+      borderColor: 'rgba(103, 232, 249, 0.42)',
+      backgroundColor: 'rgba(4, 13, 25, 0.94)',
+      extraCssText: 'box-shadow:0 8px 24px rgba(0,0,0,.28);border-radius:6px;',
       textStyle: {
         color: '#e0faff'
       }
@@ -190,16 +191,16 @@ export const barOption = (series, itemStyle = {}) => {
       itemGap: window.innerHeight * 0.014,
 
       textStyle: {
-        color: 'rgba(224, 242, 254, 0.82)',
+        color: 'rgba(224, 242, 254, 0.78)',
         fontSize: Math.max(12, window.innerHeight * 0.013)
       },
       icon: 'roundRect'
     },
     grid: {
-      top: 48,
-      left: 36,
-      right: 24,
-      bottom: 24,
+      top: 50,
+      left: 34,
+      right: 22,
+      bottom: 20,
       containLabel: true
     },
     color: [
@@ -211,10 +212,11 @@ export const barOption = (series, itemStyle = {}) => {
         y2: 1,
         colorStops: [
           { offset: 0, color: '#67e8f9' },
-          { offset: 1, color: '#0284c7' }
+          { offset: 0.52, color: '#22d3ee' },
+          { offset: 1, color: '#0369a1' }
         ]
       },
-      '#facc15'
+      '#fbbf24'
     ],
     xAxis,
     yAxis: [
@@ -237,7 +239,7 @@ export const barOption = (series, itemStyle = {}) => {
         splitLine: {
           lineStyle: {
             color: 'rgba(125, 211, 252, 0.14)',
-            type: 'dashed'
+            type: [4, 6]
           }
         },
         axisLine: {
@@ -254,16 +256,17 @@ export const barOption = (series, itemStyle = {}) => {
       if (item.type === 'bar') {
         return {
           ...item,
-          barMaxWidth: 28,
+          barMaxWidth: 26,
+          barMinWidth: 8,
           showBackground: true,
           backgroundStyle: {
-            color: 'rgba(56, 189, 248, 0.055)',
-            borderRadius: [6, 6, 0, 0]
+            color: 'rgba(56, 189, 248, 0.04)',
+            borderRadius: [8, 8, 0, 0]
           },
           itemStyle: {
-            borderRadius: [6, 6, 0, 0],
-            shadowBlur: 12,
-            shadowColor: 'rgba(56, 189, 248, 0.32)',
+            borderRadius: [8, 8, 0, 0],
+            shadowBlur: 14,
+            shadowColor: 'rgba(56, 189, 248, 0.36)',
             ...(item.itemStyle || {})
           }
         };
@@ -272,13 +275,13 @@ export const barOption = (series, itemStyle = {}) => {
         ...item,
         lineStyle: {
           width: 3,
-          color: '#facc15',
-          shadowBlur: 10,
-          shadowColor: 'rgba(250, 204, 21, 0.5)',
+          color: '#fbbf24',
+          shadowBlur: 12,
+          shadowColor: 'rgba(251, 191, 36, 0.5)',
           ...(item.lineStyle || {})
         },
         itemStyle: {
-          color: '#facc15',
+          color: '#fbbf24',
           borderColor: '#fff7ad',
           borderWidth: 2,
           ...(item.itemStyle || {})
@@ -336,7 +339,7 @@ export const pieOption = (data) => {
 export const pieOptions = (data) => {
   return {
     backgroundColor: 'transparent',
-    color: ['#20d47a', '#38c7ff', '#ffd23f', '#ff738a', '#a877e8', '#30d6c4'],
+    color: ['#22d87a', '#35c9ff', '#ffd247', '#ff7890', '#9b78e6', '#2dd4bf', '#fb923c'],
     tooltip: {
       // formatter: '{b}：{c}' + '%',
       formatter: function (params) {
@@ -344,8 +347,9 @@ export const pieOptions = (data) => {
       },
       trigger: 'item',
       borderWidth: 1,
-      borderColor: 'rgba(56, 189, 248, 0.35)',
-      backgroundColor: 'rgba(8, 18, 33, 0.92)',
+      borderColor: 'rgba(103, 232, 249, 0.42)',
+      backgroundColor: 'rgba(4, 13, 25, 0.94)',
+      extraCssText: 'box-shadow:0 8px 24px rgba(0,0,0,.28);border-radius:6px;',
       textStyle: {
         color: '#e0faff'
       }
@@ -369,61 +373,80 @@ export const pieOptions = (data) => {
           formatter: (item) => {
             return `{name|${item.name}}  {value|${item.value}}`;
           },
-          color: 'rgba(224, 242, 254, 0.82)',
-          width: 120,
+          color: 'rgba(224, 242, 254, 0.84)',
+          width: 128,
           overflow: 'break',
-          lineHeight: 18,
+          lineHeight: 19,
           rich: {
             name: {
-              color: 'rgba(148, 178, 195, 0.9)',
+              color: 'rgba(169, 197, 210, 0.92)',
               fontSize: 12,
               fontWeight: 600,
-              lineHeight: 18,
+              lineHeight: 19,
               textShadowBlur: 8,
-              textShadowColor: 'rgba(56, 189, 248, 0.18)'
+              textShadowColor: 'rgba(56, 189, 248, 0.2)'
             },
             value: {
-              color: '#ffe88a',
-              fontSize: 14,
+              color: '#ffe37a',
+              fontSize: 15,
               fontWeight: 700,
-              lineHeight: 18,
+              lineHeight: 19,
               textBorderColor: 'rgba(7, 18, 31, 0.68)',
               textBorderWidth: 2,
-              textShadowBlur: 12,
-              textShadowColor: 'rgba(250, 204, 21, 0.62)'
+              textShadowBlur: 14,
+              textShadowColor: 'rgba(250, 204, 21, 0.68)'
             }
           }
         },
         labelLine: {
           show: true,
-          length: 14,
-          length2: 20,
+          length: 16,
+          length2: 24,
           smooth: true,
           lineStyle: {
-            width: 1.5,
-            color: 'rgba(125, 211, 252, 0.62)'
+            width: 1.6,
+            color: 'rgba(125, 211, 252, 0.68)'
           }
         },
         type: 'pie',
-        radius: ['42%', '64%'],
+        radius: ['43%', '66%'],
         startAngle: 120,
         minAngle: 4,
         avoidLabelOverlap: true,
         itemStyle: {
-          borderRadius: 8,
-          borderWidth: 2,
-          borderColor: '#081421',
-          shadowBlur: 18,
-          shadowColor: 'rgba(34, 211, 238, 0.24)'
+          borderRadius: 10,
+          borderWidth: 3,
+          borderColor: '#07111f',
+          shadowBlur: 20,
+          shadowColor: 'rgba(34, 211, 238, 0.26)'
         },
         emphasis: {
-          scaleSize: 8,
+          scaleSize: 7,
           itemStyle: {
-            shadowBlur: 24,
-            shadowColor: 'rgba(103, 232, 249, 0.45)'
+            shadowBlur: 26,
+            shadowColor: 'rgba(103, 232, 249, 0.48)'
           }
         },
         data
+      },
+      {
+        type: 'pie',
+        center: ['52%', '52%'],
+        radius: ['35%', '36%'],
+        silent: true,
+        label: {
+          show: false
+        },
+        data: [
+          {
+            value: 1,
+            itemStyle: {
+              color: 'rgba(103, 232, 249, 0.24)',
+              shadowBlur: 18,
+              shadowColor: 'rgba(56, 189, 248, 0.32)'
+            }
+          }
+        ]
       }
     ]
   };

src/views/home/index.vue

@@ -41,6 +41,7 @@
             start-placeholder="开始月份"
             end-placeholder="结束月份"
             size="mini"
+            :clearable="false"
             :picker-options="pickerOptions"
           >
           </el-date-picker>
@@ -402,15 +403,18 @@
 </script>
 <style lang="scss" scoped>
   .mes-screen {
-    height: calc(100vh - 92px);
+    height: calc(100vh - 111px);
     min-height: 680px;
     box-sizing: border-box;
     overflow: hidden;
     color: #d9f7ff;
     background:
-      linear-gradient(115deg, rgba(34, 211, 238, 0.08) 0%, transparent 26%),
-      linear-gradient(245deg, rgba(16, 185, 129, 0.06) 0%, transparent 30%),
-      linear-gradient(180deg, #071524 0%, #06111f 52%, #050c17 100%);
+      linear-gradient(90deg, rgba(56, 189, 248, 0.11) 0 1px, transparent 1px 100%),
+      linear-gradient(180deg, rgba(56, 189, 248, 0.08) 0 1px, transparent 1px 100%),
+      linear-gradient(118deg, rgba(13, 148, 136, 0.1) 0%, transparent 34%),
+      linear-gradient(242deg, rgba(14, 165, 233, 0.08) 0%, transparent 36%),
+      linear-gradient(180deg, #061422 0%, #06101d 46%, #030914 100%);
+    background-size: 86px 86px, 86px 86px, auto, auto, auto;
     position: relative;
     box-shadow: 0 0 0 100vmax #050c17;
     clip-path: inset(0 -100vmax -100vmax -100vmax);
@@ -421,10 +425,10 @@
       inset: 0;
       pointer-events: none;
       background-image:
-        linear-gradient(rgba(103, 232, 249, 0.06) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(103, 232, 249, 0.06) 1px, transparent 1px);
-      background-size: 32px 32px;
-      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 90%);
+        linear-gradient(115deg, transparent 0 42%, rgba(103, 232, 249, 0.08) 42% 42.4%, transparent 42.4% 100%),
+        linear-gradient(245deg, transparent 0 58%, rgba(16, 185, 129, 0.06) 58% 58.4%, transparent 58.4% 100%);
+      background-size: 420px 220px, 460px 240px;
+      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 94%);
     }
 
     &::after {
@@ -434,12 +438,12 @@
       pointer-events: none;
       background: repeating-linear-gradient(
         180deg,
-        rgba(255, 255, 255, 0.025) 0,
-        rgba(255, 255, 255, 0.025) 1px,
+        rgba(255, 255, 255, 0.018) 0,
+        rgba(255, 255, 255, 0.018) 1px,
         transparent 1px,
-        transparent 5px
+        transparent 6px
       );
-      opacity: 0.25;
+      opacity: 0.22;
     }
   }
 
@@ -448,10 +452,10 @@
     z-index: 1;
     height: 100%;
     min-height: 0;
-    padding: 16px 20px 18px;
+    padding: 18px 22px 20px;
     display: flex;
     flex-direction: column;
-    gap: 14px;
+    gap: 16px;
 
     &::before,
     &::after {
@@ -476,21 +480,22 @@
   .screen-toolbar {
     position: relative;
     overflow: hidden;
-    min-height: 58px;
+    min-height: 64px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 18px;
-    padding: 12px 18px;
-    border: 1px solid rgba(56, 189, 248, 0.34);
-    border-radius: 8px;
+    padding: 14px 22px;
+    border: 1px solid rgba(103, 232, 249, 0.3);
+    border-radius: 7px;
     background:
-      linear-gradient(90deg, rgba(9, 45, 69, 0.92), rgba(8, 22, 39, 0.78)),
-      linear-gradient(180deg, rgba(103, 232, 249, 0.08), transparent);
+      linear-gradient(90deg, rgba(8, 47, 73, 0.84), rgba(5, 15, 28, 0.7) 58%, rgba(7, 30, 48, 0.82)),
+      linear-gradient(180deg, rgba(103, 232, 249, 0.13), transparent 62%);
     box-shadow:
-      inset 0 1px 0 rgba(165, 243, 252, 0.16),
-      inset 0 0 28px rgba(14, 165, 233, 0.12),
-      0 14px 34px rgba(0, 0, 0, 0.28);
+      inset 0 1px 0 rgba(236, 254, 255, 0.16),
+      inset 0 -1px 0 rgba(56, 189, 248, 0.22),
+      inset 0 0 34px rgba(14, 165, 233, 0.13),
+      0 16px 32px rgba(0, 0, 0, 0.26);
 
     &::before {
       content: '';
@@ -498,9 +503,9 @@
       left: 18px;
       right: 18px;
       bottom: 0;
-      height: 1px;
-      background: linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.85), transparent);
-      opacity: 0.65;
+      height: 2px;
+      background: linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.72), rgba(16, 185, 129, 0.42), transparent);
+      opacity: 0.78;
     }
 
     &::after {
@@ -508,9 +513,11 @@
       position: absolute;
       left: 0;
       top: 0;
-      width: 180px;
+      width: 36%;
       height: 100%;
-      background: linear-gradient(100deg, rgba(103, 232, 249, 0.12), transparent 72%);
+      background:
+        linear-gradient(100deg, rgba(103, 232, 249, 0.16), transparent 58%),
+        repeating-linear-gradient(90deg, rgba(125, 211, 252, 0.08) 0 1px, transparent 1px 22px);
       pointer-events: none;
     }
   }
@@ -526,20 +533,24 @@
       display: flex;
       align-items: center;
       gap: 10px;
-      font-size: 23px;
+      font-size: clamp(22px, 1.6vw, 30px);
       line-height: 1.2;
       font-weight: 700;
       letter-spacing: 0;
-      color: #f0fdff;
-      text-shadow: 0 0 18px rgba(34, 211, 238, 0.5);
+      color: #f5fdff;
+      text-shadow:
+        0 0 14px rgba(34, 211, 238, 0.54),
+        0 0 28px rgba(14, 165, 233, 0.22);
 
       &::before {
         content: '';
-        width: 7px;
-        height: 26px;
-        border-radius: 2px;
-        background: linear-gradient(180deg, #67e8f9, #0ea5e9);
-        box-shadow: 0 0 14px rgba(34, 211, 238, 0.75);
+        width: 8px;
+        height: 32px;
+        border-radius: 1px;
+        background: linear-gradient(180deg, #67e8f9 0%, #22d3ee 48%, #0ea5e9 100%);
+        box-shadow:
+          0 0 12px rgba(34, 211, 238, 0.9),
+          10px 0 24px rgba(14, 165, 233, 0.22);
       }
     }
 
@@ -547,7 +558,7 @@
       margin-top: 4px;
       font-style: normal;
       font-size: 12px;
-      color: rgba(165, 243, 252, 0.72);
+      color: rgba(165, 243, 252, 0.68);
       text-transform: uppercase;
     }
   }
@@ -560,13 +571,16 @@
     justify-content: flex-end;
     flex-wrap: wrap;
     gap: 10px;
-    padding: 4px;
-    border: 1px solid rgba(56, 189, 248, 0.18);
-    border-radius: 8px;
-    background: rgba(3, 12, 24, 0.28);
+    padding: 5px;
+    border: 1px solid rgba(56, 189, 248, 0.26);
+    border-radius: 7px;
+    background:
+      linear-gradient(180deg, rgba(6, 18, 32, 0.82), rgba(2, 8, 17, 0.8)),
+      repeating-linear-gradient(90deg, rgba(56, 189, 248, 0.035) 0 1px, transparent 1px 26px);
     box-shadow:
-      inset 0 0 16px rgba(14, 165, 233, 0.08),
-      0 0 18px rgba(14, 165, 233, 0.08);
+      inset 0 1px 0 rgba(165, 243, 252, 0.1),
+      inset 0 0 18px rgba(14, 165, 233, 0.12),
+      0 0 20px rgba(14, 165, 233, 0.1);
   }
 
   .mode-tabs {
@@ -575,9 +589,9 @@
       height: 32px;
       line-height: 30px;
       padding: 0 18px;
-      border-color: rgba(56, 189, 248, 0.36);
+      border-color: rgba(56, 189, 248, 0.28);
       color: rgba(224, 242, 254, 0.82);
-      background: rgba(8, 20, 35, 0.75);
+      background: rgba(5, 14, 26, 0.78);
       box-shadow: none;
     }
 
@@ -585,7 +599,9 @@
       color: #06131f;
       border-color: #22d3ee;
       background: linear-gradient(135deg, #67e8f9, #38bdf8);
-      box-shadow: 0 0 18px rgba(56, 189, 248, 0.4);
+      box-shadow:
+        inset 0 1px 0 rgba(236, 254, 255, 0.36),
+        0 0 18px rgba(56, 189, 248, 0.42);
     }
   }
 
@@ -595,13 +611,30 @@
 
   .date-range {
     width: 310px;
+
+    :deep(.el-range__close-icon) {
+      display: none !important;
+      visibility: hidden;
+      pointer-events: none;
+    }
+  }
+
+  :deep(.el-date-editor .el-range__close-icon),
+  :deep(.date-range .el-range__close-icon) {
+    display: none !important;
+    visibility: hidden !important;
+    width: 0 !important;
+    pointer-events: none;
   }
 
   :deep(.el-input__inner) {
     height: 32px;
     color: #e0f7ff;
-    border-color: rgba(56, 189, 248, 0.34);
-    background: rgba(6, 18, 32, 0.82);
+    border-color: rgba(56, 189, 248, 0.32);
+    background: rgba(3, 12, 24, 0.86);
+    box-shadow:
+      inset 0 1px 0 rgba(125, 211, 252, 0.08),
+      inset 0 0 12px rgba(14, 165, 233, 0.08);
   }
 
   :deep(.el-input__inner::placeholder) {
@@ -631,49 +664,50 @@
   .main-col {
     display: flex;
     flex-direction: column;
-    gap: 14px;
+    gap: 16px;
   }
 
   .table-col {
-    height: calc(42% - 14px);
-    margin-top: 14px;
+    height: calc(42% - 16px);
+    margin-top: 16px;
   }
 
   .metrics-grid {
     width: 100%;
-    min-height: 112px;
+    min-height: 116px;
     display: grid;
     grid-template-columns: repeat(5, minmax(0, 1fr));
-    gap: 16px;
+    gap: 18px;
   }
 
   .metric-card {
     position: relative;
     overflow: hidden;
     min-width: 0;
-    min-height: 112px;
-    padding: 16px 12px 14px;
+    min-height: 116px;
+    padding: 17px 14px 15px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     gap: 0;
-    border: 1px solid rgba(56, 189, 248, 0.38);
-    border-radius: 8px;
+    border: 1px solid rgba(103, 232, 249, 0.34);
+    border-radius: 7px;
     color: #7dd3fc;
     background:
-      linear-gradient(135deg, rgba(14, 116, 144, 0.38), rgba(15, 23, 42, 0.88)),
-      linear-gradient(90deg, rgba(34, 211, 238, 0.1), transparent 55%),
+      linear-gradient(150deg, rgba(14, 116, 144, 0.34), rgba(5, 13, 25, 0.94) 62%),
+      linear-gradient(90deg, rgba(34, 211, 238, 0.14), transparent 55%),
       repeating-linear-gradient(
-        90deg,
+        135deg,
         rgba(125, 211, 252, 0.035) 0,
         rgba(125, 211, 252, 0.035) 1px,
         transparent 1px,
-        transparent 28px
+        transparent 26px
       );
     box-shadow:
-      inset 0 1px 0 rgba(165, 243, 252, 0.12),
-      inset 0 0 30px rgba(34, 211, 238, 0.09),
-      0 14px 28px rgba(0, 0, 0, 0.24);
+      inset 0 1px 0 rgba(236, 254, 255, 0.12),
+      inset 0 -1px 0 rgba(34, 211, 238, 0.12),
+      inset 0 0 28px rgba(34, 211, 238, 0.08),
+      0 14px 26px rgba(0, 0, 0, 0.24);
     transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
 
     &::before,
@@ -685,29 +719,32 @@
 
     &::before {
       inset: 0;
-      border-top: 3px solid rgba(103, 232, 249, 0.82);
-      border-left: 1px solid rgba(103, 232, 249, 0.12);
-      opacity: 0.75;
+      background:
+        linear-gradient(90deg, rgba(103, 232, 249, 0.9), transparent 44%) left top / 100% 3px no-repeat,
+        linear-gradient(180deg, rgba(103, 232, 249, 0.52), transparent 50%) left top / 1px 100% no-repeat,
+        linear-gradient(90deg, rgba(103, 232, 249, 0.16), transparent 50%) left bottom / 100% 1px no-repeat;
+      opacity: 0.82;
     }
 
     &::after {
-      width: 54px;
-      height: 54px;
-      right: -20px;
-      bottom: -18px;
-      border: 1px solid rgba(125, 211, 252, 0.24);
+      width: 78px;
+      height: 78px;
+      right: -34px;
+      bottom: -36px;
+      border: 1px solid rgba(125, 211, 252, 0.22);
       transform: rotate(45deg);
-      background: rgba(14, 165, 233, 0.1);
+      background:
+        linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(13, 148, 136, 0.04));
     }
   }
 
   .metric-card:hover {
-    border-color: rgba(103, 232, 249, 0.6);
+    border-color: rgba(103, 232, 249, 0.62);
     box-shadow:
       inset 0 1px 0 rgba(165, 243, 252, 0.16),
       inset 0 0 34px rgba(34, 211, 238, 0.13),
       0 16px 32px rgba(0, 0, 0, 0.3),
-      0 0 18px rgba(14, 165, 233, 0.14);
+      0 0 22px rgba(14, 165, 233, 0.18);
     transform: translateY(-1px);
   }
 
@@ -715,8 +752,8 @@
     color: #fb7185 !important;
     border-color: rgba(251, 113, 133, 0.42);
     background:
-      linear-gradient(135deg, rgba(190, 18, 60, 0.32), rgba(15, 23, 42, 0.88)),
-      linear-gradient(90deg, rgba(251, 113, 133, 0.12), transparent 55%);
+      linear-gradient(150deg, rgba(190, 18, 60, 0.28), rgba(5, 13, 25, 0.94) 62%),
+      linear-gradient(90deg, rgba(251, 113, 133, 0.15), transparent 55%);
 
     &::before {
       border-top-color: rgba(251, 113, 133, 0.72);
@@ -738,8 +775,10 @@
     align-items: center;
     justify-content: center;
     border: 1px solid rgba(125, 211, 252, 0.12);
-    border-radius: 6px;
-    background: linear-gradient(135deg, rgba(8, 20, 35, 0.82), rgba(14, 116, 144, 0.18));
+    border-radius: 7px;
+    background:
+      linear-gradient(135deg, rgba(10, 28, 46, 0.92), rgba(14, 116, 144, 0.2)),
+      linear-gradient(180deg, rgba(103, 232, 249, 0.08), transparent);
     box-shadow:
       inset 0 0 18px rgba(103, 232, 249, 0.14),
       0 0 18px rgba(14, 165, 233, 0.14);
@@ -760,7 +799,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    gap: 14px;
+    gap: 16px;
   }
 
   .metric-label {
@@ -768,7 +807,7 @@
     padding-left: 12px;
     font-size: clamp(12px, 0.72vw, 14px);
     line-height: 1.25;
-    color: rgba(224, 242, 254, 0.78);
+    color: rgba(224, 242, 254, 0.76);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -822,16 +861,18 @@
     position: relative;
     overflow: hidden;
     height: 100%;
-    border: 1px solid rgba(56, 189, 248, 0.34);
-    border-radius: 8px;
+    border: 1px solid rgba(56, 189, 248, 0.28);
+    border-radius: 7px;
     color: #d9f7ff;
     background:
-      linear-gradient(180deg, rgba(14, 36, 61, 0.92), rgba(6, 16, 30, 0.9)),
-      linear-gradient(135deg, rgba(34, 211, 238, 0.11), transparent 48%);
+      linear-gradient(180deg, rgba(10, 34, 56, 0.9), rgba(4, 13, 25, 0.94)),
+      linear-gradient(135deg, rgba(34, 211, 238, 0.1), transparent 42%),
+      repeating-linear-gradient(90deg, rgba(125, 211, 252, 0.02) 0 1px, transparent 1px 52px);
     box-shadow:
-      inset 0 1px 0 rgba(165, 243, 252, 0.1),
-      inset 0 0 26px rgba(14, 165, 233, 0.1),
-      0 16px 34px rgba(0, 0, 0, 0.28);
+      inset 0 1px 0 rgba(236, 254, 255, 0.1),
+      inset 0 -1px 0 rgba(56, 189, 248, 0.12),
+      inset 0 0 28px rgba(14, 165, 233, 0.09),
+      0 16px 34px rgba(0, 0, 0, 0.26);
 
     &::before {
       content: '';
@@ -840,10 +881,10 @@
       pointer-events: none;
       border-radius: inherit;
       background:
-        linear-gradient(90deg, rgba(103, 232, 249, 0.6), transparent 72px) left top / 120px 1px no-repeat,
-        linear-gradient(180deg, rgba(103, 232, 249, 0.5), transparent 56px) left top / 1px 90px no-repeat,
-        linear-gradient(270deg, rgba(103, 232, 249, 0.42), transparent 72px) right bottom / 120px 1px no-repeat,
-        linear-gradient(0deg, rgba(103, 232, 249, 0.36), transparent 56px) right bottom / 1px 90px no-repeat;
+        linear-gradient(90deg, rgba(103, 232, 249, 0.72), transparent 88px) left top / 148px 1px no-repeat,
+        linear-gradient(180deg, rgba(103, 232, 249, 0.52), transparent 64px) left top / 1px 100px no-repeat,
+        linear-gradient(270deg, rgba(103, 232, 249, 0.46), transparent 88px) right bottom / 148px 1px no-repeat,
+        linear-gradient(0deg, rgba(103, 232, 249, 0.34), transparent 64px) right bottom / 1px 100px no-repeat;
       opacity: 0.85;
     }
 
@@ -862,20 +903,22 @@
     :deep(.el-card__header) {
       position: relative;
       z-index: 1;
-      padding: 12px 16px;
-      border-bottom: 1px solid rgba(56, 189, 248, 0.2);
-      background: linear-gradient(90deg, rgba(8, 47, 73, 0.48), transparent);
+      padding: 12px 18px;
+      border-bottom: 1px solid rgba(56, 189, 248, 0.18);
+      background:
+        linear-gradient(90deg, rgba(8, 47, 73, 0.58), transparent 68%),
+        linear-gradient(180deg, rgba(125, 211, 252, 0.06), transparent);
     }
 
     :deep(.el-card__body) {
       position: relative;
       z-index: 1;
       height: calc(100% - 48px);
-      padding: 10px 12px 12px;
+      padding: 12px 14px 14px;
       background:
-        linear-gradient(rgba(125, 211, 252, 0.026) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(125, 211, 252, 0.026) 1px, transparent 1px);
-      background-size: 28px 28px;
+        linear-gradient(rgba(125, 211, 252, 0.022) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(125, 211, 252, 0.022) 1px, transparent 1px);
+      background-size: 30px 30px;
     }
   }
 
@@ -888,10 +931,10 @@
     > span {
       position: relative;
       padding-left: 12px;
-      font-size: 15px;
+      font-size: 16px;
       line-height: 1.3;
       font-weight: 700;
-      color: #e0faff;
+      color: #f0fdff;
       text-shadow: 0 0 12px rgba(34, 211, 238, 0.45);
 
       &::before {
@@ -900,8 +943,8 @@
         left: 0;
         top: 50%;
         width: 4px;
-        height: 16px;
-        border-radius: 2px;
+        height: 18px;
+        border-radius: 1px;
         background: linear-gradient(180deg, #67e8f9, #38bdf8);
         transform: translateY(-50%);
         box-shadow: 0 0 12px rgba(34, 211, 238, 0.8);
@@ -910,10 +953,10 @@
 
     &::after {
       content: '';
-      width: 72px;
+      width: 96px;
       height: 1px;
-      background: linear-gradient(90deg, rgba(103, 232, 249, 0.8), transparent);
-      opacity: 0.6;
+      background: linear-gradient(90deg, rgba(103, 232, 249, 0.86), rgba(16, 185, 129, 0.3), transparent);
+      opacity: 0.7;
     }
   }
 
@@ -930,27 +973,28 @@
   .chart-panel {
     :deep(.el-card__body) {
       background:
-        radial-gradient(circle at 28% 38%, rgba(34, 211, 238, 0.06), transparent 34%),
-        linear-gradient(rgba(125, 211, 252, 0.026) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(125, 211, 252, 0.026) 1px, transparent 1px);
-      background-size: auto, 28px 28px, 28px 28px;
+        linear-gradient(180deg, rgba(6, 21, 38, 0.18), rgba(3, 11, 22, 0.34)),
+        repeating-linear-gradient(90deg, rgba(56, 189, 248, 0.026) 0 1px, transparent 1px 78px),
+        linear-gradient(rgba(125, 211, 252, 0.022) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(125, 211, 252, 0.022) 1px, transparent 1px);
+      background-size: auto, auto, 30px 30px, 30px 30px;
     }
   }
 
   .pie-panel {
     :deep(.el-card__body) {
       background:
-        radial-gradient(circle at 52% 52%, rgba(56, 189, 248, 0.13), transparent 30%),
-        radial-gradient(circle at 52% 52%, rgba(15, 23, 42, 0.72), transparent 48%),
-        linear-gradient(rgba(125, 211, 252, 0.026) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(125, 211, 252, 0.026) 1px, transparent 1px);
-      background-size: auto, auto, 28px 28px, 28px 28px;
+        linear-gradient(180deg, rgba(6, 21, 38, 0.2), rgba(3, 11, 22, 0.36)),
+        repeating-linear-gradient(135deg, rgba(56, 189, 248, 0.028) 0 1px, transparent 1px 34px),
+        linear-gradient(rgba(125, 211, 252, 0.022) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(125, 211, 252, 0.022) 1px, transparent 1px);
+      background-size: auto, auto, 30px 30px, 30px 30px;
     }
   }
 
   .table-panel {
     :deep(.el-card__body) {
-      padding: 10px 12px 12px;
+      padding: 12px 14px 14px;
       background:
         linear-gradient(180deg, rgba(5, 16, 30, 0.12), rgba(5, 16, 30, 0.34)),
         repeating-linear-gradient(
@@ -992,20 +1036,20 @@
           transparent 1px,
           transparent 72px
         );
-      border: 1px solid rgba(125, 211, 252, 0.28);
+      border: 1px solid rgba(125, 211, 252, 0.24);
       box-shadow:
         inset 0 0 18px rgba(14, 165, 233, 0.08),
         0 0 18px rgba(14, 165, 233, 0.1);
     }
 
     :deep(.el-table .cell) {
-      line-height: 18px;
+      line-height: 19px;
       font-weight: 500;
       letter-spacing: 0;
     }
 
     :deep(.el-table__header-wrapper) {
-      background: linear-gradient(180deg, rgba(13, 80, 105, 0.78), rgba(8, 47, 73, 0.72));
+      background: linear-gradient(180deg, rgba(13, 95, 117, 0.78), rgba(8, 47, 73, 0.72));
     }
 
     :deep(.el-table__empty-block) {
@@ -1053,16 +1097,16 @@
     }
 
     :deep(.el-table th) {
-      height: 34px;
+      height: 36px;
       color: #c7fbff;
-      background: linear-gradient(180deg, rgba(14, 116, 144, 0.5), rgba(8, 47, 73, 0.72)) !important;
+      background: linear-gradient(180deg, rgba(14, 116, 144, 0.62), rgba(8, 47, 73, 0.78)) !important;
       border-color: rgba(56, 189, 248, 0.22);
       text-shadow: 0 0 10px rgba(103, 232, 249, 0.34);
     }
 
     :deep(.el-table td) {
-      height: 32px;
-      color: rgba(226, 232, 240, 0.78);
+      height: 34px;
+      color: rgba(226, 232, 240, 0.8);
       border-color: rgba(56, 189, 248, 0.1);
     }
 
@@ -1129,7 +1173,7 @@
   @media (max-width: 992px) {
     .mes-screen {
       height: auto;
-      min-height: calc(100vh - 92px);
+      min-height: calc(100vh - 111px);
       overflow: auto;
     }