120 lines
2.8 KiB
Vue
120 lines
2.8 KiB
Vue
<style lang='scss' scoped>
|
|
.device{
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #F9F9F9;
|
|
&-header{
|
|
width: 100%;
|
|
background-color: #fff;
|
|
height: 80rpx;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
&-header-picker{
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
background-color: rgba(256,256,256,0.1);
|
|
padding: $paddingTB $paddingLR;
|
|
}
|
|
&-list{
|
|
width: 100%;
|
|
padding: $paddingTB 30rpx;
|
|
}
|
|
&-box{
|
|
width: 100%;
|
|
border: 10rpx;
|
|
border-radius: 16rpx;
|
|
background-color: #fff;
|
|
box-shadow: $box-shadow;
|
|
padding: 20rpx;
|
|
display: flex;
|
|
margin-bottom: 30rpx;
|
|
&-info{
|
|
font-size: 24rpx;
|
|
&-name{
|
|
font-size: $uni-font-size-lg;
|
|
font-weight: bold;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
}
|
|
&-state{
|
|
display: flex;
|
|
align-items: center;
|
|
height: 42rpx;
|
|
&-icon{
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
border-radius: 50%;
|
|
background-color: #00DD00;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<template>
|
|
<view class="device">
|
|
<view class="device-header">
|
|
<view class="device-header-picker flex-between" @click="projectPickShow = true">
|
|
<view class="">
|
|
<tuiIcon name="xiangmu" class="pr10" color="#1C9AFF"></tuiIcon>
|
|
<text>德润物联智慧园区项目</text>
|
|
</view>
|
|
<u-icon size="22" name="arrow-down-fill" color="#ccc"></u-icon>
|
|
</view>
|
|
</view>
|
|
<mescroll-body top="80" ref="mescrollRef" bottom="80" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
|
<view class="device-list">
|
|
<view class="device-box" v-for="(item,index) in 4" :key="index" @click="goDetailFn(item)">
|
|
<view class="device-box-img pr20">
|
|
<u-image width="160" height="180" src="http://static.drgyen.com/app/hc-app-power/images/home/waterLevel/device.jpg"></u-image>
|
|
</view>
|
|
<view class="device-box-info">
|
|
<view class="device-box-info-name">A区饮水间</view>
|
|
<view class="device-box-info-id pb10">
|
|
<text class="text--base--grey">水表编号：</text>
|
|
<text>20210120173218F01</text>
|
|
</view>
|
|
<view class="device-box-info-waterValue">
|
|
<text class="text--base--grey">总用水量：</text>
|
|
<text>125t</text>
|
|
</view>
|
|
</view>
|
|
<view class="device-box-state">
|
|
<view class="device-box-state-icon"></view>
|
|
<view class="device-box-state-text">在线</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</mescroll-body>
|
|
<u-select v-model="projectPickShow" :list="projectPickList"></u-select>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
projectPickShow:false,
|
|
projectPickList:[{
|
|
label:"德润物联智慧园区项目",
|
|
value:"hcwl"
|
|
}],
|
|
}
|
|
},
|
|
mixins:[MescrollMixin],
|
|
onLoad() {},
|
|
methods: {
|
|
goDetailFn(item){
|
|
uni.navigateTo({
|
|
url:"./deviceDetail"
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|