pingpu_H5/pages/monitor/index.vue

<template>
	<!-- 可视监控 -->
	<view class="monitor-panel">
		<!-- 监控列表 -->
		<block v-for="(item,index) in monitorList" :key="index">
			<view class="monitor-item">
				<image class="pic" mode="aspectFill"
					src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg">
				</image>
				<view class="row-between p-10">
					<text class="text">2022-9-2 20:12:57</text>
					<text class="tips"></text>
				</view>
			</view>
		</block>
		<!-- 监控列表end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 监控列表
				monitorList: [{}, {}, {}, {}, {}, {}, {}],
			};
		}
	}
</script>

<style lang="scss">
	// 可视监控面板
	.monitor-panel {
		display: flex;
		flex-wrap: wrap;
		padding: 24rpx;
		margin-top: 24rpx;
		background-color: #fff;
	}

	// 可视列表项
	.monitor-item {
		width: 336rpx;
		
		margin-right: 28rpx;
		margin-bottom: 24rpx;
		
		border-radius: 12rpx;
		border: 1rpx solid #F1F1F1;

		&:nth-child(2n) {
			margin-right: 0;
		}

		.pic {
			display: block;
			width: 336rpx;
			height: 255rpx;

			border-radius: 4rpx;
		}

		.text {
			font-size: 20rpx;
			color: #666666;
		}

		.tips {
			width: 24rpx;
			height: 24rpx;
			background: #07F546;
			border-radius: 100%;
		}
	}
</style>