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.
366 lines
8.5 KiB
366 lines
8.5 KiB
<template>
|
|
<view style="position: relative;">
|
|
<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange"
|
|
:duration="300">
|
|
<swiper-item v-for="(_, outerIndex) in 7" :key="outerIndex">
|
|
<swiper class="nested-swiper" :duration="300" @change="handleVerticalChange($event, outerIndex)"
|
|
:current="nestedIndices[outerIndex]">
|
|
<!-- 嵌套swiper的第一个item（封面页） -->
|
|
<swiper-item>
|
|
<view class="arrow-down" v-if="nestedIndices[outerIndex] == 0">
|
|
<image src="https://des.dayunyuanjian.cn/epicSoul/image/chapter3/rightIcon.png" :lazy-load="true" mode="widthFix">
|
|
</image>
|
|
</view>
|
|
<view class="page-container home-page">
|
|
<image class="bg-image"
|
|
:src="'https://des.dayunyuanjian.cn/epicSoul/image/chapter3/cover' + (outerIndex+2) + '.png'"
|
|
mode="" :lazy-load="true"></image>
|
|
<image class="cover-txt" :class="{'cover-txt2': outerIndex > 0}"
|
|
:src="'https://des.dayunyuanjian.cn/epicSoul/image/chapter3/cover' + (outerIndex+2) + '-txt.png'"
|
|
mode="" :lazy-load="true"></image>
|
|
<image class="btn" src="https://des.dayunyuanjian.cn/epicSoul/seek2-btn.png" mode=""
|
|
:lazy-load="true"></image>
|
|
</view>
|
|
</swiper-item>
|
|
<!-- 嵌套swiper的第二个item-->
|
|
<swiper-item>
|
|
<view class="arrow-downs" v-if="nestedIndices[outerIndex] == 1">
|
|
<image src="https://des.dayunyuanjian.cn/epicSoul/image/chapter3/botIcon.png" :lazy-load="true" mode="heightFix">
|
|
</image>
|
|
</view>
|
|
<view class="page-container home-page">
|
|
<view class="gif-container">
|
|
<image v-if="shouldLoadContent(outerIndex)" class="gif-style"
|
|
:src="'https://des.dayunyuanjian.cn/epicSoul/3-' + (outerIndex+1) + '-2.gif'"
|
|
mode="aspectFill" :lazy-load="true"></image>
|
|
</view>
|
|
|
|
<image class="bg-image"
|
|
:src="'https://des.dayunyuanjian.cn/epicSoul/image/chapter3/cover' + (outerIndex+2) + '-1.png'"
|
|
mode="" :lazy-load="true"></image>
|
|
<view class="qrcode-content">
|
|
<image class="qrCode" src="https://des.dayunyuanjian.cn/epicSoul/image/chapter3/btn1.png"
|
|
mode="widthFix" :lazy-load="true" :show-menu-by-longpress="true" @click="gotoPath('/subPackages/techan/detail?id=34')"></image>
|
|
<!-- <view class="code-txt">
|
|
扫码下单
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="page-container home-page">
|
|
<image class="bg-image" src="https://des.dayunyuanjian.cn/epicSoul/image/chapter3/cover9s.png"
|
|
mode="" :lazy-load="true"></image>
|
|
<image @click="goRandomImage" class="cover-txt9"
|
|
src="https://des.dayunyuanjian.cn/epicSoul/image/chapter3/cover9s-txt.png" mode=""
|
|
:lazy-load="true"></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<MusicControl />
|
|
<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
|
|
<AudioControl audioSrc="https://des.dayunyuanjian.cn/data/2025/09/05/fac61c02-6cfd-41bf-9270-0ecd69881da2.MP3" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import AudioControl from '@/components/AudioControl.vue';
|
|
import MusicControl from '@/components/MusicControl.vue';
|
|
import NavMenu from '../components/NavMenu.vue';
|
|
export default {
|
|
components: {
|
|
MusicControl,
|
|
NavMenu,
|
|
AudioControl
|
|
},
|
|
data() {
|
|
return {
|
|
currentIndex: 0,
|
|
// 嵌套swiper索引
|
|
nestedIndices: {
|
|
0: 0,
|
|
1: 0,
|
|
2: 0,
|
|
3: 0,
|
|
4: 0,
|
|
5: 0,
|
|
6: 0
|
|
},
|
|
// 当前活跃的页面，用于内容加载判断
|
|
activePages: {
|
|
mainIndex: 0,
|
|
nestedIndices: {
|
|
0: 0,
|
|
1: 0,
|
|
2: 0,
|
|
3: 0,
|
|
4: 0,
|
|
5: 0,
|
|
6: 0
|
|
}
|
|
},
|
|
// 预加载缓冲区大小
|
|
preloadBuffer: 2
|
|
}
|
|
},
|
|
methods: {
|
|
// 主swiper切换事件处理
|
|
handleSwiperChange(e) {
|
|
this.currentIndex = e.detail.current;
|
|
this.activePages.mainIndex = e.detail.current;
|
|
},
|
|
|
|
// 嵌套swiper切换事件处理
|
|
handleVerticalChange(e, outerIndex) {
|
|
this.nestedIndices[outerIndex] = e.detail.current;
|
|
this.activePages.nestedIndices[outerIndex] = e.detail.current;
|
|
},
|
|
|
|
goRandomImage() {
|
|
const imageArray = [{
|
|
id: 1,
|
|
image: 'https://des.dayunyuanjian.cn/epicSoul/image/chapter3/random/image1.png',
|
|
name: '雏菊',
|
|
desc: '宋 丛菊图页'
|
|
},
|
|
{
|
|
id: 2,
|
|
image: 'https://des.dayunyuanjian.cn/epicSoul/image/chapter3/random/image2.png',
|
|
name: '杜鹃',
|
|
desc: '清 恽寿平 花卉十开 杜鹃'
|
|
},
|
|
{
|
|
id: 3,
|
|
image: 'https://des.dayunyuanjian.cn/epicSoul/image/chapter3/random/image3.png',
|
|
name: '金桂',
|
|
desc: '清 蒋延锡 桂花图 局部 台北故宫博物馆院藏'
|
|
},
|
|
{
|
|
id: 4,
|
|
image: 'https://des.dayunyuanjian.cn/epicSoul/image/chapter3/random/image4.png',
|
|
name: '绿梅',
|
|
desc: '北宋 赵佶 梅花秀眼图页 北京故宫博物院藏'
|
|
},
|
|
{
|
|
id: 5,
|
|
image: 'https://des.dayunyuanjian.cn/epicSoul/image/chapter3/random/image5.png',
|
|
name: '墨兰',
|
|
desc: '宋 秋兰绽蕊图'
|
|
},
|
|
{
|
|
id: 6,
|
|
image: 'https://des.dayunyuanjian.cn/epicSoul/image/chapter3/random/image6.png',
|
|
name: '茉莉',
|
|
desc: '宋 茉莉花图页'
|
|
},
|
|
{
|
|
id: 7,
|
|
image: 'https://des.dayunyuanjian.cn/epicSoul/image/chapter3/random/image7.png',
|
|
name: '青莲',
|
|
desc: '宋 出水芙蓉图页'
|
|
},
|
|
];
|
|
|
|
const app = getApp();
|
|
app.globalData.randomImages = imageArray;
|
|
uni.setStorageSync('randomImages', JSON.stringify(imageArray));
|
|
uni.navigateTo({
|
|
url: '/xxdf/chapter3/randomImage'
|
|
});
|
|
},
|
|
shouldLoadContent(outerIndex) {
|
|
// 当主索引在附近，且嵌套索引是第二页(GIF页)时预加载
|
|
return Math.abs(outerIndex - this.currentIndex) <= this.preloadBuffer &&
|
|
(this.nestedIndices[outerIndex] === 1 || this.activePages.nestedIndices[outerIndex] === 1);
|
|
},
|
|
goback() {
|
|
const app = getApp();
|
|
app.globalData.mainSliderIndex = 4;
|
|
uni.redirectTo({
|
|
url: '/xxdf/home/home'
|
|
});
|
|
}
|
|
},
|
|
mounted() {
|
|
// 初始化状态
|
|
this.currentIndex = 0;
|
|
this.activePages.mainIndex = 0;
|
|
},
|
|
beforeDestroy() {
|
|
// 组件销毁前的清理工作（如果有）
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.main-swiper {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
.nested-swiper {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
.page-container {
|
|
height: 100vh;
|
|
}
|
|
|
|
.home-page {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bg-image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.cover-txt {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 22%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 2;
|
|
width: 74%;
|
|
height: 122rpx;
|
|
}
|
|
|
|
.cover-txt2 {
|
|
width: 60% !important;
|
|
height: 134rpx !important;
|
|
}
|
|
|
|
.cover-txt9 {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translate(-50%, -20%);
|
|
z-index: 2;
|
|
width: 360rpx;
|
|
height: 280rpx;
|
|
}
|
|
|
|
.btn {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 16%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 2;
|
|
width: 244rpx;
|
|
height: 60rpx;
|
|
}
|
|
|
|
.qrcode-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 10vh;
|
|
transform: translate(-50%, -25%);
|
|
z-index: 2;
|
|
}
|
|
|
|
.qrCode {
|
|
width: 400rpx;
|
|
}
|
|
|
|
.code-txt {
|
|
color: #333;
|
|
font-size: 24rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.gif-container {
|
|
background: #333333;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 400rpx;
|
|
z-index: 2;
|
|
}
|
|
|
|
.gif-style {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.arrow-down {
|
|
width: fit-content;
|
|
height: fit-content;
|
|
position: absolute;
|
|
animation: bounce 1.5s infinite;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 20rpx;
|
|
margin: auto;
|
|
z-index: 100;
|
|
}
|
|
|
|
.arrow-down image {
|
|
display: block;
|
|
width: 50rpx;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.arrow-downs {
|
|
width: fit-content;
|
|
height: fit-content;
|
|
position: absolute;
|
|
animation: bounces 1.5s infinite;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 360rpx;
|
|
margin: 0 auto;
|
|
z-index: 100;
|
|
}
|
|
|
|
.arrow-downs image {
|
|
display: block;
|
|
height: 50rpx;
|
|
}
|
|
|
|
@keyframes bounce {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
25% {
|
|
transform: translateX(-3px);
|
|
}
|
|
|
|
75% {
|
|
transform: translateX(3px);
|
|
}
|
|
}
|
|
|
|
@keyframes bounces {
|
|
0%,
|
|
20%,
|
|
50%,
|
|
80%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
40% {
|
|
transform: translateY(-20rpx);
|
|
}
|
|
|
|
60% {
|
|
transform: translateY(-10rpx);
|
|
}
|
|
}
|
|
</style>
|