Vueは商品詳細ページの虫眼鏡機能を実装します

<div class="productLeft">
   <!-- 中央左の画像 -->
     <div class="mdImg">
         <img :src="require('../assets/imgs/details/'+mdImgUrl)" alt="">
     </div>
     <!-- マスクレイヤー-->
     <div v-show="isShow" class="marks" :style="{top:top+'px',left:left+'px'}"></div>
     <!-- マスク レイヤー ガラス superMarks-->
     <div @mouseenter="enter" @mouseleave="leave" @mousemove="marks" class="superMarks" ></div>
     <!--左側に小さな画像-->
     <div class="smImg">
         <!--左ボタン-->
         <div @click="前へ" class="前へ">
             <img src="../assets/icon/prev.png" >
         </div>
         <div class="smImgUl">
             <ul :style="{'margin-left':marginLeft+'px'}">
                 <li @mouseenter="enterLi(index)" v-for="(item,index) リスト" :key="index">
                     < 画像 :src="require('../assets/imgs/details/'+item.sm)" alt="">
                 </li>
             </ul>
         </div>
         <!-- 右ボタン -->
         <div @click="next" class="button-next">
             <img src="../assets/icon/next.png" >
         </div>
     </div>
    <!-- 左側に大きな画像 -->
     <div v-show="isShow" クラス="lgImg">
         <img :src="require('../assets/imgs/details/'+lgImgUrl)" alt="" :style="{top:topLgImg+'px',left:leftLgImg+'px'}">
     </div>
</div>

< スクリプト >
「./common/headerT.vue」からheaderTをインポートします。
「./common/Header.vue」からヘッダーをインポートします。
エクスポートデフォルト{
    データ（） {
        戻る {
            リスト:[{"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, // 数 li 左に移動する
            marginLeft:0, // 左右に移動する距離 isShow:false, // マスク レイヤー マークと大きな画像を表示するかどうかを制御します"
            left:0, // 左の位置をマークします top:0, // 下の位置をマークします leftLgImg:0, // 大きな画像 lgImg の位置を移動します topLgImg:0 // 大きな画像 lgImg の位置を移動します }
    },
    メソッド: {
        //マウスが小さい画像に入ると、対応する中央の画像が表示されます。enterLi(e){
            //e は対応する添え字です//console.log(e);
            this.mdImgUrl=this.list[e].md;
            this.lgImgUrl=this.list[e].lg;
        },

        // 左ボタンと右ボタンをクリックして ul 内の li を移動します。各 li の幅は 74 ピクセルで、5 つの li を表示するには ul の幅は 370 ピクセルです。
        前(){
            //左に移動 -
            if(this.ulIndex>-(this.list.length-5)){
                this.ulIndex--;
                this.marginLeft=this.ulIndex*74;
                //コンソール.log(this.ulIndex)
            }
        },
        次（）{
            //右に移動++
            if(this.ulIndex<0){
                 this.ulIndex++;
                this.marginLeft=this.ulIndex*74;
                //コンソール.log(this.ulIndex)
            }
        },
        
        //マウスが入ったり出たりする enter(){
            this.isShow=true
        },
        離れる（）{
            this.isShow=false
        },
        //マスクレイヤーの虫眼鏡マーク(e){
            //console.log(e.offsetX,e.offsetY) //マウスが移動したときの位置
            var marksWidth=200;//マークの幅 var marksHeight=200;//マークの高さ this.left=e.offsetX-marksWidth/2;   
            this.top=e.offsetY-marksHeight/2;
            //コンソールログ(this.left,this.top) 
            if(this.left<0){
                左 = 0;
            }それ以外の場合(this.left>250){
                左 = 250;
            }
            if(this.top<0){
                上へ
            }それ以外の場合(this.top>250){
                上へ
            }
            //コンソールログ(this.left,this.top) 
            
            //中サイズの画像 div の幅と高さは 450、大サイズの画像 div の幅と高さは 800 です
            this.leftLgImg=-this.left*800/450;
            this.topLgImg=-this.top*800/450;
        }
    },
    計算: {
    },
    コンポーネント:{
        "ヘッダー1":ヘッダーT,
        "headertwo":ヘッダー
    },
    時計：
    },
}
</スクリプト>

<スタイルスコープ>

    。コンテンツ{
        幅:1200ピクセル;
        マージン:0 自動;
    }
    .content>.product{
        ディスプレイ: フレックス;
        コンテンツの両端揃え: スペースの間;
    }
    /* 左サイズ画像スタイル*/
    .productLeft{
        幅:450ピクセル;
        位置: 相対的;
    }
    /* 左中央の画像 */
    .mdImg,.mdImg>画像{
        幅:450ピクセル;
        高さ:450px;
    }
    /*マスクレイヤーのスーパーマーク */
    .superMarks{
        幅:450ピクセル;
        高さ:450px;
        背景色:rgba(220, 220, 220, 0);
        位置:絶対;
        上:0px;
        左:0px;
    }
    /* マスクレイヤー*/
    .マーク{
        幅:200px;
        高さ:200px;
        位置:絶対;
        背景色:rgba(220, 220, 220, 0.5);
        /*top:0px; //インラインは動的に上と左を設定します
        左:0px;*/
    }
    /* 左側に小さい画像 */
    .smImg{
        ディスプレイ:フレックス;
        アイテムの位置を中央揃えにします。
        コンテンツの両端揃え: スペースの間;
        オーバーフロー:非表示;
    }
    .smImgUl{
        オーバーフロー:非表示;
        幅:370ピクセル;
    }
    .smImg ul{
        ディスプレイ: フレックス;
        幅:370ピクセル;
        マージン:0;
        パディング:0;
    }
    .smImg ul>li{
        パディング:0 3px;
    }
    .smImg 画像{
        高さ:60px;
        マージン:4px;
    }
    /*左側の大きな画像を非表示にする*/
    .lgImg{
        幅:400ピクセル;
        高さ:400px;
        オーバーフロー: 非表示;
        位置:絶対;
        上:0px;
        左:450px;
        境界線:2px実線 #aaa;
        背景色:#fff;
    }
    .lgImg 画像{
        幅:800ピクセル;
        高さ:800px;
        位置:絶対;
        /* 上:100px;
        左:100px;*/
    }

    /* 積の右側 */
    .productRight{
        幅:700ピクセル;
        
    }
    /* 左ボタンと右ボタン */
    .button-prev、.button-next{
        幅:35px;
        高さ:35px;
        行の高さ: 30px;
        境界線:1px実線 #ddd;
        境界線の半径:50%;
        テキスト配置:中央;
    }
    .button-prev:hover、.button-next:hover{
        背景色:#eee;
    }
    .button-prev>画像、.button-next>画像{
        幅:20px;
        高さ:20px;
    }
</スタイル>