68 lines
1.6 KiB
Vue
68 lines
1.6 KiB
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"/>
|
||
|
|
<n-image
|
||
|
|
style="width: 100%;height: 100%"
|
||
|
|
preview-disabled
|
||
|
|
src="https://ceshi-worker-task.lihaink.cn/uploads/images/20231016/20231016140328a27258835.jpg"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div id="img2" class="img-list-item">
|
||
|
|
<water cid="img2"/>
|
||
|
|
<n-image
|
||
|
|
style="width: 100%;height: 100%"
|
||
|
|
preview-disabled
|
||
|
|
src="https://ceshi-worker-task.lihaink.cn/uploads/images/20231016/20231016140328a27258835.jpg"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div id="img3" class="img-list-item">
|
||
|
|
<water cid="img3"/>
|
||
|
|
<n-image
|
||
|
|
style="width: 100%;height: 100%"
|
||
|
|
preview-disabled
|
||
|
|
src="https://ceshi-worker-task.lihaink.cn/uploads/images/20231016/20231016140328a27258835.jpg"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div id="img4" class="img-list-item">
|
||
|
|
<water cid="img4"/>
|
||
|
|
<n-image
|
||
|
|
style="width: 100%;height: 100%"
|
||
|
|
preview-disabled
|
||
|
|
src="https://ceshi-worker-task.lihaink.cn/uploads/images/20231016/20231016140328a27258835.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;
|
||
|
|
/* border: 1px solid darkblue; */
|
||
|
|
/* background-color: aquamarine; */
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|