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