Vue implements the magnifying glass function of the product details page

<div class="productLeft">
   <!-- Middle left image -->
     <div class="mdImg">
         <img :src="require('../assets/imgs/details/'+mdImgUrl)" alt="">
     </div>
     <!-- Mask layer-->
     <div v-show="isShow" class="marks" :style="{top:top+'px',left:left+'px'}"></div>
     <!-- Mask layer glass superMarks-->
     <div @mouseenter="enter" @mouseleave="leave" @mousemove="marks" class="superMarks" ></div>
     <!--Small picture on the left-->
     <div class="smImg" >
         <!--Left button-->
         <div @click="prev" class="button-prev">
             <img src="../assets/icon/prev.png" >
         </div>
         <div class="smImgUl">
             <ul :style="{'margin-left':marginLeft+'px'}">
                 <li @mouseenter="enterLi(index)" v-for="(item,index) of list" :key="index">
                     < img :src="require('../assets/imgs/details/'+item.sm)" alt="">
                 </li>
             </ul>
         </div>
         <!-- Right Button -->
         <div @click="next" class="button-next">
             <img src="../assets/icon/next.png" >
         </div>
     </div>
    <!-- Large image on the left -->
     <div v-show="isShow" class="lgImg">
         <img :src="require('../assets/imgs/details/'+lgImgUrl)" alt="" :style="{top:topLgImg+'px',left:leftLgImg+'px'}">
     </div>
</div>

< script >
import headerT from "./common/headerT.vue"
import header from "./common/Header.vue"
export default {
    data() {
        return {
            list:[{"sm":"s1.png","md":"s1.png","lg":"s1.png"},
            {"sm":"s2.png","md":"s2.png","lg":"s2.png"},
            {"sm":"s3.png","md":"s3.png","lg":"s3.png"},
            {"sm":"s4.png","md":"s4.png","lg":"s4.png"},
            {"sm":"s5.png","md":"s5.png","lg":"s5.png"},
            {"sm":"s6.png","md":"s6.png","lg":"s6.png"},
            {"sm":"s7.png","md":"s7.png","lg":"s7.png"},
            {"sm":"s8.png","md":"s8.png","lg":"s8.png"}],
            mdImgUrl:"s1.png",
            lgImgUrl:"s1.png",
            ulIndex:0, //Move a few li to the left
            marginLeft:0, //The distance to move left and right isShow:false, //Controls whether the mask layer marks and large images are displayed"
            left:0, //marks left position top:0, //marks down position leftLgImg:0, //large image lgImg move position topLgImg:0 //large image lgImg move position }
    },
    methods: {
        //When the mouse enters the small picture, the corresponding middle picture is displayed enterLi(e){
            //e is the corresponding subscript//console.log(e);
            this.mdImgUrl=this.list[e].md;
            this.lgImgUrl=this.list[e].lg;
        },

        //Click the left and right buttons to move the li in ul. Each li is 74px wide and ul is 370px wide to display 5 li.
        prev(){
            //Move left -
            if(this.ulIndex>-(this.list.length-5)){
                this.ulIndex--;
                this.marginLeft=this.ulIndex*74;
                //console.log(this.ulIndex)
            }
        },
        next(){
            //Move right++
            if(this.ulIndex<0){
                 this.ulIndex++;
                this.marginLeft=this.ulIndex*74;
                //console.log(this.ulIndex)
            }
        },
        
        //Mouse enters and leaves enter(){
            this.isShow=true
        },
        leave(){
            this.isShow=false
        },
        //Mask layer magnifying glass marks(e){
            //console.log(e.offsetX,e.offsetY) //The position of the mouse when it moves in
            var marksWidth=200;//marks width var marksHeight=200;//marks height this.left=e.offsetX-marksWidth/2;   
            this.top=e.offsetY-marksHeight/2;
            //console.log(this.left,this.top) 
            if(this.left<0){
                this.left=0;
            }else if(this.left>250){
                this.left=250;
            }
            if(this.top<0){
                this.top=0;
            }else if(this.top>250){
                this.top=250;
            }
            //console.log(this.left,this.top) 
            
            //The width and height of the medium image div is 450, and the width and height of the large image div is 800
            this.leftLgImg=-this.left*800/450;
            this.topLgImg=-this.top*800/450;
        }
    },
    computed: {
    },
    components:{
        "headerone":headerT,
        "headertwo":header
    },
    watch:
    },
}
</script>

<style scoped>

    .content{
        width:1200px;
        margin:0 auto;
    }
    .content>.product{
        display: flex;
        justify-content: space-between;
    }
    /* Left side size image style*/
    .productLeft{
        width:450px;
        position: relative;
    }
    /* Middle image on the left */
    .mdImg,.mdImg>img{
        width:450px;
        height:450px;
    }
    /*Mask layer superMarks */
    .superMarks{
        width:450px;
        height:450px;
        background-color:rgba(220, 220, 220, 0);
        position:absolute;
        top:0px;
        left:0px;
    }
    /* Mask layer*/
    .marks{
        width:200px;
        height:200px;
        position:absolute;
        background-color:rgba(220, 220, 220, 0.5);
        /*top:0px; //Inline sets dynamic top and left
        left:0px;*/
    }
    /* Small image on the left */
    .smImg{
        display:flex;
        align-items: center;
        justify-content: space-between;
        overflow:hidden;
    }
    .smImgUl{
        overflow:hidden;
        width:370px;
    }
    .smImg ul{
        display: flex;
        width:370px;
        margin:0;
        padding:0;
    }
    .smImg ul>li{
        padding:0 3px;
    }
    .smImg img{
        height:60px;
        margin:4px;
    }
    /*Hide the large image on the left*/
    .lgImg{
        width:400px;
        height:400px;
        overflow: hidden;
        position:absolute;
        top:0px;
        left:450px;
        border:2px solid #aaa;
        background-color:#fff;
    }
    .lgImg img{
        width:800px;
        height:800px;
        position:absolute;
        /*top:100px;
        left:100px;*/
    }

    /* product right side */
    .productRight{
        width:700px;
        
    }
    /* Left and right buttons */
    .button-prev,.button-next{
        width:35px;
        height:35px;
        line-height: 30px;
        border:1px solid #ddd;
        border-radius:50%;
        text-align:center;
    }
    .button-prev:hover,.button-next:hover{
        background-color:#eee;
    }
    .button-prev>img,.button-next>img{
        width:20px;
        height:20px;
    }
</style>