全部图片页面

src/router/index.js

           name: 'allMaterials_appliances_standard',
           component: () => import('../views/allMaterials_appliances_standard.vue')
       },//全部物料-家电-标准
+      {
+          path: '/criterion-money',
+          name: 'criterion-money',
+          component: () => import('../views/twoCart/criterion-money.vue')
+      },//二轮车-标准-收银区
+      {
+          path: '/criterion-showarea',
+          name: 'criterion-showarea',
+          component: () => import('../views/twoCart/criterion-showarea.vue')
+      },//二轮车-标准-展示区
+      {
+          path: '/criterion-shop',
+          name: 'criterion-shop',
+          component: () => import('../views/twoCart/criterion-shop.vue')
+      },//二轮车-标准-店外
+      {
+          path: '/high-money',
+          name: 'high-money',
+          component: () => import('../views/twoCart/high-money.vue')
+      },//二轮车-高产-收银区
+      {
+          path: '/high-showarea',
+          name: 'high-showarea',
+          component: () => import('../views/twoCart/high-showarea.vue')
+      },//二轮车-高产-展示区
+      {
+          path: '/high-shop',
+          name: 'high-shop',
+          component: () => import('../views/twoCart/high-shop.vue')
+      },//二轮车-高产-店外
+      {
+          path: '/compliance',
+          name: 'compliance',
+          component: () => import('../views/twoCart/compliance.vue')
+      },//合规
+      {
+          path: '/criterion-allDetails',
+          name: 'criterion-allDetails',
+          component: () => import('../views/twoCart/criterion-allDetails.vue')
+      },//二轮车-标准-全部物料
+      {
+          path: '/high-allDetails',
+          name: 'high-allDetails',
+          component: () => import('../views/twoCart/high-allDetails.vue')
+      },//二轮车-高产-全部物料
 ]
 
 const router = new VueRouter({

src/store/index.js

 				{'店外':'/appliances_high_outside','店内':'','柜台':'','展示区':'/appliances_high_exhibition','收银台':'/appliances_high_pay','合规物料':'','浏览全部物料':'/allMaterials_appliances_high'},//高产
 			], //家电
 			[
-				{'店外':'','店内':'','柜台':'','展示区':'','收银台':'','合规物料':'','浏览全部物料':''},//标准
-				{'店外':'','店内':'','柜台':'','展示区':'','收银台':'','合规物料':'','浏览全部物料':''},//高产
+				{'店外':'/criterion-shop','店内':'','柜台':'','展示区':'/criterion-showarea','收银台':'/criterion-money','合规物料':'/compliance','浏览全部物料':'/criterion-allDetails'},//标准
+				{'店外':'/high-shop','店内':'','柜台':'','展示区':'/high-showarea','收银台':'/high-money','合规物料':'/compliance','浏览全部物料':'/high-allDetails'},//高产
 			], //二轮车
 		]
 	},

src/views/twoCart/compliance.vue

+<template>
+    <div class="all">
+        <!-- <img class="showBg" src="../../assets/vehicle/showBg.jpg" alt=""> -->
+        <img class="imgBg" src="../../assets/vehicle/imgBg.jpg" alt="">
+        <div class="content">
+            <img class="imgWord1" src="../../assets/vehicle/complianceWord1.png" alt="">
+<!--            <img class="imgWord2" src="../../assets/vehicle/imgWord2_2_1.png" alt="">-->
+<!--            <img class="imgWord3" src="../../assets/vehicle/imgWord2_3_1.png" alt="">-->
+            <div class="contPic">
+                <img class="bigImg" src="../../assets/vehicle/complianceContImg.png" alt="">
+                <img @click="showMaskfn()" class="imgLeft" src="../../assets/vehicle/complianceClick1.png" alt="">
+                <img @click="showMaskfn()" class="imgRight" src="../../assets/vehicle/complianceClick2.png" alt="">
+                <img class="click1" src="../../assets/pageRedDot.png" alt="">
+                <img class="click2" src="../../assets/pageRedDot.png" alt="">
+            </div>
+            <img class="imgWord4" src="../../assets/vehicle/complianceWord2.png" alt="">
+        </div>
+        <!-- 弹框 -->
+        <div class="maskAll" v-if="showMask">
+            <img class="mask1_1" src="../../assets/vehicle/maskCompliance.jpg" alt="">
+            <img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt="">
+        </div>
+        <Sidebar></Sidebar>
+    </div>
+</template>
+
+<script>
+  import Sidebar from "../../components/sidebar";
+  export default{
+    name:"highshop",
+    components:{Sidebar},
+    data(){
+      return{
+        showMask:false,//弹框显示
+        showMaskNum:null,
+      }
+    },
+    methods:{
+      showMaskfn(e){
+        this.showMask = true;
+      }
+    }
+  }
+</script>
+
+<style scoped="scoped">
+    *{
+        padding: 0;
+        margin: 0;
+    }
+    .all{
+        width: 100%;
+        height: 100%;
+    }
+    .showBg,.imgBg,.maskAll{
+        width: 100%;
+        height: 100%;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+
+    }
+    .content{
+        width: 100%;
+        height: 12.06rem;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+        color: #c4c4c3;
+        text-align: left;
+    }
+    .imgWord1{
+        width: 1.98rem;
+        height: 0.48rem;
+        margin-left: 3.05rem;
+        margin-top: 0.05rem;
+    }
+    .imgWord2{
+        width: 4.46rem;
+        height: 0.51rem;
+        margin-left: 0.6rem;
+        margin-top: 0.7rem;
+    }
+
+    .imgWord3{
+        width: 6.07rem;
+        height: 0.73rem;
+        margin-left: 0.6rem;
+        margin-top: 0.3rem;
+    }
+    .imgWord4{
+        width: 6.43rem;
+        height: 1.81rem;
+        margin-left: 0.6rem;
+        margin-top: 9.7rem;
+    }
+    .contPic{
+        position: relative;
+    }
+    .bigImg{
+        width: 8.15rem;
+        height: 8.93rem;
+        position: absolute;
+        top: 0.48rem;
+        left:50%;
+        transform: translateX(-50%);
+    }
+    .imgLeft{
+        width: 1.57rem;
+        height: 1.09rem;
+        position: absolute;
+        top: 3.7rem;
+        left: 0.9rem;
+    }
+    .imgRight{
+        width: 1.51rem;
+        height: 0.32rem;
+        position: absolute;
+        top: 7.15rem;
+        left: 0.8rem;
+    }
+    .click1{
+        width: 0.29rem;
+        height: 0.29rem;
+        position: absolute;
+        top: 3.45rem;
+        left: 1.6rem;
+        animation: dotTwinkle 3s linear infinite;
+    }
+    .click2{
+        width: 0.29rem;
+        height: 0.29rem;
+        position: absolute;
+        top: 7.35rem;
+        left: 1.6rem;
+        animation: dotTwinkle 3s linear infinite;
+    }
+    @keyframes dotTwinkle {
+        0%{opacity: 0.2}
+        50%{opacity:1}
+        100%{opacity:0.2}
+    }
+    .mask1_1{
+        width: 100%;
+        height: 15.06rem;
+        position: absolute;
+        top: 50%;
+        left:0rem;
+        transform: translateY(-50%);
+    }
+    .dele{
+        width: 0.8rem;
+        height: 0.8rem;
+        position: absolute;
+        bottom: 1.5rem;
+        left:50%;
+        transform: translateX(-50%);
+    }
+    .line{
+        width: 1.43rem;
+        height: 1.49rem;
+        position: absolute;
+        top: 5.2rem;
+        right: 0.7rem;
+        z-index: 9;
+    }
+</style>

src/views/twoCart/criterion-allDetails.vue

+<template>
+    <div class="all">
+        <img class="imgBg" src="../../assets/vehicle/detailsBg1.jpg" alt="">
+        <img class="contImg" src="../../assets/vehicle/allDetails1.png" alt="">
+        <Sidebar></Sidebar>
+    </div>
+</template>
+<script>
+  import Sidebar from "../../components/sidebar";
+    export default {
+      name:"criterionAllDetails",
+      components:{Sidebar},
+      data(){
+        return{
+
+        }
+      }
+    }
+</script>
+<style scoped="scoped">
+    .imgBg{
+        width: 100%;
+        height: 24.91rem;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+    .contImg{
+        width: 6.94rem;
+        height: 22.77rem;
+        position: absolute;
+        top: 1.5rem;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+</style>

src/views/twoCart/criterion-money.vue

+<template>
+	<div class="all">
+		<!-- <img class="showBg" src="../../assets/vehicle/showBg.jpg" alt=""> -->
+		<img class="imgBg" src="../../assets/vehicle/imgBg.jpg" alt="">
+		<div class="content">
+			<img class="imgWord1" src="../../assets/vehicle/imgWord1.png" alt="">
+			<img class="imgWord2" src="../../assets/vehicle/imgWord2.png" alt="">
+			<img class="imgWord3" src="../../assets/vehicle/imgWord3.png" alt="">
+			<div class="contPic">
+				<img class="bigImg" src="../../assets/vehicle/contImg1_1.png" alt="">
+				<img @click="showMaskfn(1)" class="imgLeft" src="../../assets/vehicle/click1.png" alt="">
+				<img @click="showMaskfn(2)" class="imgRight" src="../../assets/vehicle/click2.png" alt="">
+				<img class="click1" src="../../assets/pageRedDot.png" alt="">
+				<img class="click2" src="../../assets/pageRedDot.png" alt="">
+			</div>
+			<img class="imgWord4" src="../../assets/vehicle/imgWord4.png" alt="">
+		</div>
+		<!-- 弹框 -->
+		<div class="maskAll" v-if="showMask">
+			<img v-if="showMaskNum==1" class="mask1_1" src="../../assets/vehicle/mask1_1.jpg" alt="">
+			<img v-if="showMaskNum==2" class="mask1_1" src="../../assets/vehicle/mask1_2.jpg" alt="">
+			<img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt="">
+		</div>
+
+		<Sidebar></Sidebar>
+	</div>
+</template>
+
+<script>
+	import Sidebar from '../../components/sidebar'
+	export default{
+		name:"criterionMoney",
+		components:{Sidebar},
+		data(){
+			return{
+				showMask:false,//弹框显示
+				showMaskNum:null,
+			}
+		},
+		methods:{
+			showMaskfn(e){
+				this.showMask = true;
+				if(e==1){
+					this.showMaskNum = 1;
+				}else{
+					this.showMaskNum = 2;
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped="scoped">
+	*{
+		padding: 0;
+		margin: 0;
+	}
+	.all{
+		width: 100%;
+		height: 100%;
+	}
+	.showBg,.imgBg,.maskAll{
+		width: 100%;
+		height: 100%;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%,-50%);
+		
+	}
+	.content{
+		width: 100%;
+		height: 12.06rem;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%,-50%);
+		color: #c4c4c3;
+		text-align: left;
+	}
+	.imgWord1{
+		width: 1.46rem;
+		height: 0.48rem;
+		margin-left: 3.05rem;
+		margin-top: 0.05rem;
+	}
+	.imgWord2{
+		width: 4.47rem;
+		height: 0.51rem;
+		margin-left: 0.6rem;
+		margin-top: 0.7rem;
+	}
+	
+	.imgWord3{
+		width: 5.97rem;
+		height: 0.73rem;
+		margin-left: 0.6rem;
+		margin-top: 0.3rem;
+	}
+	.imgWord4{
+		width: 6.49rem;
+		height: 0.85rem;
+		margin-left: 0.6rem;
+		margin-top: 7.6rem;
+	}
+	.contPic{
+		position: relative;
+	}
+	.bigImg{
+		width: 6.93rem;
+		height: 6.3rem;
+		position: absolute;
+		top: 0.48rem;
+		left: 0.3rem;
+	}
+	.imgLeft{
+		width: 1.5rem;
+		height: 0.92rem;
+		position: absolute;
+		top: 3.38rem;
+		left: 1rem;
+	}
+	.imgRight{
+		width: 1.59rem;
+		height: 2.44rem;
+		position: absolute;
+		top: 2.5rem;
+		right: 0.6rem;
+	}
+	.click1{
+		width: 0.29rem;
+		height: 0.29rem;
+		position: absolute;
+		top: 3.2rem;
+		left: 2rem;
+		animation: dotTwinkle 3s linear infinite;
+	}
+	.click2{
+		width: 0.29rem;
+		height: 0.29rem;
+		position: absolute;
+		top: 2.3rem;
+		right: 1.3rem;
+		animation: dotTwinkle 3s linear infinite;
+	}
+	@keyframes dotTwinkle {
+		0%{opacity: 0.2}
+		50%{opacity:1}
+		100%{opacity:0.2}
+	}
+	.mask1_1{
+		width: 100%;
+		height: 15.06rem;
+		position: absolute;
+		top: 50%;
+		left:0rem;
+		transform: translateY(-50%);
+	}
+	.dele{
+		width: 0.8rem;
+		height: 0.8rem;
+		position: absolute;
+		bottom: 1.5rem;
+		left:50%;
+		transform: translateX(-50%);
+	}
+</style>

src/views/twoCart/criterion-shop.vue

+<template>
+	<div class="all">
+		<!-- <img class="showBg" src="../../assets/vehicle/showBg.jpg" alt=""> -->
+		<img class="imgBg" src="../../assets/vehicle/imgBg.jpg" alt="">
+		<div class="content">
+			<img class="imgWord1" src="../../assets/vehicle/imgWord1_3_1.png" alt="">
+			<img class="imgWord2" src="../../assets/vehicle/imgWord2.png" alt="">
+			<img class="imgWord3" src="../../assets/vehicle/imgWord1_3_2.png" alt="">
+			<div class="contPic">
+				<img class="bigImg" src="../../assets/vehicle/contImg1_3.png" alt="">
+				<img @click="showMaskfn(1)" class="imgLeft" src="../../assets/vehicle/click1_3_1.png" alt="">
+				<img @click="showMaskfn(2)" class="imgRight" src="../../assets/vehicle/click1_3_2.png" alt="">
+				<img @click="showMaskfn(3)" class="imgRight2" src="../../assets/vehicle/click1_3_3.png" alt="">
+				<img class="click1" src="../../assets/pageRedDot.png" alt="">
+				<img class="click2" src="../../assets/pageRedDot.png" alt="">
+				<img class="click3" src="../../assets/pageRedDot.png" alt="">
+			</div>
+			<img class="imgWord4" src="../../assets/vehicle/imgWord1_3_3.png" alt="">
+		</div>
+		<!-- 弹框 -->
+		<div class="maskAll" v-if="showMask">
+			<img v-if="showMaskNum==1" class="mask1_1" src="../../assets/vehicle/mask1_5.jpg" alt="">
+			<img v-if="showMaskNum==2" class="mask1_1" src="../../assets/vehicle/mask1_6.jpg" alt="">
+			<img v-if="showMaskNum==3" class="mask1_1" src="../../assets/vehicle/mask1_7.jpg" alt="">
+			<img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt="">
+		</div>
+		<Sidebar></Sidebar>
+	</div>
+</template>
+
+<script>
+	import Sidebar from '../../components/sidebar'
+	export default{
+		name:"shop",
+		components:{Sidebar},
+		data(){
+			return{
+				showMask:false,//弹框显示
+				showMaskNum:null,
+			}
+		},
+		methods:{
+			showMaskfn(e){
+				this.showMask = true;
+				if(e==1){
+					this.showMaskNum = 1;
+				}else if(e==2){
+					this.showMaskNum = 2;
+				}else{
+					this.showMaskNum = 3;
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped="scoped">
+	*{
+		padding: 0;
+		margin: 0;
+	}
+	.all{
+		width: 100%;
+		height: 100%;
+	}
+	.showBg,.imgBg,.maskAll{
+		width: 100%;
+		height: 100%;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%,-50%);
+		
+	}
+	.content{
+		width: 100%;
+		height: 12.06rem;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%,-50%);
+		color: #c4c4c3;
+		text-align: left;
+	}
+	.imgWord1{
+		width: 0.97rem;
+		height: 0.48rem;
+		margin: 0 auto;
+	}
+	.imgWord2{
+		width: 4.47rem;
+		height: 0.51rem;
+		margin-left: 0.6rem;
+		margin-top: 0.7rem;
+	}
+	
+	.imgWord3{
+		width: 5.68rem;
+		height: 0.73rem;
+		margin-left: 0.6rem;
+		margin-top: 0.3rem;
+	}
+	.imgWord4{
+		width: 5.72rem;
+		height: 1.33rem;
+		margin-left: 0.6rem;
+		margin-top: 7.6rem;
+	}
+	.contPic{
+		position: relative;
+	}
+	.bigImg{
+		width: 6.93rem;
+		height: 6.3rem;
+		position: absolute;
+		top: 0.48rem;
+		left: 0.3rem;
+	}
+	.imgLeft{
+		width: 5.79rem;
+		height: 0.69rem;
+		position: absolute;
+		top: 1.8rem;
+		left: 0.9rem;
+	}
+	.imgRight{
+		width: 0.86rem;
+		height: 0.53rem;
+		position: absolute;
+		top: 3.6rem;
+		right: 4.1rem;
+	}
+	.imgRight2{
+		width: 2.66rem;
+		height: 0.23rem;
+		position: absolute;
+		top: 4.5rem;
+		right: 2.5rem;
+	}
+	.click1{
+		width: 0.29rem;
+		height: 0.29rem;
+		position: absolute;
+		top: 1.6rem;
+		left: 5.8rem;
+		animation: dotTwinkle 3s linear infinite;
+	}
+	.click2{
+		width: 0.29rem;
+		height: 0.29rem;
+		position: absolute;
+		top: 4rem;
+		right: 4.45rem;
+		animation: dotTwinkle 3s linear infinite;
+	}
+	@keyframes dotTwinkle {
+		0%{opacity: 0.2}
+		50%{opacity:1}
+		100%{opacity:0.2}
+	}
+	.click3{
+		width: 0.29rem;
+		height: 0.29rem;
+		position: absolute;
+		top: 4.5rem;
+		right: 2.9rem;
+	}
+	.mask1_1{
+		width: 100%;
+		height: 15.06rem;
+		position: absolute;
+		top: 50%;
+		left:0rem;
+		transform: translateY(-50%);
+	}
+	.dele{
+		width: 0.8rem;
+		height: 0.8rem;
+		position: absolute;
+		bottom: 1.5rem;
+		left:50%;
+		transform: translateX(-50%);
+	}
+</style>

src/views/twoCart/criterion-showarea.vue

+<template>
+	<div class="all">
+		<!-- <img class="showBg" src="../../assets/vehicle/showBg.jpg" alt=""> -->
+		<img class="imgBg" src="../../assets/vehicle/imgBg.jpg" alt="">
+		<div class="content">
+			<img class="imgWord1" src="../../assets/vehicle/imgWord1_2_2.png" alt="">
+			<img class="imgWord2" src="../../assets/vehicle/imgWord2.png" alt="">
+			<img class="imgWord3" src="../../assets/vehicle/imgWord1_2_1.png" alt="">
+			<div class="contPic">
+				<img class="bigImg" src="../../assets/vehicle/contImg1_2.png" alt="">
+				<img @click="showMaskfn(1)" class="imgLeft" src="../../assets/vehicle/click1_2_1.png" alt="">
+				<img @click="showMaskfn(2)" class="imgRight" src="../../assets/vehicle/click1_2_2.png" alt="">
+				<img class="click1" src="../../assets/pageRedDot.png" alt="">
+				<img class="click2" src="../../assets/pageRedDot.png" alt="">
+			</div>
+			<img class="imgWord4" src="../../assets/vehicle/imgWord1_2_3.png" alt="">
+		</div>
+		<!-- 弹框 -->
+		<div class="maskAll" v-if="showMask">
+			<img v-if="showMaskNum==1" class="mask1_1" src="../../assets/vehicle/mask1_3.jpg" alt="">
+			<img v-if="showMaskNum==2" class="mask1_1" src="../../assets/vehicle/mask1_4.jpg" alt="">
+			<img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt="">
+		</div>
+		<Sidebar></Sidebar>
+	</div>
+</template>
+
+<script>
+	import Sidebar from "../../components/sidebar";
+	export default{
+		name:"showarea",
+		components:{Sidebar},
+		data(){
+			return{
+				showMask:false,//弹框显示
+				showMaskNum:null,
+			}
+		},
+		methods:{
+			showMaskfn(e){
+				this.showMask = true;
+				if(e==1){
+					this.showMaskNum = 1;
+				}else{
+					this.showMaskNum = 2;
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped="scoped">
+	*{
+		padding: 0;
+		margin: 0;
+	}
+	.all{
+		width: 100%;
+		height: 100%;
+	}
+	.showBg,.imgBg,.maskAll{
+		width: 100%;
+		height: 100%;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%,-50%);
+		
+	}
+	.content{
+		width: 100%;
+		height: 12.06rem;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%,-50%);
+		color: #c4c4c3;
+		text-align: left;
+	}
+	.imgWord1{
+		width: 1.46rem;
+		height: 0.48rem;
+		margin-left: 3.05rem;
+		margin-top: 0.05rem;
+	}
+	.imgWord2{
+		width: 4.47rem;
+		height: 0.51rem;
+		margin-left: 0.6rem;
+		margin-top: 0.7rem;
+	}
+	
+	.imgWord3{
+		width: 5.37rem;
+		height: 0.73rem;
+		margin-left: 0.6rem;
+		margin-top: 0.3rem;
+	}
+	.imgWord4{
+		width: 5.81rem;
+		height: 1.34rem;
+		margin-left: 0.6rem;
+		margin-top: 7.6rem;
+	}
+	.contPic{
+		position: relative;
+	}
+	.bigImg{
+		width: 6.93rem;
+		height: 6.3rem;
+		position: absolute;
+		top: 0.48rem;
+		left: 0.3rem;
+	}
+	.imgLeft{
+		width: 1.84rem;
+		height: 2.98rem;
+		position: absolute;
+		top: 1.2rem;
+		left: 4.7rem;
+	}
+	.imgRight{
+		width: 0.27rem;
+		height: 0.88rem;
+		position: absolute;
+		top: 5.2rem;
+		right: 1.4rem;
+	}
+	.click1{
+		width: 0.29rem;
+		height: 0.29rem;
+		position: absolute;
+		top: 1.15rem;
+		left: 4.55rem;
+		animation: dotTwinkle 3s linear infinite;
+	}
+	.click2{
+		width: 0.29rem;
+		height: 0.29rem;
+		position: absolute;
+		top: 6rem;
+		right: 1.4rem;
+		animation: dotTwinkle 3s linear infinite;
+	}
+	@keyframes dotTwinkle {
+		0%{opacity: 0.2}
+		50%{opacity:1}
+		100%{opacity:0.2}
+	}
+	.mask1_1{
+		width: 100%;
+		height: 15.06rem;
+		position: absolute;
+		top: 50%;
+		left:0rem;
+		transform: translateY(-50%);
+	}
+	.dele{
+		width: 0.8rem;
+		height: 0.8rem;
+		position: absolute;
+		bottom: 1.5rem;
+		left:50%;
+		transform: translateX(-50%);
+	}
+</style>

src/views/twoCart/high-allDetails.vue

+<template>
+    <div class="all">
+        <img class="imgBg" src="../../assets/vehicle/detailsBg2.jpg" alt="">
+        <img class="contImg" src="../../assets/vehicle/allDetails2.png" alt="">
+        <Sidebar></Sidebar>
+    </div>
+</template>
+<script>
+  import Sidebar from "../../components/sidebar";
+  export default {
+    name:"criterionAllDetails",
+    components:{Sidebar},
+    data(){
+      return{
+
+      }
+    }
+  }
+</script>
+<style scoped="scoped">
+    .imgBg{
+        width: 100%;
+        height: 31.07rem;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+    .contImg{
+        width: 6.94rem;
+        height: 28.9rem;
+        position: absolute;
+        top: 1.5rem;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+</style>

src/views/twoCart/high-money.vue

+<template>
+	<div class="all">
+		<!-- <img class="showBg" src="../../assets/vehicle/showBg.jpg" alt=""> -->
+		<img class="imgBg" src="../../assets/vehicle/imgBg.jpg" alt="">
+		<div class="content">
+			<img class="imgWord1" src="../../assets/vehicle/imgWord1.png" alt="">
+			<img class="imgWord2" src="../../assets/vehicle/imgWord2_2_1.png" alt="">
+			<img class="imgWord3" src="../../assets/vehicle/imgWord2_1_1.png" alt="">
+			<div class="contPic">
+				<img class="bigImg" src="../../assets/vehicle/contImg2_1.png" alt="">
+				<img @click="showMaskfn" class="imgLeft" src="../../assets/vehicle/click2_1_1.png" alt="">
+				<img class="click1" src="../../assets/pageRedDot.png" alt="">
+			</div>
+			<img class="imgWord4" src="../../assets/vehicle/imgWord2_1_2.png" alt="">
+		</div>
+		<!-- 弹框 -->
+		<div class="maskAll" v-if="showMask">
+			<img class="mask1_1" src="../../assets/vehicle/mask2_1.jpg" alt="">
+			<img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt="">
+		</div>
+		<Sidebar></Sidebar>
+	</div>
+</template>
+
+<script>
+	import Sidebar from "../../components/sidebar";
+	export default{
+		name:"highmoney",
+		components:{Sidebar},
+		data(){
+			return{
+				showMask:false,//弹框显示
+				showMaskNum:null,
+			}
+		},
+		methods:{
+			showMaskfn(e){
+				this.showMask = true;
+			}
+		}
+	}
+</script>
+
+<style scoped="scoped">
+	*{
+		padding: 0;
+		margin: 0;
+	}
+	.all{
+		width: 100%;
+		height: 100%;
+	}
+	.showBg,.imgBg,.maskAll{
+		width: 100%;
+		height: 100%;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%,-50%);
+		
+	}
+	.content{
+		width: 100%;
+		height: 12.06rem;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%,-50%);
+		color: #c4c4c3;
+		text-align: left;
+	}
+	.imgWord1{
+		width: 1.46rem;
+		height: 0.48rem;
+		margin-left: 3.05rem;
+		margin-top: 0.05rem;
+	}
+	.imgWord2{
+		width: 4.47rem;
+		height: 0.51rem;
+		margin-left: 0.6rem;
+		margin-top: 0.7rem;
+	}
+	
+	.imgWord3{
+		width: 5.68rem;
+		height: 0.3rem;
+		margin-left: 0.6rem;
+		margin-top: 0.3rem;
+	}
+	.imgWord4{
+		width: 4.82rem;
+		height: 0.85rem;
+		margin-left: 0.6rem;
+		margin-top: 7.6rem;
+	}
+	.contPic{
+		position: relative;
+	}
+	.bigImg{
+		width: 6.93rem;
+		height: 6.3rem;
+		position: absolute;
+		top: 0.48rem;
+		left: 0.3rem;
+	}
+	.imgLeft{
+		width: 1.53rem;
+		height: 1.78rem;
+		position: absolute;
+		top: 3.5rem;
+		left: 3.5rem;
+	}
+	
+	.click1{
+		width: 0.29rem;
+		height: 0.29rem;
+		position: absolute;
+		top: 3.3rem;
+		left: 4.05rem;
+		animation: dotTwinkle 3s linear infinite;
+	}
+
+	@keyframes dotTwinkle {
+		0%{opacity: 0.2}
+		50%{opacity:1}
+		100%{opacity:0.2}
+	}
+	.mask1_1{
+		width: 100%;
+		height: 15.06rem;
+		position: absolute;
+		top: 50%;
+		left:0rem;
+		transform: translateY(-50%);
+	}
+	.dele{
+		width: 0.8rem;
+		height: 0.8rem;
+		position: absolute;
+		bottom: 1.5rem;
+		left:50%;
+		transform: translateX(-50%);
+	}
+</style>

src/views/twoCart/high-shop.vue

+<template>
+	<div class="all">
+		<!-- <img class="showBg" src="../../assets/vehicle/showBg.jpg" alt=""> -->
+		<img class="imgBg" src="../../assets/vehicle/imgBg.jpg" alt="">
+		<div class="content">
+			<img class="imgWord1" src="../../assets/vehicle/imgWord1_3_1.png" alt="">
+			<img class="imgWord2" src="../../assets/vehicle/imgWord2_2_1.png" alt="">
+			<img class="imgWord3" src="../../assets/vehicle/imgWord2_3_1.png" alt="">
+			<div class="contPic">
+				<img class="bigImg" src="../../assets/vehicle/contImg2_3.png" alt="">
+				<img class="line" src="../../assets/vehicle/line.png" alt="">
+				<img @click="showMaskfn(1)" class="imgLeft" src="../../assets/vehicle/click2_3_1.png" alt="">
+				<img @click="showMaskfn(2)" class="imgRight" src="../../assets/vehicle/click2_3_2.png" alt="">
+				<img @click="showMaskfn(3)" class="imgRight2" src="../../assets/vehicle/click2_3_3.png" alt="">
+				<img class="click1" src="../../assets/pageRedDot.png" alt="">
+				<img class="click2" src="../../assets/pageRedDot.png" alt="">
+				<img class="click3" src="../../assets/pageRedDot.png" alt="">
+			</div>
+			<img class="imgWord4" src="../../assets/vehicle/imgWord2_3_2.png" alt="">
+		</div>
+		<!-- 弹框 -->
+		<div class="maskAll" v-if="showMask">
+			<img v-if="showMaskNum==1" class="mask1_1" src="../../assets/vehicle/mask2_5.jpg" alt="">
+			<img v-if="showMaskNum==2" class="mask1_1" src="../../assets/vehicle/mask2_6.jpg" alt="">
+			<img v-if="showMaskNum==3" class="mask1_1" src="../../assets/vehicle/mask2_7.jpg" alt="">
+			<img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt="">
+		</div>
+		<Sidebar></Sidebar>
+	</div>
+</template>
+
+<script>
+	import Sidebar from "../../components/sidebar";
+	export default{
+		name:"highshop",
+		components:{Sidebar},
+		data(){
+			return{
+				showMask:false,//弹框显示
+				showMaskNum:null,
+			}
+		},
+		methods:{
+			showMaskfn(e){
+				this.showMask = true;
+				if(e==1){
+					this.showMaskNum = 1;
+				}else if(e==2){
+					this.showMaskNum = 2;
+				}else{
+					this.showMaskNum = 3;
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped="scoped">
+	*{
+		padding: 0;
+		margin: 0;
+	}
+	.all{
+		width: 100%;
+		height: 100%;
+	}
+	.showBg,.imgBg,.maskAll{
+		width: 100%;
+		height: 100%;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%,-50%);
+		
+	}
+	.content{
+		width: 100%;
+		height: 12.06rem;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%,-50%);
+		color: #c4c4c3;
+		text-align: left;
+	}
+	.imgWord1{
+		width: 0.97rem;
+		height: 0.48rem;
+		margin: 0 auto;
+	}
+	.imgWord2{
+		width: 4.46rem;
+		height: 0.51rem;
+		margin-left: 0.6rem;
+		margin-top: 0.7rem;
+	}
+	
+	.imgWord3{
+		width: 6.07rem;
+		height: 0.73rem;
+		margin-left: 0.6rem;
+		margin-top: 0.3rem;
+	}
+	.imgWord4{
+		width: 6.02rem;
+		height: 1.33rem;
+		margin-left: 0.6rem;
+		margin-top: 7.6rem;
+	}
+	.contPic{
+		position: relative;
+	}
+	.bigImg{
+		width: 6.93rem;
+		height: 6.3rem;
+		position: absolute;
+		top: 0.48rem;
+		left: 0.3rem;
+	}
+	.imgLeft{
+		width: 6.34rem;
+		height: 0.78rem;
+		position: absolute;
+		top: 1.3rem;
+		left: 0.8rem;
+	}
+	.imgRight{
+		width: 1.23rem;
+		height: 2.37rem;
+		position: absolute;
+		top: 2.5rem;
+		left: 0.4rem;
+	}
+	.imgRight2{
+		width: 1.39rem;
+		height: 3.71rem;
+		position: absolute;
+		top: 2.5rem;
+		right: 0.4rem;
+	}
+	.click1{
+		width: 0.29rem;
+		height: 0.29rem;
+		position: absolute;
+		top: 1.2rem;
+		left: 6.3rem;
+		animation: dotTwinkle 3s linear infinite;
+	}
+	.click2{
+		width: 0.29rem;
+		height: 0.29rem;
+		position: absolute;
+		top: 4.7rem;
+		left: 1rem;
+		animation: dotTwinkle 3s linear infinite;
+	}
+	.click3{
+		width: 0.29rem;
+		height: 0.29rem;
+		position: absolute;
+		top: 4.7rem;
+		right: 0.4rem;
+		animation: dotTwinkle 3s linear infinite;
+	}
+	@keyframes dotTwinkle {
+		0%{opacity: 0.2}
+		50%{opacity:1}
+		100%{opacity:0.2}
+	}
+	.mask1_1{
+		width: 100%;
+		height: 15.06rem;
+		position: absolute;
+		top: 50%;
+		left:0rem;
+		transform: translateY(-50%);
+	}
+	.dele{
+		width: 0.8rem;
+		height: 0.8rem;
+		position: absolute;
+		bottom: 1.5rem;
+		left:50%;
+		transform: translateX(-50%);
+	}
+	.line{
+		width: 1.43rem;
+		height: 1.49rem;
+		position: absolute;
+		top: 5.2rem;
+		right: 0.7rem;
+		z-index: 9;
+	}
+</style>

src/views/twoCart/high-showarea.vue

+<template>
+	<div class="all">
+		<!-- <img class="showBg" src="../../assets/vehicle/showBg.jpg" alt=""> -->
+		<img class="imgBg" src="../../assets/vehicle/imgBg.jpg" alt="">
+		<div class="content">
+			<img class="imgWord1" src="../../assets/vehicle/imgWord1_2_2.png" alt="">
+			<img class="imgWord2" src="../../assets/vehicle/imgWord2_2_1.png" alt="">
+			<img class="imgWord3" src="../../assets/vehicle/imgWord2_2_2.png" alt="">
+			<div class="contPic">
+				<img class="bigImg" src="../../assets/vehicle/contImg2_2.png" alt="">
+				<img @click="showMaskfn(1)" class="imgLeft" src="../../assets/vehicle/click2_2_1.png" alt="">
+				<img @click="showMaskfn(2)" class="imgRight" src="../../assets/vehicle/click2_2_2.png" alt="">
+				<img @click="showMaskfn(3)" class="imgRight2" src="../../assets/vehicle/click2_2_3.png" alt="">
+				<img class="click1" src="../../assets/pageRedDot.png" alt="">
+				<img class="click2" src="../../assets/pageRedDot.png" alt="">
+				<img class="click3" src="../../assets/pageRedDot.png" alt="">
+			</div>
+			<img class="imgWord4" src="../../assets/vehicle/imgWord2_2_3.png" alt="">
+		</div>
+		<!-- 弹框 -->
+		<div class="maskAll" v-if="showMask">
+			<img v-if="showMaskNum==1" class="mask1_1" src="../../assets/vehicle/mask2_2.jpg" alt="">
+			<img v-if="showMaskNum==2" class="mask1_1" src="../../assets/vehicle/mask2_3.jpg" alt="">
+			<img v-if="showMaskNum==3" class="mask1_1" src="../../assets/vehicle/mask2_4.jpg" alt="">
+			<img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt="">
+		</div>
+		<Sidebar></Sidebar>
+	</div>
+</template>
+
+<script>
+	import Sidebar from "../../components/sidebar";
+	export default{
+		name:"highshowarea",
+		components:{Sidebar},
+		data(){
+			return{
+				showMask:false,//弹框显示
+				showMaskNum:null,
+			}
+		},
+		methods:{
+			showMaskfn(e){
+				this.showMask = true;
+				if(e==1){
+					this.showMaskNum = 1;
+				}else if(e==2){
+					this.showMaskNum = 2;
+				}else{
+					this.showMaskNum = 3;
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped="scoped">
+	*{
+		padding: 0;
+		margin: 0;
+	}
+	.all{
+		width: 100%;
+		height: 100%;
+	}
+	.showBg,.imgBg,.maskAll{
+		width: 100%;
+		height: 100%;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%,-50%);
+		
+	}
+	.content{
+		width: 100%;
+		height: 12.06rem;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%,-50%);
+		color: #c4c4c3;
+		text-align: left;
+	}
+	.imgWord1{
+		width: 1.46rem;
+		height: 0.46rem;
+		margin-left: 3.05rem;
+		margin-top: 0.05rem;
+	}
+	.imgWord2{
+		width: 4.46rem;
+		height: 0.51rem;
+		margin-left: 0.6rem;
+		margin-top: 0.7rem;
+	}
+	
+	.imgWord3{
+		width: 6.07rem;
+		height: 0.73rem;
+		margin-left: 0.6rem;
+		margin-top: 0.3rem;
+	}
+	.imgWord4{
+		width: 5.81rem;
+		height: 1.34rem;
+		margin-left: 0.6rem;
+		margin-top: 7.6rem;
+	}
+	.contPic{
+		position: relative;
+	}
+	.bigImg{
+		width: 6.93rem;
+		height: 6.3rem;
+		position: absolute;
+		top: 0.48rem;
+		left: 0.3rem;
+	}
+	.imgLeft{
+		width: 1.64rem;
+		height: 2.54rem;
+		position: absolute;
+		top: 1.1rem;
+		left: 1.7rem;
+	}
+	.imgRight{
+		width: 0.73rem;
+		height: 1.6rem;
+		position: absolute;
+		top: 2.8rem;
+		right: 1.2rem;
+	}
+	.imgRight2{
+		width: 0.52rem;
+		height: 1.35rem;
+		position: absolute;
+		top: 4.3rem;
+		right: 1.9rem;
+	}
+	.click1{
+		width: 0.29rem;
+		height: 0.29rem;
+		position: absolute;
+		top: 1rem;
+		left: 1.5rem;
+		animation: dotTwinkle 3s linear infinite;
+	}
+	.click2{
+		width: 0.29rem;
+		height: 0.29rem;
+		position: absolute;
+		top: 2.8rem;
+		right: 1.1rem;
+		animation: dotTwinkle 3s linear infinite;
+	}
+	.click3{
+		width: 0.29rem;
+		height: 0.29rem;
+		position: absolute;
+		top: 5.6rem;
+		right: 2.1rem;
+		animation: dotTwinkle 3s linear infinite;
+	}
+	@keyframes dotTwinkle {
+		0%{opacity: 0.2}
+		50%{opacity:1}
+		100%{opacity:0.2}
+	}
+	.mask1_1{
+		width: 100%;
+		height: 15.06rem;
+		position: absolute;
+		top: 50%;
+		left:0rem;
+		transform: translateY(-50%);
+	}
+	.dele{
+		width: 0.8rem;
+		height: 0.8rem;
+		position: absolute;
+		bottom: 1.5rem;
+		left:50%;
+		transform: translateX(-50%);
+	}
+</style>