jsy-app/components/custom-index-mp/custom-index-mp.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>