set up an animation animation, add a warning to the background icon, without a picture, (img) is all right, after adding the picture, the picture covers the warning icon (background)
.list
height 100%
float left
width 83%
padding-left 2%
.wrap
overflow hidden
.cont
height 90px
overflow-x auto
overflow-y hidden
position relative
.suspectList
padding-top 2px
li
animation mymove 1s infinite
.stopBlink
animation none
.similarityList,.suspectList
padding-left 5px
left 0px
top 0px
position absolute
height 84px
overflow-x auto
white-space nowrap
display flex
li
border 3px solid red
height 76px
width 64px
display inline-block
float left
font-size 13px
text-decoration none
margin 0 6px 0 0
img
height 77px
width 64px
.similarityList
li
border 3px solid transparent
position relative
.repeat
color white
position absolute
top -3px
right -4px
font-size 12px
height 18px
width 18px
text-align center
background red
border-radius 50%
font-style normal
font-weight bold
@keyframes mymove
{
from {
border-color -sharp1d2029
background none
background-position bottom right
}
to {
border-color red
background url("../../../assets/icon/warning_s.png") no-repeat
background-position bottom right
}
}
<div class="list">
<div class="wrap">
<div class="cont">
<ul class="suspectList">
<li v-for="(item,index) in abnormalArr" :class="{"stopBlink":item.isBlink}" :key="index" @click="abnormalArrShow(index)">
<!-- <img :src="system_picUrl + item.imageAddress"> -->
</li>
</ul>
</div>
</div>
</div>
requirements: warn icon (background) that you can flash on the picture (img)