561_jiexin/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>
		<img class="arrow" src="../../assets/pageArrow.png" alt="">

		<!-- 弹框 -->
		<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="maskFn" class="dele" src="../../assets/vehicle/dele.png" alt="">
		</div>
		<Sidebar class="slide"></Sidebar>
	</div>
</template>

<script>
	import Sidebar from '../../components/sidebar'
	export default{
		name:"shop",
		components:{Sidebar},
		data(){
			return{
				showMask:false,//弹框显示
				showMaskNum:null,
				touchstartY:0,
			}
		},
		methods:{
			showMaskfn(e){
				this.showMask = true;
				if(e==1){
					this.showMaskNum = 1;
				}else if(e==2){
					this.showMaskNum = 2;
				}else{
					this.showMaskNum = 3;
				}
				this.$store.state.commonWin = true
			},
		maskFn(){
			this.showMask = false;
			this.$store.state.commonWin = false
		}
			// touchstart(e){
			// 	this.touchstartY = e.changedTouches[0].clientY;
			// },
			// touchend(e){
			// 	if(e.changedTouches[0].clientY-this.touchstartY>=50){
			// 		console.log("下滑")
			// 	}else if(this.touchstartY-e.changedTouches[0].clientY>=50){
			// 		console.log("上滑")
			// 		this.$router.push("./criterion-showarea")
			// 	}
			// },
		}
	}
</script>

<style scoped="scoped">
	.arrow{
		width: 0.37rem;
		height: 0.33rem;
		position: absolute;
		bottom: 0.3rem;
		left: 50%;
		transform: translateX(-50%);
		animation: ani 1s linear infinite;
	}
	@keyframes ani {
		0%{bottom:0.3rem}
		50%{bottom:0.1rem}
		100%{bottom:0.3rem}
	}
	.slide{
		position: fixed;
		top: 0.3rem;
		left: 0.3rem;
	}
	*{
		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>