You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
721 lines
17 KiB
721 lines
17 KiB
<template>
|
|
<view>
|
|
<swiper
|
|
class="main-swiper"
|
|
:vertical="true"
|
|
:current="currentIndex"
|
|
@change="handleSwiperChange"
|
|
:duration="300"
|
|
:style="{ height: '100vh' }"
|
|
>
|
|
<swiper-item>
|
|
<view class="page-container">
|
|
<template v-if="loadedPages[0]">
|
|
<image
|
|
v-show="shouldShowContent(0)"
|
|
class="bg-image"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250807/71e6ef3d1901198a9266c0ace04fe80c.png'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="page-container">
|
|
<template v-if="loadedPages[1]">
|
|
<image
|
|
v-show="shouldShowContent(1)"
|
|
class="bg-image"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250802/0bd899a27fdbaf8a2c314faaefd7c320.png'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
<view class="content-layer" v-show="shouldShowContent(1)">
|
|
<image
|
|
class="layer-img2"
|
|
:class="{
|
|
hidden: !animationStates[1],
|
|
'fade-in': animationStates[1],
|
|
}"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250804/6c06d6b668450c7837970e5f8d3ed0c7.gif'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="widthFix"
|
|
></image>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="page-container">
|
|
<template v-if="loadedPages[2]">
|
|
<image
|
|
v-show="shouldShowContent(2)"
|
|
class="bg-image"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250802/cbe3db0c55a871383f86e34b781b5d33.png'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="page-container">
|
|
<template v-if="loadedPages[3]">
|
|
<image
|
|
v-show="shouldShowContent(3)"
|
|
class="bg-image"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250802/8499c31b1ed10693debd6e3eba37a841.png'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="page-container">
|
|
<template v-if="loadedPages[4]">
|
|
<image
|
|
v-show="shouldShowContent(4)"
|
|
class="bg-image"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250806/c936771f3c6289bfd8a3d0fa9d5e53fd.png'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="page-container">
|
|
<template v-if="loadedPages[5]">
|
|
<image
|
|
v-show="shouldShowContent(5)"
|
|
class="bg-image"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250802/863382a549c2d4e029c93eba5d040e96.png'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="page-container">
|
|
<template v-if="loadedPages[6]">
|
|
<image
|
|
v-show="shouldShowContent(6)"
|
|
class="bg-image"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250802/7a6bbf6e4d9cd869b94502bf9025caf1.png'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="page-container">
|
|
<template v-if="loadedPages[7]">
|
|
<image
|
|
v-show="shouldShowContent(7)"
|
|
class="bg-image"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250802/6f865d358eb9faf565bb0e63dd252a94.png'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
<view class="content-layer" v-show="shouldShowContent(7)">
|
|
<image
|
|
class="layer-img3"
|
|
:class="{
|
|
hidden: !animationStates[7],
|
|
'fade-in': animationStates[7],
|
|
}"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250802/13d7d6ad68f7171d48ef271c699fa333.png'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="widthFix"
|
|
></image>
|
|
<image
|
|
class="layer-img4"
|
|
:class="{
|
|
hidden: !animationStates[7],
|
|
'fade-in': animationStates[7],
|
|
}"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250802/dd49237235965bc83759e54ec895ce34.png'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="widthFix"
|
|
></image>
|
|
<image
|
|
class="layer-img7"
|
|
:class="{
|
|
hidden: !animationStates[7],
|
|
'fade-in': animationStates[7],
|
|
}"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250806/b8aa4923d2994836bee0ebed5dc255a6.png'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="widthFix"
|
|
></image>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="page-container">
|
|
<template v-if="loadedPages[8]">
|
|
<image
|
|
v-show="shouldShowContent(8)"
|
|
class="bg-image"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250802/c4ef978fd763848b01c5dec92c032bdb.png'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
<view class="content-layer" v-show="shouldShowContent(8)">
|
|
<image
|
|
class="layer-img5"
|
|
:class="{
|
|
hidden: !animationStates[8],
|
|
'fade-in': animationStates[8],
|
|
}"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250802/c3a669862cca14212b130d6eb90380d6.png'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="widthFix"
|
|
></image>
|
|
<image
|
|
class="layer-img6"
|
|
:class="{
|
|
hidden: !animationStates[8],
|
|
'fade-in': animationStates[8],
|
|
}"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250802/afbc088293603b16fa99b2c0c10ff275.png'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="widthFix"
|
|
></image>
|
|
<image
|
|
class="layer-img7"
|
|
:class="{
|
|
hidden: !animationStates[7],
|
|
'fade-in': animationStates[7],
|
|
}"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250806/b8aa4923d2994836bee0ebed5dc255a6.png'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="widthFix"
|
|
></image>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="page-container">
|
|
<template v-if="loadedPages[9]">
|
|
<image
|
|
v-show="shouldShowContent(9)"
|
|
class="bg-image"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250802/4b2090a566500b5d633448d8607b464c.png'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="page-container">
|
|
<template>
|
|
<image
|
|
class="bg-image"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250802/703df90d52ea3461b0e9743f1ca2c942.png'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="page-container">
|
|
<template>
|
|
<image
|
|
class="bg-image"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250802/8448d3d99435377157000780017a9540.png'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="page-container">
|
|
<template>
|
|
<view
|
|
class=""
|
|
style="width: 750rpx; height: 1400rpx; position: relative"
|
|
>
|
|
<image
|
|
class="bg-image"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250808/40c24fb30246c84537a5667f52f36495.jpg'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="aspectFit"
|
|
></image>
|
|
<view
|
|
class=""
|
|
style="
|
|
position: absolute;
|
|
bottom: 120rpx;
|
|
width: 546rpx;
|
|
left: 104rpx;
|
|
z-index: 9;
|
|
"
|
|
>
|
|
<image
|
|
@click="navigateToPage('first')"
|
|
style="width: 260rpx; height: 50rpx"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250802/22d4d2a0b442aa8269b3c393cc1bc0fd.png'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
<image
|
|
@click="navigateToPage('second')"
|
|
style="width: 260rpx; height: 50rpx; margin-left: 26rpx"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250802/6579d29fbfc61c355bfee74775d9404f.png'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
<image
|
|
@click="navigateToPage('third')"
|
|
style="width: 260rpx; height: 50rpx; margin-top: 30rpx"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250802/19946ac0a0c6bdeae627d0d3a6fb3dbc.png'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
<image
|
|
@click="navigateToPage('fourth')"
|
|
style="
|
|
width: 260rpx;
|
|
height: 50rpx;
|
|
margin-left: 26rpx;
|
|
margin-top: 30rpx;
|
|
"
|
|
:src="
|
|
showImg(
|
|
'/uploads/20250802/7e0ce35e13fa118deaf70240357faf14.png'
|
|
)
|
|
"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="page-container">
|
|
<image
|
|
style="width: 100%; height: 100%"
|
|
:src="
|
|
showImg('/uploads/20250808/04677ae870e7a21f7e1292a94ed4b35a.png')
|
|
"
|
|
mode="aspectFill"
|
|
></image>
|
|
</view>
|
|
</swiper-item>
|
|
|
|
<swiper-item>
|
|
<view class="page-container home-page">
|
|
<template>
|
|
<image
|
|
class="bg-image"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/footers.png"
|
|
:lazy-load="true"
|
|
mode="aspectFill"
|
|
></image>
|
|
<image
|
|
class="qrCode-image"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/qrCode.png"
|
|
:lazy-load="true"
|
|
mode="widthFix"
|
|
:show-menu-by-longpress="true"
|
|
></image>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<!-- 侧边导航组件 -->
|
|
<SideNav :currentIndex="7" />
|
|
<MusicControl></MusicControl>
|
|
<AudioControl audioSrc="https://des.js-dyyj.com/data/2025/09/05/5d7caee5-ce7f-4e55-bf71-e574b486473c.MP3" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import AudioControl from '@/components/AudioControl.vue';
|
|
import TitleHeader from "@/components/TitleHeader.vue";
|
|
import SideNav from "../components/SideNav.vue";
|
|
import MusicControl from "@/components/MusicControl.vue";
|
|
export default {
|
|
components: {
|
|
TitleHeader,
|
|
SideNav,
|
|
MusicControl,
|
|
AudioControl
|
|
},
|
|
data() {
|
|
return {
|
|
currentIndex: 0,
|
|
loadedPages: {
|
|
0: false,
|
|
1: false,
|
|
2: false,
|
|
3: false,
|
|
4: false,
|
|
5: false,
|
|
6: false,
|
|
7: false,
|
|
8: false,
|
|
9: false,
|
|
10: false,
|
|
},
|
|
animationStates: {
|
|
0: false,
|
|
1: false,
|
|
2: false,
|
|
3: false,
|
|
4: false,
|
|
5: false,
|
|
6: false,
|
|
7: false,
|
|
8: false,
|
|
9: false,
|
|
10: false,
|
|
},
|
|
preloadBuffer: 1,
|
|
titleHeight: 0,
|
|
};
|
|
},
|
|
watch: {
|
|
currentIndex(newIndex) {
|
|
for (
|
|
let i = Math.max(0, newIndex - this.preloadBuffer);
|
|
i <= Math.min(9, newIndex + this.preloadBuffer);
|
|
i++
|
|
) {
|
|
this.loadedPages[i] = true;
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
this.titleHeight = uni.getStorageSync("titleHeight");
|
|
for (let i = 0; i <= Math.min(1 + this.preloadBuffer, 9); i++) {
|
|
this.loadedPages[i] = true;
|
|
}
|
|
setTimeout(() => {
|
|
this.animationStates[this.currentIndex] = true;
|
|
}, 50);
|
|
},
|
|
methods: {
|
|
goChapter() {
|
|
uni.navigateTo({
|
|
url: "/pig/chapter3/chapter3",
|
|
});
|
|
},
|
|
handleSwiperChange(e) {
|
|
const newIndex = e.detail.current;
|
|
this.currentIndex = newIndex;
|
|
this.animationStates[newIndex] = false;
|
|
setTimeout(() => {
|
|
this.animationStates[newIndex] = true;
|
|
}, 50);
|
|
},
|
|
shouldShowContent(index) {
|
|
return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
|
|
},
|
|
goBack() {
|
|
uni.navigateTo({
|
|
url: "/taozi/home/home?targetIndex=5",
|
|
});
|
|
},
|
|
navigateToPage(pageName) {
|
|
uni.navigateTo({
|
|
url: `/pig/chapter4/${pageName}`,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main-swiper {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
.page-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
background-color: #efefef;
|
|
}
|
|
|
|
.bg-image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.layer-img1 {
|
|
width: 500rpx;
|
|
z-index: 2;
|
|
margin-right: 180rpx;
|
|
margin-top: 50rpx;
|
|
}
|
|
|
|
.content-layer {
|
|
margin: 130rpx 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.layer-img3 {
|
|
width: 327rpx;
|
|
height: 270rpx;
|
|
z-index: 2;
|
|
position: absolute;
|
|
top: 114rpx;
|
|
left: 82rpx;
|
|
}
|
|
|
|
.layer-img2 {
|
|
width: 696rpx;
|
|
height: 302rpx;
|
|
z-index: 2;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 35rpx;
|
|
}
|
|
|
|
.layer-img4 {
|
|
z-index: 2;
|
|
width: 530rpx;
|
|
height: 409rpx;
|
|
bottom: 230rpx;
|
|
left: 91rpx;
|
|
position: absolute;
|
|
}
|
|
|
|
.layer-img7{
|
|
z-index: 2;
|
|
width: 530rpx;
|
|
|
|
bottom: 40rpx;
|
|
left: 91rpx;
|
|
position: absolute;
|
|
}
|
|
|
|
.layer-img5 {
|
|
z-index: 2;
|
|
position: absolute;
|
|
top: 151rpx;
|
|
left: 95rpx;
|
|
width: 382rpx;
|
|
height: 452rpx;
|
|
}
|
|
|
|
.layer-img6 {
|
|
z-index: 2;
|
|
position: absolute;
|
|
bottom: 263rpx;
|
|
left: 95rpx;
|
|
width: 261rpx;
|
|
height: 268rpx;
|
|
}
|
|
|
|
.back-btn {
|
|
position: absolute;
|
|
top: 50rpx;
|
|
left: 50rpx;
|
|
z-index: 2;
|
|
background-color: rgb(0 0 0 / 0.3);
|
|
border-radius: 50%;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.back-icon {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
|
|
.hidden {
|
|
opacity: 0;
|
|
}
|
|
|
|
.slide-in-from-left {
|
|
animation: slideInLeft 1.2s ease-out forwards;
|
|
}
|
|
|
|
@keyframes slideInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-100px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.slide-in-from-right {
|
|
animation: slideInRight 1.2s ease-out forwards;
|
|
}
|
|
|
|
.blink {
|
|
animation: blink 1.5s infinite;
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(100px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%,
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
|
|
25%,
|
|
75% {
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeIn 1s ease-in forwards;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}.qrCode-image {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 192rpx;
|
|
margin: 0 auto;
|
|
z-index: 2;
|
|
width: 30vw;
|
|
}
|
|
</style>
|
|
|