<template>
<div class="product_detail_head w-100">
<div class="product_detail_left">
<div class="big_picture">
<!-- <img :src="goodsInfo.images" alt="" /> -->
<img :src="big_picture" alt="" />
</div>
<ul class="small_picture">
<li @mouseover="changeActive(item.img, index)" v-for="(item, index) in small_picturs" :key="index">
<div :class="activePicture == index ? 'liHover' : ''"><img :src="item.img" alt="" /></div>
</li>
</ul>
<div class="collect"><svg-icon icon-class="login-password" />收藏宝贝</div>
</div>
</div>
</template>
<script>
export default {
props: ['goodsInfo'],
data() {
return {
num: 1,
small_picturs: [
{ img: 'https://qnobs.bigaomro.com/product/image/1571111-main-002a02.jpg!PM' },
{ img: 'https://qnobs.bigaomro.com/product/image/1571111-main-002a01.jpg!PM' },
{ img: 'https://qnobs.bigaomro.com/dd00ba7e-7ce2-4081-b13e-353bb6eb5444.jpg!PM' },
],
big_picture: 'https://qnobs.bigaomro.com/product/image/1571111-main-002a02.jpg!PM',
activePicture: 0,
};
},
methods: {
changeActive(val, index) {
console.log(val);
this.big_picture = val;
this.activePicture = index;
},
},
};
</script>
<style lang="scss" scoped>
.product_detail_left {
width: 31.6%;
padding: 0 20px;
box-sizing: border-box;
.big_picture {
width: 340px;
height: 340px;
background-color: $commonColor;
img {
width: 100%;
height: 100%;
}
}
.small_picture {
display: flex;
margin-top: 35px;
margin-bottom: 22px;
li {
width: 60px;
height: 60px;
border: 3px solid transparent;
box-sizing: border-box;
margin-right: 10px;
cursor: pointer;
div {
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
}
}
.liHover {
border: 3px solid red;
box-sizing: border-box;
}
}
.collect {
cursor: pointer;
box-sizing: border-box;
padding-left: 5px;
color: #888888;
font-size: 14px;
display: flex;
align-items: center;
.svg-icon {
width: 27px;
height: 27px;
}
}
}
</style>
Imitate Jingdong - drag the mouse into the small image, the large image will be transformed accordingly, and the small image will add a red border
Guess you like
Origin blog.csdn.net/m0_69502730/article/details/131579306
Recommended
Ranking