做一个勾选的效果
// 父级框
<div class="img-list">
// 浮在上方的图片
<img v-if="clickFlg == item.id" class="check-img" src="../../assets/images/checked.png" />
// 底图
<img class="data-img " src="../../assets/images/coursepng.png" @click="clickItem(item)">
</div>
css
父级设置 position:relative
浮动图片设置 position:absolute
位置通过top,bottom,left,right来修改,
然后用 z-index 设置显示层级,
小图的层级一定要比底图高。
.img-list{
position:relative;
}
.data-img{
@apply float-none ;
width:100%;
height:16rem;
background: rgba(0, 0, 0, 0);
opacity: 1;
border-radius: 0.5rem 0.5rem 0px 0px;
}
.check-img{
position: absolute;
width: 3.3125rem;
height: 2.9375rem;
top:0rem;
right: 0rem;
z-index: 10;
}