设置图片的选中样式对勾

zj_zjk_sjz

已于 2024-02-04 14:37:06 修改

阅读量502

点赞数 6

文章标签： vue.js css

于 2024-01-25 10:56:55 首次发布

本文链接：https://blog.csdn.net/qq_41459772/article/details/135839131

版权

在这里插入图片描述

html结构如下

<div class="maps-box">
    <div v-for="(mapItem,index) in mapsArr"
         :key="index"
         @click="mapChange(mapItem)"
         class="tag1">
         <div :title="mapItem.title"
              :class="[tag2,{active: selectedMap.includes(mapItem.type)}]">
              <img alt="" :src="require(`../../assets/forecast/${mapItem.img}`)">
         </div>
         <span class="map-title">{{mapItem.name}}</span>
   </div>
</div>

css样式文件

.tag1 {
    height: 55px;
    margin: 10px;
    cursor: pointer;

    .tag2 {
        width: 55px;
        height: 55px;
        vertical-align: middle;
        display: inline-block;
    }

    .active {
        position: relative;
        border: 1px solid #07C160;
    }

    .active:before {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        border: 7px solid #07C160;
    }

    .active:after {
        content: "";
        width: 3px;
        height: 7px;
        position: absolute;
        right: 3px;
        top: 0;
        border: 1px solid #fff;
        border-top-color: transparent;
        border-left-color: transparent;
        transform: rotate(45deg);
    }

    .map-title {
        margin-left: 15px;
    }
}

.tag1:hover {
    background-color: #EFF7F4;
}