Jingdong を模倣 - マウスを小さい画像にドラッグすると、大きい画像がそれに応じて変形し、小さい画像には赤い境界線が追加されます。

<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>