chenkainan
4 months ago
11 changed files with 252 additions and 240 deletions
@ -1,245 +1,257 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<!-- 第一页 --> |
|||
<view :class="['content', {'content-first': isFlipFade}]" v-show="currentPage === 0"> |
|||
<image class="bg-image" src="/static/1/1.png" mode="widthFix"></image> |
|||
<image src="/static/1/1btn.png" class="btn_1" @click="handleFirstPageClick"></image> |
|||
</view> |
|||
|
|||
<!-- 加载页 --> |
|||
<view class="content content_2" v-show="currentPage === 1"> |
|||
<image class="title_2" src="/static/1/2title.png"></image> |
|||
<view class="progress-container"> |
|||
<view class="progress" :style="{'width': progressPercentage + '%'}"> |
|||
<image class="dongxiao" src="/static/1/loading.png"></image> |
|||
</view> |
|||
</view> |
|||
<view style="font-weight: bold;font-size: 24rpx;color: #8F76EE;">{{progressPercentage}}%</view> |
|||
</view> |
|||
|
|||
<!-- 第二页 --> |
|||
<view class="content" v-show="currentPage === 2" @click="handlePageClick" @touchstart="handleTouchStart" @touchend="handleTouchEnd"> |
|||
<image class="bg-image" style="opacity: 0;" src="/static/1/2.png" mode="widthFix"></image> |
|||
<swiper class="swiper-box" :vertical="true"> |
|||
<swiper-item> |
|||
<image class="bg-image" src="/static/1/2.png" mode="widthFix"></image> |
|||
</swiper-item> |
|||
</swiper> |
|||
</view> |
|||
|
|||
<!-- 第三页 --> |
|||
<view class="content" v-show="currentPage === 3"> |
|||
<image class="bg-image" src="/static/1/3.png" mode="widthFix"></image> |
|||
<view class="btn-box"> |
|||
<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/btn3.png" mode="" class="btn2" @click="navigateToPage('/pages/index/dongLing')" style="left: 449rpx;"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="bg"> |
|||
<!-- 第一页 --> |
|||
<view :class="['content', 'content_bg', {'content-first': isFlipFade}]" |
|||
style="background-image: url(/static/1/1.png);" v-show="currentPage === 0"> |
|||
<image src="/static/1/1btn.png" class="btn_1" @click="handleFirstPageClick"></image> |
|||
</view> |
|||
|
|||
<!-- 加载页 --> |
|||
<view class="content content_2" v-show="currentPage === 1"> |
|||
<image class="title_2" src="/static/1/2title.png"></image> |
|||
<view class="progress-container"> |
|||
<view class="progress" :style="{'width': progressPercentage + '%'}"> |
|||
<image class="dongxiao" src="/static/1/loading.png"></image> |
|||
</view> |
|||
</view> |
|||
<view style="font-weight: bold;font-size: 24rpx;color: #8F76EE;">{{progressPercentage}}%</view> |
|||
</view> |
|||
|
|||
<!-- 第二页 --> |
|||
<view class="content content_bg" v-show="currentPage === 2" @click="handlePageClick" |
|||
@touchstart="handleTouchStart" @touchend="handleTouchEnd"> |
|||
<swiper class="swiper-box" style="height: 100%;" :vertical="true"> |
|||
<swiper-item style="position: relative;"> |
|||
<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> |
|||
</view> |
|||
|
|||
<!-- 第三页 --> |
|||
<view class="content" v-show="currentPage === 3"> |
|||
<image class="bg-image" src="/static/1/3.png" mode="widthFix"></image> |
|||
<view class="btn-box"> |
|||
<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/btn3.png" mode="" class="btn2" @click="navigateToPage('/pages/index/dongLing')" |
|||
style="left: 449rpx;"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
progressPercentage: 0, |
|||
currentPage: 0, |
|||
startTouchY: 0, |
|||
isFlipFade: false, |
|||
progressTimer: null |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
// 页面加载时的逻辑 |
|||
}, |
|||
methods: { |
|||
// 跳转到指定页面 |
|||
navigateToPage(url) { |
|||
uni.navigateTo({ |
|||
url |
|||
}); |
|||
}, |
|||
// 处理第一页按钮点击事件 |
|||
handleFirstPageClick() { |
|||
this.isFlipFade = true; |
|||
setTimeout(() => { |
|||
this.handlePageClick(); |
|||
}, 1500); |
|||
}, |
|||
// 处理页面点击事件 |
|||
handlePageClick() { |
|||
this.currentPage++; |
|||
this.updatePageContent(); |
|||
}, |
|||
// 根据当前页面更新内容 |
|||
updatePageContent() { |
|||
switch (this.currentPage) { |
|||
case 1: |
|||
this.startProgress(); |
|||
break; |
|||
case 2: |
|||
// 这里可以添加第二页的特殊逻辑 |
|||
break; |
|||
case 3: |
|||
// 这里可以添加第三页的特殊逻辑 |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
}, |
|||
// 开始加载进度条 |
|||
startProgress() { |
|||
this.progressTimer = setInterval(() => { |
|||
this.progressPercentage++; |
|||
if (this.progressPercentage >= 100) { |
|||
this.progressPercentage = 100; |
|||
clearInterval(this.progressTimer); |
|||
this.currentPage = 2; |
|||
} |
|||
}, 10); |
|||
}, |
|||
// 处理触摸开始事件 |
|||
handleTouchStart(e) { |
|||
this.startTouchY = e.changedTouches[0].clientY; |
|||
}, |
|||
// 处理触摸结束事件 |
|||
handleTouchEnd(e) { |
|||
const endY = e.changedTouches[0].clientY; |
|||
const distanceY = this.startTouchY - endY; |
|||
if (distanceY > 50 && this.currentPage === 2) { |
|||
console.log('上滑操作触发'); |
|||
setTimeout(() => { |
|||
this.handlePageClick(); |
|||
}, 100); |
|||
} |
|||
} |
|||
}, |
|||
beforeDestroy() { |
|||
// 组件销毁前清除定时器 |
|||
if (this.progressTimer) { |
|||
clearInterval(this.progressTimer); |
|||
} |
|||
} |
|||
}; |
|||
export default { |
|||
data() { |
|||
return { |
|||
progressPercentage: 0, |
|||
currentPage: 0, |
|||
startTouchY: 0, |
|||
isFlipFade: false, |
|||
progressTimer: null |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
// 页面加载时的逻辑 |
|||
}, |
|||
methods: { |
|||
// 跳转到指定页面 |
|||
navigateToPage(url) { |
|||
uni.navigateTo({ |
|||
url |
|||
}); |
|||
}, |
|||
// 处理第一页按钮点击事件 |
|||
handleFirstPageClick() { |
|||
this.isFlipFade = true; |
|||
setTimeout(() => { |
|||
this.handlePageClick(); |
|||
}, 1500); |
|||
}, |
|||
// 处理页面点击事件 |
|||
handlePageClick() { |
|||
this.currentPage++; |
|||
this.updatePageContent(); |
|||
}, |
|||
// 根据当前页面更新内容 |
|||
updatePageContent() { |
|||
switch (this.currentPage) { |
|||
case 1: |
|||
this.startProgress(); |
|||
break; |
|||
case 2: |
|||
// 这里可以添加第二页的特殊逻辑 |
|||
break; |
|||
case 3: |
|||
// 这里可以添加第三页的特殊逻辑 |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
}, |
|||
// 开始加载进度条 |
|||
startProgress() { |
|||
this.progressTimer = setInterval(() => { |
|||
this.progressPercentage++; |
|||
if (this.progressPercentage >= 100) { |
|||
this.progressPercentage = 100; |
|||
clearInterval(this.progressTimer); |
|||
this.currentPage = 2; |
|||
} |
|||
}, 10); |
|||
}, |
|||
// 处理触摸开始事件 |
|||
handleTouchStart(e) { |
|||
this.startTouchY = e.changedTouches[0].clientY; |
|||
}, |
|||
// 处理触摸结束事件 |
|||
handleTouchEnd(e) { |
|||
const endY = e.changedTouches[0].clientY; |
|||
const distanceY = this.startTouchY - endY; |
|||
if (distanceY > 50 && this.currentPage === 2) { |
|||
console.log('上滑操作触发'); |
|||
setTimeout(() => { |
|||
this.handlePageClick(); |
|||
}, 100); |
|||
} |
|||
} |
|||
}, |
|||
beforeDestroy() { |
|||
// 组件销毁前清除定时器 |
|||
if (this.progressTimer) { |
|||
clearInterval(this.progressTimer); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
font-size: 0; |
|||
background: black; |
|||
} |
|||
|
|||
.content { |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
position: relative; |
|||
|
|||
.bg-image { |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
height: auto; |
|||
} |
|||
|
|||
.btn_1 { |
|||
width: 569rpx; |
|||
height: 74rpx; |
|||
position: absolute; |
|||
bottom: 68rpx; |
|||
left: 95rpx; |
|||
} |
|||
|
|||
&.content_2 { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.title_2 { |
|||
width: 65rpx; |
|||
height: 76rpx; |
|||
} |
|||
|
|||
.progress-container { |
|||
width: 387rpx; |
|||
height: 24rpx; |
|||
border-radius: 20rpx; |
|||
border: 2px solid #8F76EE; |
|||
margin: 26rpx 0; |
|||
|
|||
.progress { |
|||
height: 100%; |
|||
background: rgba(143, 118, 238, 0.3); |
|||
border-radius: 20rpx; |
|||
width: 0; |
|||
overflow: hidden; |
|||
position: relative; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.btn-box { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
|
|||
image { |
|||
position: absolute; |
|||
} |
|||
|
|||
.btn1 { |
|||
width: 298rpx; |
|||
height: 62rpx; |
|||
top: 810rpx; |
|||
left: 229rpx; |
|||
} |
|||
|
|||
.btn2 { |
|||
width: 243rpx; |
|||
height: 74rpx; |
|||
bottom: 223rpx; |
|||
left: 78rpx; |
|||
} |
|||
} |
|||
|
|||
.dongxiao { |
|||
position: absolute; |
|||
right: 0; |
|||
height: 100%; |
|||
width: 158rpx; |
|||
} |
|||
|
|||
.swiper-box { |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
right: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.content-first { |
|||
animation: flipFade 2s forwards; |
|||
opacity: 1; |
|||
transform: rotateY(0deg); |
|||
} |
|||
|
|||
/* 定义动画 */ |
|||
@keyframes flipFade { |
|||
0% { |
|||
opacity: 1; |
|||
transform: rotateY(0deg); |
|||
} |
|||
|
|||
100% { |
|||
opacity: 0; |
|||
transform: rotateY(180deg); |
|||
} |
|||
} |
|||
.bg { |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
font-size: 0; |
|||
background: black; |
|||
} |
|||
|
|||
.content { |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
position: relative; |
|||
|
|||
.bg-image { |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
height: auto; |
|||
} |
|||
|
|||
.btn_1 { |
|||
width: 569rpx; |
|||
height: 74rpx; |
|||
position: absolute; |
|||
bottom: 68rpx; |
|||
left: 95rpx; |
|||
} |
|||
|
|||
&.content_2 { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.title_2 { |
|||
width: 65rpx; |
|||
height: 76rpx; |
|||
} |
|||
|
|||
.progress-container { |
|||
width: 387rpx; |
|||
height: 24rpx; |
|||
border-radius: 20rpx; |
|||
border: 2px solid #8F76EE; |
|||
margin: 26rpx 0; |
|||
|
|||
.progress { |
|||
height: 100%; |
|||
background: rgba(143, 118, 238, 0.3); |
|||
border-radius: 20rpx; |
|||
width: 0; |
|||
overflow: hidden; |
|||
position: relative; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
.content_bg { |
|||
height: 100vh; |
|||
background-size: 100% auto; |
|||
} |
|||
|
|||
.btn-box { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
|
|||
image { |
|||
position: absolute; |
|||
} |
|||
|
|||
|
|||
.btn1 { |
|||
width: 298rpx; |
|||
height: 62rpx; |
|||
top: 810rpx; |
|||
left: 229rpx; |
|||
} |
|||
|
|||
.btn2 { |
|||
width: 243rpx; |
|||
height: 74rpx; |
|||
bottom: 223rpx; |
|||
left: 78rpx; |
|||
} |
|||
} |
|||
|
|||
.dongxiao { |
|||
position: absolute; |
|||
right: 0; |
|||
height: 100%; |
|||
width: 158rpx; |
|||
} |
|||
|
|||
.swiper-box { |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
right: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.content-first { |
|||
animation: flipFade 2s forwards; |
|||
opacity: 1; |
|||
transform: rotateY(0deg); |
|||
} |
|||
|
|||
/* 定义动画 */ |
|||
@keyframes flipFade { |
|||
0% { |
|||
opacity: 1; |
|||
transform: rotateY(0deg); |
|||
} |
|||
|
|||
100% { |
|||
opacity: 0; |
|||
transform: rotateY(180deg); |
|||
} |
|||
} |
|||
</style> |
|||
|
Before Width: | Height: | Size: 3.0 MiB After Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 539 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
@ -1,2 +1,2 @@ |
|||
<!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>shanjuandong</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)')) |
|||
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/static/index.2da1efab.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/static/js/chunk-vendors.561af9c1.js></script><script src=/static/js/index.f0e3708b.js></script></body></html> |
|||
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/static/index.2da1efab.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/static/js/chunk-vendors.561af9c1.js></script><script src=/static/js/index.657e9852.js></script></body></html> |
|||
|
Before Width: | Height: | Size: 3.0 MiB After Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 539 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue