fix: 功能界面优化完善。

src/components/other/index.vue

@@ -13,19 +13,7 @@
             <template #icon>
               <IconFont :name="setting" size="16" />
             </template>
-            <text class="font_28">编辑</text>
+            <text class="font_28">编辑塘口</text>
-          </nut-button>
-          <nut-button
-            type="primary"
-            class="btn font_28"
-            size="mini"
-            :style="{ marginRight: '5px' }"
-            open-type="contact"
-          >
-            <template #icon>
-              <IconFont :name="phone" size="16" />
-            </template>
-            <text class="font_28">联系工程师</text>
           </nut-button>
           <nut-button
             type="primary"
@@ -45,28 +33,23 @@
         </nut-col>
       </nut-row>
       <nut-row v-if="doList.length > 0" class="pondInfo_home">
-        <nut-tabs
+        <view class="device-tabs-wrapper">
-          v-model="doDev"
+          <scroll-view scroll-x="true" :show-scrollbar="false" :scroll-with-animation="true">
-          title-scroll
+            <view class="device-tabs">
-          title-gutter="20"
+              <view
-          background="#ffffff"
+                v-for="item in doList"
-          align="left"
+                :key="item.id"
-          :ellipsis="false"
+                class="custom-tab-item font_32"
-          auto-height
+                :class="{ 'tab-active': doDev === item.id }"
-        >
+                @click="changeDev(item)"
-          <template #titles>
+              >
-            <view
+                <view class="custom-title" :class="{ active: doDev === item.id }"
-              v-for="item in doList"
+                  >{{ item.deviceName }}
-              :key="item.id"
+                </view>
-              class="custom-tab-item font_32"
-              @click="changeDev(item)"
-            >
-              <view class="custom-title" :class="{ active: doDev === item.id }"
-                >{{ item.deviceName }}
               </view>
             </view>
-          </template>
+          </scroll-view>
-        </nut-tabs>
+        </view>
         <nut-row v-for="item in doList" :key="item.id">
           <nut-col :span="24" v-if="doDev == item.id">
             <view class="view_f_between">
@@ -1890,25 +1873,48 @@ defineExpose({
     border-radius: 4px;
     color: #bf290e;
   }
+  .device-tabs-wrapper {
+    width: 100%;
+    white-space: nowrap;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  .device-tabs {
+    display: flex;
+    flex-wrap: nowrap;
+    padding: 20rpx 0;
+  }
   .custom-tab-item {
-    padding: 0 0px 0 0;
+    padding: 10rpx 20rpx;
-    margin: 0 30px 0 0;
+    margin-right: 10rpx;
+    background-color: #f5f6f7;
+    border-radius: 8rpx;
+    transition: all 0.3s ease;
+    white-space: nowrap;
     
-    .custom-line {
+    &:last-child {
-      width: 100%;
+      margin-right: 0;
-      height: 2px;
+    }
-      background: #eeeeee;
+    
-      border-radius: 10px;
+    &.tab-active {
-      margin: 0 auto;
+      background-color: #ffffff;
+      box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
     }
 
     .custom-title {
-      color: black;
+      color: #333;
       display: inline-block;
-    }
+      font-size: 28rpx;
       
-    .custom-title.active {
+      &.active {
-      border-bottom: 4px solid #09b8c2;
+        color: #09b8c2;
+        font-weight: bold;
+      }
     }
   }
   .nut-tab-pane {

src/pages/main/home.vue

@@ -6,15 +6,32 @@
       <nut-config-provider :theme-vars="themeVars">
         <nut-row class="body" :catch-move="false">
           <view :style="{ height: '120rpx' }">
-            <!-- 头部 -->
+            <!-- 头部操作按钮区 -->
             <nut-col
               :span="24"
               class="view_f_between"
               :style="{ padding: '20rpx 20rpx 0 20rpx' }"
             >
-              <view class="view_f">
+             <view>
-                <!-- <IconFont :name="location" />
+                <nut-button type="primary" class="btn" size="small" @click="changeMode">
-                <view class="font_28" v-if="store.getUnLogin != 1">{{ city }}</view> -->
+                  <template #icon>
+                    <IconFont :name="change" size="18" />
+                  </template>
+                  <text class="font_32 c_fff">切换模式</text>
+                </nut-button>
+              </view>
+                       <view>
+                <nut-button
+                  type="primary"
+                  class="btn font_28"
+                  size="small"
+                  open-type="contact"
+                >
+                  <template #icon>
+                    <IconFont :name="phone" size="18" />
+                  </template>
+                  <text class="font_32">联系工程师</text>
+                </nut-button>
               </view>
               <view>
                 <nut-button
@@ -29,6 +46,8 @@
                   <text class="font_32">系统公告</text>
                 </nut-button>
               </view>
+     
+             
             </nut-col>
             <!-- 消息通知 -->
             <nut-col
@@ -37,7 +56,6 @@
               :style="{ padding: '0 20rpx' }"
               @click="toPay"
             >
-              <!-- deadList.length>0 &&  -->
               <view :style="{ width: '100%' }">
                 <nut-noticebar
                   background="rgba(255, 255, 255, 0.7)"
@@ -48,19 +66,18 @@
                   <template #left-icon>
                     <img :src="noticeImg" style="width: 32rpx; height: 32rpx" />
                   </template>
-                  <!-- <text class="content">{{ `${notice}` }}</text> -->
                   <text class="content">{{ `${deadList.length}个设备即将到期` }}</text>
                 </nut-noticebar>
               </view>
             </nut-col>
-            <!-- 标题 -->
+            <!-- 塘口列表标题 -->
             <nut-col
               :span="24"
               class="pond m_t_15 view_f_between"
               :style="{ padding: '0 20rpx' }"
             >
               <view class="font_34 f_weight">塘口列表</view>
-              <view id="addPondBtn">
+              <view id="addPondBtn" class="view_f" :style="{ gap: '10rpx' }">
                 <nut-button
                   type="primary"
                   class="btn font_28"
@@ -74,14 +91,7 @@
                   </template>
                   <text class="font_32">新建塘口</text>
                 </nut-button>
-              </view>
+               
-              <view>
-                <nut-button type="primary" class="btn" size="small" @click="changeMode">
-                  <template #icon>
-                    <IconFont :name="change" size="18" />
-                  </template>
-                  <text class="font_32 c_fff">切换模式</text>
-                </nut-button>
               </view>
             </nut-col>
           </view>
@@ -280,11 +290,11 @@
             <nut-row v-if="pondList.length > 0">
               <!-- 切换选择塘口 -->
               <nut-col :span="24">
-                <scroll-view :scroll-x="true" style="width: 100%; height: 60rpx">
+                <view :style="{ width: '100%' }">
                   <nut-radio-group
                     v-model="selPond"
                     direction="horizontal"
-                    :style="{ whiteSpace: 'nowrap' }"
+                    :style="{ flexWrap: 'wrap', gap: '10rpx' }"
                   >
                     <nut-radio
                       :label="item.id"
@@ -294,7 +304,7 @@
                       >{{ item.pondName }}</nut-radio
                     >
                   </nut-radio-group>
-                </scroll-view>
+                </view>
               </nut-col>
               <nut-col
                 :span="24"
@@ -306,7 +316,7 @@
                   @getPondInfo="getPondInfo"
                   @addDevice="addDevice"
                   ref="pondChildInfo"
-                  type="1"
+                  :type="1"
                 />
               </nut-col>
             </nut-row>
@@ -541,7 +551,7 @@
               v-model="selPond_2"
               @addDevice="addDevice"
               ref="pondChildInfo"
-              type="2"
+              :type="2"
             />
           </nut-col>
         </nut-row>
@@ -590,6 +600,8 @@ const c3_n = `${imgUrl}c3_n.png`;
 const c_def = `${imgUrl}c_def.png`;
 const location = `${imgUrl}location.png`;
 const change = `${imgUrl}change.png`;
+const phone = `${imgUrl}tel.png`;
+const setting = `${imgUrl}setting.png`;
 const noticeImg = `${imgUrl}noticeImg.png`;
 const pond404 = `${imgUrl}zanwurenwu.png`;
 // const notice = ref("有设备服务快到期，请尽快续费");
@@ -632,9 +644,9 @@ let qqmapsdk = new QQMapWX({
   key: "75RBZ-WQSYB-6KEUB-NCZME-D62T7-YIF4G",
 });
 // 选中的塘口id
-const selPond = ref<number | undefined>(undefined);
+const selPond = ref<number | string | undefined>(undefined);
 // 多糖选中塘口id
-const selPond_2 = ref<number | undefined>(undefined);
+const selPond_2 = ref<number | string | undefined>(undefined);
 const selPondName_2 = ref<string | undefined>("塘口详情");
 const visControl = ref(false);
 // 展示塘口详情
@@ -940,19 +952,22 @@ function pond1() {
 
       });
       pondList.value = rows;
+      // 立即设置默认选中的塘口，并强制触发响应式更新
+      if (rows.length > 0) {
+        const firstPondId = rows[0]["id"]; // 保持原始类型
+        if (!selPond.value || !pondIds.includes(selPond.value)) {
+          // 延迟一帧确保 DOM 已渲染
+          setTimeout(() => {
+            selPond.value = firstPondId;
+            console.log('已选中塘口:', selPond.value, '类型:', typeof selPond.value, '所有塘口:', rows.map(r => ({id: r.id, name: r.pondName})));
+          }, 50);
+        }
+      } else {
+        selPond.value = undefined;
+      }
       setTimeout(() => {
         showTour.value = rows.length == 0 ? true : false;
       }, 500);
-      selPond.value = selPond.value
-        ? selPond.value
-        : rows.length > 0
-        ? Number(rows[0]["id"])
-        : undefined;
-      if (selPond.value) {
-        if (!pondIds.includes(selPond.value)) {
-          selPond.value = rows.length > 0 ? Number(rows[0]["id"]) : undefined;
-        }
-      }
     }
   });
 }
@@ -968,6 +983,18 @@ function addPond() {
     url: "/home/addPond",
   });
 }
+// 编辑塘口
+function updatePond() {
+  const pondId = mode.value == 1 ? selPond.value : selPond_2.value;
+  if (pondId) {
+    Taro.navigateTo({
+      url: `/home/updatePond?id=${pondId}`,
+    });
+  } else {
+    state.show = true;
+    state.msg = "请先选择塘口";
+  }
+}
 
 // 绑定设备页面
 function addDevice() {
@@ -1277,17 +1304,32 @@ function toPay() {
       // 模式2塘口管理
       .pond_mode2 {
         .nut-radio__button--active {
-          background-color: #09b8c2;
+          background: linear-gradient(135deg, #09b8c2 0%, #06a0a9 100%) !important;
           border-radius: 10px;
+          color: #fff !important;
+          font-weight: bold;
+          font-size: 30rpx !important;
+          box-shadow: 0 6rpx 16rpx rgba(9, 184, 194, 0.6);
+          transform: scale(1.08);
+          transition: all 0.3s ease;
+          border: 2px solid #09b8c2;
         }
 
         .nut-radio__button--normal {
           border-radius: 10px;
+          background-color: #f5f6f7;
+          color: #999;
+          font-size: 28rpx;
+          box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.06);
+          transition: all 0.3s ease;
+          border: 1px solid transparent;
         }
 
         .nut-radio--button {
-          background-color: #fff;
+          background-color: #f5f6f7;
           border-radius: 10px;
+          margin-bottom: 10rpx;
+          margin-right: 10rpx;
         }
 
         .nut-tab-pane {