app的ui修改

apps/hand-factory/components/klp-collapse-panel/klp-collapse-panel.vue

@@ -86,7 +86,7 @@ export default {
     justify-content: space-between;
     align-items: center;
     padding: 24rpx;
-    background-color: #2bf;
+    background-color: #1a73e8;
     color: white;
     transition: background-color 0.2s;
 

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;
+  background: #fff;
-  justify-content: space-evenly;
+  margin-bottom: 20rpx;
-  background-color: #2bf; /* 修正原代码笔误（2bf → #2bf） */
+  border-radius: 12rpx;
-  margin-bottom: 30rpx;
   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;
+  padding: 24rpx 20rpx;
-  color: white;
+  color: #666;
-  transition: all 0.3s;
+  font-size: 28rpx;
-  border: 2rpx solid transparent;
+  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;
+  color: #fff;
-  border-color: white;
+  background: #1a73e8;
-  border-radius: 20rpx;
+  font-weight: 600;
 }
 
+/* 日期选择器 */
 .date-picker {
-  padding: 15rpx;
+  padding: 20rpx;
-  background-color: #fff;
+  background: #fff;
-  border-radius: 10rpx;
+  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;
+  padding: 20rpx;
-  background-color: #f8f8f8;
+  background: #f8f9fa;
-  border-radius: 8rpx;
+  border-radius: 10rpx;
-  color: #666;
+  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;
+  padding: 30rpx;
-  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
+  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>

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;
+  background: #fff;
-  justify-content: space-evenly;
+  margin: 20rpx;
-  background-color: #2bf; /* 原代码笔误“2bf”，修正为“#2bf” */
+  margin-bottom: 20rpx;
-  margin-bottom: 30rpx;
+  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;
+  padding: 24rpx 20rpx;
-  color: white;
+  color: #666;
-  transition: all 0.3s;
+  font-size: 28rpx;
-  border: 2rpx solid transparent;
+  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;
+  color: #fff;
-  border-color: white;
+  background: #1a73e8;
-  border-radius: 20rpx;
+  font-weight: 600;
 }
 
+/* 日期选择器 */
 .date-picker {
-  padding: 15rpx;
+  padding: 20rpx;
-  background-color: #fff;
+  margin: 0 20rpx 20rpx;
-  border-radius: 10rpx;
+  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;
+  padding: 20rpx;
-  background-color: #f8f8f8;
+  background: #f8f9fa;
-  border-radius: 8rpx;
+  border-radius: 10rpx;
-  color: #666;
+  color: #333;
+  font-size: 28rpx;
+  border: 1rpx solid #e8e8e8;
+  transition: all 0.2s ease;
+  
+  &:active {
+    background: #f0f2f5;
+  }
 }
 </style>

apps/hand-factory/components/klp-team-performance/klp-team-performance.vue

@@ -141,6 +141,7 @@ export default {
 </script>
 
 <style scoped>
+/* 月份选择器 */
 .month-picker {
   padding: 20rpx;
 }
@@ -148,10 +149,11 @@ export default {
 .picker-content {
   display: flex;
   align-items: center;
-  padding: 20rpx;
+  padding: 24rpx 20rpx;
-  background-color: #f8f8f8;
+  background: #fff;
-  border-radius: 8rpx;
+  border-radius: 12rpx;
-  border: 1rpx solid #eee;
+  border: 1rpx solid #e8e8e8;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
 }
 
 .month-display {
@@ -162,20 +164,22 @@ export default {
 }
 
 .arrow {
-  padding: 0 20rpx;
+  padding: 0 24rpx;
-  font-size: 28rpx;
+  font-size: 32rpx;
-  color: #2bf;
+  color: #1a73e8;
   cursor: pointer;
-  transition: opacity 0.3s;
+  transition: all 0.2s ease;
-}
+  font-weight: 600;
-
+  
-.arrow:active {
+  &:active {
-  opacity: 0.7;
+    opacity: 0.7;
-}
+    transform: scale(0.9);
-
+  }
-.arrow.disabled {
+  
-  color: #ccc;
+  &.disabled {
-  pointer-events: none;
+    color: #ccc;
+    pointer-events: none;
+  }
 }
 
 .label {
@@ -184,15 +188,15 @@ export default {
 }
 
 .month-text {
-  color: #333;
+  color: #1a73e8;
-  font-weight: bold;
+  font-weight: 600;
-  margin: 0 15rpx;
+  font-size: 30rpx;
+  margin: 0 20rpx;
 }
 
 .icon {
   color: #999;
   font-size: 24rpx;
-  transform: scale(0.8);
   margin-left: 20rpx;
 }
 </style>

apps/hand-factory/components/klp-ui/k-collapse-panel/k-collapse-panel.vue

@@ -74,29 +74,33 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+/* 简洁折叠面板 */
 .collapse-panel {
   margin: 16rpx 0;
-  border-radius: 8rpx;
+  border-radius: 16rpx;
   overflow: hidden;
-  border: 1rpx solid #eee;
+  background: #ffffff;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  border: 1rpx solid #e8e8e8;
+  transition: all 0.3s ease;
 
   .collapse-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 24rpx;
+    padding: 24rpx 30rpx;
-    background-color: #2bf;
+    background: #1a73e8;
     color: white;
-    transition: background-color 0.2s;
+    transition: all 0.2s ease;
 
     &:active {
-      background-color: #f1f3f5;
+      opacity: 0.9;
     }
 
     .title {
       font-size: 32rpx;
-      font-weight: 500;
+      font-weight: 600;
-      color: white;
+      color: #ffffff;
       display: flex;
       align-items: center;
       gap: 12rpx;
@@ -116,6 +120,9 @@ export default {
     .arrow {
       transition: transform 0.3s ease;
       color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
       &-open {
         transform: rotate(90deg);
@@ -125,10 +132,9 @@ export default {
 
   .collapse-content {
     overflow: hidden;
-    padding: 0 24rpx;
+    padding: 0;
-    background-color: #fff;
+    background: #fff;
     
-    // 展开动画
     &-enter-active,
     &-leave-active {
       transition: all 0.3s ease;

apps/hand-factory/components/klp-ui/k-info-card/k-info-card.vue

@@ -56,62 +56,83 @@ export default {
 </script>
 
 <style scoped>
-/* 卡片容器 */
+/* 简洁信息卡片容器 */
 .card-container {
   overflow: hidden;
-  background: #fff;
+  background: #ffffff;
-  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  border: 1rpx solid #e8e8e8;
+  transition: all 0.2s ease;
+  
+  &:active {
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
 }
 
-/* 头部样式 */
+/* 简洁头部样式 */
 .card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20rpx;
+  padding: 24rpx 30rpx;
+  background: #1a73e8;
 }
 
 .header-title {
   font-size: 32rpx;
-  color: #333;
+  color: #ffffff;
+  font-weight: 600;
 }
 
 .header-value {
   font-size: 36rpx;
-  color: #2a7ae9;
+  color: #ffffff;
-  font-weight: 500;
+  font-weight: 700;
 }
 
 /* 信息容器 */
 .info-container {
-  padding: 20rpx;
+  padding: 30rpx;
   display: flex;
   box-sizing: border-box;
   flex-wrap: wrap;
-  justify-content: space-between;
+  gap: 20rpx;
+  background: #fff;
 }
 
 .info-row {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 24rpx;
+  margin-bottom: 20rpx;
 }
 
+/* 信息项 */
 .info-item {
   display: flex;
   align-items: baseline;
+  flex: 0 0 calc(50% - 10rpx);
+  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;
 }

apps/hand-factory/components/klp-ui/k-metric-card/k-metric-card.vue

@@ -27,42 +27,54 @@ export default {
 </script>
 
 <style scoped>
+/* 简洁指标卡片容器 */
 .metric-container {
   display: grid;
   gap: 20rpx;
-  padding: 20rpx;
+  padding: 30rpx;
   box-sizing: border-box;
-  background-color: #fff;
+  background: #fff;
-  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
 }
 
+/* 单个指标项 */
 .metric-item {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 20rpx;
+  padding: 30rpx 20rpx;
+  background: #f8f9fa;
+  border-radius: 12rpx;
+  border: 1rpx solid #e8e8e8;
+  transition: all 0.2s ease;
+  
+  &:active {
+    background: #f0f2f5;
+  }
 }
 
+/* 指标数值 */
 .metric-value {
   font-size: 48rpx;
   font-weight: 600;
   margin-bottom: 16rpx;
   line-height: 1.2;
-  color: #333;
+  color: #1a73e8;
 }
 
+/* 单位 */
 .metric-unit {
   font-size: 0.7em;
   color: #999;
   margin-left: 8rpx;
 }
 
+/* 指标标签 */
 .metric-label {
-  font-size: 28rpx;
+  font-size: 26rpx;
   color: #666;
-  letter-spacing: 2rpx;
+  letter-spacing: 1rpx;
   text-align: center;
-  line-height: 1.4;
+  line-height: 1.5;
 }
 </style>

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

@@ -1,13 +1,17 @@
 <template>
   <view>
-    <view class="tab">
+    <!-- 简洁标签栏 -->
-     <!-- <uni-data-checkbox
+    <view class="tab-container">
-        mode="tag"
+      <view 
-        selectedColor="#2bf"
+        v-for="item in tabData" 
-        v-model="currentTab"
+        :key="item.value"
-        :localdata="tabData"
+        @click="currentTab = item.value"
-      ></uni-data-checkbox> -->
+        class="tab-item"
-			<head-tabs-vue v-model="currentTab" />
+        :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">
@@ -105,6 +109,12 @@ export default {
   data() {
     return {
       currentTab: 1,
+      tabData: [
+        { text: "实时监控", value: 1 },
+        { text: "生产统计", value: 2 },
+        { text: "停机统计", value: 3 },
+        { text: "班组绩效", value: 4 }
+      ],
       chartData: {},
       webStatus: [
         { label: '网络状态', value: '正常' },
@@ -215,26 +225,60 @@ export default {
 </script>
 
 <style scoped lang="scss">
-view-scroll {
+/* 简洁标签栏 */
-  gap: 30rpx;
+.tab-container {
-}
-
-.tab {
-  margin: auto;
   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;
-  position: sticky;
+  transition: all 0.3s ease;
-  top: 88rpx;
+  
-  z-index: 999;
+  .tab-label {
-  background-color: #fff;
+    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;
 }
 
-/** */
+/* 信息容器 */
 .info-container {
   padding: 20rpx;
   background: #fff;
@@ -251,33 +295,49 @@ 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;
 }
 
+/* 过滤按钮 */
 .filter-btn {
   display: flex;
   align-items: center;
   gap: 8rpx;
   padding: 8rpx 16rpx;
   background: rgba(255, 255, 255, 0.2);
-  border-radius: 4rpx;
+  border-radius: 20rpx;
+  transition: all 0.2s ease;
+  
+  &:active {
+    background: rgba(255, 255, 255, 0.3);
+  }
   
   .filter-text {
     font-size: 24rpx;
@@ -285,8 +345,9 @@ view-scroll {
   }
 }
 
+/* 弹出层样式 */
 .popup-content {
-  background-color: #fff;
+  background: #ffffff;
   border-radius: 24rpx 24rpx 0 0;
   padding: 32rpx;
   
@@ -298,11 +359,16 @@ view-scroll {
     
     .popup-title {
       font-size: 32rpx;
-      font-weight: 500;
+      font-weight: 600;
+      color: #333;
     }
     
     .popup-close {
       padding: 8rpx;
+      
+      &:active {
+        opacity: 0.6;
+      }
     }
   }
   

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

@@ -1,12 +1,17 @@
 <template>
   <view>
-    <view class="tab">
+    <!-- 简洁标签栏 -->
-      <uni-data-checkbox
+    <view class="tab-container">
-        mode="tag"
+      <view 
-        selectedColor="#2bf"
+        v-for="item in tabData" 
-        v-model="currentTab"
+        :key="item.value"
-        :localdata="tabData"
+        @click="currentTab = item.value"
-      ></uni-data-checkbox>
+        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-container {
-}
-
-.tab {
-  margin: auto;
   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;
+  transition: all 0.3s ease;
-  z-index: 999;
+  
-  background-color: #fff;
+  .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>

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

@@ -1,12 +1,17 @@
 <template>
   <view>
-    <view class="tab">
+    <!-- 简洁标签栏 -->
-      <uni-data-checkbox
+    <view class="tab-container">
-        mode="tag"
+      <view 
-        selectedColor="#2bf"
+        v-for="item in tabData" 
-        v-model="currentTab"
+        :key="item.value"
-        :localdata="tabData"
+        @click="currentTab = item.value"
-      ></uni-data-checkbox>
+        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">
@@ -48,16 +53,18 @@
 
       <view class="content-card">
         <klp-collapse-panel title="机组跟踪">
-          <view style="padding: 30rpx; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 20rpx;">
+          <view style="padding: 30rpx; display: flex; flex-direction: column; gap: 20rpx;">
-            <view style="display: flex; justify-content: space-between; align-items: center; padding: 20rpx; background-color: #d9edf6; border-radius: 10rpx;">
+            <view class="device-card">
-              <text>轧机</text>
+              <view class="device-header">
-              <text>6390000</text>
+                <text class="device-name">轧机</text>
+                <text class="device-value">6390000</text>
+              </view>
             </view>
 
-            <view style="border-radius: 10rpx; overflow: hidden;">
+            <view class="device-card">
-              <view style="display: flex; justify-content: space-between; align-items: center; padding: 20rpx; background-color: #d9edf6; border: 1px solid #d9edf6;">
+              <view class="device-header">
-                <text>圆剪盘</text>
+                <text class="device-name">圆剪盘</text>
-                <text>6390000</text>
+                <text class="device-value">6390000</text>
               </view>
               <view class="info-container">
                 <view class="info-row">
@@ -84,15 +91,17 @@
               </view>
             </view>
 
-            <view style="display: flex; justify-content: space-between; align-items: center; padding: 20rpx; background-color: #d9edf6; border-radius: 10rpx;">
+            <view class="device-card">
-              <text>酸洗</text>
+              <view class="device-header">
-              <text>6390000</text>
+                <text class="device-name">酸洗</text>
+                <text class="device-value">6390000</text>
+              </view>
             </view>
 
-            <view style="border-radius: 10rpx; overflow: hidden;">
+            <view class="device-card">
-              <view style="display: flex; justify-content: space-between; align-items: center; padding: 20rpx; background-color: #d9edf6; border: 1px solid #d9edf6;">
+              <view class="device-header">
-                <text>入口活套</text>
+                <text class="device-name">入口活套</text>
-                <text>6390000</text>
+                <text class="device-value">6390000</text>
               </view>
               <view class="info-container">
                 <view class="info-row">
@@ -204,80 +213,96 @@ export default {
 </script>
 
 <style scoped lang="scss">
-page {
+/* 简洁标签栏 */
-  background-color: #b2b2b2;
+.tab-container {
-  height: 100vh;
+  display: flex !important;
-  overflow: auto;
+  width: 100%;
+  background: #ffffff;
+  padding: 0 20rpx;
+  margin-bottom: 20rpx;
+  border-bottom: 1rpx solid #e8e8e8;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+  min-height: 88rpx;
 }
 
-/* 滚动视图间隙（原代码选择器可能笔误，保留原逻辑） */
+.tab-item {
-view-scroll {
+  flex: 1;
-  gap: 30rpx;
+  text-align: center;
-}
+  padding: 30rpx 10rpx;
-
+  position: relative;
-/* 标签页容器样式 */
-.tab {
-  margin: auto;
   display: flex;
-  box-sizing: border-box;
+  align-items: center;
   justify-content: center;
-  top: 88rpx; /* 需配合 position: sticky 生效，原代码未加，可根据需求补充 */
+  transition: all 0.3s ease;
-  position: sticky; /* 补充粘性定位，确保标签页滚动时固定在顶部 */
+  cursor: pointer;
-  z-index: 999;
-  background-color: #fff;
-  padding: 10rpx 0; /* 补充内边距，优化点击体验 */
 }
 
-/* 内容卡片样式 */
+.tab-label {
+  font-size: 28rpx;
+  color: #666;
+  font-weight: 400;
+  transition: all 0.3s ease;
+}
+
+.tab-item.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; /* 补充圆角，与设计风格统一 */
+  background: #fff;
-  overflow: hidden; /* 防止内部内容溢出卡片 */
+  margin-bottom: 20rpx;
 }
 
-/* 指标容器样式 */
+/* 指标容器 */
 .metric-container {
   display: flex;
   justify-content: space-around;
-  background-color: white;
+  background: #fff;
-  padding: 20rpx 0;
+  padding: 0;
 }
 
-/* 单个指标项样式 */
+/* 指标项 */
 .metric-item {
   flex: 1;
   text-align: center;
   padding: 32rpx;
   border-radius: 12rpx;
-  transition: all 0.3s;
+  transition: all 0.2s;
-  margin: 0 10rpx; /* 补充左右间距，避免指标过挤 */
-  background-color: #f8f9fa; /* 补充背景色，区分指标区域 */
 }
 
-/* 指标数值样式 */
 .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 +313,62 @@ 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;
+}
+
+/* 设备卡片 */
+.device-card {
+  background: #fff;
+  border-radius: 12rpx;
+  overflow: hidden;
+  border: 1rpx solid #e8e8e8;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+}
+
+.device-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20rpx 24rpx;
+  background: #1a73e8;
+  
+  .device-name {
+    font-size: 28rpx;
+    color: #fff;
+    font-weight: 600;
+  }
+  
+  .device-value {
+    font-size: 28rpx;
+    color: #fff;
+    font-weight: 600;
+  }
 }
 </style>

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

@@ -1,12 +1,17 @@
 <template>
   <view>
-    <view class="tab">
+    <!-- 简洁标签栏 -->
-      <uni-data-checkbox
+    <view class="tab-container">
-        mode="tag"
+      <view 
-        selectedColor="#2bf"
+        v-for="item in tabData" 
-        v-model="currentTab"
+        :key="item.value"
-        :localdata="tabData"
+        @click="currentTab = item.value"
-      ></uni-data-checkbox>
+        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 {
+.tab-container {
-  gap: 30rpx;
-}
-
-/* 标签页容器样式 */
-.tab {
-  margin: auto;
   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 生效，原代码未加，可根据需求补充 */
+  transition: all 0.3s ease;
-  position: sticky; /* 补充粘性定位，确保标签页滚动时固定在顶部 */
+  
-  z-index: 999;
+  .tab-label {
-  background-color: #fff;
+    font-size: 28rpx;
-  padding: 10rpx 0; /* 补充内边距，优化点击体验 */
+    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; /* 补充圆角，与设计风格统一 */
+  background: #fff;
-  overflow: hidden; /* 防止内部内容溢出卡片 */
+  margin-bottom: 20rpx;
 }
 
-/* 指标容器样式 */
+/* 指标容器 */
 .metric-container {
   display: flex;
   justify-content: space-around;
-  background-color: white;
+  background: #fff;
-  padding: 20rpx 0;
+  padding: 0;
 }
 
-/* 单个指标项样式 */
+/* 指标项 */
 .metric-item {
   flex: 1;
   text-align: center;
   padding: 32rpx;
   border-radius: 12rpx;
-  transition: all 0.3s;
+  transition: all 0.2s;
-  margin: 0 10rpx; /* 补充左右间距，避免指标过挤 */
-  background-color: #f8f9fa; /* 补充背景色，区分指标区域 */
 }
 
-/* 指标数值样式 */
 .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>

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

@@ -1,12 +1,17 @@
 <template>
   <view>
-    <view class="tab">
+    <!-- 简洁标签栏 -->
-      <uni-data-checkbox
+    <view class="tab-container">
-        mode="tag"
+      <view 
-        selectedColor="#2bf"
+        v-for="item in tabData" 
-        v-model="currentTab"
+        :key="item.value"
-        :localdata="tabData"
+        @click="currentTab = item.value"
-      ></uni-data-checkbox>
+        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 {
+.tab-container {
-  gap: 30rpx;
-}
-
-/* 标签页容器样式 */
-.tab {
-  margin: auto;
   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 生效，原代码未加，可根据需求补充 */
+  transition: all 0.3s ease;
-  position: sticky; /* 补充粘性定位，确保标签页滚动时固定在顶部 */
+  
-  z-index: 999;
+  .tab-label {
-  background-color: #fff;
+    font-size: 28rpx;
-  padding: 10rpx 0; /* 补充内边距，优化点击体验 */
+    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; /* 补充圆角，与设计风格统一 */
+  background: #fff;
-  overflow: hidden; /* 防止内部内容溢出卡片 */
+  margin-bottom: 20rpx;
 }
 
-/* 指标容器样式 */
+/* 指标容器 */
 .metric-container {
   display: flex;
   justify-content: space-around;
-  background-color: white;
+  background: #fff;
-  padding: 20rpx 0;
+  padding: 0;
 }
 
-/* 单个指标项样式 */
+/* 指标项 */
 .metric-item {
   flex: 1;
   text-align: center;
   padding: 32rpx;
   border-radius: 12rpx;
-  transition: all 0.3s;
+  transition: all 0.2s;
-  margin: 0 10rpx; /* 补充左右间距，避免指标过挤 */
-  background-color: #f8f9fa; /* 补充背景色，区分指标区域 */
 }
 
-/* 指标数值样式 */
 .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>

apps/hand-factory/components/panels/klp-tabs/klp-tabs.vue

@@ -1,5 +1,5 @@
 <template>
-	<uni-data-checkbox mode="tag" selectedColor="#2bf" v-model="currentTab" :localdata="tabData"></uni-data-checkbox>
+	<uni-data-checkbox mode="tag" selectedColor="#1a73e8" v-model="currentTab" :localdata="tabData"></uni-data-checkbox>
 </template>
 
 <script>

apps/hand-factory/pages/index.vue

@@ -49,6 +49,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
+/* 主容器 - 简洁背景 */
 .production-page {
 	min-height: 100vh;
 	background: #f6f6f6;
@@ -91,7 +92,8 @@ export default {
 	background: #fff;
 }
 
+/* 内容容器 */
 .content-wrapper {
-	padding: 20rpx;
+	padding: 0;
 }
 </style>