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

修改样式

master
lld 2025-12-28 23:00:03 +08:00
parent f5b9b4687f
commit e7f9d0affa
2 changed files with 49 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
pages/control/index.vue
View File

@ -16,39 +16,39 @@
<view> <view>
<view class="uni-flex_control uni-row" > <view class="uni-flex_control uni-row" >
<view class="text uni-flex_control uni-view"> <view class="text uni-flex_control_one uni-view">
<text class="data" :style="fontStyle">{{ liveData.temp1 }}</text> <text class="data" :style="fontStyle">{{ liveData.temp1 }}<p v-if=(testNumber(liveData.temp1)) class="tempStyle">℃</p></text>
<text class="data">温度1</text> <text class="data">温度1</text>
</view> </view>
<view class="text uni-flex_control uni-view"> <view class="text uni-flex_control_one uni-view">
<text class="data" :style="fontStyle">{{ liveData.temp2 }}</text> <text class="data" :style="fontStyle">{{ liveData.temp2 }}<p v-if=(testNumber(liveData.temp2)) class="tempStyle">℃</p></text>
<text class="data">温度2</text> <text class="data">温度2</text>
</view> </view>
<view class="text uni-flex_control uni-view"> <view class="text uni-flex_control_one uni-view">
<text class="data" :style="fontStyle">{{ liveData.temp3 }}</text> <text class="data" :style="fontStyle">{{ liveData.temp3 }}<p v-if=(testNumber(liveData.temp3)) class="tempStyle">℃</p></text>
<text class="data">温度3</text> <text class="data">温度3</text>
</view> </view>
<view class="text uni-flex_control uni-view"> <view class="text uni-flex_control_one uni-view">
<text class="data" :style="fontStyle">{{ liveData.temp4 }}</text> <text class="data" :style="fontStyle">{{ liveData.temp4 }}<p v-if=(testNumber(liveData.temp4)) class="tempStyle">℃</p></text>
<text class="data">温度4</text> <text class="data">温度4</text>
</view> </view>
</view> </view>
<view class="uni-flex_control uni-row" > <view class="uni-flex_control uni-row" >
<view class="text uni-flex_control uni-view"> <view class="text uni-flex_control_two uni-view">
<text class="data" :style="fontStyle">{{ liveData.humi1 }}</text> <text class="data" :style="fontStyle">{{ liveData.humi1 }}<p v-if=(testNumber(liveData.humi1)) class="humiStyle"> %RH</p></text>
<text class="data">湿度1</text> <text class="data">湿度1</text>
</view> </view>
<view class="text uni-flex_control uni-view"> <view class="text uni-flex_control_two uni-view">
<text class="data" :style="fontStyle">{{ liveData.humi2 }}</text> <text class="data" :style="fontStyle">{{ liveData.humi2 }}<p v-if=(testNumber(liveData.humi2)) class="humiStyle"> %RH</p></text>
<text class="data">湿度2</text> <text class="data">湿度2</text>
</view> </view>
<view class="text uni-flex_control uni-view"> <view class="text uni-flex_control_two uni-view">
<text class="data" :style="fontStyle">{{ liveData.humi3 }}</text> <text class="data" :style="fontStyle">{{ liveData.humi3 }}<p v-if=(testNumber(liveData.humi3)) class="humiStyle"> %RH</p></text>
<text class="data">湿度3</text> <text class="data">湿度3</text>
</view> </view>
<view class="text uni-flex_control uni-view"> <view class="text uni-flex_control_two uni-view">
<text class="data" :style="fontStyle">{{ liveData.humi4 }}</text> <text class="data" :style="fontStyle">{{ liveData.humi4 }}<p v-if=(testNumber(liveData.humi4)) class="humiStyle"> %RH</p></text>
<text class="data">湿度4</text> <text class="data">湿度4</text>
</view> </view>
</view> </view>
@ -283,7 +283,7 @@ export default {
humi4: response.data.humi4 || '已离线..' humi4: response.data.humi4 || '已离线..'
} }
this.temp = "最后更新时间："+response.data.time; this.temp = "最后更新时间："+response.data.time;
this.fontStyle = 'font-size:16px' this.fontStyle = 'font-size:16px;'
}) })
} else { } else {
this.selectedText = ''; // 无匹配项时清空 this.selectedText = ''; // 无匹配项时清空
@ -530,18 +530,18 @@ export default {
const div10 = (v) => (v == null ? null : Math.round((Number(v)/10)*10)/10) const div10 = (v) => (v == null ? null : Math.round((Number(v)/10)*10)/10)
this.liveData = { this.liveData = {
temp1: msgData["201"]==null ? "已离线...":div10(msgData["201"])+"℃", temp1: div10(msgData["201"]) || "已离线...",
humi1: msgData["101"]==null ? "已离线...":div10(msgData["101"])+"%RH", humi1: div10(msgData["101"]) || "已离线...",
temp2: msgData["202"]==null ? "已离线...":div10(msgData["202"])+"℃", temp2: div10(msgData["202"]) || "已离线...",
humi2: msgData["102"]==null ? "已离线...":div10(msgData["102"])+"%RH", humi2: div10(msgData["102"]) || "已离线...",
temp3: msgData["203"]==null ? "已离线...":div10(msgData["203"])+"℃", temp3: div10(msgData["203"]) || "已离线...",
humi3: msgData["103"]==null ? "已离线...":div10(msgData["103"])+"%RH", humi3: div10(msgData["103"]) || "已离线...",
temp4: msgData["204"]==null ? "已离线...":div10(msgData["204"])+"℃", temp4: div10(msgData["204"]) || "已离线...",
humi4: msgData["104"]==null ? "已离线...":div10(msgData["104"])+"%RH" humi4: div10(msgData["104"]) || "已离线...",
} }
// 调用函数获取并输出格式化后的当前时间 // 调用函数获取并输出格式化后的当前时间
this.temp = "最新更新时间：" + this.getCurrentTime(); this.temp = "最新更新时间：" + this.getCurrentTime();
this.fontStyle = 'font-size:16px' this.fontStyle = 'font-size:16px;'
} }
} }
@ -567,6 +567,11 @@ export default {
// 拼接成标准格式 // 拼接成标准格式
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}, },
testNumber(data) {
const reg = /^-?\d+(\.\d+)?$/;
return reg.test(String(data).trim());
}
}, },
onHide() { onHide() {
this.disconnectMqtt(); this.disconnectMqtt();
@ -664,11 +669,15 @@ export default {
height: 70rpx; height: 70rpx;
line-height: 70rpx; line-height: 70rpx;
text-align: center; text-align: center;
background:#fff;
font-size: 26rpx; font-size: 26rpx;
box-shadow: 0 2rpx 8rpx #bfbec1 box-shadow: 0 2rpx 8rpx #bfbec1
} }
.tempStyle,.humiStyle {
display: inline-block;
font-size: 12px;
}
.text:first-child { .text:first-child {
margin-left: 10rpx; margin-left: 10rpx;
} }

14
utils/uni.css
View File

@ -24,6 +24,18 @@ form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.uni-flex_control_one {
display: flex;
flex-direction: column;
background: radial-gradient(circle at bottom right, #faf1f1 40%, #F8FCFE 100%);
}
.uni-flex_control_two {
display: flex;
flex-direction: column;
background: radial-gradient(circle at top left, #E8F4F8 40%, #F8FCFE 100%);
}
.uni-flex-item { .uni-flex-item {
flex: 1; flex: 1;
} }
@ -49,7 +61,7 @@ form {
margin-right: 20rpx; margin-right: 20rpx;
} }
.uni-inline-item text:last-child{ .uni-inline-item text:last-child{
margin-right: 0rpx; margin-right: 0;
margin-left: 20rpx; margin-left: 20rpx;
} }
.flex-item-V { .flex-item-V {