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

首页样式提交

feasure
lld 2026-02-12 02:37:44 +08:00
parent 3a157c1e07
commit 6c0983c7c4
1 changed files with 73 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
pages/index.vue
View File

@ -16,14 +16,15 @@
@tap="onItemTap(item)"
>
<view class="item-title">
{{ item.title }}
<text class="tag tag-status" v-if="item.status">{{ item.status }}</text>
<view class="title-text">{{ item.title }}</view>
<text :class="['tag','tag-status',{'tag-manual':item.status==='手动模式'}]" v-if="item.status">{{ item.status }}</text>
<text :class="['tag','tag-online',{'tag-offline':item.online==='离线'}]" v-if="item.online">{{ item.online }}</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-temp1">温度1: {{ item.temp1 }}℃</text>
<text class="tag tag-temp2">温度2: {{ item.temp2 }}℃</text>
@ -91,14 +92,14 @@ export default {
// 新增：给每条数据加唯一id，优化v-for的key
newData.push({
id: `item-${i}`,
title: `项目名称${i}`,
subtitle: `公司名称${i}`,
temp1: Math.floor(Math.random() * 51),
title: `设备名称${i + 1}`,
subtitle: `设备编号：SN-${10000 + i}`,
status: i % 2 === 0 ? "自动模式" : "手动模式",
online: i % 3 === 0 ? "在线" : "离线",
temp1: Math.floor(Math.random() * 51), // 0-50随机温度
temp2: Math.floor(Math.random() * 51),
temp3: Math.floor(Math.random() * 51),
temp4: Math.floor(Math.random() * 51),
status: '自动模式',
online: '在线'
temp4: Math.floor(Math.random() * 51)
})
}
@ -175,7 +176,7 @@ page {
border-radius: 12rpx;
/* 新增：点击态样式，双端统一 */
transition: all 0.2s ease;
box-shadow: 8rpx 5rpx 10rpx #999
box-shadow: 8rpx 5rpx 10rpx #999;
}
.list-item:active {
background-color: rgba(255, 255, 255, 0.95);
@ -187,13 +188,43 @@ page {
line-height: 52rpx;
font-weight: bolder;
color: #333;
/* 核心：flex布局，让文字和标签在同一行 */
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
}
.title-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 在线标签样式 */
.tag-online {
font-size: 20rpx;
border-radius: 4rpx;
background-color: #f0f9eb;
color: #67c23a;
white-space: nowrap;
line-height: 30rpx;
/* 兜底：如果flex失效，用margin-left:auto强制居右 */
margin-left: auto;
display: inline-block; /* 确保样式生效 */
}
.tag-status.tag-manual {
background-color: #dde3f6;
color: #7491ef;
}
/* 离线：深灰色系 */
.tag-offline {
background-color: #f2f2f2;
color: #c5c3c3;
}
.item-subtitle {
font-size: 26rpx;
color: #666;
line-height: 52rpx;
display: flex;
display: block;
}
.item-tags {
@ -214,21 +245,11 @@ page {
color: #e66060;
margin-left: 20rpx;
font-weight: lighter;
line-height: 40rpx;
line-height: 30rpx;
padding: 4rpx 6rpx;
font-size: 20rpx;
}
.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;
@ -245,8 +266,8 @@ page {
}
.tag-temp4 {
background-color: #f0f9eb;
color: #67c23a;
background-color: #e7faf4;
color: #1bd1a7;
}
.loading-more {