|
|
@ -1,8 +1,8 @@ |
|
|
<template> |
|
|
<template> |
|
|
<view class="bg"> |
|
|
<view class="bg"> |
|
|
<!-- 第一页 --> |
|
|
<!-- 第一页 --> |
|
|
<view :class="['content', {'content-first': isFlipFade}]" v-show="currentPage === 0"> |
|
|
<view :class="['content', 'content_bg', {'content-first': isFlipFade}]" |
|
|
<image class="bg-image" src="/static/1/1.png" mode="widthFix"></image> |
|
|
style="background-image: url(/static/1/1.png);" v-show="currentPage === 0"> |
|
|
<image src="/static/1/1btn.png" class="btn_1" @click="handleFirstPageClick"></image> |
|
|
<image src="/static/1/1btn.png" class="btn_1" @click="handleFirstPageClick"></image> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
@ -18,11 +18,13 @@ |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
<!-- 第二页 --> |
|
|
<!-- 第二页 --> |
|
|
<view class="content" v-show="currentPage === 2" @click="handlePageClick" @touchstart="handleTouchStart" @touchend="handleTouchEnd"> |
|
|
<view class="content content_bg" v-show="currentPage === 2" @click="handlePageClick" |
|
|
<image class="bg-image" style="opacity: 0;" src="/static/1/2.png" mode="widthFix"></image> |
|
|
@touchstart="handleTouchStart" @touchend="handleTouchEnd"> |
|
|
<swiper class="swiper-box" :vertical="true"> |
|
|
<swiper class="swiper-box" style="height: 100%;" :vertical="true"> |
|
|
<swiper-item> |
|
|
<swiper-item style="position: relative;"> |
|
|
<image class="bg-image" src="/static/1/2.png" mode="widthFix"></image> |
|
|
<image class="bg-image" src="/static/1/2.png" style="height: 100%;"></image> |
|
|
|
|
|
<image style="position: absolute;left: 349rpx;bottom: 187rpx;width: 49rpx;height: 30rpx;" |
|
|
|
|
|
src="/static/1/arrow.png"></image> |
|
|
</swiper-item> |
|
|
</swiper-item> |
|
|
</swiper> |
|
|
</swiper> |
|
|
</view> |
|
|
</view> |
|
|
@ -32,15 +34,17 @@ |
|
|
<image class="bg-image" src="/static/1/3.png" mode="widthFix"></image> |
|
|
<image class="bg-image" src="/static/1/3.png" mode="widthFix"></image> |
|
|
<view class="btn-box"> |
|
|
<view class="btn-box"> |
|
|
<image src="/static/1/btn1.png" mode="" class="btn1"></image> |
|
|
<image src="/static/1/btn1.png" mode="" class="btn1"></image> |
|
|
<image src="/static/1/btn2.png" mode="" class="btn2" @click="navigateToPage('/pages/index/tiansheng')"></image> |
|
|
<image src="/static/1/btn2.png" mode="" class="btn2" @click="navigateToPage('/pages/index/tiansheng')"> |
|
|
<image src="/static/1/btn3.png" mode="" class="btn2" @click="navigateToPage('/pages/index/dongLing')" style="left: 449rpx;"></image> |
|
|
</image> |
|
|
|
|
|
<image src="/static/1/btn3.png" mode="" class="btn2" @click="navigateToPage('/pages/index/dongLing')" |
|
|
|
|
|
style="left: 449rpx;"></image> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
export default { |
|
|
export default { |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
progressPercentage: 0, |
|
|
progressPercentage: 0, |
|
|
@ -121,18 +125,18 @@ export default { |
|
|
clearInterval(this.progressTimer); |
|
|
clearInterval(this.progressTimer); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
.bg { |
|
|
.bg { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
min-height: 100vh; |
|
|
min-height: 100vh; |
|
|
font-size: 0; |
|
|
font-size: 0; |
|
|
background: black; |
|
|
background: black; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.content { |
|
|
.content { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
min-height: 100vh; |
|
|
min-height: 100vh; |
|
|
position: relative; |
|
|
position: relative; |
|
|
@ -179,9 +183,16 @@ export default { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.btn-box { |
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.content_bg { |
|
|
|
|
|
height: 100vh; |
|
|
|
|
|
background-size: 100% auto; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.btn-box { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
@ -192,6 +203,7 @@ export default { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.btn1 { |
|
|
.btn1 { |
|
|
width: 298rpx; |
|
|
width: 298rpx; |
|
|
height: 62rpx; |
|
|
height: 62rpx; |
|
|
@ -205,16 +217,16 @@ export default { |
|
|
bottom: 223rpx; |
|
|
bottom: 223rpx; |
|
|
left: 78rpx; |
|
|
left: 78rpx; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.dongxiao { |
|
|
.dongxiao { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
right: 0; |
|
|
right: 0; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
width: 158rpx; |
|
|
width: 158rpx; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.swiper-box { |
|
|
.swiper-box { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
top: 0; |
|
|
bottom: 0; |
|
|
bottom: 0; |
|
|
@ -222,16 +234,16 @@ export default { |
|
|
left: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.content-first { |
|
|
.content-first { |
|
|
animation: flipFade 2s forwards; |
|
|
animation: flipFade 2s forwards; |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
transform: rotateY(0deg); |
|
|
transform: rotateY(0deg); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 定义动画 */ |
|
|
/* 定义动画 */ |
|
|
@keyframes flipFade { |
|
|
@keyframes flipFade { |
|
|
0% { |
|
|
0% { |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
transform: rotateY(0deg); |
|
|
transform: rotateY(0deg); |
|
|
@ -241,5 +253,5 @@ export default { |
|
|
opacity: 0; |
|
|
opacity: 0; |
|
|
transform: rotateY(180deg); |
|
|
transform: rotateY(180deg); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
chenkainan
4 months ago
