app的ui修改

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

@@ -387,34 +387,55 @@ export default {
 </script>
 
 <style scoped>
+/* 简洁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: 20rpx;
+  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;
+  margin: 0 20rpx 20rpx;
+  background: #fff;
+  border-radius: 12rpx;
+  border: 1rpx solid #e8e8e8;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
 }
 
 .date-range {
@@ -427,9 +448,16 @@ 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;
+  }
 }
 </style>