80%

pages/monitor/site-detail/site-detail.vue

@@ -0,0 +1,99 @@
+<template>
+	<view>
+		<view class="camera-list">
+			<view class="camera-item" v-for="(item ,index) in cameraList" :key="index">
+				<view class="camera-name">
+					{{item.name}}
+				</view>
+				<image class='camera-thumb' src="../../../monitor_detail_example.png" mode=""></image>
+				<view class="overlay">
+					<u-icon name="play-circle" size='48'></u-icon>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				cameraList: [{
+						name: 'CAMERA01'
+					},
+					{
+						name: 'CAMERA02'
+					},
+					{
+						name: 'CAMERA03'
+					},
+					{
+						name: 'CAMERA04'
+					},
+					{
+						name: 'CAMERA06'
+					},
+					{
+						name: 'CAMERA07'
+					},
+				]
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+<style>
+	page {
+		background-color: #f6f6f6;
+	}
+</style>
+<style lang="scss" scoped>
+	.camera-list {
+		padding: 0rpx 20rpx 0rpx;
+
+		.camera-item {
+			// height: 300rpx;
+			background-color: white;
+			border-radius: 10rpx;
+			margin-bottom: 20rpx;
+			position: relative;
+
+			.camera-name {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				position: absolute;
+				background-color: #c6c6c6;
+				border-radius: 10rpx 0 10rpx 0;
+				color: white;
+				top: 0;
+				left: 0;
+				font-size: 20rpx;
+				height: 50rpx;
+				width: 160rpx;
+				z-index: 99;
+			}
+
+			.camera-thumb {
+				width: 100%;
+				height: 300rpx;
+				border-radius: 10rpx;
+			}
+
+			.overlay {
+				width: 100%;
+				height: 100%;
+				position: absolute;
+				left: 0;
+				top: 0;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				z-index: 99;
+
+			}
+		}
+	}
+</style>