uni-zhks-app/components/p-i-o-section-2/p-i-o-section-2.vue

<template>
	<view>
		<view class="content">
			<view class="title">
				井下人员（区域分布）
			</view>
			<view class="inner">
				<view class="list_item">
					<view class="item" v-for="item in regionList" :key="item.area_id" @click="openDrawer(item),getMineList(item.area_id)">
						<view class="left">
							<view class="icon">
								<image :src="item.thumb" mode=""></image>
							</view>
							<view class="name">{{item.area_name}}</view>
						</view>
						<view class="right">{{item.pepole_num}}人</view>
					</view>
					
				</view>
				
				
			</view>
		</view>
		
		
		<uni-drawer ref="drawer" maskClick mode="right">
			<view class="drawer">
				<view class="top"></view>
				<view class="title">{{drawer.name}}</view>
				<view class="list_item">
					<view class="item" v-for="item in mineList" :key="item.station_id" @click="go_number(item.station_id,item.station_name)">
						<view class="name">{{item.station_name}}</view>
						<view class="right">
							<view class="num">{{item.pepole_num}}人</view>
							<view class="icon">
								<uni-icons type="arrowright"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-drawer>
			
	</view>
</template>

<script>
	export default {
		props:[
			"regionList",
			"mineList"
		],
		data() {
			return {
				drawer:{
					name:"矿井"
				}
			};
		},
		methods:{
			openDrawer(item){
				this.$refs.drawer.open();
				this.drawer.name = item.area_name
			},
			// 向页面传矿井id
			getMineList(area_id){
				this.$emit("getMineList",area_id)
				console.log(area_id)
			},
			go_number(station_id,station_name){
				uni.navigateTo({
					url:"../../pages/p-i-orientation/p-i-o-s2-number/p-i-o-s2-number?station_id="+station_id+"&station_name="+station_name

				})
			}
			
		}
	}
</script>

<style lang="scss">
	.content{
		margin-top: 16rpx;
		background: #FFFFFF;
		box-shadow: 0px 3rpx 29rpx 0px rgba(59, 74, 116, 0.14);
		border-radius: 20rpx;

		.title{
			line-height: 96rpx;
			text-align: center;
			
			
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #232627;
			
			border-bottom: 2rpx solid #f3f3f3;
		}
		.inner{
			box-sizing: border-box;
			padding-left: 30rpx;
			padding-right: 20rpx;
			padding-bottom: 20rpx;
			.list_item{
				background: #FFFFFF;

				.item{
					height: 110rpx;
					border-bottom: 1px solid #f3f3f3;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left{
						height: 110rpx;
						display: flex;
						align-items: center;
						.icon{
							image{
								width: 83rpx;
								height: 83rpx;
							}
						}
						.name{
							margin-left: 36rpx;
							
							font-size: 29rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #232627;

						}
					}
					.right{
						font-size: 29rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #27AE60;

					}
				}
			}
		}
	}

	.drawer{
		.top{
			height: var(--status-bar-height);
			background-color: #009FE8;
		}
		.title{
			box-sizing: border-box;
			padding-left: 20rpx;
			text-align: left;
			border-bottom: 1rpx solid #009FE8;
			line-height: 90rpx;
			
			font-size: 29rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #232627;
		}
		.list_item{
			
			.item{
				display: flex;
				justify-content: space-between;
				
				box-sizing: border-box;
				margin: 0 20rpx;
				border-bottom: 1rpx solid #f3f3f3;
				line-height: 70rpx;
				
				font-size: 29rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #232627;
				.name{
					
				}
				.right{
					display: flex;
					
					.num{
						
					}
					.icon{
						margin-left: 4rpx;
					}
				}
			}
		}
	}

</style>