| <div class="page page4 fadein" v-if="page==4"> | <div class="page page4 fadein" v-if="page==4"> | ||||
| <img class="page4Title" :src="imgData.page4Title" /> | <img class="page4Title" :src="imgData.page4Title" /> | ||||
| <div class="mySwiperBox"> | <div class="mySwiperBox"> | ||||
| <van-swipe class="my-swipe" :show-indicators='false' ref="swiper4"> | |||||
| <van-swipe class="my-swipe" :show-indicators='false' :loop="false" ref="swiper4" @change="changeSwiper"> | |||||
| <van-swipe-item v-for="item in 4" :key="item"><img :src="imgData['page4Pic'+item]" /></van-swipe-item> | <van-swipe-item v-for="item in 4" :key="item"><img :src="imgData['page4Pic'+item]" /></van-swipe-item> | ||||
| </van-swipe> | </van-swipe> | ||||
| <img class="arrow left" :src="imgData.arrowLeft" @click="prevSwiper('swiper4')"/> | |||||
| <img class="arrow right" :src="imgData.arrowRight" @click="nextSwiper('swiper4')"/> | |||||
| <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> | </div> | ||||
| <div class="page page5 fadein" v-if="page==5"> | <div class="page page5 fadein" v-if="page==5"> | ||||
| <img class="page5Title" :src="imgData.page5Title" /> | <img class="page5Title" :src="imgData.page5Title" /> | ||||
| <div class="mySwiperBox"> | <div class="mySwiperBox"> | ||||
| <van-swipe class="my-swipe" :show-indicators='false' ref="swiper5"> | |||||
| <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-item v-for="item in 3" :key="item"><img :src="imgData['page5Pic'+item]" /></van-swipe-item> | ||||
| </van-swipe> | </van-swipe> | ||||
| <img class="arrow left" :src="imgData.arrowLeft" @click="prevSwiper('swiper5')"/> | |||||
| <img class="arrow right" :src="imgData.arrowRight" @click="nextSwiper('swiper5')"/> | |||||
| <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> | </div> | ||||
| <div class="page page6 fadein" v-if="page==6"> | <div class="page page6 fadein" v-if="page==6"> | ||||
| <img class="page6Title" :src="imgData.page6Title" /> | <img class="page6Title" :src="imgData.page6Title" /> | ||||
| <div class="mySwiperBox"> | <div class="mySwiperBox"> | ||||
| <van-swipe class="my-swipe" :show-indicators='false' ref="swiper6"> | |||||
| <van-swipe class="my-swipe" :show-indicators='false' :loop="false" ref="swiper6" @change="changeSwiper"> | |||||
| <van-swipe-item v-for="item in 2" :key="item"><img :src="imgData['page6Pic'+item]" /></van-swipe-item> | <van-swipe-item v-for="item in 2" :key="item"><img :src="imgData['page6Pic'+item]" /></van-swipe-item> | ||||
| </van-swipe> | </van-swipe> | ||||
| <img class="arrow left" :src="imgData.arrowLeft" @click="prevSwiper('swiper6')"/> | |||||
| <img class="arrow right" :src="imgData.arrowRight" @click="nextSwiper('swiper6')"/> | |||||
| <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> | </div> | ||||
| <img class="page6Txt" :src="imgData.page6Txt" /> | <img class="page6Txt" :src="imgData.page6Txt" /> | ||||
| </div> | </div> | ||||
| <img class="page7Title fadein" :src="imgData.page7Title" /> | <img class="page7Title fadein" :src="imgData.page7Title" /> | ||||
| <img class="page7Txt fadein" :src="imgData.page7Txt" /> | <img class="page7Txt fadein" :src="imgData.page7Txt" /> | ||||
| </div> | </div> | ||||
| <div class="page page8" v-if="page==8"> | |||||
| <img class="page8Title fadein" :src="imgData.page8Title" /> | |||||
| <img class="page8Txt fadein" :src="imgData.page8Txt" /> | |||||
| <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" /> | <img class="page8QR fadein" :src="imgData.page8QR" /> | ||||
| </div> | </div> | ||||
| <img class="pageArrow arrowMc" :src="imgData.pageArrow" v-if="page!=8"/> | <img class="pageArrow arrowMc" :src="imgData.pageArrow" v-if="page!=8"/> | ||||
| page: 1, | page: 1, | ||||
| popCode: 0, //弹窗Code | popCode: 0, //弹窗Code | ||||
| oldPageY: 0, | oldPageY: 0, | ||||
| showHead:true | |||||
| showHead:true, | |||||
| swiperIndex:0, | |||||
| } | } | ||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| end(e) { | end(e) { | ||||
| if (this.oldPageY - e.changedTouches[0].clientY > 50 && this.page < 8) { // 跳转下一页 | if (this.oldPageY - e.changedTouches[0].clientY > 50 && this.page < 8) { // 跳转下一页 | ||||
| this.page++ | this.page++ | ||||
| this.swiperIndex=0; | |||||
| } | } | ||||
| if (e.changedTouches[0].clientY - this.oldPageY > 50 && this.page > 1) { //跳回上一页 | if (e.changedTouches[0].clientY - this.oldPageY > 50 && this.page > 1) { //跳回上一页 | ||||
| this.page-- | this.page-- | ||||
| this.swiperIndex=0; | |||||
| } | } | ||||
| }, | }, | ||||
| prevSwiper(res){ | prevSwiper(res){ | ||||
| }, | }, | ||||
| nextSwiper(res){ | nextSwiper(res){ | ||||
| this.$refs[res].next(); | this.$refs[res].next(); | ||||
| }, | |||||
| changeSwiper(index){ | |||||
| this.swiperIndex=index; | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| height: auto; | height: auto; | ||||
| left: 32vw; | left: 32vw; | ||||
| bottom: 22vw; | bottom: 22vw; | ||||
| animation-delay: .5s; | |||||
| -webkit-animation-delay: .5s; | |||||
| } | } | ||||
| } | } | ||||
| .pageArrow { | .pageArrow { |