app的ui修改

apps/hand-factory/components/lines/paint.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">
@@ -152,6 +157,12 @@ export default {
   data() {
     return {
       currentTab: 1, // 当前选中的标签页
+      tabData: [
+        { text: "实时监控", value: 1 },
+        { text: "生产统计", value: 2 },
+        { text: "停机统计", value: 3 },
+        { text: "班组绩效", value: 4 }
+      ],
       status: [ // 状态指标数据（供 k-metric-card 使用）
         { label: '网络状态', value: '正常' },
         { label: '当前班组', value: '乙 / 中' }
@@ -190,36 +201,74 @@ 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;
-  z-index: 999;
-  background-color: #fff;
+  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 {
-  background-color: white;
+  background: #fff;
+  margin-bottom: 20rpx;
 }
 
+/* 指标容器 */
 .metric-container {
   display: flex;
   justify-content: space-around;
-  background-color: white;
+  background: #fff;
+  padding: 0;
 }
 
+/* 指标项 */
 .metric-item {
   flex: 1;
   text-align: center;
   padding: 32rpx;
   border-radius: 12rpx;
-  transition: all 0.3s;
+  transition: all 0.2s;
 }
 
 .metric-value {
@@ -232,10 +281,10 @@ view-scroll {
 .metric-label {
   font-size: 28rpx;
   color: #666;
-  letter-spacing: 2rpx;
+  letter-spacing: 1rpx;
 }
 
-/** 机组跟踪信息容器样式 */
+/* 信息容器 */
 .info-container {
   padding: 20rpx;
   background: #fff;
@@ -252,23 +301,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>