首页样式提交

pages/index.vue

@@ -15,12 +15,20 @@
     class="list-item"
     @tap="onItemTap(item)"
     >
-    <view class="item-title">{{ item.title }}</view>
-    <view class="item-subtitle">{{ item.subtitle }}</view>
+    <view class="item-title">
+      {{ item.title }}
+      <text class="tag tag-status" v-if="item.status">{{ item.status }}</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-city">{{ item.city }}</text>
-      <text class="tag tag-level">{{ item.level }}</text>
-      <text class="tag tag-status">{{ item.status }}</text>
+      <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>
 
@@ -85,9 +93,12 @@ export default {
             id: `item-${i}`,
             title: `项目名称${i}`,
             subtitle: `公司名称${i}`,
-            city: '广州',
-            level: '省级项目',
-            status: '已开工'
+            temp1: Math.floor(Math.random() * 51),
+            temp2: Math.floor(Math.random() * 51),
+            temp3: Math.floor(Math.random() * 51),
+            temp4: Math.floor(Math.random() * 51),
+            status: '自动模式',
+            online: '在线'
           })
         }
 
@@ -182,6 +193,7 @@ page {
   font-size: 26rpx;
   color: #666;
   line-height: 52rpx;
+  display: flex;
 }
 
 .item-tags {
@@ -197,18 +209,42 @@ page {
   border-radius: 4rpx;
   display: inline-block; /* 修复H5端padding不生效问题 */
 }
+.tag-status {
+  background-color: #f8f1f1;
+  color: #e66060;
+  margin-left: 20rpx;
+  font-weight: lighter;
+  line-height: 40rpx;
+}
 
-.tag-city {
+.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;
 }
 
-.tag-level {
+.tag-temp2 {
   background-color: #fdf4e4;
   color: #f5961d;
 }
 
-.tag-status {
+.tag-temp3 {
+  background-color: #f4f4f5;
+  color: #909399;
+}
+
+.tag-temp4 {
   background-color: #f0f9eb;
   color: #67c23a;
 }