<template>
	<div id="home" @touchstart="start" @touchend="end">
		<img class="bg" :src="imgData.bg" v-if="imgData" />
		<div class="container" v-if="imgData">
			<div class="frameBox">
				<img class="frame" :src="imgData.frame" />
				<div class="page page1" v-show="page==1">
					<img class="page1Title fadein" :src="imgData.page1Title" />
					<img class="page1Pic fadein" :src="imgData.page1Pic" />
					<div class="content fadein">
						<img class="page1Content" :src="imgData.page1Content" />
						<img class="txt page1Txt1" :src="imgData.page1Txt1" @click="showPop(1)" />
						<img class="txt page1Txt2" :src="imgData.page1Txt2" @click="showPop(2)" />
						<img class="txt page1Txt3" :src="imgData.page1Txt3" @click="showPop(3)" />
						<img class="txt page1Txt4" :src="imgData.page1Txt4" @click="showPop(4)" />
						<img class="txt page1Txt5" :src="imgData.page1Txt5" @click="showPop(5)" />
						<img class="txt page1Txt6_1" :src="imgData.page1Txt6_1" @click="showPop(6)" />
						<img class="txt page1Txt6_2" :src="imgData.page1Txt6_2" @click="showPop(6)" />
						<img class="head headMc" :src="imgData.page1Head" v-if="showHead"/>
					</div>
				</div>
				<div class="page page2" v-show="page==2">
					<img class="page2Title fadein" :src="imgData.page2Title" />
					<div class="progressBox">
						<img :src="imgData.page2Progress" />
					</div>
					<img class="txt fadein" :class="'page2Txt'+item" :src="imgData['page2Txt'+item]" v-for="item in 6" :key="item" />
				</div>
				<div class="page page3" v-show="page==3">
					<img class="page3Title fadein" :src="imgData.page3Title" />
					<img class="page3Pic fadein" :src="imgData.page3Pic" />
				</div>
				<div class="page page4 fadein" v-if="page==4">
					<img class="page4Title" :src="imgData.page4Title" />
					<div class="mySwiperBox">
						<van-swipe class="my-swipe" :show-indicators='false' :loop="false" ref="swiper4" @change="changeSwiper">
						  <van-swipe-item v-for="item in 1" :key="item"><img :src="imgData['page4Pic'+item]" @click="palyVideo(1)"/></van-swipe-item>
						</van-swipe>
					<!-- 	<img class="arrow left" :src="imgData.arrowLeft" @click="prevSwiper('swiper4')" v-if="swiperIndex!=0"/>
						<img class="arrow right" :src="imgData.arrowRight" @click="nextSwiper('swiper4')" v-if="swiperIndex!=3"/> -->
					</div>
				</div>
				<div class="page page5 fadein" v-if="page==5">
					<img class="page5Title" :src="imgData.page5Title" />
					<div class="mySwiperBox">
						<van-swipe class="my-swipe" :show-indicators='false' :loop="false" ref="swiper5" @change="changeSwiper">
						  <van-swipe-item v-for="item in 3" :key="item"><img :src="imgData['page5Pic'+item]" /></van-swipe-item>
						</van-swipe>
						<img class="arrow left" :src="imgData.arrowLeft" @click="prevSwiper('swiper5')" v-if="swiperIndex!=0"/>
						<img class="arrow right" :src="imgData.arrowRight" @click="nextSwiper('swiper5')" v-if="swiperIndex!=2"/>
					</div>
				</div>
				<div class="page page6 fadein" v-if="page==6">
					<img class="page6Title" :src="imgData.page6Title" />
					<div class="mySwiperBox">
						<van-swipe class="my-swipe" :show-indicators='false' :loop="false" ref="swiper6" @change="changeSwiper">
						  <van-swipe-item v-for="item in 1" :key="item"><img :src="imgData['page6Pic'+item]" @click="palyVideo(3)"/></van-swipe-item>
						</van-swipe>
					<!-- 	<img class="arrow left" :src="imgData.arrowLeft" @click="prevSwiper('swiper6')" v-if="swiperIndex!=0"/>
						<img class="arrow right" :src="imgData.arrowRight" @click="nextSwiper('swiper6')" v-if="swiperIndex!=1"/> -->
					</div>
					<img class="page6Txt" :src="imgData.page6Txt" />
				</div>
				<div class="page page7" v-if="page==7">
					<img class="page7Title fadein" :src="imgData.page7Title" />
					<img class="page7Txt fadein" :src="imgData.page7Txt" />
				</div>
				<div class="page page8 fadein" v-if="page==8">
					<img class="page8Title" :src="imgData.page8Title" />
					<img class="page8Txt" :src="imgData.page8Txt" />
					<img class="page8QR fadein" :src="imgData.page8QR" />
				</div>
				<img class="pageArrow arrowMc" :src="imgData.pageArrow" v-if="page!=8"/>
			</div>
		</div>
		<div class="Popup" v-if="popCode!==0">
			<div class="contentBox" v-if="popCode===item" v-for="item in 6" :key="item">
				<img class="pic" :src="imgData['popPic'+item]" />
				<img class="btn" :class="popBtnCloseStyle(item)" :src="imgData.popBtnClose" @click="hiddenPop" />
			</div>
		</div>
		<video ref='showVideo' class="showVideo" :src="videoUrl"></video>
	</div>
</template>

<script>
	import {
		images
	} from '../js/img.js'
	export default {
		name: 'Home',
		data() {
			return {
				imgData: null,
				page: 1,
				popCode: 0, //弹窗Code
				oldPageY: 0,
				showHead:true,
				swiperIndex:0,
				video:null,
				videoUrl:''
			}
		},
		mounted() {
			this.imgData = images.onLoad();
			this.video=this.$refs.showVideo;
			var that=this;
			this.video.addEventListener('pause',function(){
				that.video.style.display='none';
			})
			var video1=document.createElement('video');
			var video3=document.createElement('video');
			video1.src='http://static.jiyou-tech.com/2020/516/video/video1.mp4';
			video3.src='http://static.jiyou-tech.com/2020/516/video/video3.mp4';
		},
		methods: {
			palyVideo(code){
				this.video.src='http://static.jiyou-tech.com/2020/516/video/video'+code+'.mp4';
				this.video.play();
				this.video.style.display='block';
			},
			popBtnCloseStyle(code) {
				if (code == 2) {
					return 'close2'
				} else {
					return 'close1'
				}
			},
			showPop(code) {
				this.showHead=false
				this.popCode = code;
			},
			hiddenPop() {
				this.popCode = 0;
			},
			start(e) {
				this.oldPageY = e.touches[0].clientY
			},
			end(e) {
				if (this.oldPageY - e.changedTouches[0].clientY > 50 && this.page < 8) { // 跳转下一页
					this.page++
					this.swiperIndex=0;
				}
				if (e.changedTouches[0].clientY - this.oldPageY > 50 && this.page > 1) { //跳回上一页
					this.page--
					this.swiperIndex=0;
				}
			},
			prevSwiper(res){
				this.$refs[res].prev();
			},
			nextSwiper(res){
				this.$refs[res].next();
			},
			changeSwiper(index){
				this.swiperIndex=index;
			}
		}
	}
</script>
<style lang="scss">
	#home {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		.bg {
			position: absolute;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.frameBox {
			position: absolute;
			width: calc(730/750*100vw);
			height: calc(1184/750*100vw);
			margin: 4vw 0 0 3vw;

			.frame {
				position: absolute;
				width: 100%;
				height: auto;
				// display: none;
			}

			.page {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				.mySwiperBox{
					position: absolute;
					width: 86%;
					left: 5vw;
					.my-swipe .van-swipe-item {
					  color: #fff;
					  font-size: 20px;
					  text-align: center;
						img{
							display: inline-block;
							width: auto;
						}
					}
					.arrow{
						position: absolute;
						width: auto;
						height: calc(41/750*100vw);
						top: 45%;
						transform: translateY(-45%);
					}
					.left{
						left: 6vw;
					}
					.right{
						right:6vw
					}
				}
			}

			.page1 {
				img {
					position: absolute;
				}

				.page1Title {
					width: calc(492/750*100vw);
					height: calc(238/750*100vw);
					top: 20vw;
					left: 14vw;
				}

				.page1Pic {
					width: calc(516/750*100vw);
					height: calc(496/750*100vw);
					top: 45vw;
					left: 12vw;
					animation-delay: .3s;
					-webkit-animation-delay: .3s;
				}

				.content {
					position: absolute;
					width: calc(511/750*100vw);
					height: calc(355/750*100vw);
					left: 13vw;
					bottom: 15vw;
					animation-delay: .6s;
					-webkit-animation-delay: .6s;

					.page1Content {
						width: 100%;
						height: 100%;
					}

					.txt {
						height: calc(29/750*100vw);
						width: auto;
					}

					.page1Txt1 {
						bottom: 19vw;
						left: 4vw;
					}

					.page1Txt2 {
						bottom: 19vw;
						left: 24vw;
					}

					.page1Txt3 {
						bottom: 12.5vw;
						left: 28vw;
					}

					.page1Txt4 {
						bottom: 12.5vw;
						left: 40vw;
					}

					.page1Txt5 {
						bottom: 12.5vw;
						left: 52vw;
					}

					.page1Txt6_1 {
						bottom: 12.5vw;
						left: 64vw;
					}

					.page1Txt6_2 {
						bottom: 6.3vw;
						left: 0;
					}
					
					.head{
						position: absolute;
						width: calc(42/750*100vw);
						height: auto;
						top: 27vw;
						left: 18vw;
					}
				}
			}

			.page2 {
				img {
					position: absolute;
					width: auto;
				}

				.page2Title {
					height: calc(44/750*100vw);
					left: 17.5vw;
					top: 19vw;
				}

				.progressBox {
					position: absolute;
					width: calc(21/750*100vw);
					height: calc(890/750*100vw);
					top: 26.5vw;
					left: 6vw;
					overflow: hidden;
					-webkit-animation: 3s linear .5s both;
					animation: 3s linear .5s both;
					-webkit-animation-name: progressBoxMc;
					animation-name: progressBoxMc;

					img {
						width: 100%;
						height: 100%;
						-webkit-animation: 3s linear .5s both;
						animation: 3s linear .5s both;
						-webkit-animation-name: progressMc;
						animation-name: progressMc;
					}
				}

				.txt {
					height: calc(90/750*100vw);
					left: 13vw;
				}

				.page2Txt1 {
					top: 29.7vw;
					animation-delay: .5s;
					-webkit-animation-delay: .5s;
				}

				.page2Txt2 {
					top: 48.7vw;
					animation-delay: 1s;
					-webkit-animation-delay: 1s;
				}

				.page2Txt3 {
					top: 68vw;
					animation-delay: 1.5s;
					-webkit-animation-delay: 1.5s;
				}

				.page2Txt4 {
					top: 88vw;
					animation-delay: 2s;
					-webkit-animation-delay: 2s;
				}

				.page2Txt5 {
					top: 107.5vw;
					animation-delay: 2.5s;
					-webkit-animation-delay: 2.5s;
				}

				.page2Txt6 {
					top: 126.5vw;
					animation-delay: 3s;
					-webkit-animation-delay: 3s;
				}
			}

			.page3 {
				img {
					position: absolute;
					height: auto;
				}

				.page3Title {
					left: 19vw;
					top: 18.5vw;
					width: calc(410/750*100vw);
				}

				.page3Pic {
					left: 10vw;
					top: 35.5vw;
					width: calc(559/750*100vw);
					animation-delay: .3s;
					-webkit-animation-delay: .3s;
				}
			}
			
			.page4{
				.page4Title{
					position: absolute;
					width: calc(546/750*100vw);
					height: auto;
					left: 12vw;
					top: 19vw;
				}
				.mySwiperBox{
					height: calc(649/750*100vw);
					bottom: 14.5vw;
					.my-swipe .van-swipe-item {
					  line-height: calc(649/750*100vw);
						img{
							height: calc(649/750*100vw);
						}
					}
				}
			}
			.page5{
				.page5Title{
					position: absolute;
					width: calc(591/750*100vw);
					height: auto;
					left: 9vw;
					top: 18.5vw;
				}
				.mySwiperBox{
					height: calc(412/750*100vw);
					bottom: 34vw;
					.my-swipe .van-swipe-item {
					  line-height: calc(412/750*100vw);
						img{
							height: calc(412/750*100vw);
						}
					}
				}
			}
			.page6{
				.page6Title{
					position: absolute;
					width: calc(512/750*100vw);
					height: auto;
					left: 13vw;
					top: 19vw;
				}
				.mySwiperBox{
					height: calc(656/750*100vw);
					bottom: 27vw;
					.my-swipe .van-swipe-item {
					  line-height: calc(656/750*100vw);
						img{
							height: calc(656/750*100vw);
						}
					}
				}
				.page6Txt{
					position: absolute;
					width: calc(596/750*100vw);
					height: auto;
					bottom: 13vw;
					left: 7vw;
				}
			}
			.page7{
				.page7Title{
					position: absolute;
					width: calc(330/750*100vw);
					height: auto;
					left: 25vw;
					top: 27vw;
				}
				.page7Txt{
					position: absolute;
					width: calc(601/750*100vw);
					height: auto;
					top: 40vw;
					left: 7.3vw;
					animation-delay: .3s;
					-webkit-animation-delay: .3s;
				}
			}
			.page8{
				.page8Title{
					position: absolute;
					height: calc(44/750*100vw);
					width: auto;
					left: 22vw;
					top: 23vw;
				}
				.page8Txt{
					position: absolute;
					width: calc(516/750*100vw);
					height: auto;
					left: 12vw;
					top: 34.5vw;
				}
				.page8QR{
					position: absolute;
					width: calc(231/750*100vw);
					height: auto;
					left: 32vw;
					bottom: 22vw;
					animation-delay: .5s;
					-webkit-animation-delay: .5s;
				}
			}
			.pageArrow {
				position: absolute;
				width: calc(42/750*100vw);
				bottom: 3vw;
				left: 46vw;
			}
		}

		.Popup {
			position: fixed;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(0, 0, 0, 0.7);

			.contentBox {
				position: relative;

				img {
					height: auto;
				}

				.btn {
					position: absolute;
					width: calc(37/750*100vw);
				}

				.pic {
					width: calc(700/750*100vw);
				}

				.close1 {
					top: 4vw;
					right: 5vw;
				}

				.close2 {
					top: 8vw;
					right: 5vw;
				}
			}
		}
		.showVideo{
			position: absolute;
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: none;
		}
	}
</style>
