app的ui修改

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

@@ -1,13 +1,17 @@
 <template>
   <view>
-    <view class="tab">
-     <!-- <uni-data-checkbox
-        mode="tag"
-        selectedColor="#2bf"
-        v-model="currentTab"
-        :localdata="tabData"
-      ></uni-data-checkbox> -->
-			<head-tabs-vue v-model="currentTab" />
+    <!-- 简洁标签栏 -->
+    <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">
@@ -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 {
-  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;
-  position: sticky;
-  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;
 }
 
-/** */
+/* 信息容器 */
 .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;
+      }
     }
   }