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.
454 lines
14 KiB
454 lines
14 KiB
<!-- pages/home/home.vue -->
|
|
<template>
|
|
<view>
|
|
<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
|
|
<!-- 首页内容 -->
|
|
<swiper-item>
|
|
<view class="page-container home-page">
|
|
<!-- 使用loadedPages确定是否已加载，v-show控制显示/隐藏 -->
|
|
<template v-if="loadedPages[0]">
|
|
<image v-show="shouldShowContent(0)" class="bg-image" src="https://static.ticket.sz-trip.com/epicSoul/index.gif" :lazy-load="true" mode="aspectFill"></image>
|
|
<view v-show="shouldShowContent(0)" class="content-layer">
|
|
<image class="layer-img" src="https://static.ticket.sz-trip.com/epicSoul/home1.png" :lazy-load="true" mode="widthFix"></image>
|
|
<view class="arrow-content">
|
|
<image class="arrow-down" src="https://static.ticket.sz-trip.com/epicSoul/arrow-icons.png" :lazy-load="true" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
|
|
<!-- 序章 -->
|
|
<swiper-item>
|
|
<view class="page-container home-page">
|
|
<template v-if="loadedPages[1]">
|
|
<image v-show="shouldShowContent(1)" class="bg-image" src="https://static.ticket.sz-trip.com/epicSoul/prologue-bg.png" :lazy-load="true" mode="aspectFill"></image>
|
|
<view v-show="shouldShowContent(1)" class="content-layer">
|
|
<view class="layer-text">
|
|
<view class="">
|
|
在此我们邀请你
|
|
</view>
|
|
<view class="">
|
|
以指尖触发一场直抵情绪与美学的共生实验
|
|
</view>
|
|
</view>
|
|
<view class="arrow-content">
|
|
<image class="arrow-down" src="https://static.ticket.sz-trip.com/epicSoul/arrow-icons.png" :lazy-load="true" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
|
|
<!-- 第一章封面 -->
|
|
<swiper-item>
|
|
<view class="page-container home-page">
|
|
<template v-if="loadedPages[2]">
|
|
<image v-show="shouldShowContent(2)" class="bg-image" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/covers.png" :lazy-load="true" mode="aspectFill"></image>
|
|
<view v-show="shouldShowContent(2)" class="content-layer">
|
|
<image class="layer-img2" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/bg-txts.png" :lazy-load="true" mode="widthFix">
|
|
</image>
|
|
<view class="arrow-content">
|
|
<image @click="navigateToChapter1" class="btn" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/buttons.png" :lazy-load="true" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
|
|
<!-- 第二章封面 -->
|
|
<swiper-item>
|
|
<view class="page-container home-page">
|
|
<template v-if="loadedPages[3]">
|
|
<image v-show="shouldShowContent(3)" class="bg-image" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter2/cover.png" :lazy-load="true" mode="aspectFill"></image>
|
|
<view v-show="shouldShowContent(3)" class="content-layer">
|
|
<image class="chapter2-bg-txt" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter2/bg-txt.png" :lazy-load="true" mode=""></image>
|
|
<view class="arrow-content chapter2-btn">
|
|
<image @click="navigateToChapter2" class="btn" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter2/button.png" :lazy-load="true" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
|
|
<!-- 第三章封面 -->
|
|
<swiper-item>
|
|
<view class="page-container home-page">
|
|
<template v-if="loadedPages[4]">
|
|
<image v-show="shouldShowContent(4)" class="bg-image" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter3/cover.png" :lazy-load="true" mode="aspectFill"></image>
|
|
<view v-show="shouldShowContent(4)" class="content-layer">
|
|
<image class="chapter3-bg-txt" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter3/bg-txt.png" :lazy-load="true" mode=""></image>
|
|
<view class="arrow-content chapter3-btn">
|
|
<image @click="navigateToChapter3" class="btn" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter3/button.png" :lazy-load="true" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
|
|
<!-- 第四章封面 -->
|
|
<swiper-item>
|
|
<view class="page-container home-page">
|
|
<template v-if="loadedPages[5]">
|
|
<image v-show="shouldShowContent(5)" class="bg-image" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter4/covers.png" :lazy-load="true" mode="aspectFill"></image>
|
|
<view v-show="shouldShowContent(5)" class="content-layer">
|
|
<!-- <image class="chapter4-bg-txt" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter4/bg-txt.png" :lazy-load="true" mode="widthFix"></image> -->
|
|
<view class="chapter4-btn-content">
|
|
<image @click="ShareMoments" class="chapter4-btn" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter4/chapter4-btn.png" :lazy-load="true" mode=""></image>
|
|
<image @click="navigateToChapter4" class="chapter4-btn chapter4-btn2" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter4/chapter4-btn2.png" :lazy-load="true" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
|
|
<!-- 页脚1 -->
|
|
<swiper-item>
|
|
<view class="page-container home-page">
|
|
<template v-if="loadedPages[6]">
|
|
<image v-show="shouldShowContent(6)" class="bg-image" src="https://static.ticket.sz-trip.com/epicSoul/footers.png" :lazy-load="true" mode="aspectFill"></image>
|
|
<image v-show="shouldShowContent(6)" 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>
|
|
<MusicControl />
|
|
<ShareGuide v-model="showShareGuide" @close="onShareGuideClose" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import ShareGuide from '@/components/ShareGuide.vue';
|
|
import MusicControl from '@/components/MusicControl.vue';
|
|
|
|
export default {
|
|
components: {
|
|
ShareGuide,
|
|
MusicControl
|
|
},
|
|
data() {
|
|
return {
|
|
showShareGuide: false,
|
|
currentIndex: 0,
|
|
loadedPages: {
|
|
0: false,
|
|
1: false,
|
|
2: false,
|
|
3: false,
|
|
4: false,
|
|
5: false,
|
|
6: false
|
|
},
|
|
preloadBuffer: 1
|
|
};
|
|
},
|
|
methods: {
|
|
ShareMoments() {
|
|
this.showShareGuide = true;
|
|
},
|
|
onShareGuideClose() {
|
|
console.log('分享引导已关闭');
|
|
},
|
|
shouldShowContent(index) {
|
|
return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
|
|
},
|
|
handleSwiperChange(e) {
|
|
this.currentIndex = e.detail.current;
|
|
},
|
|
navigateToChapter1() {
|
|
uni.navigateTo({
|
|
url: '/xxdf/chapter1/cover1'
|
|
});
|
|
},
|
|
navigateToChapter2() {
|
|
uni.navigateTo({
|
|
url: '/xxdf/chapter2/cover'
|
|
});
|
|
},
|
|
navigateToChapter3() {
|
|
uni.navigateTo({
|
|
url: '/xxdf/chapter3/cover'
|
|
});
|
|
},
|
|
navigateToChapter4() {
|
|
uni.navigateTo({
|
|
url: '/xxdf/chapter4/cover'
|
|
});
|
|
}
|
|
},
|
|
watch: {
|
|
currentIndex(newIndex) {
|
|
for (let i = Math.max(0, newIndex - this.preloadBuffer); i <= Math.min(6, newIndex + this.preloadBuffer); i++) {
|
|
this.loadedPages[i] = true;
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
const app = getApp();
|
|
app.updateMusicSrc('https://static.ticket.sz-trip.com/epicSoul/comfort.mp3');
|
|
app.initBackgroundMusic(); // 初始化背景音乐
|
|
uni.$bgMusic.play(); // 播放音乐
|
|
for (let i = 0; i <= Math.min(1 + this.preloadBuffer, 6); i++) {
|
|
this.loadedPages[i] = true;
|
|
}
|
|
},
|
|
onUnload() {
|
|
uni.$bgMusic.pause(); // 停止音乐
|
|
},
|
|
onShow() {
|
|
try {
|
|
const app = getApp();
|
|
if (app.globalData && app.globalData.mainSliderIndex!== undefined && app.globalData.mainSliderIndex!== 0) {
|
|
const newIndex = app.globalData.mainSliderIndex;
|
|
setTimeout(() => {
|
|
this.currentIndex = newIndex;
|
|
app.globalData.mainSliderIndex = 0; // 重置
|
|
}, 100);
|
|
}
|
|
} catch (error) {
|
|
console.error('获取globalData失败:', error);
|
|
}
|
|
},
|
|
// 微信分享配置
|
|
// #ifdef MP-WEIXIN
|
|
onShareAppMessage() {
|
|
return {
|
|
title: '细嗅东方·Out Of Space｜「Epic Soul」阅读体 issue02',
|
|
mpId: 'wx8954209bb3ad489e',
|
|
path: '/xxdf/home/home',
|
|
imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/share-img.jpg'
|
|
};
|
|
},
|
|
onShareTimeline() {
|
|
return {
|
|
title: '细嗅东方·Out Of Space｜「Epic Soul」阅读体 issue02',
|
|
query: '',
|
|
imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/share-img.jpg'
|
|
};
|
|
}
|
|
// #endif
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.main-swiper {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
.page-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
}
|
|
|
|
.home-page {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bg-image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.qrCode-image {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 192rpx;
|
|
margin: 0 auto;
|
|
z-index: 2;
|
|
width: 30vw;
|
|
}
|
|
|
|
/* 内容层样式 */
|
|
.content-layer {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.layer-img {
|
|
width: 100%;
|
|
/* height: 80%; */
|
|
}
|
|
|
|
.layer-img2 {
|
|
width: 90%;
|
|
/* height: 88%; */
|
|
margin-top: 18%;
|
|
}
|
|
|
|
.chapter2-bg-txt {
|
|
width: 85%;
|
|
height: 70%;
|
|
margin-top: 24%;
|
|
}
|
|
|
|
.chapter3-bg-txt {
|
|
width: 88%;
|
|
height: 88%;
|
|
margin-top: 16%;
|
|
}
|
|
|
|
.chapter4-bg-txt {
|
|
width: 75%;
|
|
/* height: 25%; */
|
|
margin-top: 18%;
|
|
}
|
|
|
|
.layer-text {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 65%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
font-size: 30rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.layer-text view:last-child {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
|
|
.prologue-page {
|
|
background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
|
|
}
|
|
|
|
.chapter-cover {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.title {
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 32rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 32rpx;
|
|
color: #666;
|
|
margin-bottom: 80rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.chapter-num {
|
|
font-size: 36rpx;
|
|
color: #666;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.chapter-title {
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 60rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.content {
|
|
font-size: 32rpx;
|
|
line-height: 1.6;
|
|
text-align: center;
|
|
margin-bottom: 60rpx;
|
|
max-width: 80%;
|
|
}
|
|
|
|
.btn-container {
|
|
margin-bottom: 60rpx;
|
|
}
|
|
|
|
.enter-btn {
|
|
background-color: #007AFF;
|
|
color: #FFFFFF;
|
|
padding: 20rpx 60rpx;
|
|
border-radius: 100rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.arrow-content {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 85%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.chapter2-btn {
|
|
top: 75% !important;
|
|
}
|
|
|
|
.chapter3-btn {
|
|
top: 48% !important;
|
|
}
|
|
|
|
.chapter4-btn-content {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
bottom: 10%;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
|
|
.chapter4-btn {
|
|
width: 280rpx;
|
|
height: 60rpx;
|
|
}
|
|
|
|
.chapter4-btn2 {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.btn {
|
|
width: 280rpx;
|
|
height: 60rpx;
|
|
}
|
|
|
|
.arrow-down {
|
|
width: 200rpx;
|
|
height: 40rpx;
|
|
animation: bounce 1.5s infinite;
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%,
|
|
20%,
|
|
50%,
|
|
80%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
40% {
|
|
transform: translateY(-20rpx);
|
|
}
|
|
|
|
60% {
|
|
transform: translateY(-10rpx);
|
|
}
|
|
}
|
|
</style>
|