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

14
utils/uni.css
View File

@ -24,6 +24,18 @@ form {
display: flex;
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 {
flex: 1;
}
@ -49,7 +61,7 @@ form {
margin-right: 20rpx;
}
.uni-inline-item text:last-child{
margin-right: 0rpx;
margin-right: 0;
margin-left: 20rpx;
}
.flex-item-V {