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

125
pages/index.vue
View File

@ -7,37 +7,38 @@
@scrolltolower="loadMore" @scrolltolower="loadMore"
:style="{ height: scrollHeight + 'px' }" :style="{ height: scrollHeight + 'px' }"
lower-threshold="50" lower-threshold="50"
scroll-with-animation scroll-with-animation
> >
<view <view
v-for="(item, index) in listData" v-for="(item, index) in listData"
:key="index" :key="index"
class="list-item" class="list-item"
@tap="onItemTap(item)" @tap="onItemTap(item)"
> >
<view class="item-title"> <view class="item-title">
{{ item.title }} <view class="title-text">{{ item.title }}</view>
<text class="tag tag-status" v-if="item.status">{{ item.status }}</text> <text :class="['tag','tag-status',{'tag-manual':item.status==='手动模式'}]" v-if="item.status">{{ item.status }}</text>
</view> <text :class="['tag','tag-online',{'tag-offline':item.online==='离线'}]" v-if="item.online">{{ item.online }}</text>
</view>
<view class="item-subtitle"> <view class="item-subtitle">
{{ item.subtitle }} {{ item.subtitle }}
<text class="tag tag-online" v-if="item.online">{{ item.online }}</text> </view>
</view>
<view class="item-tags">
<text class="tag tag-temp1">温度1: {{ item.temp1 }}℃</text>
<text class="tag tag-temp2">温度2: {{ item.temp2 }}℃</text>
<text class="tag tag-temp3">温度3: {{ item.temp3 }}℃</text>
<text class="tag tag-temp4">温度4: {{ item.temp4 }}℃</text>
</view>
</view>
<view v-if="isLoading" class="loading-more"> <view class="item-tags">
<uni-icons type="spinner-cycle" size="20" color="#999"></uni-icons> <text class="tag tag-temp1">温度1: {{ item.temp1 }}℃</text>
<text>加载中...</text> <text class="tag tag-temp2">温度2: {{ item.temp2 }}℃</text>
</view> <text class="tag tag-temp3">温度3: {{ item.temp3 }}℃</text>
<view v-else-if="noMore" class="no-more">没有更多数据了</view> <text class="tag tag-temp4">温度4: {{ item.temp4 }}℃</text>
</scroll-view> </view>
</view>
<view v-if="isLoading" class="loading-more">
<uni-icons type="spinner-cycle" size="20" color="#999"></uni-icons>
<text>加载中...</text>
</view>
<view v-else-if="noMore" class="no-more">没有更多数据了</view>
</scroll-view>
</view> </view>
</template> </template>
@ -91,14 +92,14 @@ export default {
// 新增：给每条数据加唯一id，优化v-for的key // 新增：给每条数据加唯一id，优化v-for的key
newData.push({ newData.push({
id: `item-${i}`, id: `item-${i}`,
title: `项目名称${i}`, title: `设备名称${i + 1}`,
subtitle: `公司名称${i}`, subtitle: `设备编号：SN-${10000 + i}`,
temp1: Math.floor(Math.random() * 51), status: i % 2 === 0 ? "自动模式" : "手动模式",
online: i % 3 === 0 ? "在线" : "离线",
temp1: Math.floor(Math.random() * 51), // 0-50随机温度
temp2: Math.floor(Math.random() * 51), temp2: Math.floor(Math.random() * 51),
temp3: Math.floor(Math.random() * 51), temp3: Math.floor(Math.random() * 51),
temp4: Math.floor(Math.random() * 51), temp4: Math.floor(Math.random() * 51)
status: '自动模式',
online: '在线'
}) })
} }
@ -175,7 +176,7 @@ page {
border-radius: 12rpx; border-radius: 12rpx;
/* 新增：点击态样式，双端统一 */ /* 新增：点击态样式，双端统一 */
transition: all 0.2s ease; transition: all 0.2s ease;
box-shadow: 8rpx 5rpx 10rpx #999 box-shadow: 8rpx 5rpx 10rpx #999;
} }
.list-item:active { .list-item:active {
background-color: rgba(255, 255, 255, 0.95); background-color: rgba(255, 255, 255, 0.95);
@ -187,13 +188,43 @@ page {
line-height: 52rpx; line-height: 52rpx;
font-weight: bolder; font-weight: bolder;
color: #333; 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 { .item-subtitle {
font-size: 26rpx; font-size: 26rpx;
color: #666; color: #666;
line-height: 52rpx; line-height: 52rpx;
display: flex; display: block;
} }
.item-tags { .item-tags {
@ -214,21 +245,11 @@ page {
color: #e66060; color: #e66060;
margin-left: 20rpx; margin-left: 20rpx;
font-weight: lighter; 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 { .tag-temp1 {
background-color: #e8f4ff; background-color: #e8f4ff;
color: #409eff; color: #409eff;
@ -245,8 +266,8 @@ page {
} }
.tag-temp4 { .tag-temp4 {
background-color: #f0f9eb; background-color: #e7faf4;
color: #67c23a; color: #1bd1a7;
} }
.loading-more { .loading-more {