dataV-xunfei/src/views/controller/index.vue

<script setup lang='ts'>
import water from "./components/water.vue"
import { NImage } from 'naive-ui'

</script>

<template>
  <div class="w-full h-full white">
    <div class="img-list w-full h-full">
			<div id="img1" class="img-list-item">
				<water cid="img1"/>
				<img src="https://worker-task.lihaink.cn/uploads/images/20231017/20231017173032d02895995.jpg"/>
			</div>
			<div id="img2" class="img-list-item">
				<water cid="img2"/>
				<img src="https://worker-task.lihaink.cn/uploads/images/20231017/20231017173052de7b64557.jpg"/>
			</div>
			<div id="img3" class="img-list-item">
				<water cid="img3"/>
				<img src="https://worker-task.lihaink.cn/uploads/images/20231017/20231017173108d32b37266.jpg"/>
			</div>
			<div id="img4" class="img-list-item">
				<water cid="img4"/>
				<img src="https://worker-task.lihaink.cn/uploads/images/20231017/20231017173128418571732.jpg"/>
			</div>
		</div>
  </div>
</template>

<style lang="scss" scoped>
.white{
	background-color: #101014;
	color: #fff;
	.img-list{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		padding: 10px;
		.img-list-item{
			box-sizing: border-box;
			height: 50%;
			width: 50%;
			padding: 10px;
			overflow: hidden;
			img{
				width: 100%;
				height: 100%;
			}
			/* border: 1px solid darkblue; */
			/* background-color: aquamarine; */
		}
	}
}
</style>