chenkainan
/
shanjuandong
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'master' of http://123.60.98.226:3000/chenkainan/shanjuandong 

# Conflicts:
#	pages/index/index.vue
master
chenkainan 4 months ago
parent
97074ba1bb c050e8caac
commit
715ee9897b
11 changed files with 252 additions and 240 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 486
      pages/index/index.vue
  2. BIN
      static/1/1.png
  3. BIN
      static/1/2.png
  4. BIN
      static/1/arrow.png
  5. 2
      unpackage/dist/build/web/index.html
  6. BIN
      unpackage/dist/build/web/static/1/1.png
  7. BIN
      unpackage/dist/build/web/static/1/2.png
  8. BIN
      unpackage/dist/build/web/static/1/arrow.png
  9. 2
      unpackage/dist/build/web/static/js/index.657e9852.js
  10. 1
      unpackage/dist/build/web/static/js/pages-index-index.227f4307.js
  11. 1
      unpackage/dist/build/web/static/js/pages-index-index.af2801c8.js

486
pages/index/index.vue
View File

@ -1,245 +1,257 @@
<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>
<!-- 加载页 --> <!-- 加载页 -->
<view class="content content_2" v-show="currentPage === 1"> <view class="content content_2" v-show="currentPage === 1">
<image class="title_2" src="/static/1/2title.png"></image> <image class="title_2" src="/static/1/2title.png"></image>
<view class="progress-container"> <view class="progress-container">
<view class="progress" :style="{'width': progressPercentage + '%'}"> <view class="progress" :style="{'width': progressPercentage + '%'}">
<image class="dongxiao" src="/static/1/loading.png"></image> <image class="dongxiao" src="/static/1/loading.png"></image>
</view> </view>
</view> </view>
<view style="font-weight: bold;font-size: 24rpx;color: #8F76EE;">{{progressPercentage}}%</view> <view style="font-weight: bold;font-size: 24rpx;color: #8F76EE;">{{progressPercentage}}%</view>
</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>
</swiper-item> <image style="position: absolute;left: 349rpx;bottom: 187rpx;width: 49rpx;height: 30rpx;"
</swiper> src="/static/1/arrow.png"></image>
</view> </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"> <view class="content" v-show="currentPage === 3">
<image src="/static/1/btn1.png" mode="" class="btn1"></image> <image class="bg-image" src="/static/1/3.png" mode="widthFix"></image>
<image src="/static/1/btn2.png" mode="" class="btn2" @click="navigateToPage('/pages/index/tiansheng')"></image> <view class="btn-box">
<image src="/static/1/btn3.png" mode="" class="btn2" @click="navigateToPage('/pages/index/dongLing')" style="left: 449rpx;"></image> <image src="/static/1/btn1.png" mode="" class="btn1"></image>
</view> <image src="/static/1/btn2.png" mode="" class="btn2" @click="navigateToPage('/pages/index/tiansheng')">
</view> </image>
</view> <image src="/static/1/btn3.png" mode="" class="btn2" @click="navigateToPage('/pages/index/dongLing')"
style="left: 449rpx;"></image>
</view>
</view>
</view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
progressPercentage: 0, progressPercentage: 0,
currentPage: 0, currentPage: 0,
startTouchY: 0, startTouchY: 0,
isFlipFade: false, isFlipFade: false,
progressTimer: null progressTimer: null
}; };
}, },
onLoad() { onLoad() {
// 页面加载时的逻辑 // 页面加载时的逻辑
}, },
methods: { methods: {
// 跳转到指定页面 // 跳转到指定页面
navigateToPage(url) { navigateToPage(url) {
uni.navigateTo({ uni.navigateTo({
url url
}); });
}, },
// 处理第一页按钮点击事件 // 处理第一页按钮点击事件
handleFirstPageClick() { handleFirstPageClick() {
this.isFlipFade = true; this.isFlipFade = true;
setTimeout(() => { setTimeout(() => {
this.handlePageClick(); this.handlePageClick();
}, 1500); }, 1500);
}, },
// 处理页面点击事件 // 处理页面点击事件
handlePageClick() { handlePageClick() {
this.currentPage++; this.currentPage++;
this.updatePageContent(); this.updatePageContent();
}, },
// 根据当前页面更新内容 // 根据当前页面更新内容
updatePageContent() { updatePageContent() {
switch (this.currentPage) { switch (this.currentPage) {
case 1: case 1:
this.startProgress(); this.startProgress();
break; break;
case 2: case 2:
// 这里可以添加第二页的特殊逻辑 // 这里可以添加第二页的特殊逻辑
break; break;
case 3: case 3:
// 这里可以添加第三页的特殊逻辑 // 这里可以添加第三页的特殊逻辑
break; break;
default: default:
break; break;
} }
}, },
// 开始加载进度条 // 开始加载进度条
startProgress() { startProgress() {
this.progressTimer = setInterval(() => { this.progressTimer = setInterval(() => {
this.progressPercentage++; this.progressPercentage++;
if (this.progressPercentage >= 100) { if (this.progressPercentage >= 100) {
this.progressPercentage = 100; this.progressPercentage = 100;
clearInterval(this.progressTimer); clearInterval(this.progressTimer);
this.currentPage = 2; this.currentPage = 2;
} }
}, 10); }, 10);
}, },
// 处理触摸开始事件 // 处理触摸开始事件
handleTouchStart(e) { handleTouchStart(e) {
this.startTouchY = e.changedTouches[0].clientY; this.startTouchY = e.changedTouches[0].clientY;
}, },
// 处理触摸结束事件 // 处理触摸结束事件
handleTouchEnd(e) { handleTouchEnd(e) {
const endY = e.changedTouches[0].clientY; const endY = e.changedTouches[0].clientY;
const distanceY = this.startTouchY - endY; const distanceY = this.startTouchY - endY;
if (distanceY > 50 && this.currentPage === 2) { if (distanceY > 50 && this.currentPage === 2) {
console.log('上滑操作触发'); console.log('上滑操作触发');
setTimeout(() => { setTimeout(() => {
this.handlePageClick(); this.handlePageClick();
}, 100); }, 100);
} }
} }
}, },
beforeDestroy() { beforeDestroy() {
// 组件销毁前清除定时器 // 组件销毁前清除定时器
if (this.progressTimer) { if (this.progressTimer) {
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;
.bg-image { .bg-image {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
height: auto; height: auto;
} }
.btn_1 { .btn_1 {
width: 569rpx; width: 569rpx;
height: 74rpx; height: 74rpx;
position: absolute; position: absolute;
bottom: 68rpx; bottom: 68rpx;
left: 95rpx; left: 95rpx;
} }
&.content_2 { &.content_2 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.title_2 { .title_2 {
width: 65rpx; width: 65rpx;
height: 76rpx; height: 76rpx;
} }
.progress-container { .progress-container {
width: 387rpx; width: 387rpx;
height: 24rpx; height: 24rpx;
border-radius: 20rpx; border-radius: 20rpx;
border: 2px solid #8F76EE; border: 2px solid #8F76EE;
margin: 26rpx 0; margin: 26rpx 0;
.progress { .progress {
height: 100%; height: 100%;
background: rgba(143, 118, 238, 0.3); background: rgba(143, 118, 238, 0.3);
border-radius: 20rpx; border-radius: 20rpx;
width: 0; width: 0;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
} }
} }
}
.btn-box { }
width: 100%;
height: 100%; .content_bg {
position: absolute; height: 100vh;
left: 0; background-size: 100% auto;
bottom: 0; }
image { .btn-box {
position: absolute; width: 100%;
} height: 100%;
position: absolute;
.btn1 { left: 0;
width: 298rpx; bottom: 0;
height: 62rpx;
top: 810rpx; image {
left: 229rpx; position: absolute;
} }
.btn2 {
width: 243rpx; .btn1 {
height: 74rpx; width: 298rpx;
bottom: 223rpx; height: 62rpx;
left: 78rpx; top: 810rpx;
} left: 229rpx;
} }
.dongxiao { .btn2 {
position: absolute; width: 243rpx;
right: 0; height: 74rpx;
height: 100%; bottom: 223rpx;
width: 158rpx; left: 78rpx;
} }
}
.swiper-box {
position: absolute; .dongxiao {
top: 0; position: absolute;
bottom: 0; right: 0;
right: 0; height: 100%;
left: 0; width: 158rpx;
width: 100%; }
height: 100%;
} .swiper-box {
position: absolute;
.content-first { top: 0;
animation: flipFade 2s forwards; bottom: 0;
opacity: 1; right: 0;
transform: rotateY(0deg); left: 0;
} width: 100%;
height: 100%;
/* 定义动画 */ }
@keyframes flipFade {
0% { .content-first {
opacity: 1; animation: flipFade 2s forwards;
transform: rotateY(0deg); opacity: 1;
} transform: rotateY(0deg);
}
100% {
opacity: 0; /* 定义动画 */
transform: rotateY(180deg); @keyframes flipFade {
} 0% {
} opacity: 1;
transform: rotateY(0deg);
}
100% {
opacity: 0;
transform: rotateY(180deg);
}
}
</style> </style>

BIN
static/1/1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.0 MiB

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
static/1/2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 539 KiB

BIN
static/1/arrow.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

2
unpackage/dist/build/web/index.html
View File

@ -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)')) <!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>

BIN
unpackage/dist/build/web/static/1/1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.0 MiB

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
unpackage/dist/build/web/static/1/2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 539 KiB

BIN
unpackage/dist/build/web/static/1/arrow.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

2
unpackage/dist/build/web/static/js/index.f0e3708b.js → unpackage/dist/build/web/static/js/index.657e9852.js
View File

File diff suppressed because one or more lines are too long

1
unpackage/dist/build/web/static/js/pages-index-index.227f4307.js
View File

File diff suppressed because one or more lines are too long

1
unpackage/dist/build/web/static/js/pages-index-index.af2801c8.js
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save