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; }