root
/
agri-app
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页样式提交

feasure
lld 2026-02-12 01:58:28 +08:00
parent b5d2c3c768
commit 3a157c1e07
1 changed files with 47 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
pages/index.vue
View File

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