222 lines
4.0 KiB
Vue
222 lines
4.0 KiB
Vue
<template>
|
||
<u-popup :show="open" mode="bottom" @close="close" closeable>
|
||
<view class="lock">
|
||
<view class="title">土壤墒情
|
||
<view class="iconfont icon-shuaxin"></view>
|
||
</view>
|
||
<view class="list-title ">
|
||
<view class="fixed">
|
||
<view>层</view>
|
||
<view>深度</view>
|
||
<view>湿度</view>
|
||
<view>温度</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="list-box" style="padding-top: 108px;">
|
||
<view class="card">
|
||
<uni-collapse v-if="list.length">
|
||
<uni-collapse-item title-border="none" :border="false" :open="true" v-for="item in list">
|
||
<template v-slot:title>
|
||
<view class="fixed" style="justify-content: space-between;">
|
||
<view>
|
||
位置：墒情1-1
|
||
</view>
|
||
<view>
|
||
2024-01-12 19:21:32
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view class="list-content">
|
||
<view class="fixed">
|
||
<view>1</view>
|
||
<view>10cm</view>
|
||
<view>12.6%</view>
|
||
<view>5.4℃</view>
|
||
</view>
|
||
<view class="fixed">
|
||
<view>2</view>
|
||
<view>10cm</view>
|
||
<view>12.6%</view>
|
||
<view>5.4℃</view>
|
||
</view>
|
||
<view class="fixed">
|
||
<view>3</view>
|
||
<view>10cm</view>
|
||
<view>12.6%</view>
|
||
<view>5.4℃</view>
|
||
</view>
|
||
<view class="fixed">
|
||
<view>4</view>
|
||
<view>10cm</view>
|
||
<view>12.6%</view>
|
||
<view>5.4℃</view>
|
||
</view>
|
||
<view class="fixed">
|
||
<view>5</view>
|
||
<view>10cm</view>
|
||
<view>12.6%</view>
|
||
<view>5.4℃</view>
|
||
</view>
|
||
<view class="fixed">
|
||
<view>6</view>
|
||
<view>10cm</view>
|
||
<view>12.6%</view>
|
||
<view>5.4℃</view>
|
||
</view>
|
||
<view class="fixed">
|
||
<view>7</view>
|
||
<view>10cm</view>
|
||
<view>12.6%</view>
|
||
<view>5.4℃</view>
|
||
</view>
|
||
</view>
|
||
</uni-collapse-item>
|
||
</uni-collapse>
|
||
<u-empty mode="data" style="height: 50vh;" v-else />
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "Mp",
|
||
components: {},
|
||
props: {},
|
||
data() {
|
||
return {
|
||
title: "土壤墒情",
|
||
open: false,
|
||
list: [],
|
||
}
|
||
},
|
||
created() {},
|
||
mounted() {},
|
||
methods: {
|
||
/**
|
||
* 显示方法
|
||
* @param type 1基站 2阀门
|
||
* @param row
|
||
* @param data
|
||
*/
|
||
async show() {
|
||
this.open = true;
|
||
this.getList();
|
||
},
|
||
close() {
|
||
this.open = false;
|
||
},
|
||
getList() {
|
||
this.list = [];
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
::v-deep.u-popup__content__close--top-right {
|
||
z-index: 11;
|
||
}
|
||
|
||
.u-popup__content {
|
||
background: transparent;
|
||
|
||
|
||
.lock {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 108px;
|
||
z-index: 10;
|
||
background-color: #f3f3f3;
|
||
|
||
|
||
.title {
|
||
font-size: 34rpx;
|
||
position: relative;
|
||
text-align: center;
|
||
padding: 15px 0;
|
||
|
||
.icon-shuaxin {
|
||
position: absolute;
|
||
top: 15px;
|
||
right: 40px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.list-box {
|
||
border-radius: 10px 10px 0 0;
|
||
width: 100vw;
|
||
min-height: 50vh;
|
||
max-height: calc(100vh - 100px);
|
||
background-color: #f3f3f3;
|
||
padding: 10px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
|
||
|
||
.card {
|
||
background-color: transparent;
|
||
|
||
.uni-collapse {
|
||
background-color: transparent;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
::v-deep.uni-collapse-item__title {
|
||
background-color: #39ac4f;
|
||
color: #fff;
|
||
padding: 10px;
|
||
border-radius: 10px;
|
||
|
||
.uni-collapse-item__title-arrow {
|
||
width: 40px;
|
||
|
||
.uni-icons {
|
||
color: #fff !important;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
::v-deep.uni-collapse-item__wrap {
|
||
background: transparent !important;
|
||
}
|
||
}
|
||
|
||
.list-title,
|
||
.list-content {
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
margin-bottom: 10px;
|
||
box-shadow: 0 1px 9px rgb(209, 209, 209, 0.5);
|
||
|
||
.fixed {
|
||
view {
|
||
font-size: 30rpx;
|
||
padding: 10px 0;
|
||
text-align: center;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.list-title {
|
||
margin: 0 10px;
|
||
}
|
||
|
||
.list-content {
|
||
margin-bottom: 0;
|
||
|
||
.fixed {
|
||
view {
|
||
font-size: 28rpx;
|
||
border-bottom: 1px solid #f3f3f3;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</style> |