uni-zhks-app/pages/p-i-video/p-i-video.vue

<template>
	<view>
		<view class="list_item">
			<view v-for="(item,index) in 6" class="item" :class="item_open == index?'item_open':''" @click="change(index)">
				<view class="item_title">
					<view class="left">
						<view class="icon">
							<image src="./icon/vhome.png" mode=""></image>
						</view>
						<view class="name">
							宿舍楼监控
						</view>
					</view>
					<view class="icon">
						<uni-icons :type="item_open == index?'arrowup':'arrowdown'"></uni-icons>
					</view>
				</view>
				<view class="item_inner">
					<view class="inner_list">
						<view class="item" @click="open_drawer()">
							<view class="icon">
								<image src="./icon/video.png" mode=""></image>
							</view>
							<view class="name">南煤场区域</view>
						</view>
						<view class="item">
							<view class="icon">
								<image src="./icon/video.png" mode=""></image>
							</view>
							<view class="name">仓下计量区域</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	
		
		<uni-drawer ref="drawer" mode="right">
			<view class="drawer">
				<!-- <view class="top"></view> -->
				<view class="title">南煤场区域</view>
				<view class="list_item">
					<view class="item">
						<view class="icon">
							<image src="http://jiewei-icon.oss-cn-beijing.aliyuncs.com/default-img.png" mode=""></image>
						</view>
						<view class="right">
							<view class="name">1#公寓楼门厅监控</view>
							<view class="btn">查看监控</view>
						</view>
					</view>
					<view class="item">
						<view class="icon">
							<image src="http://jiewei-icon.oss-cn-beijing.aliyuncs.com/default-img.png" mode=""></image>
						</view>
						<view class="right">
							<view class="name">1#公寓楼</view>
							<view class="btn">查看监控</view>
						</view>
					</view>
				</view>
			</view>
		</uni-drawer>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item_open:0,
			};
		},
		methods:{
			change(index){
				this.item_open = index
			},
			open_drawer(){
				this.$refs.drawer.open();
			}
		}
		
	}
</script>

<style lang="scss">
	.list_item{
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		.item{
			box-sizing: border-box;
			padding: 0 18rpx;
			.item_title{
				height: 110rpx;
				
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				border-bottom: 2rpx solid #f3f3f3;
				.left{
					display: flex;
					align-items: center;
					.icon{
						image{
							width: 83rpx;
							height: 83rpx;
						}
					}
					.name{
						margin-left: 36rpx;
						
						font-size: 27rpx;
						font-family: MicrosoftYaHei;
						color: #5A5A5A;
				
					}
				}
				.icon{
					
				}
			}
			
			.item_inner{
				display: none;
				box-sizing: border-box;
				padding: 0 30rpx;
				.inner_list{
					box-sizing: border-box;
					padding: 0 18rpx;
					.item{
						height: 110rpx;
						
						display: flex;
						align-items: center;
						
						border-bottom: 2rpx solid #f3f3f3;
						.icon{
							image{
								width: 83rpx;
								height: 83rpx;
							}
						}
						.name{
							margin-left: 36rpx;
							
							font-size: 27rpx;
							font-family: MicrosoftYaHei;
							color: #5A5A5A;
						}
					}
				}
			}
		}
		.item_open{
			.item_inner{
				display: block;
			}
		}
	}

	.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{
			margin-top: 4rpx;
			padding: 0;
			.item{
				box-sizing: border-box;
				padding-top: 33rpx;
				padding-bottom: 30rpx;
				
				display: flex;
				
				border-bottom: 2rpx solid #f3f3f3;
				.icon{
					image{
						width: 156rpx;
						height: 117rpx;
					}
				}
				.right{
					margin-left: 45rpx;
					.name{
						font-size: 27rpx;
						font-family: MicrosoftYaHei;
						color: #2C3E50;
						line-height: 36rpx;
						
						white-space: nowrap;
						overflow: hidden;
						text-overflow:ellipsis;
					}
					.btn{
						margin-top: 35rpx;
						
						width: 143rpx;
						height: 44rpx;
						background: #009FE8;
						border-radius: 21rpx;
						text-align: center;
						line-height: 44rpx;
						
						font-size: 25rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;

					}
				}
				
			}
		}
	}
	
</style>