app的ui修改

apps/hand-factory/components/klp-product-statistic/klp-product-statistic.vue

@@ -86,7 +86,7 @@
         :autoplay="false"
         :circular="false"
         :indicator-dots="true"
-        indicator-active-color="#2bf"
+        indicator-active-color="#1a73e8"
         indicator-color="#e5e5e5"
       >
         <swiper-item v-for="(item, index) in chanLiangChartConfig" :key="index">
@@ -108,7 +108,7 @@
         :autoplay="false"
         :circular="false"
         :indicator-dots="true"
-        indicator-active-color="#2bf"
+        indicator-active-color="#1a73e8"
         indicator-color="#e5e5e5"
       >
         <swiper-item v-for="(item, index) in summaryChartConfig" :key="index">
@@ -372,37 +372,57 @@ export default {
 
 <style scoped>
 .container {
-  /* padding: 20rpx; */
+  padding: 20rpx;
 }
 
+/* 简洁Tab容器 */
 .tab-container {
   display: flex;
   box-sizing: border-box;
-  padding: 20rpx 0;
-  justify-content: space-evenly;
-  background-color: #2bf; /* 修正原代码笔误（2bf → #2bf） */
-  margin-bottom: 30rpx;
+  background: #fff;
+  margin-bottom: 20rpx;
+  border-radius: 12rpx;
   overflow: hidden;
+  border: 1rpx solid #e8e8e8;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
 }
 
 .tab-item {
+  flex: 1;
   text-align: center;
-  padding: 20rpx;
-  color: white;
-  transition: all 0.3s;
-  border: 2rpx solid transparent;
+  padding: 24rpx 20rpx;
+  color: #666;
+  font-size: 28rpx;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  position: relative;
+  
+  &:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1rpx;
+    height: 40rpx;
+    background: #e8e8e8;
+  }
 }
 
 .tab-item.active {
-  color: white;
-  border-color: white;
-  border-radius: 20rpx;
+  color: #fff;
+  background: #1a73e8;
+  font-weight: 600;
 }
 
+/* 日期选择器 */
 .date-picker {
-  padding: 15rpx;
-  background-color: #fff;
-  border-radius: 10rpx;
+  padding: 20rpx;
+  background: #fff;
+  border-radius: 12rpx;
+  margin-bottom: 20rpx;
+  border: 1rpx solid #e8e8e8;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
 }
 
 .date-range {
@@ -415,28 +435,31 @@ export default {
 }
 
 .picker-text {
-  padding: 15rpx;
-  background-color: #f8f8f8;
-  border-radius: 8rpx;
-  color: #666;
+  padding: 20rpx;
+  background: #f8f9fa;
+  border-radius: 10rpx;
+  color: #333;
+  font-size: 28rpx;
+  border: 1rpx solid #e8e8e8;
+  transition: all 0.2s ease;
+  
+  &:active {
+    background: #f0f2f5;
+  }
 }
 
-/* 图表轮播容器样式 */
+/* 图表容器 */
 .chart-container {
-  margin: 30rpx 0;
+  margin-bottom: 20rpx;
   background: #fff;
   border-radius: 16rpx;
-  padding: 20rpx;
-  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
+  padding: 30rpx;
+  border: 1rpx solid #e8e8e8;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
 }
 
 .chart-swiper {
   height: 500rpx;
   box-sizing: border-box;
 }
-
-/* 图表项标题样式（原代码未生效，保留备用） */
-.chart-item-title {
-  font-weight: 900;
-}
 </style>