From 3a157c1e07a319fb30b993c96324b73a1495acb6 Mon Sep 17 00:00:00 2001 From: lld <15027638633@163.com> Date: Thu, 12 Feb 2026 01:58:28 +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 | 58 +++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 47 insertions(+), 11 deletions(-) diff --git a/pages/index.vue b/pages/index.vue index 18936b3..f208ea1 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -15,12 +15,20 @@ class="list-item" @tap="onItemTap(item)" > - {{ item.title }} - {{ item.subtitle }} + + {{ item.title }} + {{ item.status }} + + + + {{ item.subtitle }} + {{ item.online }} + - {{ item.city }} - {{ item.level }} - {{ item.status }} + 温度1: {{ item.temp1 }}℃ + 温度2: {{ item.temp2 }}℃ + 温度3: {{ item.temp3 }}℃ + 温度4: {{ item.temp4 }}℃ @@ -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; }