fix: 功能界面优化完善。

src/components/other/index.vue

@@ -13,19 +13,7 @@
             <template #icon>
               <IconFont :name="setting" size="16" />
             </template>
-            <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>
+            <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
-          v-model="doDev"
-          title-scroll
-          title-gutter="20"
-          background="#ffffff"
-          align="left"
-          :ellipsis="false"
-          auto-height
-        >
-          <template #titles>
-            <view
-              v-for="item in doList"
-              :key="item.id"
-              class="custom-tab-item font_32"
-              @click="changeDev(item)"
-            >
-              <view class="custom-title" :class="{ active: doDev === item.id }"
-                >{{ item.deviceName }}
+        <view class="device-tabs-wrapper">
+          <scroll-view scroll-x="true" :show-scrollbar="false" :scroll-with-animation="true">
+            <view class="device-tabs">
+              <view
+                v-for="item in doList"
+                :key="item.id"
+                class="custom-tab-item font_32"
+                :class="{ 'tab-active': doDev === item.id }"
+                @click="changeDev(item)"
+              >
+                <view class="custom-title" :class="{ active: doDev === item.id }"
+                  >{{ item.deviceName }}
+                </view>
               </view>
             </view>
-          </template>
-        </nut-tabs>
+          </scroll-view>
+        </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;
-    margin: 0 30px 0 0;
-
-    .custom-line {
-      width: 100%;
-      height: 2px;
-      background: #eeeeee;
-      border-radius: 10px;
-      margin: 0 auto;
+    padding: 10rpx 20rpx;
+    margin-right: 10rpx;
+    background-color: #f5f6f7;
+    border-radius: 8rpx;
+    transition: all 0.3s ease;
+    white-space: nowrap;
+    
+    &:last-child {
+      margin-right: 0;
+    }
+    
+    &.tab-active {
+      background-color: #ffffff;
+      box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
     }
 
     .custom-title {
-      color: black;
+      color: #333;
       display: inline-block;
-    }
-
-    .custom-title.active {
-      border-bottom: 4px solid #09b8c2;
+      font-size: 28rpx;
+      
+      &.active {
+        color: #09b8c2;
+        font-weight: bold;
+      }
     }
   }
   .nut-tab-pane {