场景:上面太丑 解决 :加个虚幻
<div v-for="(url, i) in item.work.photos" :key="i + 'workphotos'">
<img :src="url" @click="openFullScreen(url)" />
<!-- <div class="bg-img" :style="`background-image: url(${url})`"></div> -->
</div>
div {
width: 0.82rem;
height: 0.82rem;
background: rgba(255, 255, 255, 0.2);
border-radius: 0.15rem;
margin-right: 0.07rem;
.flex-center;
position: relative;
img {
width: 0.76rem;
height: 0.76rem;
border-radius: 0.15rem;
border: 0.01rem solid #ffffff;
object-fit: cover;
// .ab-center;//定位居中
}
.bg-img {
width: 0.76rem;
height: 0.76rem;
border-radius: 0.15rem;
// border: 0.01rem solid #ffffff;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(0.02rem) brightness(0.5);
}
}