<div class="img_div" v-for="item in Object.keys(statusList)" :key="item">
<a href="#">
<img :src="require(`../../assets/img/${item}.png`)" v-show="!statusList[item]">
<img :src="require(`../../assets/img/${item}yc.png`)" v-show="statusList[item]">
<div class="mask">
<div>{{statusNames[item]}}</div>
<div class="maskinner">
<div v-show="!statusList[item]">
<i style="width:5px;height:5px;border-radius:50%;background-color:#00FF00;display: inline-block; margin-right: 2px"></i>状态:正常
</div>
<div v-show="statusList[item]">
<i style="width:5px;height:5px;border-radius:50%;background-color:red;display: inline-block; margin-right: 2px"></i>状态:异常
</div>
</div>
</div>
</a>
</div>
//css
.img_div {
display: inline-block;
position: relative;
}
.img_div img:hover{
transform: scale(1.4);
}
.mask h3 {
text-align: center;
}
.img_div a:hover .mask {
opacity: 1;
}
.mask:before,
.tipbox:after {
content: '';
position: absolute;
border-style: dashed dashed solid dashed;
line-height: 1;
display: inline-block;
}
.mask:after {
left: 20px;
border-color: transparent transparent #d7dadb;
border-width: 11px;
top: -22px;
z-index: 1080;
}
.mask:before {
left: 20px;
border-color: transparent transparent rgba(6, 21, 50, 1);
border-width: 10px;
top: -19px;
z-index: 1081;
}
.mask {
position: absolute;
top: 55px;
left: 15px;
width: 85px;
height: 45px;
// background: rgba(101, 101, 101, 1);
background: rgba(6, 21, 50, 1);
color: #ffffff;
opacity: 0;
font-size: 14px;
/* border: 1px solid #D7DADB; */
display: block;
padding: 5px;
border-radius: 2px;
z-index: 9999;
}
.maskinner {
display: flex;
align-items: center;
/* justify-content: center; */
}
展示一个头部有三角形的遮罩层提示框
最新推荐文章于 2023-06-18 18:40:11 发布