diff --git a/zbf-ui/src/assets/images/ldr_logo.png b/zbf-ui/src/assets/images/ldr_logo.png
new file mode 100644
index 0000000..a36cf88
Binary files /dev/null and b/zbf-ui/src/assets/images/ldr_logo.png differ
diff --git a/zbf-ui/src/layout/components/Navbar.vue b/zbf-ui/src/layout/components/Navbar.vue
index 871b183..ba93c33 100644
--- a/zbf-ui/src/layout/components/Navbar.vue
+++ b/zbf-ui/src/layout/components/Navbar.vue
@@ -4,8 +4,8 @@
 
 <!--    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>-->
     <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
-    <img src="../../assets/images/index_logo_white.png" id="logo" style="float:left; height: 38px;height:42px;margin-top:4px;margin-bottom: 4px;">
-    <span class="left-menu">技术创新中心-{{ this.deptLabel }}</span>
+    <img src="../../assets/images/ldr_logo.png" id="logo" style="float:left; height:42px; margin-top:4px; margin-bottom:4px; padding:0; background:transparent;">
+    <span class="left-menu">利德尔-技术创新中心-{{ this.deptLabel }}</span>
     <div class="right-menu">
       <template v-if="device!=='mobile'">
         <span class="right-menu-item">{{nowTime}} </span>
@@ -169,10 +169,9 @@ export default {
   height: 50px;
   overflow: hidden;
   position: relative;
-  //background: #fff;
-  // 比如背景色等
-  background: #004ea2;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  background: #FFFFFF;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  border-bottom: 1px solid #E8E8E8;
 
   // .hamburger-container {
   //   line-height: 46px;
@@ -206,8 +205,9 @@ export default {
     float: left;
     height: 100%;
     line-height: 50px;
-    color: white;
+    color: #2C3E50;
     font-size: 16px;
+    font-weight: 500;
   }
 
   .right-menu {
@@ -224,8 +224,7 @@ export default {
       padding: 0 8px;
       height: 100%;
       font-size: 15px;
-      //color: #5a5e66;
-      color: white;
+      color: #2C3E50;
       vertical-align: text-bottom;
 
       &.hover-effect {
@@ -233,7 +232,8 @@ export default {
         transition: background .3s;
 
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(64, 158, 255, 0.08);
+          border-radius: 4px;
         }
       }
     }
@@ -258,6 +258,7 @@ export default {
           right: -20px;
           top: 25px;
           font-size: 12px;
+          color: #2C3E50;
         }
       }
     }
diff --git a/zbf-ui/src/views/leader.vue b/zbf-ui/src/views/leader.vue
index 3dea0b5..74efcf7 100644
--- a/zbf-ui/src/views/leader.vue
+++ b/zbf-ui/src/views/leader.vue
@@ -134,7 +134,11 @@
     </div>
 
     <div v-if="loading" class="loading-overlay">
+      <div class="loading-logo">
+        <img src="@/assets/images/ldr_logo.png" alt="Loading">
+      </div>
       <div class="loading-spinner"></div>
+      <p class="loading-text">数据加载中</p>
     </div>
   </div>
 </template>
@@ -157,7 +161,20 @@ export default {
         // { month: '三月', values: [40, 50, 60, 70] },
         // 添加更多月份数据...
       ],
-      barColors: ['#4B96FF', '#41D9D9', '#de8226', '#FFC442','#c5229f','#63CF7E','#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'],
+      barColors: [
+        { start: '#667eea', end: '#764ba2' },  // 紫色渐变
+        { start: '#f093fb', end: '#f5576c' },  // 粉红渐变
+        { start: '#4facfe', end: '#00f2fe' },  // 蓝青渐变
+        { start: '#43e97b', end: '#38f9d7' },  // 绿青渐变
+        { start: '#fa709a', end: '#fee140' },  // 橙黄渐变
+        { start: '#30cfd0', end: '#330867' },  // 深蓝渐变
+        { start: '#a8edea', end: '#fed6e3' },  // 粉绿渐变
+        { start: '#ff6b6b', end: '#feca57' },  // 红黄渐变
+        { start: '#5f27cd', end: '#341f97' },  // 深紫渐变
+        { start: '#48dbfb', end: '#0abde3' },  // 亮蓝渐变
+        { start: '#1dd1a1', end: '#10ac84' },  // 绿色渐变
+        { start: '#ee5a6f', end: '#c44569' }   // 玫瑰渐变
+      ],
       centerNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
 
       // maintenanceCenters: [],
@@ -212,6 +229,74 @@ export default {
     getTooltipContent(monthData, index) {
       return `${this.centerNames[index]}: ${monthData.values[index]}%`;
     },
+    // 获取通用图表配置
+    getCommonChartConfig() {
+      return {
+        animation: true,
+        animationDuration: 1000,
+        animationEasing: 'cubicOut',
+        animationDelay: (idx) => idx * 100,
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(10, 22, 40, 0.95)',
+          borderColor: 'rgba(75, 150, 255, 0.5)',
+          borderWidth: 1,
+          textStyle: {
+            color: '#fff',
+            fontSize: 14
+          },
+          padding: [12, 16],
+          extraCssText: 'backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0,0,0,0.6); border-radius: 8px;'
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255, 0.2)',
+              width: 1
+            }
+          },
+          axisLabel: {
+            color: 'rgba(255, 255, 255, 0.7)',
+            fontSize: 12
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        yAxis: {
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255, 0.2)',
+              width: 1
+            }
+          },
+          axisLabel: {
+            color: 'rgba(255, 255, 255, 0.7)',
+            fontSize: 12
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255, 0.08)',
+              type: 'dashed'
+            }
+          }
+        }
+      };
+    },
+    // 获取渐变色
+    getGradientColor(colorIndex) {
+      const colors = this.barColors[colorIndex % this.barColors.length];
+      return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+        { offset: 0, color: colors.start },
+        { offset: 1, color: colors.end }
+      ]);
+    },
     async fetchData() {
       this.loading = true;
       try {
@@ -362,13 +447,18 @@ export default {
               roundCap: true,
               clip: false,
               itemStyle: {
-                color: '#4B96FF'
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+                  { offset: 0, color: '#4facfe' },
+                  { offset: 1, color: '#00f2fe' }
+                ]),
+                shadowBlur: 20,
+                shadowColor: 'rgba(79, 172, 254, 0.8)'
               }
             },
             axisLine: {
               lineStyle: {
-                width: 8,
-                color: [[1, 'rgba(75, 150, 255, 0.1)']]
+                width: 10,
+                color: [[1, 'rgba(255, 255, 255, 0.1)']]
               }
             },
             splitLine: {show: false},
@@ -382,11 +472,15 @@ export default {
               }
             }],
             detail: {
-              fontSize: 14,
+              fontSize: 16,
               color: '#fff',
+              fontWeight: 700,
               formatter: '{value}%'
             }
-          }]
+          }],
+          animation: true,
+          animationDuration: 2000,
+          animationEasing: 'elasticOut'
         };
         chart.setOption(option);
         this.charts.push(chart);
@@ -405,16 +499,21 @@ export default {
           radius: '100%',
           progress: {
             show: true,
-            width: 18,
+            width: 20,
             itemStyle: {
-              color: '#4B96FF'
+              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { offset: 0, color: '#4facfe' },
+                { offset: 1, color: '#00f2fe' }
+              ]),
+              shadowBlur: 20,
+              shadowColor: 'rgba(79, 172, 254, 0.8)'
             }
           },
           pointer: { show: false },
           axisLine: {
             lineStyle: {
-              width: 18,
-              color: [[1, 'rgba(75, 150, 255, 0.1)']]
+              width: 20,
+              color: [[1, 'rgba(255, 255, 255, 0.1)']]
             }
           },
           axisTick: { show: false },
@@ -424,70 +523,109 @@ export default {
             valueAnimation: true,
             formatter: '{value}%',
             color: '#fff',
-            fontSize: 24,
+            fontSize: 28,
+            fontWeight: 700,
             offsetCenter: [0, '20%']
           },
           data: [{
             value: data,
             name: '预算使用率',
             title: {
-              offsetCenter: [0, '80%']
+              offsetCenter: [0, '80%'],
+              color: 'rgba(255, 255, 255, 0.7)',
+              fontSize: 14
             }
           }]
-        }]
+        }],
+        animation: true,
+        animationDuration: 2000,
+        animationEasing: 'elasticOut'
       };
       chart.setOption(option);
       this.charts.push(chart);
     },
     initMonthlyPurchaseChart() {
       const chart = echarts.init(this.$refs.monthlyPurchaseChart);
+      const commonConfig = this.getCommonChartConfig();
+
       const option = {
+        ...commonConfig,
         tooltip: {
-          trigger: 'axis'
+          ...commonConfig.tooltip,
+          axisPointer: {
+            type: 'shadow',
+            shadowStyle: {
+              color: 'rgba(75, 150, 255, 0.1)'
+            }
+          }
         },
         legend: {
           data: ['入库金额', '出库金额'],
-          textStyle: { color: '#fff' }
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
+          textStyle: {
+            color: '#fff',
+            fontSize: 14
+          },
+          itemWidth: 20,
+          itemHeight: 12,
+          itemGap: 20
         },
         xAxis: {
+          ...commonConfig.xAxis,
           type: 'category',
           data: Object.keys(this.monthlyPurchaseData),
-          axisLine: {
-            lineStyle: { color: '#ffffff30' }
-          },
           axisLabel: {
-            color: '#fff',
+            ...commonConfig.xAxis.axisLabel,
             rotate: 45
           }
         },
         yAxis: {
-          type: 'value',
-          axisLine: {
-            lineStyle: { color: '#ffffff30' }
-          },
-          splitLine: {
-            lineStyle: { color: '#ffffff10' }
-          },
-          axisLabel: { color: '#fff' }
+          ...commonConfig.yAxis,
+          type: 'value'
         },
         series: [
           {
             name: '入库金额',
             type: 'bar',
             data: Object.values(this.monthlyPurchaseData).map(item => item[0][0]),
-            itemStyle: { color: '#4B96FF' }
+            barWidth: '35%',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                { offset: 0, color: '#667eea' },
+                { offset: 1, color: '#764ba2' }
+              ]),
+              borderRadius: [8, 8, 0, 0],
+              shadowBlur: 10,
+              shadowColor: 'rgba(102, 126, 234, 0.5)',
+              shadowOffsetY: 3
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 20,
+                shadowColor: 'rgba(102, 126, 234, 0.8)'
+              }
+            }
           },
           {
             name: '出库金额',
             type: 'bar',
             data: Object.values(this.monthlyPurchaseData).map(item => item[1][0]),
-            itemStyle: { color: '#41D9D9' }
+            barWidth: '35%',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                { offset: 0, color: '#4facfe' },
+                { offset: 1, color: '#00f2fe' }
+              ]),
+              borderRadius: [8, 8, 0, 0],
+              shadowBlur: 10,
+              shadowColor: 'rgba(79, 172, 254, 0.5)',
+              shadowOffsetY: 3
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 20,
+                shadowColor: 'rgba(79, 172, 254, 0.8)'
+              }
+            }
           }
         ]
       };
@@ -496,58 +634,71 @@ export default {
     },
     initSixMonthChart() {
       const chart = echarts.init(this.$refs.sixMonthChart);
+      const commonConfig = this.getCommonChartConfig();
       const now = new Date();
       const currentMonth = now.getMonth();
       const months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
       const xAxisData = Array.from({ length: 6 }, (_, i) => months[(currentMonth - i -1+ 12) % 12]);
 
       const option = {
+        ...commonConfig,
         tooltip: {
-          trigger: 'axis'
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
+          ...commonConfig.tooltip,
+          axisPointer: {
+            type: 'cross',
+            lineStyle: {
+              color: 'rgba(255, 255, 255, 0.3)',
+              type: 'dashed'
+            }
+          }
         },
         xAxis: {
+          ...commonConfig.xAxis,
           type: 'category',
           boundaryGap: false,
-          data: [...xAxisData].reverse(),
-          axisLine: {
-            lineStyle: { color: '#ffffff30' }
-          },
-          axisLabel: { color: '#fff' }
+          data: [...xAxisData].reverse()
         },
         yAxis: {
-          type: 'value',
-          axisLine: {
-            lineStyle: { color: '#ffffff30' }
-          },
-          splitLine: {
-            lineStyle: { color: '#ffffff10' }
-          },
-          axisLabel: { color: '#fff' }
+          ...commonConfig.yAxis,
+          type: 'value'
         },
         series: [{
           data: [...this.sixMonthData].reverse(),
           type: 'line',
           smooth: true,
           symbol: 'circle',
-          symbolSize: 8,
+          symbolSize: 10,
+          showSymbol: true,
+          lineStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+              { offset: 0, color: '#4facfe' },
+              { offset: 1, color: '#00f2fe' }
+            ]),
+            width: 4,
+            shadowBlur: 15,
+            shadowColor: 'rgba(79, 172, 254, 0.6)',
+            shadowOffsetY: 5
+          },
           areaStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(75, 150, 255, 0.3)' },
-              { offset: 1, color: 'rgba(75, 150, 255, 0)' }
+              { offset: 0, color: 'rgba(79, 172, 254, 0.5)' },
+              { offset: 1, color: 'rgba(79, 172, 254, 0.05)' }
             ])
           },
-          lineStyle: {
-            color: '#4B96FF',
-            width: 3
-          },
           itemStyle: {
-            color: '#4B96FF'
+            color: '#fff',
+            borderColor: '#4facfe',
+            borderWidth: 3,
+            shadowBlur: 15,
+            shadowColor: 'rgba(79, 172, 254, 1)'
+          },
+          emphasis: {
+            scale: true,
+            scaleSize: 15,
+            itemStyle: {
+              shadowBlur: 25,
+              shadowColor: 'rgba(79, 172, 254, 1)'
+            }
           }
         }]
       };
@@ -588,53 +739,86 @@ export default {
     },
     initMonthlyInOutChart() {
       const chart = echarts.init(this.$refs.monthlyInOutChart);
+      const commonConfig = this.getCommonChartConfig();
+
       const option = {
+        ...commonConfig,
         tooltip: {
-          trigger: 'axis'
+          ...commonConfig.tooltip,
+          axisPointer: {
+            type: 'shadow',
+            shadowStyle: {
+              color: 'rgba(75, 150, 255, 0.1)'
+            }
+          }
         },
         legend: {
           data: ['入库金额', '出库金额'],
-          textStyle: { color: '#fff' }
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
+          textStyle: {
+            color: '#fff',
+            fontSize: 14
+          },
+          itemWidth: 20,
+          itemHeight: 12,
+          itemGap: 20
         },
         xAxis: {
+          ...commonConfig.xAxis,
           type: 'category',
           data: Object.keys(this.monthlyInOutData),
-          axisLine: {
-            lineStyle: { color: '#ffffff30' }
-          },
           axisLabel: {
-            color: '#fff',
+            ...commonConfig.xAxis.axisLabel,
             rotate: 45
           }
         },
         yAxis: {
-          type: 'value',
-          axisLine: {
-            lineStyle: { color: '#ffffff30' }
-          },
-          splitLine: {
-            lineStyle: { color: '#ffffff10' }
-          },
-          axisLabel: { color: '#fff' }
+          ...commonConfig.yAxis,
+          type: 'value'
         },
         series: [
           {
             name: '入库金额',
             type: 'bar',
             data: Object.values(this.monthlyInOutData).map(item => item[1]),
-            itemStyle: { color: '#4B96FF' }
+            barWidth: '35%',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                { offset: 0, color: '#43e97b' },
+                { offset: 1, color: '#38f9d7' }
+              ]),
+              borderRadius: [8, 8, 0, 0],
+              shadowBlur: 10,
+              shadowColor: 'rgba(67, 233, 123, 0.5)',
+              shadowOffsetY: 3
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 20,
+                shadowColor: 'rgba(67, 233, 123, 0.8)'
+              }
+            }
           },
           {
             name: '出库金额',
             type: 'bar',
             data: Object.values(this.monthlyInOutData).map(item => item[0]),
-            itemStyle: { color: '#41D9D9' }
+            barWidth: '35%',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                { offset: 0, color: '#f093fb' },
+                { offset: 1, color: '#f5576c' }
+              ]),
+              borderRadius: [8, 8, 0, 0],
+              shadowBlur: 10,
+              shadowColor: 'rgba(240, 147, 251, 0.5)',
+              shadowOffsetY: 3
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 20,
+                shadowColor: 'rgba(240, 147, 251, 0.8)'
+              }
+            }
           }
         ]
       };
@@ -695,32 +879,82 @@ export default {
       }));
       const option = {
         tooltip: {
-          trigger: 'item'
+          trigger: 'item',
+          backgroundColor: 'rgba(10, 22, 40, 0.95)',
+          borderColor: 'rgba(75, 150, 255, 0.5)',
+          borderWidth: 1,
+          textStyle: {
+            color: '#fff',
+            fontSize: 14
+          },
+          padding: [12, 16],
+          extraCssText: 'backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0,0,0,0.6); border-radius: 8px;',
+          formatter: '{b}<br/>{c}万元 ({d}%)'
         },
-        // legend: {
-        //   orient: 'vertical',
-        //   right: '5%',
-        //   top: 'center',
-        //   textStyle: { color: '#fff' }
-        // },
         series: [
           {
             type: 'pie',
-            radius: ['50%', '90%'],
+            radius: ['45%', '75%'],
             center: ['50%', '50%'],
-            data: dataArray,
+            roseType: 'radius',
             itemStyle: {
-              color: function(params) {
-                const colors = ['#4B96FF', '#41D9D9', '#63CF7E', '#FFC442', '#FF7D7D'];
-                return colors[params.dataIndex % colors.length];
+              borderRadius: 10,
+              borderColor: 'rgba(10, 22, 40, 0.5)',
+              borderWidth: 3,
+              shadowBlur: 20,
+              shadowColor: 'rgba(0, 0, 0, 0.5)',
+              color: (params) => {
+                const gradients = [
+                  { start: '#667eea', end: '#764ba2' },
+                  { start: '#4facfe', end: '#00f2fe' },
+                  { start: '#43e97b', end: '#38f9d7' },
+                  { start: '#fa709a', end: '#fee140' },
+                  { start: '#30cfd0', end: '#330867' }
+                ];
+                const idx = params.dataIndex % gradients.length;
+                return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+                  { offset: 0, color: gradients[idx].start },
+                  { offset: 1, color: gradients[idx].end }
+                ]);
               }
             },
             label: {
               color: '#fff',
-              formatter: '{b}: {c}',
-            }
+              fontSize: 14,
+              fontWeight: 600,
+              formatter: '{b}\n{c}万元',
+              lineHeight: 20,
+              shadowBlur: 5,
+              shadowColor: 'rgba(0, 0, 0, 0.8)'
+            },
+            labelLine: {
+              lineStyle: {
+                color: 'rgba(255, 255, 255, 0.4)',
+                width: 2
+              },
+              smooth: 0.3,
+              length: 20,
+              length2: 30
+            },
+            emphasis: {
+              scale: true,
+              scaleSize: 10,
+              itemStyle: {
+                shadowBlur: 35,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.9)'
+              },
+              label: {
+                fontSize: 16,
+                fontWeight: 700
+              }
+            },
+            data: dataArray
           }
-        ]
+        ],
+        animation: true,
+        animationDuration: 2000,
+        animationEasing: 'cubicOut'
       };
       chart.setOption(option);
       this.charts.push(chart);
@@ -808,30 +1042,104 @@ export default {
 <style scoped>
 .dashboard {
   min-height: 100vh;
-  background-color: #004ea2;
+  background: linear-gradient(135deg, #0a1628 0%, #1a2744 50%, #0d1b2a 100%);
   color: #fff;
-  padding: 15px;
+  padding: 24px;
+  position: relative;
 }
 
 .grid-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 15px;
+  gap: 24px;
 }
 
 .card {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  padding: 15px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 12px;
+  padding: 24px;
   height: auto;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  animation: fadeInUp 0.6s ease-out backwards;
+  will-change: transform, opacity;
+  transform: translateZ(0);
+}
+
+.card:nth-child(1) { animation-delay: 0.1s; }
+.card:nth-child(2) { animation-delay: 0.2s; }
+.card:nth-child(3) { animation-delay: 0.3s; }
+.card:nth-child(4) { animation-delay: 0.4s; }
+.card:nth-child(5) { animation-delay: 0.5s; }
+.card:nth-child(6) { animation-delay: 0.6s; }
+.card:nth-child(7) { animation-delay: 0.7s; }
+.card:nth-child(8) { animation-delay: 0.8s; }
+.card:nth-child(9) { animation-delay: 0.9s; }
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(40px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.card:hover {
+  border-color: rgba(75, 150, 255, 0.6);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(75, 150, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  transform: translateY(-3px);
+}
+
+/* 不支持毛玻璃效果的降级方案 */
+@supports not (backdrop-filter: blur(12px)) {
+  .card {
+    background: rgba(255, 255, 255, 0.12);
+  }
 }
 
 .card-title {
-  color: #fff;
-  font-size: 14px;
-  margin-bottom: 10px;
-  font-weight: 500;
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  letter-spacing: 0.5px;
+  position: relative;
+  padding-left: 14px;
+  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.card-title::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 20px;
+  background: linear-gradient(180deg, #4facfe 0%, #00f2fe 100%);
+  border-radius: 2px;
+  box-shadow: 0 0 10px rgba(79, 172, 254, 0.6);
+}
+
+.card-title::after {
+  content: '';
+  position: absolute;
+  bottom: -8px;
+  left: 0;
+  width: 50px;
+  height: 2px;
+  background: linear-gradient(90deg, #4facfe 0%, transparent 100%);
+  border-radius: 2px;
 }
 
 .progress-circles {
@@ -858,24 +1166,60 @@ export default {
 .stacked-bars {
   display: flex;
   justify-content: space-between;
-  /* Removed height to allow flex-grow */
-  /* padding-top: 20px; */  /* Optional for additional spacing */
   align-items: flex-end;
+  gap: 10px;
+  padding-top: 24px;
+  min-height: 220px;
 }
 
 .bar-group {
-  width: 50px;
+  flex: 1;
   display: flex;
   flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+
+.bar-group h2 {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.8);
+  margin-bottom: 10px;
+  font-weight: 500;
+  letter-spacing: 0.5px;
 }
 
 .bar-segment {
+  width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #fff;
-  font-size: 8px;
-  transition: all 0.3s;
+  font-size: 11px;
+  font-weight: 700;
+  border-radius: 6px 6px 0 0;
+  position: relative;
+  min-height: 35px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  cursor: pointer;
+}
+
+.bar-segment::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: rgba(255, 255, 255, 0.4);
+  border-radius: 6px 6px 0 0;
+}
+
+.bar-segment:hover {
+  transform: scaleX(1.15) translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  z-index: 10;
+  filter: brightness(1.2);
 }
 
 .overview-content {
@@ -903,14 +1247,22 @@ export default {
 }
 
 .stat-label {
-  color: #ffffff;
-  font-size: 20px;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 14px;
+  font-weight: 400;
+  margin-bottom: 8px;
 }
 
 .stat-value {
-  color: #4B96FF;
-  font-size: 20px;
-  font-weight: bold;
+  font-family: 'DIN Alternate', 'Roboto', 'Arial', sans-serif;
+  font-size: 32px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  line-height: 1.2;
 }
 
 .budget-section {
@@ -933,14 +1285,21 @@ export default {
 }
 
 .budget-label {
-  color: #ffffff;
-  font-size: 20px;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 14px;
+  font-weight: 400;
 }
 
 .budget-value {
-  color: #4B96FF;
-  font-size: 20px;
-  font-weight: bold;
+  font-family: 'DIN Alternate', 'Roboto', 'Arial', sans-serif;
+  font-size: 32px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  line-height: 1.2;
 }
 
 .budget-gauge {
@@ -958,20 +1317,65 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background: linear-gradient(135deg, #0a1628 0%, #1a2744 100%);
+  backdrop-filter: blur(10px);
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   z-index: 9999;
+  gap: 30px;
+}
+
+.loading-logo {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.loading-logo img {
+  height: 60px;
+  filter: drop-shadow(0 0 20px rgba(79, 172, 254, 0.6));
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.8;
+  }
 }
 
 .loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 3px solid #fff;
-  border-top: 3px solid #4B96FF;
+  position: relative;
+  width: 100px;
+  height: 100px;
+}
+
+.loading-spinner::before,
+.loading-spinner::after {
+  content: '';
+  position: absolute;
   border-radius: 50%;
-  animation: spin 1s linear infinite;
+  border: 3px solid transparent;
+  animation: spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+}
+
+.loading-spinner::before {
+  width: 100%;
+  height: 100%;
+  border-top-color: #4facfe;
+  animation-delay: 0s;
+}
+
+.loading-spinner::after {
+  width: 80%;
+  height: 80%;
+  top: 10%;
+  left: 10%;
+  border-top-color: #00f2fe;
+  animation-delay: -0.3s;
 }
 
 @keyframes spin {
@@ -979,16 +1383,103 @@ export default {
   100% { transform: rotate(360deg); }
 }
 
-@media screen and (max-width: 1366px) {
+.loading-text {
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 18px;
+  letter-spacing: 2px;
+  font-weight: 500;
+}
+
+.loading-text::after {
+  content: '...';
+  animation: loadingDots 1.5s steps(4) infinite;
+}
+
+@keyframes loadingDots {
+  0%, 20% { content: '.'; }
+  40% { content: '..'; }
+  60%, 100% { content: '...'; }
+}
+
+/* 4K 大屏 (2560px+) */
+@media screen and (min-width: 2560px) {
+  .dashboard {
+    padding: 40px 60px;
+  }
+
   .grid-container {
-    grid-template-columns: repeat(2, 1fr);
+    gap: 32px;
+  }
+
+  .card {
+    padding: 32px;
+  }
+
+  .card-title {
+    font-size: 22px;
+  }
+
+  .stat-value, .budget-value {
+    font-size: 40px;
+  }
+
+  .chart {
+    height: 350px;
   }
 }
 
-@media screen and (max-width: 1024px) {
+/* 全高清 (1920px - 2559px) - 桌面显示器主要场景 */
+@media screen and (min-width: 1920px) and (max-width: 2559px) {
+  .stat-value, .budget-value {
+    font-size: 32px;
+  }
+}
+
+/* 标准屏幕 (1366px - 1919px) - 桌面显示器常见尺寸 */
+@media screen and (min-width: 1366px) and (max-width: 1919px) {
+  .stat-value, .budget-value {
+    font-size: 28px;
+  }
+}
+
+/* 小屏幕 (1024px - 1365px) - 2列布局 */
+@media screen and (max-width: 1365px) {
+  .grid-container {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+  }
+
+  .dashboard {
+    padding: 16px;
+  }
+
+  .card {
+    padding: 16px;
+  }
+
+  .card-title {
+    font-size: 16px;
+  }
+
+  .stat-value, .budget-value {
+    font-size: 24px;
+  }
+}
+
+/* 平板 (< 1024px) - 1列布局 */
+@media screen and (max-width: 1023px) {
   .grid-container {
     grid-template-columns: 1fr;
   }
+
+  .overview-content {
+    flex-direction: column;
+  }
+
+  .stat-group {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 }
 
 .card-header {
@@ -1001,22 +1492,28 @@ export default {
 .warehouse-toggle {
   display: flex;
   align-items: center;
-  height: 24px;  /* 与标题高度一致 */
+  gap: 12px;
 }
 
 .toggle-button {
-  padding: 0 8px;
-  height: 24px;
-  line-height: 24px;
-  margin-right: 5px;
-  color: #4B96FF;
-  border: 1px solid rgba(75, 150, 255, 0.3);
-  background: rgba(75, 150, 255, 0.1);
-  border-radius: 4px;
+  padding: 6px 12px;
+  height: auto;
+  line-height: 1;
+  color: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(75, 150, 255, 0.4);
+  background: rgba(75, 150, 255, 0.15);
+  border-radius: 6px;
+  transition: all 0.3s ease;
+}
+
+.toggle-button:hover {
+  background: rgba(75, 150, 255, 0.25);
+  border-color: rgba(75, 150, 255, 0.6);
+  box-shadow: 0 0 15px rgba(75, 150, 255, 0.3);
 }
 
 .toggle-button i {
-  transition: transform 0.3s;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   font-size: 16px;
 }
 
@@ -1026,14 +1523,37 @@ export default {
 
 .button-group {
   display: flex;
-  gap: 8px;
+  gap: 0;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 10px;
+  padding: 4px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .button-group .el-button {
-  height: 24px;
-  line-height: 22px;
-  padding: 0 12px;
-  font-size: 14px;
+  margin: 0;
+  background: transparent;
+  border: none;
+  color: rgba(255, 255, 255, 0.6);
+  border-radius: 8px;
+  padding: 8px 16px;
+  height: auto;
+  line-height: 1;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.button-group .el-button.el-button--primary {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  color: #fff;
+  box-shadow: 0 4px 15px rgba(79, 172, 254, 0.5);
+  transform: scale(1.05);
+}
+
+.button-group .el-button:hover:not(.el-button--primary) {
+  background: rgba(255, 255, 255, 0.15);
+  color: rgba(255, 255, 255, 0.9);
+  transform: translateY(-1px);
 }
 
 .fade-enter-active, .fade-leave-active {
diff --git a/zbf-ui/src/views/system/tMiStock/index.vue b/zbf-ui/src/views/system/tMiStock/index.vue
index bbbe540..2b7af56 100644
--- a/zbf-ui/src/views/system/tMiStock/index.vue
+++ b/zbf-ui/src/views/system/tMiStock/index.vue
@@ -1,193 +1,192 @@
 <template>
-  <div class="app-container" ref="appPanel">
-    <!-- Charts Section -->
-    <!--    <el-row :gutter="20" class="mb8">
-          <div slot="header" class="clearfix">
-            <span>库存统计图表</span>
-          </div>
-          <el-card class="box-card" style="height: 620px">
-            <div slot="header" class="clearfix">
-            </div>
-            <el-row :gutter="20">
-              <el-col :span="12">
-                <div ref="inventoryDistributionChart" style="height: 300px;"></div>
-              </el-col>
-              <el-col :span="12">
-                <div ref="inventoryTrendChart" style="height: 300px;"></div>
-              </el-col>
-            </el-row>
-            <el-row :gutter="20">
-              <el-col :span="12">
-                <div ref="levelTypeDistributionChart" style="height: 300px;"></div>
-              </el-col>
-              <el-col :span="12">
-                <div ref="monthlyValueTrendChart" style="height: 300px;"></div>
-              </el-col>
-            </el-row>
-          </el-card>
-        </el-row>-->
+  <div class="modern-inventory-container" ref="appPanel">
+    <!-- 背景装饰 -->
+    <div class="grid-background"></div>
+    <div class="gradient-orb orb-1"></div>
+    <div class="gradient-orb orb-2"></div>
+    <div class="gradient-orb orb-3"></div>
 
-    <!-- Original Content -->
-    <div ref="toolPanel">
-      <el-row :gutter="10" class="mb8">
-        <el-col :span="1.5">
-          <el-button
-            plain
-            icon="el-icon-download"
-            size="mini"
-            @click="handleExport"
-            v-hasPermi="['system:stock:export']"
-          >导出
-          </el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button icon="el-icon-search" size="mini" @click="handleQuery"
-          >搜索
-          </el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
-          >刷新
-          </el-button>
-        </el-col>
-        <el-col :span="1.5" style="margin-top: -20px;">
-          <div>
-            <h3 style="color: #0e0e0e">库存总价: <span class="larger-font">{{ totalMoney }}元</span></h3>
+    <!-- 顶部统计卡片区域 -->
+    <div class="stats-section">
+      <div class="stat-card stat-card-primary">
+        <div class="stat-icon-wrapper">
+          <div class="stat-icon">
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
           </div>
-        </el-col>
-        <el-col :span="1.5" style="margin-top: -20px; ">
-          <div>
-            <h3 style="color: #0e0e0e">总计数量: <span class="larger-font">{{ shelvesNum }}件</span></h3>
-          </div>
-        </el-col>
+        </div>
+        <div class="stat-content">
+          <div class="stat-label">库存总价</div>
+          <div class="stat-value">{{ totalMoney }}<span class="stat-unit">元</span></div>
+        </div>
+        <div class="stat-sparkle sparkle-1"></div>
+        <div class="stat-sparkle sparkle-2"></div>
+      </div>
 
-        <right-toolbar ref="toolBarRef" @customCols="customColsHandler" :showSearch.sync="showSearch"
-                       showColumnsType="transfer" :columns="columns"></right-toolbar>
-      </el-row>
+      <div class="stat-card stat-card-secondary">
+        <div class="stat-icon-wrapper">
+          <div class="stat-icon">
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <rect x="3" y="3" width="7" height="7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <rect x="14" y="3" width="7" height="7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <rect x="14" y="14" width="7" height="7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <rect x="3" y="14" width="7" height="7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </div>
+        </div>
+        <div class="stat-content">
+          <div class="stat-label">总计数量</div>
+          <div class="stat-value">{{ shelvesNum }}<span class="stat-unit">件</span></div>
+        </div>
+        <div class="stat-sparkle sparkle-1"></div>
+        <div class="stat-sparkle sparkle-2"></div>
+      </div>
     </div>
-    <div class="search-container" ref="searchPanel">
-      <el-form
-        :model="queryParams"
-        ref="queryForm"
-        size="mini"
-        :inline="true"
-        v-show="showSearch"
-        label-width="68px"
-      >
-        <el-form-item label="仓库名称" prop="storageId">
-          <el-select
-            v-model="queryParams.storageId"
-            placeholder="请选择仓库名称"
-            clearable
-          >
-            <el-option
-              v-for="storage in storageList"
-              :key="storage.storageId"
-              :label="storage.storageShortName"
-              :value="storage.storageId">
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="库位编号" prop="locationId">
-          <el-input
-            v-model="queryParams.locationId"
-            placeholder="请输入库位编号"
-            clearable
-            @keyup.enter.native="handleQuery"
-          />
-        </el-form-item>
-        <el-form-item label="物料编号" prop="goodsId">
-          <el-input
-            v-model="queryParams.goodsId"
-            placeholder="请输入物料编号"
-            clearable
-            @keyup.enter.native="handleQuery"
-          />
-        </el-form-item>
-        <el-form-item label="规格型号" prop="goodsId">
-          <el-input
-            v-model="queryParams.specification"
-            placeholder="请输入规格型号"
-            clearable
-            @keyup.enter.native="handleQuery"
-          />
-        </el-form-item>
-        <!-- <el-form-item label="入库类型" prop="storageMode">
-          <el-input
-            v-model="queryParams.storageMode"
-            placeholder="请输入入库类型"
-            clearable
-            @keyup.enter.native="handleQuery"
-          />
-        </el-form-item> -->
-        <!-- <el-form-item label="入库时间" prop="wareDate">
-          <el-input
-            v-model="queryParams.wareDate"
-            placeholder="请输入入库时间"
-            clearable
-            @keyup.enter.native="handleQuery"
-          />
-        </el-form-item> -->
-        <el-form-item label="物料名称" prop="goodsName">
-          <el-input
-            v-model="queryParams.goodsName"
-            placeholder="请输入物料名称"
-            clearable
-            @keyup.enter.native="handleQuery"
-          />
-        </el-form-item>
-        <el-form-item label="物料描述" prop="recoil">
-          <el-input
-            v-model="queryParams.recoil"
-            placeholder="请输入物料描述"
-            clearable
-            @keyup.enter.native="handleQuery"
-          />
-        </el-form-item>
 
-        <el-form-item label="需求部门" prop="needDept">
-          <el-input
-            v-model="queryParams.needDept"
-            placeholder="请输入需求部门"
-            clearable
-            @keyup.enter.native="needDept"
-          />
-        </el-form-item>
+    <!-- 工具栏区域 -->
+    <div class="toolbar-section" ref="toolPanel">
+      <div class="toolbar-actions">
+        <el-button
+          class="modern-btn modern-btn-export"
+          icon="el-icon-download"
+          size="small"
+          @click="handleExport"
+          v-hasPermi="['system:stock:export']"
+        >导出数据</el-button>
+        <el-button
+          class="modern-btn modern-btn-search"
+          icon="el-icon-search"
+          size="small"
+          @click="handleQuery"
+        >搜索</el-button>
+        <el-button
+          class="modern-btn modern-btn-refresh"
+          icon="el-icon-refresh"
+          size="small"
+          @click="resetQuery"
+        >刷新</el-button>
+      </div>
 
-        <el-form-item label="需求人" prop="needPerson">
-          <el-input
-            v-model="queryParams.needPerson"
-            placeholder="请输入需求人"
-            clearable
-            @keyup.enter.native="needPerson"
-          />
-        </el-form-item>
+      <right-toolbar
+        ref="toolBarRef"
+        @customCols="customColsHandler"
+        :showSearch.sync="showSearch"
+        showColumnsType="transfer"
+        :columns="columns"
+      ></right-toolbar>
+    </div>
 
-        <el-form-item label="子需求编号" prop="salesOrderNumber">
-          <el-input
-            v-model="queryParams.salesOrderNumber"
-            placeholder="请输入子需求编号"
-            clearable
-            @keyup.enter.native="salesOrderNumber"
-          />
-        </el-form-item>
+    <!-- 搜索区域 -->
+    <transition name="search-expand">
+      <div class="search-panel" ref="searchPanel" v-show="showSearch">
+        <el-form
+          :model="queryParams"
+          ref="queryForm"
+          size="small"
+          :inline="true"
+          label-width="85px"
+          class="modern-search-form"
+        >
+          <el-form-item label="仓库名称" prop="storageId">
+            <el-select
+              v-model="queryParams.storageId"
+              placeholder="请选择仓库名称"
+              clearable
+            >
+              <el-option
+                v-for="storage in storageList"
+                :key="storage.storageId"
+                :label="storage.storageShortName"
+                :value="storage.storageId">
+              </el-option>
+            </el-select>
+          </el-form-item>
 
+          <el-form-item label="库位编号" prop="locationId">
+            <el-input
+              v-model="queryParams.locationId"
+              placeholder="请输入库位编号"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
 
+          <el-form-item label="物料编号" prop="goodsId">
+            <el-input
+              v-model="queryParams.goodsId"
+              placeholder="请输入物料编号"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
 
+          <el-form-item label="规格型号" prop="specification">
+            <el-input
+              v-model="queryParams.specification"
+              placeholder="请输入规格型号"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
 
+          <el-form-item label="物料名称" prop="goodsName">
+            <el-input
+              v-model="queryParams.goodsName"
+              placeholder="请输入物料名称"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
 
+          <el-form-item label="物料描述" prop="recoil">
+            <el-input
+              v-model="queryParams.recoil"
+              placeholder="请输入物料描述"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
 
+          <el-form-item label="需求部门" prop="needDept">
+            <el-input
+              v-model="queryParams.needDept"
+              placeholder="请输入需求部门"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
 
-        <el-form-item label="容器编号" prop="ctl">
-          <el-input
-            v-model="queryParams.ctl"
-            placeholder="请输入容器编号"
-            clearable
-            @keyup.enter.native="ctl"
-          />
-        </el-form-item>
-        <el-form-item label="入库时间" prop="date">
-          <div class="block">
+          <el-form-item label="需求人" prop="needPerson">
+            <el-input
+              v-model="queryParams.needPerson"
+              placeholder="请输入需求人"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+
+          <el-form-item label="子需求编号" prop="salesOrderNumber">
+            <el-input
+              v-model="queryParams.salesOrderNumber"
+              placeholder="请输入子需求编号"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+
+          <el-form-item label="容器编号" prop="ctl">
+            <el-input
+              v-model="queryParams.ctl"
+              placeholder="请输入容器编号"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+
+          <el-form-item label="入库时间" prop="date">
             <el-date-picker
               v-model="queryParams.date"
               type="daterange"
@@ -197,54 +196,79 @@
               @keyup.enter.native="handleQuery"
               value-format="yyyy-MM-dd">
             </el-date-picker>
-          </div>
-        </el-form-item>
-        <el-form-item label="库级选择" prop="levelType">
-          <el-select
-            v-model="queryParams.levelType"
-            placeholder="请选库级"
-            clearable>
-            <el-option
-              v-for="dict in dict.type.level_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
+          </el-form-item>
+
+          <el-form-item label="库级选择" prop="levelType">
+            <el-select
+              v-model="queryParams.levelType"
+              placeholder="请选库级"
+              clearable>
+              <el-option
+                v-for="dict in dict.type.level_type"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+    </transition>
+
+    <!-- 表格区域 -->
+    <div class="table-section" ref="mainTablePanel">
+      <div class="table-scroll-wrapper">
+        <el-table
+          :key="rndKey"
+          ref="filterTable"
+          v-loading="loading"
+          size="small"
+          height="650px"
+          :data="tMiStockList"
+          @header-dragend="handleHeaderDragEnd"
+          show-summary
+          :summary-method="getSummaries"
+          @selection-change="handleSelectionChange"
+          :row-class-name="getRowClassName"
+          class="modern-table"
+        >
+        <el-table-column type="selection" width="55" align="center" fixed="left"/>
+        <el-table-column
+          v-for="item in columns"
+          sortable
+          :key="item.seq"
+          :label="item.label"
+          align="center"
+          :prop="item.columnName"
+          v-if="item.visible"
+          :min-width="item.minWidth || 130"
+          :filters="item.filters"
+          :filter-method="filterHandler"
+          show-overflow-tooltip
+        >
+          <template slot-scope="scope">
+            <dict-tag
+              v-if="item.columnName === 'status'"
+              :options="dict.type.common_status"
+              :value="scope.row[item.columnName]"
             />
-          </el-select>
-        </el-form-item>
-      </el-form>
-    </div>
-<!--    <div>-->
-<!--      <h3 style="color: red">库存总价: {{ totalMoney }}元</h3>-->
-<!--      <h3 style="color: red">总计数量: {{ shelvesNum }}件</h3>-->
-<!--    </div>-->
-    <div class="table-container" style="flex-grow: 1; overflow: auto;">
-      <div ref="mainTablePanel">
-        <el-table :key="rndKey" ref="filterTable" v-loading="loading" border size="mini"
-                  height="650px"
-                  :data="tMiStockList" @header-dragend="handleHeaderDragEnd"
-                  show-summary :summary-method="getSummaries"
-                  @selection-change="handleSelectionChange"
-                  :row-class-name="getRowClassName">
-          <el-table-column type="selection" width="55" align="center"/>
-          <el-table-column v-for="item in columns" sortable :key="item.seq" :label="item.label" align="center"
-                           :prop="item.columnName" v-if="item.visible" :width="item.width"
-                           :filters="item.filters" :filter-method="filterHandler">
-            <template slot-scope="scope">
-              <dict-tag v-if="item.columnName === 'status'" :options="dict.type.common_status"
-                        :value="scope.row[item.columnName]"/>
-              <dict-tag v-else-if="item.columnName === 'levelType'" :options="dict.type.level_type"
-                        :value="scope.row[item.columnName]"/>
-              <span v-else-if="['price', 'totalMoney'].includes(item.columnName)">
-                {{ formatCurrency(scope.row[item.columnName]) }}
-              </span>
-              <span v-else>{{ scope.row[item.columnName] }}</span>
-            </template>
-          </el-table-column>
-        </el-table>
+            <dict-tag
+              v-else-if="item.columnName === 'levelType'"
+              :options="dict.type.level_type"
+              :value="scope.row[item.columnName]"
+            />
+            <span v-else-if="['price', 'totalMoney'].includes(item.columnName)" class="money-cell">
+              {{ formatCurrency(scope.row[item.columnName]) }}
+            </span>
+            <span v-else>{{ scope.row[item.columnName] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
       </div>
     </div>
-    <div class="pagePanel">
+
+    <!-- 分页区域 -->
+    <div class="pagination-section">
       <pagination
         v-show="total > 0"
         :total="total"
@@ -295,7 +319,6 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 100,
-        // 保留原有的查询参数
       },
       storageList: [],
       form: {},
@@ -339,10 +362,8 @@ export default {
     'tMiStockList': {
       handler(newList) {
         newList.forEach(item => {
-          // 确保price和shelvesNum都存在且为数字
           const price = parseFloat(item.price) || 0;
           const shelvesNum = parseFloat(item.shelvesNum) || 0;
-          // 计算totalMoney并保留两位小数
           item.totalMoney = (price * shelvesNum).toFixed(2);
         });
       },
@@ -350,7 +371,6 @@ export default {
     }
   },
   methods: {
-    /** 查询用户展示字段定义管理列表 */
     getHideColumn() {
       var queryHideColumnParams = {
         pageNum: 1,
@@ -373,13 +393,11 @@ export default {
         this.rightToolbarShow = true;
       });
     },
-    /** 查询仓库列表 */
     getStorageList() {
       selectStorageList({}).then((response) => {
         if (response.code == 200) {
           this.storageList = [];
           response.data.forEach((element, index) => {
-            // 假设 element 有一个唯一的 id 属性可以用作 key
             this.storageList.push({...element, key: element.id || `unique-${index}`});
           });
         } else {
@@ -401,7 +419,7 @@ export default {
       this.$nextTick(() => {
         var totalHeight = this.$refs.appPanel.clientHeight;
         var toolHeight = this.$refs.toolPanel.clientHeight;
-        var searchHeight = this.$refs.searchPanel.clientHeight;
+        var searchHeight = this.$refs.searchPanel ? this.$refs.searchPanel.clientHeight : 0;
         var tablePanelHeight = totalHeight - toolHeight - searchHeight - 14 - 5;
         this.mainTableDivHeight = tablePanelHeight + "px";
         this.mainTableHeight = tablePanelHeight - 25 + "px";
@@ -412,11 +430,11 @@ export default {
         const response = await listTotal(this.queryParams);
         this.tMiStockLists = response.data;
         this.totalMoney = this.tMiStockLists.reduce((sum, item) => {
-          return sum + (parseFloat(item.totalMoney) || 0); // 确保将 totalMoney 转换为数字
-        }, 0).toFixed(2); // 保留两位小数
+          return sum + (parseFloat(item.totalMoney) || 0);
+        }, 0).toFixed(2);
         this.shelvesNum = this.tMiStockLists.reduce((sum, item) => {
-          return sum + (parseFloat(item.shelvesNum) || 0); // 确保将 shelvesNum 转换为数字
-        }, 0).toFixed(2); // 保留两位小数
+          return sum + (parseFloat(item.shelvesNum) || 0);
+        }, 0).toFixed(2);
       } catch (error) {
         console.error('Error loading total data:', error);
       }
@@ -425,33 +443,56 @@ export default {
       this.loading = true;
       listStock(this.queryParams).then((response) => {
         if (this.columns.length === 0) {
-          this.columns = response.columns;
+          this.columns = response.columns.map(col => ({
+            ...col,
+            minWidth: this.getColumnMinWidth(col.columnName)
+          }));
         }
         this.tMiStockList = response.rows;
         this.total = response.total;
         this.generateFilters();
         this.loading = false;
-
       });
     },
+    getColumnMinWidth(columnName) {
+      // 为不同类型的列设置合理的最小宽度，确保内容适度显示
+      const widthMap = {
+        'goodsId': 160,           // 物料编号
+        'goodsName': 200,         // 物料名称
+        'specification': 160,     // 规格型号
+        'recoil': 220,           // 物料描述
+        'locationId': 130,       // 库位编号
+        'storageShortName': 130, // 仓库简称
+        'storageName': 160,      // 仓库名称
+        'warehouseName': 130,    // 库房名称
+        'shelvesNum': 110,       // 数量
+        'price': 110,            // 单价
+        'totalMoney': 130,       // 总金额
+        'needDept': 140,         // 需求部门
+        'needPerson': 110,       // 需求人
+        'salesOrderNumber': 160, // 子需求编号
+        'ctl': 130,              // 容器编号
+        'levelType': 110,        // 库级
+        'status': 100,           // 状态
+        'wareDate': 140,         // 入库日期
+        'operatorName': 110,     // 操作人
+      };
+      return widthMap[columnName] || 130; // 默认最小宽度增加到130
+    },
     generateFilters() {
       this.columns.forEach(column => {
         let uniqueValues;
         if (column.columnName === 'status') {
-          // For the status column, use the common_status dictionary
           uniqueValues = [...new Set(this.tMiStockList.map(item => item[column.columnName]))];
           column.filters = uniqueValues.map(value => ({
             text: this.dict.type.common_status.find(status => status.value === value)?.label || value,
             value
           }));
           column.filterMethod = (value, row) => row[column.columnName] === value;
-
-          // Add a formatter for the column to display the dictionary label
           column.formatter = (row, column, cellValue, index) => {
             return this.dict.type.common_status.find(status => status.value === cellValue)?.label || cellValue;
           };
         } else {
-          // For other columns, keep the original logic
           uniqueValues = [...new Set(this.tMiStockList.map(item => item[column.columnName]))];
           column.filters = uniqueValues.map(value => ({text: value, value}));
           column.filterMethod = (value, row) => row[column.columnName] === value;
@@ -513,23 +554,31 @@ export default {
         `tMiStock_${new Date().getTime()}.xlsx`
       );
     },
-    // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
       this.single = selection.length !== 1
       this.multiple = !selection.length
-      this.selectedRowKeys = selection.map(item => item.id) // 更新选中行的 key
+      this.selectedRowKeys = selection.map(item => item.id)
     },
     getRowClassName({ row }) {
       if (this.selectedRowKeys.includes(row.id)) {
         return 'selected-row'
-      }  return ''
+      }
+      return ''
     },
     initCharts() {
-      this.charts.inventoryDistribution = echarts.init(this.$refs.inventoryDistributionChart);
-      this.charts.inventoryTrend = echarts.init(this.$refs.inventoryTrendChart);
-      this.charts.levelTypeDistribution = echarts.init(this.$refs.levelTypeDistributionChart);
-      this.charts.monthlyValueTrend = echarts.init(this.$refs.monthlyValueTrendChart);
+      if (this.$refs.inventoryDistributionChart) {
+        this.charts.inventoryDistribution = echarts.init(this.$refs.inventoryDistributionChart);
+      }
+      if (this.$refs.inventoryTrendChart) {
+        this.charts.inventoryTrend = echarts.init(this.$refs.inventoryTrendChart);
+      }
+      if (this.$refs.levelTypeDistributionChart) {
+        this.charts.levelTypeDistribution = echarts.init(this.$refs.levelTypeDistributionChart);
+      }
+      if (this.$refs.monthlyValueTrendChart) {
+        this.charts.monthlyValueTrend = echarts.init(this.$refs.monthlyValueTrendChart);
+      }
     },
     updateCharts() {
       this.updateInventoryDistributionChart();
@@ -756,28 +805,1062 @@ export default {
 };
 </script>
 
-<style lang="scss">
-.app-container {
-  height: 100%;
-  overflow-y: auto;
-  padding: 20px;
-}
-.larger-font {
-  font-size: 25px; /* 调整字体大小，根据需要修改 */
-}
-.box-card {
-  margin-bottom: 20px;
-}
-.el-table {
-  .selected-row {
-    background-color: #71b7e7 !important;
+<style lang="scss" scoped>
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
 
-    &:hover > td {
-      background-color: #71b7e7 !important;
+// 丰富的配色方案
+$bg-light: linear-gradient(135deg, #f5f7fa 0%, #e8edf2 100%);
+$bg-white: #ffffff;
+$bg-card: #ffffff;
+$bg-hover: #f0f9ff;
+$bg-stripe: #fafbfc;
+
+// 主色系 - 蓝色到青色
+$primary-start: #0ea5e9;
+$primary-end: #06b6d4;
+$primary-light: #e0f2fe;
+
+// 次色系 - 紫色到粉色
+$secondary-start: #8b5cf6;
+$secondary-end: #ec4899;
+$secondary-light: #fae8ff;
+
+// 强调色系 - 橙色到红色
+$accent-start: #f97316;
+$accent-end: #ef4444;
+$accent-light: #ffedd5;
+
+// 绿色系 - 绿松石
+$success-start: #14b8a6;
+$success-end: #10b981;
+$success-light: #d1fae5;
+
+// 文本颜色
+$text-primary: #0f172a;
+$text-secondary: #64748b;
+$text-muted: #94a3af;
+
+// 边框和阴影
+$border-color: #e2e8f0;
+$border-hover: #cbd5e1;
+$shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
+$shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
+$shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
+$shadow-color-blue: 0 8px 32px rgba(14, 165, 233, 0.25);
+$shadow-color-purple: 0 8px 32px rgba(139, 92, 246, 0.25);
+$shadow-color-orange: 0 8px 32px rgba(249, 115, 22, 0.25);
+$shadow-color-teal: 0 8px 32px rgba(20, 184, 166, 0.25);
+
+.modern-inventory-container {
+  position: relative;
+  min-height: 100vh;
+  background: $bg-light;
+  padding: 24px;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  color: $text-primary;
+  overflow-x: hidden;
+
+  // 背景网格装饰
+  .grid-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image:
+      linear-gradient(rgba(14, 165, 233, 0.04) 1.5px, transparent 1.5px),
+      linear-gradient(90deg, rgba(14, 165, 233, 0.04) 1.5px, transparent 1.5px);
+    background-size: 40px 40px;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  // 多彩渐变装饰球
+  .gradient-orb {
+    position: fixed;
+    border-radius: 50%;
+    filter: blur(100px);
+    opacity: 0.15;
+    pointer-events: none;
+    z-index: 0;
+    animation: float 30s ease-in-out infinite;
+
+    &.orb-1 {
+      width: 500px;
+      height: 500px;
+      background: radial-gradient(circle, $primary-start, transparent);
+      top: -200px;
+      right: -200px;
     }
 
-    td {
-      background-color: #71b7e7 !important;
+    &.orb-2 {
+      width: 450px;
+      height: 450px;
+      background: radial-gradient(circle, $secondary-start, transparent);
+      bottom: -180px;
+      left: -180px;
+      animation-delay: -15s;
+    }
+
+    &.orb-3 {
+      width: 400px;
+      height: 400px;
+      background: radial-gradient(circle, $success-start, transparent);
+      top: 50%;
+      left: 50%;
+      animation-delay: -7s;
+    }
+  }
+
+  @keyframes float {
+    0%, 100% { transform: translate(0, 0) rotate(0deg); }
+    25% { transform: translate(50px, -50px) rotate(90deg); }
+    50% { transform: translate(-30px, 40px) rotate(180deg); }
+    75% { transform: translate(40px, -30px) rotate(270deg); }
+  }
+
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+
+  // 统计卡片 - 使用鲜艳的渐变色
+  .stats-section {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 20px;
+    margin-bottom: 24px;
+    animation: slideDown 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+    .stat-card {
+      position: relative;
+      background: $bg-card;
+      border: 2px solid transparent;
+      border-radius: 20px;
+      padding: 30px;
+      display: flex;
+      align-items: center;
+      gap: 24px;
+      overflow: hidden;
+      box-shadow: $shadow-md;
+      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: 20px;
+        padding: 2px;
+        background: linear-gradient(135deg, transparent 0%, currentColor 100%);
+        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+        -webkit-mask-composite: xor;
+        mask-composite: exclude;
+        opacity: 0;
+        transition: opacity 0.4s;
+      }
+
+      &:hover {
+        transform: translateY(-8px) scale(1.02);
+        box-shadow: $shadow-lg;
+
+        &::before {
+          opacity: 1;
+        }
+
+        .stat-icon-wrapper {
+          transform: scale(1.15) rotate(10deg);
+        }
+
+        .stat-sparkle {
+          animation: sparkle 1.5s ease-in-out infinite;
+        }
+      }
+
+      &.stat-card-primary {
+        color: $primary-start;
+
+        &:hover {
+          box-shadow: $shadow-color-blue;
+        }
+
+        .stat-icon-wrapper {
+          background: linear-gradient(135deg, $primary-start, $primary-end);
+        }
+
+        .stat-value {
+          background: linear-gradient(135deg, $primary-start, $primary-end);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          background-clip: text;
+        }
+      }
+
+      &.stat-card-secondary {
+        color: $secondary-start;
+
+        &:hover {
+          box-shadow: $shadow-color-purple;
+        }
+
+        .stat-icon-wrapper {
+          background: linear-gradient(135deg, $secondary-start, $secondary-end);
+        }
+
+        .stat-value {
+          background: linear-gradient(135deg, $secondary-start, $secondary-end);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          background-clip: text;
+        }
+      }
+
+      .stat-icon-wrapper {
+        position: relative;
+        flex-shrink: 0;
+        width: 72px;
+        height: 72px;
+        border-radius: 18px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: $shadow-md;
+        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+        .stat-icon {
+          color: white;
+
+          svg {
+            width: 36px;
+            height: 36px;
+            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+          }
+        }
+      }
+
+      .stat-content {
+        flex: 1;
+        min-width: 0;
+
+        .stat-label {
+          font-size: 13px;
+          font-weight: 600;
+          color: $text-secondary;
+          margin-bottom: 10px;
+          text-transform: uppercase;
+          letter-spacing: 1px;
+        }
+
+        .stat-value {
+          font-family: 'JetBrains Mono', monospace;
+          font-size: 36px;
+          font-weight: 800;
+          line-height: 1;
+          letter-spacing: -1px;
+
+          .stat-unit {
+            font-size: 18px;
+            font-weight: 600;
+            margin-left: 8px;
+            opacity: 0.8;
+          }
+        }
+      }
+
+      .stat-sparkle {
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        background: currentColor;
+        border-radius: 50%;
+        opacity: 0;
+
+        &.sparkle-1 {
+          top: 20%;
+          right: 15%;
+        }
+
+        &.sparkle-2 {
+          bottom: 25%;
+          right: 20%;
+          animation-delay: 0.5s;
+        }
+      }
+    }
+  }
+
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-30px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes sparkle {
+    0%, 100% {
+      opacity: 0;
+      transform: scale(0);
+    }
+    50% {
+      opacity: 0.8;
+      transform: scale(1.5);
+    }
+  }
+
+  // 工具栏
+  .toolbar-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding: 18px 24px;
+    background: $bg-card;
+    border: 1px solid $border-color;
+    border-radius: 16px;
+    box-shadow: $shadow-sm;
+    animation: slideDown 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
+
+    .toolbar-actions {
+      display: flex;
+      gap: 12px;
+    }
+  }
+
+  // 多彩按钮设计
+  .modern-btn {
+    padding: 10px 24px !important;
+    border-radius: 10px !important;
+    font-weight: 600 !important;
+    font-size: 13px !important;
+    border: none !important;
+    color: white !important;
+    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
+    box-shadow: $shadow-sm !important;
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+
+    &:hover {
+      transform: translateY(-3px) scale(1.05);
+      box-shadow: $shadow-md !important;
+
+      &::before {
+        opacity: 1;
+      }
+    }
+
+    &:active {
+      transform: translateY(-1px) scale(1.02);
+    }
+
+    &.modern-btn-export {
+      background: linear-gradient(135deg, $accent-start, $accent-end) !important;
+
+      &:hover {
+        box-shadow: $shadow-color-orange !important;
+      }
+    }
+
+    &.modern-btn-search {
+      background: linear-gradient(135deg, $primary-start, $primary-end) !important;
+
+      &:hover {
+        box-shadow: $shadow-color-blue !important;
+      }
+    }
+
+    &.modern-btn-refresh {
+      background: linear-gradient(135deg, $success-start, $success-end) !important;
+
+      &:hover {
+        box-shadow: $shadow-color-teal !important;
+      }
+    }
+  }
+
+  // 搜索面板
+  .search-panel {
+    margin-bottom: 20px;
+    padding: 28px;
+    background: $bg-card;
+    border: 1px solid $border-color;
+    border-radius: 16px;
+    box-shadow: $shadow-sm;
+    animation: slideDown 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
+
+    .modern-search-form {
+      ::v-deep .el-form-item {
+        margin-bottom: 16px;
+
+        .el-form-item__label {
+          color: $text-secondary;
+          font-weight: 600;
+          font-size: 13px;
+        }
+
+        .el-input__inner,
+        .el-select .el-input__inner,
+        .el-date-editor .el-input__inner {
+          background: $bg-white;
+          border: 2px solid $border-color;
+          border-radius: 10px;
+          color: $text-primary;
+          transition: all 0.3s;
+          font-size: 13px;
+
+          &:hover {
+            border-color: $border-hover;
+            box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.05);
+          }
+
+          &:focus {
+            border-color: $primary-start;
+            box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
+          }
+
+          &::placeholder {
+            color: $text-muted;
+          }
+        }
+      }
+    }
+  }
+
+  .search-expand-enter-active,
+  .search-expand-leave-active {
+    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+    max-height: 800px;
+    overflow: hidden;
+  }
+
+  .search-expand-enter,
+  .search-expand-leave-to {
+    opacity: 0;
+    max-height: 0;
+    transform: translateY(-20px);
+  }
+
+  // 灵动优雅的表格
+  .table-section {
+    margin-bottom: 20px;
+    animation: slideDown 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
+
+    .table-scroll-wrapper {
+      overflow-x: auto;
+      overflow-y: hidden;
+      border-radius: 16px;
+      background: $bg-card;
+      box-shadow: $shadow-md;
+      position: relative;
+
+      // 优雅的滚动条样式
+      &::-webkit-scrollbar {
+        height: 12px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
+        border-radius: 0 0 16px 16px;
+        margin: 0 16px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: linear-gradient(135deg, $primary-start, $primary-end);
+        border-radius: 10px;
+        border: 2px solid transparent;
+        background-clip: padding-box;
+        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+        box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
+
+        &:hover {
+          background: linear-gradient(135deg, darken($primary-start, 5%), darken($primary-end, 5%));
+          box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
+          transform: scaleY(1.2);
+        }
+
+        &:active {
+          background: linear-gradient(135deg, darken($primary-start, 10%), darken($primary-end, 10%));
+        }
+      }
+
+      // 滚动条按钮（如果需要）
+      &::-webkit-scrollbar-button {
+        display: none;
+      }
+    }
+
+    ::v-deep .modern-table {
+      background: $bg-card;
+      border-radius: 16px;
+      overflow: visible;
+      box-shadow: none;
+      width: 100%;
+
+      // 隐藏默认的外边框
+      &::before,
+      &::after {
+        display: none;
+      }
+
+      .el-table__border-left-patch {
+        display: none;
+      }
+
+      // 确保表格列宽自适应且对齐
+      .el-table__header-wrapper,
+      .el-table__body-wrapper,
+      .el-table__footer-wrapper {
+        .el-table__header,
+        .el-table__body,
+        .el-table__footer {
+          width: 100% !important;
+        }
+      }
+
+      // 统一所有单元格的内部padding控制
+      th, td {
+        .cell {
+          padding-left: 0 !important;
+          padding-right: 0 !important;
+        }
+      }
+
+      // 确保行高度自动计算
+      .el-table__row {
+        height: auto !important;
+      }
+
+      // Checkbox列样式优化
+      .el-table-column--selection {
+        .cell {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .el-checkbox {
+          margin: 0;
+
+          .el-checkbox__inner {
+            border-radius: 6px;
+            border: 2px solid rgba(14, 165, 233, 0.3);
+            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+            &:hover {
+              border-color: $primary-start;
+              transform: scale(1.1);
+            }
+          }
+
+          &.is-checked {
+            .el-checkbox__inner {
+              background: linear-gradient(135deg, $primary-start, $primary-end);
+              border-color: $primary-start;
+            }
+          }
+        }
+      }
+
+      // 固定列样式 - 确保完美对齐
+      .el-table__fixed {
+        height: 100% !important;
+        background: transparent;
+        z-index: 3;
+
+        &::before {
+          display: none;
+        }
+
+        // 添加右侧阴影分隔效果
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          width: 3px;
+          background: linear-gradient(90deg,
+            rgba(14, 165, 233, 0.15) 0%,
+            rgba(14, 165, 233, 0.05) 50%,
+            transparent 100%
+          );
+          pointer-events: none;
+        }
+
+        .el-table__fixed-header-wrapper {
+          background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
+
+          th {
+            background: transparent !important;
+            border-right: 2px solid rgba(14, 165, 233, 0.25);
+            border-bottom: 2px solid rgba(14, 165, 233, 0.1);
+            padding: 18px 12px !important;
+            height: auto !important;
+            color: $text-primary;
+            font-weight: 700;
+            font-size: 13px;
+            text-transform: uppercase;
+            letter-spacing: 0.8px;
+
+            .cell {
+              line-height: 1.4;
+              padding: 0 !important;
+            }
+          }
+        }
+
+        .el-table__fixed-body-wrapper {
+          background: transparent;
+
+          .el-table__body {
+            width: 100% !important;
+          }
+
+          td {
+            background: $bg-white !important;
+            border-right: 2px solid rgba(14, 165, 233, 0.25);
+            border-bottom: 1px solid rgba(226, 232, 240, 0.5);
+            padding: 16px 12px !important;
+            height: auto !important;
+            font-size: 13px;
+            color: $text-primary;
+
+            .cell {
+              line-height: 1.4;
+              padding: 0 !important;
+            }
+          }
+
+          .el-table__row {
+            &:nth-child(even) td {
+              background: $bg-stripe !important;
+            }
+
+            &:hover td {
+              background: linear-gradient(90deg, rgba(14, 165, 233, 0.08), rgba(6, 182, 212, 0.08)) !important;
+            }
+
+            &.selected-row td {
+              background: linear-gradient(90deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1)) !important;
+              box-shadow: inset 4px 0 0 0 $secondary-start;
+
+              &:hover {
+                background: linear-gradient(90deg, rgba(139, 92, 246, 0.15), rgba(236, 72, 153, 0.15)) !important;
+              }
+            }
+          }
+        }
+
+        .el-table__fixed-footer-wrapper {
+          background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
+
+          td {
+            background: transparent !important;
+            border-right: 2px solid rgba(249, 115, 22, 0.25);
+            border-top: 2px solid rgba(249, 115, 22, 0.2);
+            border-bottom: none;
+            padding: 18px 12px !important;
+            height: auto !important;
+            color: $text-primary;
+            font-weight: 700;
+            font-size: 14px;
+
+            .cell {
+              line-height: 1.4;
+              padding: 0 !important;
+              font-family: 'JetBrains Mono', monospace;
+            }
+          }
+        }
+      }
+
+      .el-table__fixed-right {
+        &::before {
+          display: none;
+        }
+      }
+
+      // 表头 - 渐变背景
+      .el-table__header-wrapper {
+        background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
+
+        th {
+          background: transparent !important;
+          border-right: 1px solid rgba(226, 232, 240, 0.3);
+          border-bottom: 2px solid rgba(14, 165, 233, 0.1);
+          color: $text-primary;
+          font-weight: 700;
+          font-size: 13px;
+          text-transform: uppercase;
+          letter-spacing: 0.8px;
+          padding: 18px 12px !important;
+          height: auto !important;
+
+          &:last-child {
+            border-right: none;
+          }
+
+          .cell {
+            color: $text-primary;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            line-height: 1.4;
+          }
+        }
+      }
+
+      // 表体 - 斑马纹 + 圆润边框
+      .el-table__body-wrapper {
+        background: $bg-white;
+
+        tr {
+          background: transparent;
+          transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+          &:nth-child(even) {
+            background: $bg-stripe;
+          }
+
+          &:hover > td {
+            background: linear-gradient(90deg, rgba(14, 165, 233, 0.08), rgba(6, 182, 212, 0.08)) !important;
+            transform: scale(1.005);
+          }
+
+          td {
+            border-right: 1px solid rgba(226, 232, 240, 0.3);
+            border-bottom: 1px solid rgba(226, 232, 240, 0.5);
+            color: $text-primary;
+            padding: 16px 12px !important;
+            font-size: 13px;
+            transition: all 0.3s;
+            height: auto !important;
+
+            &:first-child {
+              border-top-left-radius: 8px;
+              border-bottom-left-radius: 8px;
+            }
+
+            &:last-child {
+              border-right: none;
+              border-top-right-radius: 8px;
+              border-bottom-right-radius: 8px;
+            }
+
+            .cell {
+              color: $text-primary;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              line-height: 1.4;
+            }
+
+            .money-cell {
+              font-family: 'JetBrains Mono', monospace;
+              font-weight: 700;
+              font-size: 14px;
+              background: linear-gradient(135deg, $success-start, $success-end);
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+              background-clip: text;
+            }
+          }
+        }
+
+        // 选中行 - 渐变高亮
+        .selected-row {
+          background: linear-gradient(90deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1)) !important;
+
+          > td {
+            background: linear-gradient(90deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1)) !important;
+            border-bottom-color: rgba(139, 92, 246, 0.2);
+          }
+
+          &:hover > td {
+            background: linear-gradient(90deg, rgba(139, 92, 246, 0.15), rgba(236, 72, 153, 0.15)) !important;
+          }
+        }
+      }
+
+      // 合计行 - 渐变背景
+      .el-table__footer-wrapper {
+        background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
+
+        td {
+          border-right: 1px solid rgba(249, 115, 22, 0.2);
+          border-top: 2px solid rgba(249, 115, 22, 0.2);
+          border-bottom: none;
+          color: $text-primary;
+          font-weight: 700;
+          font-size: 14px;
+          padding: 18px 12px !important;
+          height: auto !important;
+
+          &:last-child {
+            border-right: none;
+          }
+
+          .cell {
+            color: $text-primary;
+            font-family: 'JetBrains Mono', monospace;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            line-height: 1.4;
+          }
+        }
+      }
+
+      // 空数据
+      .el-table__empty-block {
+        background: transparent;
+
+        .el-table__empty-text {
+          color: $text-secondary;
+        }
+      }
+    }
+  }
+
+  // 分页
+  .pagination-section {
+    display: flex;
+    justify-content: center;
+    padding: 20px;
+    background: $bg-card;
+    border: 1px solid $border-color;
+    border-radius: 16px;
+    box-shadow: $shadow-sm;
+    animation: slideDown 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
+
+    ::v-deep .el-pagination {
+      .btn-prev,
+      .btn-next,
+      .el-pager li {
+        background: $bg-white;
+        border: 2px solid $border-color;
+        color: $text-primary;
+        border-radius: 10px;
+        min-width: 36px;
+        height: 36px;
+        line-height: 32px;
+        font-weight: 600;
+        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+        box-shadow: $shadow-sm;
+
+        &:hover {
+          background: linear-gradient(135deg, $primary-light, rgba(6, 182, 212, 0.1));
+          border-color: $primary-start;
+          color: $primary-start;
+          transform: translateY(-2px);
+        }
+
+        &.active {
+          background: linear-gradient(135deg, $primary-start, $primary-end);
+          border-color: transparent;
+          color: white;
+          box-shadow: $shadow-color-blue;
+          transform: scale(1.1);
+        }
+      }
+
+      .el-pagination__sizes,
+      .el-pagination__jump {
+        .el-input__inner {
+          background: $bg-white;
+          border: 2px solid $border-color;
+          color: $text-primary;
+          border-radius: 10px;
+          font-weight: 600;
+
+          &:hover {
+            border-color: $primary-start;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Element UI 组件全局样式
+::v-deep {
+  // 下拉菜单
+  .el-select-dropdown {
+    background: $bg-white;
+    border: 2px solid $border-color;
+    border-radius: 12px;
+    box-shadow: $shadow-lg;
+
+    .el-select-dropdown__item {
+      color: $text-primary;
+      font-size: 13px;
+      font-weight: 500;
+      border-radius: 6px;
+      margin: 4px 8px;
+
+      &:hover {
+        background: linear-gradient(135deg, $primary-light, rgba(6, 182, 212, 0.1));
+        color: $primary-start;
+      }
+
+      &.selected {
+        background: linear-gradient(135deg, $primary-start, $primary-end);
+        color: white;
+        font-weight: 700;
+      }
+    }
+  }
+
+  // 日期选择器
+  .el-picker-panel {
+    background: $bg-white;
+    border: 2px solid $border-color;
+    border-radius: 12px;
+    box-shadow: $shadow-lg;
+
+    .el-date-picker__header {
+      color: $text-primary;
+    }
+
+    .el-date-table th {
+      color: $text-secondary;
+      font-weight: 600;
+    }
+
+    .el-date-table td {
+      color: $text-primary;
+
+      &.available:hover {
+        color: $primary-start;
+      }
+
+      &.current:not(.disabled) span {
+        background: linear-gradient(135deg, $primary-start, $primary-end);
+        color: white;
+        font-weight: 700;
+      }
+    }
+  }
+
+  // Loading 遮罩
+  .el-loading-mask {
+    background-color: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(8px);
+
+    .el-loading-spinner {
+      .path {
+        stroke: $primary-start;
+      }
+
+      .el-loading-text {
+        color: $text-primary;
+        font-weight: 600;
+      }
+    }
+  }
+
+  // 消息提示
+  .el-message {
+    background: $bg-white;
+    border: 2px solid $border-color;
+    border-radius: 12px;
+    box-shadow: $shadow-lg;
+    color: $text-primary;
+  }
+
+  // Tooltip 提示框美化 - 精致的暗色主题
+  .el-tooltip__popper {
+    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98)) !important;
+    border: 2px solid rgba(14, 165, 233, 0.4) !important;
+    border-radius: 12px !important;
+    padding: 14px 18px !important;
+    box-shadow:
+      0 20px 60px rgba(0, 0, 0, 0.3),
+      0 0 0 1px rgba(255, 255, 255, 0.08) inset,
+      0 4px 12px rgba(14, 165, 233, 0.2) !important;
+    color: #ffffff !important;
+    font-size: 13px !important;
+    font-weight: 500 !important;
+    line-height: 1.7 !important;
+    max-width: 450px !important;
+    word-break: break-word;
+    backdrop-filter: blur(16px);
+    animation: tooltipFadeIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+    z-index: 9999 !important;
+
+    // 添加光晕效果
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -2px;
+      background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(6, 182, 212, 0.2));
+      border-radius: 12px;
+      z-index: -1;
+      opacity: 0.5;
+      filter: blur(8px);
+    }
+
+    // 箭头样式
+    &[x-placement^="top"] .popper__arrow {
+      border-top-color: rgba(14, 165, 233, 0.4) !important;
+
+      &::after {
+        border-top-color: rgba(15, 23, 42, 0.98) !important;
+        margin-top: -2px;
+      }
+    }
+
+    &[x-placement^="bottom"] .popper__arrow {
+      border-bottom-color: rgba(14, 165, 233, 0.4) !important;
+
+      &::after {
+        border-bottom-color: rgba(15, 23, 42, 0.98) !important;
+        margin-bottom: -2px;
+      }
+    }
+
+    &[x-placement^="left"] .popper__arrow {
+      border-left-color: rgba(14, 165, 233, 0.4) !important;
+
+      &::after {
+        border-left-color: rgba(15, 23, 42, 0.98) !important;
+        margin-left: -2px;
+      }
+    }
+
+    &[x-placement^="right"] .popper__arrow {
+      border-right-color: rgba(14, 165, 233, 0.4) !important;
+
+      &::after {
+        border-right-color: rgba(15, 23, 42, 0.98) !important;
+        margin-right: -2px;
+      }
+    }
+
+    .popper__arrow {
+      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+    }
+  }
+
+  @keyframes tooltipFadeIn {
+    from {
+      opacity: 0;
+      transform: scale(0.92) translateY(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
     }
   }
 }