From 6dac8011f038d10ccdc79516497c62d06a7dee96 Mon Sep 17 00:00:00 2001
From: tianyongbao <tianyongbao@haier.com>
Date: Mon, 19 Jan 2026 22:34:37 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84=EF=BC=8C=E9=80=BB=E8=BE=91=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/other/index.vue | 167 +++++++++++++++++----------------
 1 file changed, 88 insertions(+), 79 deletions(-)

diff --git a/src/components/other/index.vue b/src/components/other/index.vue
index 1247d63..69d3116 100644
--- a/src/components/other/index.vue
+++ b/src/components/other/index.vue
@@ -196,10 +196,10 @@
                 </view>
               </view>
             </nut-config-provider>
-            <nut-row class="m_t_20" style="width: 100%; overflow: hidden;">
+            <view class="m_t_20" style="width: 100%; box-sizing: border-box;">
               <view class="chart-header-row">
-                <view class="chart-title">
-                  <text class="title-text">{{
+                <view class="left-section">
+                  <text class="chart-title-text">{{
                     prDev === 1
                       ? "溶解氧"
                       : prDev === 2
@@ -213,33 +213,35 @@
                       : ""
                   }}</text>
                 </view>
-                <view class="day-selector">
-                  <view
-                    class="day-btn"
-                    :class="{ active: dayDev === 1 }"
-                    @click="changeDay(1)"
-                  >
-                    1天
-                  </view>
-                  <view
-                    class="day-btn"
-                    :class="{ active: dayDev === 3 }"
-                    @click="changeDay(3)"
-                  >
-                    3天
-                  </view>
-                  <view
-                    class="day-btn"
-                    :class="{ active: dayDev === 7 }"
-                    @click="changeDay(7)"
-                  >
-                    7天
+                <view class="center-section">
+                  <view class="day-selector">
+                    <view
+                      class="day-btn"
+                      :class="{ active: dayDev === 1 }"
+                      @click="changeDay(1)"
+                    >
+                      1天
+                    </view>
+                    <view
+                      class="day-btn"
+                      :class="{ active: dayDev === 3 }"
+                      @click="changeDay(3)"
+                    >
+                      3天
+                    </view>
+                    <view
+                      class="day-btn"
+                      :class="{ active: dayDev === 7 }"
+                      @click="changeDay(7)"
+                    >
+                      7天
+                    </view>
                   </view>
                 </view>
-                <view class="chart-actions">
-                  <text @click="fullscreenChart" class="action-link">放大</text>
-                  <text class="divider-dot">·</text>
-                  <text @click="changeShow" class="action-link">{{ setTitle }}</text>
+                <view class="right-section">
+                  <view v-show="showChart" @click="fullscreenChart" class="action-link">放大</view>
+                  <text v-show="showChart" class="divider-dot">·</text>
+                  <view @click="changeShow" class="action-link">{{ setTitle }}</view>
                 </view>
               </view>
               <!-- <nut-col :span="8" class="font_32 f_weight c_222">
@@ -290,7 +292,7 @@
               <nut-col :span="8" class="font_32 c_1589E9" :style="{ textAlign: 'right' }">
                 <view @click="changeShow">{{ setTitle }}</view>
               </nut-col> -->
-            </nut-row>
+            </view>
             <view :style="{ position: 'relative', marginTop: '10px', width: '100%', overflow: 'hidden' }" v-show="showChart">
               <view class="loading-container" v-show="loading">
                 <Loading />
@@ -1978,78 +1980,85 @@ defineExpose({
     background: #09b8c2;
   }
 
-  // 优化后的图表标题行样式
+  // 全新设计的图表标题行布局
   .chart-header-row {
     display: flex;
     align-items: center;
-    justify-content: space-between;
     width: 100%;
-    padding: 0 5px;
-    gap: 6px;
+    height: 40px;
+    padding: 0 12px;
+    box-sizing: border-box;
   }
 
-  .chart-title {
-    flex: 0 0 auto;
-    min-width: 55px;
-    .title-text {
-      font-size: 28px;
+  // 左侧区域：标题
+  .left-section {
+    flex-shrink: 0;
+    width: 70px;
+    
+    .chart-title-text {
+      font-size: 30px;
       font-weight: 600;
       color: #222;
       white-space: nowrap;
+      display: inline-block;
     }
   }
 
-  .day-selector {
-    flex: 1 1 auto;
+  // 中间区域：按钮组
+  .center-section {
+    flex: 1;
     display: flex;
-    align-items: center;
     justify-content: center;
-    gap: 0;
-    border-radius: 6px;
-    overflow: hidden;
-    border: 1px solid #e5e5e5;
-    max-width: 220px;
+    padding: 0 10px;
     
-    .day-btn {
-      flex: 1;
-      padding: 0 10px;
-      height: 34px;
-      line-height: 34px;
-      font-size: 22px;
-      color: #666;
-      background: #fff;
-      border-right: 1px solid #e5e5e5;
-      text-align: center;
-      white-space: nowrap;
-      cursor: pointer;
-      transition: all 0.2s ease;
+    .day-selector {
+      display: inline-flex;
+      align-items: center;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid #e5e5e5;
       
-      &:last-child {
-        border-right: none;
-      }
-      
-      &.active {
-        color: #fff;
-        background: linear-gradient(135deg, #09b8c2 0%, #07a5ae 100%);
-        font-weight: 500;
-      }
-      
-      &:not(.active):active {
-        background: #f8f8f8;
+      .day-btn {
+        padding: 0 16px;
+        height: 34px;
+        line-height: 34px;
+        font-size: 24px;
+        color: #666;
+        background: #fff;
+        border-right: 1px solid #e5e5e5;
+        text-align: center;
+        white-space: nowrap;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        
+        &:last-child {
+          border-right: none;
+        }
+        
+        &.active {
+          color: #fff;
+          background: linear-gradient(135deg, #09b8c2 0%, #07a5ae 100%);
+          font-weight: 500;
+        }
+        
+        &:not(.active):active {
+          background: #f8f8f8;
+        }
       }
     }
   }
 
-  .chart-actions {
-    flex: 0 0 auto;
+  // 右侧区域：放大隐藏
+  .right-section {
+    flex-shrink: 0;
+    width: 105px;
     display: flex;
     align-items: center;
-    gap: 4px;
-    min-width: 85px;
-    justify-content: flex-end;
+    justify-content: flex-start;
+    gap: 6px;
     
     .action-link {
-      font-size: 24px;
+      font-size: 26px;
       color: #1589E9;
       white-space: nowrap;
       cursor: pointer;
@@ -2061,7 +2070,7 @@ defineExpose({
     }
     
     .divider-dot {
-      font-size: 16px;
+      font-size: 18px;
       color: #ccc;
       margin: 0;
     }
@@ -2150,7 +2159,7 @@ defineExpose({
 
 // 功能按钮区域样式
 .action-buttons {
-  margin-top: 20rpx;
+  margin-top: 10rpx;
   padding: 0;
   width: 100%;