From 6c0983c7c4c3e5e5975881626059241c19ff0972 Mon Sep 17 00:00:00 2001
From: lld <15027638633@163.com>
Date: Thu, 12 Feb 2026 02:37:44 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=A0=B7=E5=BC=8F=E6=8F=90?=
 =?UTF-8?q?=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index.vue | 125 ++++++++++++++++++++++++++++--------------------
 1 file changed, 73 insertions(+), 52 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index f208ea1..d7c1cc9 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -7,37 +7,38 @@
         @scrolltolower="loadMore"
         :style="{ height: scrollHeight + 'px' }"
         lower-threshold="50"
-    scroll-with-animation
+        scroll-with-animation
     >
-    <view
-        v-for="(item, index) in listData"
-        :key="index"
-    class="list-item"
-    @tap="onItemTap(item)"
-    >
-    <view class="item-title">
-      {{ item.title }}
-      <text class="tag tag-status" v-if="item.status">{{ item.status }}</text>
-    </view>
+      <view
+          v-for="(item, index) in listData"
+          :key="index"
+          class="list-item"
+          @tap="onItemTap(item)"
+      >
+        <view class="item-title">
+          <view class="title-text">{{ item.title }}</view>
+          <text :class="['tag','tag-status',{'tag-manual':item.status==='手动模式'}]" v-if="item.status">{{ item.status }}</text>
+          <text :class="['tag','tag-online',{'tag-offline':item.online==='离线'}]"  v-if="item.online">{{ item.online }}</text>
+        </view>
 
-    <view class="item-subtitle">
-      {{ item.subtitle }}
-      <text class="tag tag-online" v-if="item.online">{{ item.online }}</text>
-    </view>
-    <view class="item-tags">
-      <text class="tag tag-temp1">温度1: {{ item.temp1 }}℃</text>
-      <text class="tag tag-temp2">温度2: {{ item.temp2 }}℃</text>
-      <text class="tag tag-temp3">温度3: {{ item.temp3 }}℃</text>
-      <text class="tag tag-temp4">温度4: {{ item.temp4 }}℃</text>
-    </view>
-  </view>
+        <view class="item-subtitle">
+          {{ item.subtitle }}
+        </view>
 
-  <view v-if="isLoading" class="loading-more">
-    <uni-icons type="spinner-cycle" size="20" color="#999"></uni-icons>
-    <text>加载中...</text>
-  </view>
-  <view v-else-if="noMore" class="no-more">没有更多数据了</view>
-  </scroll-view>
+        <view class="item-tags">
+          <text class="tag tag-temp1">温度1: {{ item.temp1 }}℃</text>
+          <text class="tag tag-temp2">温度2: {{ item.temp2 }}℃</text>
+          <text class="tag tag-temp3">温度3: {{ item.temp3 }}℃</text>
+          <text class="tag tag-temp4">温度4: {{ item.temp4 }}℃</text>
+        </view>
+      </view>
+
+      <view v-if="isLoading" class="loading-more">
+        <uni-icons type="spinner-cycle" size="20" color="#999"></uni-icons>
+        <text>加载中...</text>
+      </view>
+      <view v-else-if="noMore" class="no-more">没有更多数据了</view>
+    </scroll-view>
   </view>
 </template>
 
@@ -91,14 +92,14 @@ export default {
           // 新增：给每条数据加唯一id，优化v-for的key
           newData.push({
             id: `item-${i}`,
-            title: `项目名称${i}`,
-            subtitle: `公司名称${i}`,
-            temp1: Math.floor(Math.random() * 51),
+            title: `设备名称${i + 1}`,
+            subtitle: `设备编号：SN-${10000 + i}`,
+            status: i % 2 === 0 ? "自动模式" : "手动模式",
+            online: i % 3 === 0 ? "在线" : "离线",
+            temp1: Math.floor(Math.random() * 51), // 0-50随机温度
             temp2: Math.floor(Math.random() * 51),
             temp3: Math.floor(Math.random() * 51),
-            temp4: Math.floor(Math.random() * 51),
-            status: '自动模式',
-            online: '在线'
+            temp4: Math.floor(Math.random() * 51)
           })
         }
 
@@ -175,7 +176,7 @@ page {
   border-radius: 12rpx;
   /* 新增：点击态样式，双端统一 */
   transition: all 0.2s ease;
-  box-shadow: 8rpx 5rpx 10rpx #999
+  box-shadow: 8rpx 5rpx 10rpx #999;
 }
 .list-item:active {
   background-color: rgba(255, 255, 255, 0.95);
@@ -187,13 +188,43 @@ page {
   line-height: 52rpx;
   font-weight: bolder;
   color: #333;
+  /* 核心：flex布局，让文字和标签在同一行 */
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+.title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* 在线标签样式 */
+.tag-online {
+  font-size: 20rpx;
+  border-radius: 4rpx;
+  background-color: #f0f9eb;
+  color: #67c23a;
+  white-space: nowrap;
+  line-height: 30rpx;
+  /* 兜底：如果flex失效，用margin-left:auto强制居右 */
+  margin-left: auto;
+  display: inline-block; /* 确保样式生效 */
+}
+.tag-status.tag-manual {
+  background-color: #dde3f6;
+  color: #7491ef;
+}
+/* 离线：深灰色系 */
+.tag-offline {
+  background-color: #f2f2f2;
+  color: #c5c3c3;
 }
-
 .item-subtitle {
   font-size: 26rpx;
   color: #666;
   line-height: 52rpx;
-  display: flex;
+  display: block;
 }
 
 .item-tags {
@@ -214,21 +245,11 @@ page {
   color: #e66060;
   margin-left: 20rpx;
   font-weight: lighter;
-  line-height: 40rpx;
+  line-height: 30rpx;
+  padding: 4rpx 6rpx;
+  font-size: 20rpx;
 }
 
-.tag-online {
-  font-size: 22rpx;
-  padding: 0 20rpx;
-  border-radius: 4rpx;
-  background-color: #f0f9eb;
-  color: #67c23a;
-  white-space: nowrap; /* 标签不换行 */
-  /* 兜底：如果flex失效，用margin-left:auto强制居右 */
-  margin-left: auto;
-  display: inline-block; /* 确保样式生效 */
-  transform: translateY(-30rpx) translateX(-60rpx);
-}
 .tag-temp1 {
   background-color: #e8f4ff;
   color: #409eff;
@@ -245,8 +266,8 @@ page {
 }
 
 .tag-temp4 {
-  background-color: #f0f9eb;
-  color: #67c23a;
+  background-color: #e7faf4;
+  color: #1bd1a7;
 }
 
 .loading-more {