app的ui修改

apps/hand-factory/components/lines/zinc3.vue

@@ -1,12 +1,17 @@
 <template>
   <view>
-    <view class="tab">
-      <uni-data-checkbox
-        mode="tag"
-        selectedColor="#2bf"
-        v-model="currentTab"
-        :localdata="tabData"
-      ></uni-data-checkbox>
+    <!-- 简洁标签栏 -->
+    <view class="tab-container">
+      <view 
+        v-for="item in tabData" 
+        :key="item.value"
+        @click="currentTab = item.value"
+        class="tab-item"
+        :class="{ 'tab-active': currentTab === item.value }"
+      >
+        <text class="tab-label">{{ item.text }}</text>
+        <view class="tab-indicator" v-if="currentTab === item.value"></view>
+      </view>
     </view>
     
     <scroll-view scroll-y v-if="currentTab === 1">
@@ -210,74 +215,96 @@ page {
   overflow: auto;
 }
 
-/* 滚动视图间隙（原代码选择器可能笔误，保留原逻辑） */
-view-scroll {
-  gap: 30rpx;
-}
-
-/* 标签页容器样式 */
-.tab {
-  margin: auto;
+/* 简洁标签栏 */
+.tab-container {
   display: flex;
-  box-sizing: border-box;
+  width: 100%;
+  background: #fff;
+  padding: 0 20rpx;
+  margin-bottom: 20rpx;
+  border-bottom: 1rpx solid #e8e8e8;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+}
+
+.tab-item {
+  flex: 1;
+  text-align: center;
+  padding: 30rpx 0;
+  position: relative;
+  display: flex;
+  align-items: center;
   justify-content: center;
-  top: 88rpx; /* 需配合 position: sticky 生效，原代码未加，可根据需求补充 */
-  position: sticky; /* 补充粘性定位，确保标签页滚动时固定在顶部 */
-  z-index: 999;
-  background-color: #fff;
-  padding: 10rpx 0; /* 补充内边距，优化点击体验 */
+  transition: all 0.3s ease;
+  
+  .tab-label {
+    font-size: 28rpx;
+    color: #666;
+    font-weight: 400;
+    transition: all 0.3s ease;
+  }
+  
+  &.tab-active {
+    .tab-label {
+      color: #1a73e8;
+      font-weight: 600;
+    }
+  }
+  
+  .tab-indicator {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 50rpx;
+    height: 4rpx;
+    background: #1a73e8;
+    border-radius: 2rpx;
+  }
 }
 
-/* 内容卡片样式 */
+/* 内容卡片 */
 .content-card {
-  border-radius: 16rpx; /* 补充圆角，与设计风格统一 */
-  overflow: hidden; /* 防止内部内容溢出卡片 */
+  background: #fff;
+  margin-bottom: 20rpx;
 }
 
-/* 指标容器样式 */
+/* 指标容器 */
 .metric-container {
   display: flex;
   justify-content: space-around;
-  background-color: white;
-  padding: 20rpx 0;
+  background: #fff;
+  padding: 0;
 }
 
-/* 单个指标项样式 */
+/* 指标项 */
 .metric-item {
   flex: 1;
   text-align: center;
   padding: 32rpx;
   border-radius: 12rpx;
-  transition: all 0.3s;
-  margin: 0 10rpx; /* 补充左右间距，避免指标过挤 */
-  background-color: #f8f9fa; /* 补充背景色，区分指标区域 */
+  transition: all 0.2s;
 }
 
-/* 指标数值样式 */
 .metric-value {
   font-size: 48rpx;
   font-weight: 600;
   margin-bottom: 16rpx;
   line-height: 1.2;
-  color: #333;
 }
 
-/* 指标标签样式 */
 .metric-label {
   font-size: 28rpx;
   color: #666;
-  letter-spacing: 2rpx;
+  letter-spacing: 1rpx;
 }
 
-/* 机组跟踪信息容器 */
+/* 信息容器 */
 .info-container {
   padding: 20rpx;
   background: #fff;
   border-radius: 12rpx;
-  border-top: 1px solid #eee; /* 补充上边框，区分标题与内容 */
 }
 
-/* 信息行样式 */
 .info-row {
   display: flex;
   justify-content: space-between;
@@ -288,26 +315,33 @@ view-scroll {
   }
 }
 
-/* 单个信息项样式 */
+/* 信息项 */
 .info-item {
-  flex: 0 0 48%; /* 留出4%的间隔，避免内容溢出 */
+  flex: 0 0 48%;
   display: flex;
-  align-items: baseline; /* 文字基线对齐，排版更整齐 */
+  align-items: baseline;
+  padding: 16rpx 20rpx;
+  background: #f8f9fa;
+  border-radius: 10rpx;
+  border: 1rpx solid #e8e8e8;
+  transition: all 0.2s ease;
+  
+  &:active {
+    background: #f0f2f5;
+  }
 }
 
-/* 信息标签样式 */
 .info-label {
   color: #666;
-  font-size: 28rpx;
+  font-size: 26rpx;
   flex-shrink: 0;
   margin-right: 16rpx;
 }
 
-/* 信息数值样式 */
 .info-value {
   color: #333;
-  font-size: 30rpx;
+  font-size: 28rpx;
   font-weight: 500;
-  word-break: break-all; /* 长文本自动换行，防止超出容器 */
+  word-break: break-all;
 }
 </style>