147 lines
3.3 KiB
Vue
147 lines
3.3 KiB
Vue
<style lang='scss' scoped>
|
|
.temperature{
|
|
width: 100%;
|
|
&-header{
|
|
width: 100%;
|
|
/* height: 400rpx; */
|
|
background-color: #1C9AFF;
|
|
&-total{
|
|
width: 270rpx;
|
|
height: 270rpx;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
&-img{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
}
|
|
&-text{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
width: 100%;
|
|
transform: translateY(-50%);
|
|
z-index: 99;
|
|
text-align: center;
|
|
color: #fff;
|
|
padding-top: 30rpx;
|
|
&-number{
|
|
font-size: 56rpx;
|
|
font-weight: bold;
|
|
padding-bottom: 10rpx;
|
|
border: 1px solid #fff;
|
|
border-radius: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
&-info{
|
|
padding: 30rpx $paddingLR;
|
|
&-content{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: #fff;
|
|
border-radius: 12rpx;
|
|
padding: 20rpx 0;
|
|
}
|
|
&-box{
|
|
width: 32%;
|
|
text-align: center;
|
|
&-info{
|
|
width: 2rpx;
|
|
height: 50rpx;
|
|
background-color: #eee;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-nav{
|
|
width: 100%;
|
|
padding: $paddingTB $paddingLR;
|
|
&-box-icon{
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<template>
|
|
<view class="temperature">
|
|
<view class="temperature-header">
|
|
<view class="temperature-header-total">
|
|
<!-- <u-image width="100%" height="100%" class="temperature-header-total-img" src="@/static/images/home/temperature/header-bg.png"></u-image> -->
|
|
<view class="temperature-header-total-text">
|
|
<view class="temperature-header-total-text-number">30</view>
|
|
<view class="pt20">设备总数</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="temperature-header-info">
|
|
<view class="temperature-header-info-content">
|
|
<view class="temperature-header-info-box">
|
|
<view class="text--base--grey">设备在线</view>
|
|
<view class="text--base--main">48</view>
|
|
</view>
|
|
<view class="temperature-header-info-box-line"></view>
|
|
<view class="temperature-header-info-box">
|
|
<view class="text--base--grey">设备离线</view>
|
|
<view class="text--base--grey">20</view>
|
|
</view>
|
|
<view class="temperature-header-info-box-line"></view>
|
|
<view class="temperature-header-info-box">
|
|
<view class="text--base--grey">今日报警数</view>
|
|
<view class="text--base--alarm">0</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="temperature-nav">
|
|
<u-grid :col="3" :border="false">
|
|
<u-grid-item v-for="(item,index) in navList" :key="index" @click="goNavBoxFn(item.url)">
|
|
<view class="temperature-nav-box-icon flex-center" :style="{backgroundColor:item.bgColor}">
|
|
<tuiIcon :name="item.icon" size="62" color="#fff"></tuiIcon>
|
|
</view>
|
|
<view class="grid-text">{{item.name}}</view>
|
|
</u-grid-item>
|
|
</u-grid>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
navList:[{
|
|
icon:"wenshidu",
|
|
name:"设备",
|
|
bgColor:"#7AC2FE",
|
|
url:"./device"
|
|
},{
|
|
icon:"changsuoguanli",
|
|
name:"场所管理",
|
|
bgColor:"#28C4B9",
|
|
url:"./placeManage"
|
|
},{
|
|
icon:"jingbao",
|
|
name:"告警中心",
|
|
bgColor:"#FE5E5F",
|
|
url:"./alarmCenter"
|
|
}]
|
|
}
|
|
},
|
|
onLoad() {},
|
|
methods: {
|
|
goNavBoxFn(url){
|
|
uni.navigateTo({
|
|
url:url
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|