|
|
@@ -34,10 +34,10 @@ |
|
|
|
<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 4" :key="item"><img :src="imgData['page4Pic'+item]" /></van-swipe-item>
|
|
|
|
<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"/>
|
|
|
|
<!-- <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">
|
|
|
@@ -54,10 +54,10 @@ |
|
|
|
<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 2" :key="item"><img :src="imgData['page6Pic'+item]" /></van-swipe-item>
|
|
|
|
<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"/>
|
|
|
|
<!-- <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>
|
|
|
@@ -79,6 +79,7 @@ |
|
|
|
<img class="btn" :class="popBtnCloseStyle(item)" :src="imgData.popBtnClose" @click="hiddenPop" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<video ref='showVideo' class="showVideo" :src="videoUrl"></video>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
@@ -96,12 +97,28 @@ |
|
|
|
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'
|
|
|
@@ -255,27 +272,27 @@ |
|
|
|
}
|
|
|
|
|
|
|
|
.page1Txt3 {
|
|
|
|
bottom: 13vw;
|
|
|
|
bottom: 12.5vw;
|
|
|
|
left: 28vw;
|
|
|
|
}
|
|
|
|
|
|
|
|
.page1Txt4 {
|
|
|
|
bottom: 13vw;
|
|
|
|
bottom: 12.5vw;
|
|
|
|
left: 40vw;
|
|
|
|
}
|
|
|
|
|
|
|
|
.page1Txt5 {
|
|
|
|
bottom: 13vw;
|
|
|
|
bottom: 12.5vw;
|
|
|
|
left: 52vw;
|
|
|
|
}
|
|
|
|
|
|
|
|
.page1Txt6_1 {
|
|
|
|
bottom: 13vw;
|
|
|
|
left: 60vw;
|
|
|
|
bottom: 12.5vw;
|
|
|
|
left: 64vw;
|
|
|
|
}
|
|
|
|
|
|
|
|
.page1Txt6_2 {
|
|
|
|
bottom: 6.2vw;
|
|
|
|
bottom: 6.3vw;
|
|
|
|
left: 0;
|
|
|
|
}
|
|
|
|
|
|
|
@@ -456,14 +473,14 @@ |
|
|
|
width: calc(330/750*100vw);
|
|
|
|
height: auto;
|
|
|
|
left: 25vw;
|
|
|
|
top: 21vw;
|
|
|
|
top: 27vw;
|
|
|
|
}
|
|
|
|
.page7Txt{
|
|
|
|
position: absolute;
|
|
|
|
width: calc(601/750*100vw);
|
|
|
|
height: auto;
|
|
|
|
top: 33vw;
|
|
|
|
left: 6.3vw;
|
|
|
|
top: 40vw;
|
|
|
|
left: 7.3vw;
|
|
|
|
animation-delay: .3s;
|
|
|
|
-webkit-animation-delay: .3s;
|
|
|
|
}
|
|
|
@@ -537,5 +554,12 @@ |
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.showVideo{
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
object-fit: cover;
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |