1054425342@qq.com
2 months ago
15 changed files with 2026 additions and 7 deletions
@ -0,0 +1,215 @@ |
|||
<template> |
|||
<view style="width: 100vw;"> |
|||
<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange"> |
|||
<swiper-item v-for="(image, index) in swiperImages" :key="index"> |
|||
<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }"> |
|||
<template v-if="index === 1"> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter1/img2-dian.png" |
|||
v-for="i in 3" :key="i" mode="widthFix" :class="['module'+(i+1)]" |
|||
@click="openPopup(i+1)"></image> |
|||
</template> |
|||
|
|||
<template v-if="index === 3"> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter1/img4-text.png" |
|||
mode="widthFix" class="img4-text"></image> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/btn-img.png" mode="widthFix" |
|||
class="btn-img" @click="gotoPath('/xrcc/chapter2/index')"></image> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<!-- 第二页气泡弹框 --> |
|||
<uni-popup ref="chapterPopup"> |
|||
<view style="width: 100vw;height: 100vh;" @click="$refs.chapterPopup.close()"> |
|||
<image :src="getImageUrl(`img2-${popupIndex}.png`)" mode="widthFix" :class="[`img2-${popupIndex}`]"> |
|||
</image> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" /> |
|||
<MusicControl /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import MusicControl from '@/components/MusicControl.vue'; |
|||
import NavMenu from '../components/NavMenu.vue'; |
|||
export default { |
|||
components: { |
|||
MusicControl, |
|||
NavMenu |
|||
}, |
|||
data() { |
|||
return { |
|||
currentIndex: 0, |
|||
navIndex: 1, |
|||
swiperImages: [ |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter1/img1.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter1/img2.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter1/img3s.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter1/img4.gif', |
|||
], |
|||
animationConfig: { |
|||
delay: 0.5, |
|||
duration: 3, |
|||
keyframes: { |
|||
start: 1, |
|||
first: 0.8, |
|||
second: 1.2, |
|||
third: 0.9, |
|||
end: 1.1 |
|||
} |
|||
}, |
|||
popupIndex: 1 |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
this.currentIndex = option.currentIndex || 0 |
|||
if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1; |
|||
}, |
|||
methods: { |
|||
handleJumpToPage(idx) { |
|||
this.navIndex = idx |
|||
if(idx == this.swiperImages.length - 1) this.navIndex = idx + 1 |
|||
}, |
|||
handleSwiperChange(e) { |
|||
this.currentIndex = e.detail.current; |
|||
if (this.currentIndex == this.swiperImages.length - 1) { |
|||
this.navIndex = 2; |
|||
}else { |
|||
this.navIndex = 1 |
|||
} |
|||
}, |
|||
// 第二页气泡弹框 |
|||
openPopup(i) { |
|||
this.popupIndex = i |
|||
this.$refs.chapterPopup.open(); |
|||
}, |
|||
// 生成图片完整 URL |
|||
getImageUrl(path) { |
|||
if (typeof path === 'object') { |
|||
path = path.url; |
|||
} |
|||
return `https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter1/${path}`; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.swiper { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.swiper-item { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-size: 100% 100%; |
|||
background-color: #000; |
|||
background-repeat: no-repeat; |
|||
position: relative; |
|||
|
|||
.module1 { |
|||
position: absolute; |
|||
width: 52.1rpx; |
|||
top: 1020rpx; |
|||
left: 235rpx; |
|||
animation: breath1 3s ease-in-out infinite; |
|||
} |
|||
|
|||
.module2 { |
|||
position: absolute; |
|||
width: 52.1rpx; |
|||
top: 760rpx; |
|||
left: 317rpx; |
|||
animation: breath2 4s ease-in-out infinite; |
|||
} |
|||
|
|||
.module3 { |
|||
position: absolute; |
|||
width: 52.1rpx; |
|||
top: 700rpx; |
|||
left: 498rpx; |
|||
animation: breath3 5s ease-in-out infinite; |
|||
} |
|||
|
|||
// 呼吸效果动画 - 不同频率 |
|||
@keyframes breath1 { |
|||
|
|||
0%, |
|||
100% { |
|||
transform: scale(1); |
|||
} |
|||
|
|||
50% { |
|||
transform: scale(1.2); |
|||
} |
|||
} |
|||
|
|||
@keyframes breath2 { |
|||
|
|||
0%, |
|||
100% { |
|||
transform: scale(1); |
|||
} |
|||
|
|||
50% { |
|||
transform: scale(1.2); |
|||
} |
|||
} |
|||
|
|||
@keyframes breath3 { |
|||
|
|||
0%, |
|||
100% { |
|||
transform: scale(1); |
|||
} |
|||
|
|||
50% { |
|||
transform: scale(1.2); |
|||
} |
|||
} |
|||
|
|||
.img4-text { |
|||
width: 428.43rpx; |
|||
position: absolute; |
|||
top: 170rpx; |
|||
left: 100rpx; |
|||
} |
|||
|
|||
.btn-img { |
|||
position: absolute; |
|||
width: 149.8rpx; |
|||
bottom: 290rpx; |
|||
left: 100rpx; |
|||
} |
|||
} |
|||
|
|||
.swiper-img { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.img2-1 { |
|||
width: 267.37rpx; |
|||
position: fixed; |
|||
top: 395rpx; |
|||
left: 70rpx; |
|||
} |
|||
|
|||
.img2-2 { |
|||
width: 332.24rpx; |
|||
position: fixed; |
|||
top: 210rpx; |
|||
left: 360rpx; |
|||
} |
|||
|
|||
.img2-3 { |
|||
width: 600.59rpx; |
|||
position: fixed; |
|||
bottom: 215rpx; |
|||
right: 40rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,257 @@ |
|||
<template> |
|||
<view style="width: 100vw;"> |
|||
<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange"> |
|||
<swiper-item v-for="(image, index) in swiperImages" :key="index"> |
|||
<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }"> |
|||
<template v-if="index === 6"> |
|||
<!-- 第一张图：延迟0.5秒 --> |
|||
<image |
|||
v-if="showImg7_1" |
|||
src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img7-1.png" |
|||
mode="widthFix" |
|||
class="fade-in-image" |
|||
:style="{ animationDelay: '0s' }" |
|||
></image> |
|||
|
|||
<!-- 第二张图：延迟1秒 --> |
|||
<image |
|||
v-if="showImg7_2" |
|||
src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img7-2.png" |
|||
mode="widthFix" |
|||
class="fade-in-image" |
|||
:style="{ animationDelay: '0s' }" |
|||
></image> |
|||
|
|||
<!-- 第三张图：延迟2秒 --> |
|||
<image |
|||
v-if="showImg7_3" |
|||
src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img7-3.png" |
|||
mode="widthFix" |
|||
class="fade-in-image" |
|||
:style="{ animationDelay: '0s' }" |
|||
></image> |
|||
</template> |
|||
|
|||
<template v-if="index === 7"> |
|||
<image :src="`https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img8-${i+1}.png`" |
|||
v-for="i in 4" :key="i" mode="widthFix" :class="['module-img', 'module'+(i+1)]" |
|||
@click="openPopup(i+1)"></image> |
|||
</template> |
|||
|
|||
<template v-if="index === 9"> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img10-text.png" mode="widthFix" class="img10-text"></image> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/btn-img.png" mode="widthFix" |
|||
class="btn-img" @click="gotoPath('/xrcc/chapter3/index')"></image> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<!-- 第八页气泡弹框 --> |
|||
<uni-popup ref="chapterPopup"> |
|||
<image :src="getImageUrl(`img8-${popupIndex}s.png`)" mode="widthFix" style="width: 600rpx;"> |
|||
</image> |
|||
</uni-popup> |
|||
|
|||
<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" /> |
|||
<MusicControl /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import MusicControl from '@/components/MusicControl.vue'; |
|||
import NavMenu from '../components/NavMenu.vue'; |
|||
export default { |
|||
components: { |
|||
MusicControl, |
|||
NavMenu |
|||
}, |
|||
data() { |
|||
return { |
|||
currentIndex: 0, |
|||
navIndex: 2, |
|||
swiperImages: [ |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img1.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img2.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img3.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img4.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img5s.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img6.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img7s.jpg', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img8.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img9.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img10.gif' |
|||
], |
|||
// 控制图片显示的变量 |
|||
showImg7_1: false, |
|||
showImg7_2: false, |
|||
showImg7_3: false, |
|||
// 存储定时器 |
|||
timers: [], |
|||
popupIndex: 1 |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
this.currentIndex = option.currentIndex || 0 |
|||
if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1; |
|||
}, |
|||
onUnload() { |
|||
// 清除定时器 |
|||
this.timers.forEach(timer => clearTimeout(timer)) |
|||
}, |
|||
methods: { |
|||
handleJumpToPage(idx) { |
|||
this.navIndex = idx |
|||
if(idx == this.swiperImages.length - 1) this.navIndex = idx + 1 |
|||
}, |
|||
handleSwiperChange(e) { |
|||
// 清除之前的定时器 |
|||
this.timers.forEach(timer => clearTimeout(timer)) |
|||
this.timers = [] |
|||
|
|||
this.currentIndex = e.detail.current; |
|||
|
|||
if (this.currentIndex == this.swiperImages.length - 1) { |
|||
this.navIndex = 3; |
|||
}else { |
|||
this.navIndex = 2 |
|||
} |
|||
|
|||
if (this.currentIndex === 6) { |
|||
// 重置显示状态（确保每次进入都重新动画） |
|||
this.showImg7_1 = false |
|||
this.showImg7_2 = false |
|||
this.showImg7_3 = false |
|||
|
|||
// 延迟0.5秒显示第一张图 |
|||
const timer1 = setTimeout(() => { |
|||
this.showImg7_1 = true |
|||
}, 500) |
|||
|
|||
// 延迟1秒显示第二张图 |
|||
const timer2 = setTimeout(() => { |
|||
this.showImg7_2 = true |
|||
}, 1000) |
|||
|
|||
// 延迟2秒显示第三张图 |
|||
const timer3 = setTimeout(() => { |
|||
this.showImg7_3 = true |
|||
}, 2000) |
|||
|
|||
this.timers.push(timer1, timer2, timer3) |
|||
} else { |
|||
// 非目标索引时隐藏所有图片 |
|||
this.showImg7_1 = false |
|||
this.showImg7_2 = false |
|||
this.showImg7_3 = false |
|||
} |
|||
}, |
|||
// 第八页气泡弹框 |
|||
openPopup(i) { |
|||
this.popupIndex = i |
|||
this.$refs.chapterPopup.open(); |
|||
}, |
|||
getImageUrl(path) { |
|||
if (typeof path === 'object') { |
|||
path = path.url; |
|||
} |
|||
return `https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/${path}`; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.swiper { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.swiper-item { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-size: 100% 100%; |
|||
background-color: #000; |
|||
background-repeat: no-repeat; |
|||
position: relative; |
|||
|
|||
.img10-text { |
|||
width: 484rpx; |
|||
position: absolute; |
|||
top: 170rpx; |
|||
left: 100rpx; |
|||
} |
|||
|
|||
.btn-img { |
|||
position: absolute; |
|||
width: 149.8rpx; |
|||
bottom: 290rpx; |
|||
left: 100rpx; |
|||
} |
|||
|
|||
.module-img { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
margin: 0 auto; |
|||
width: 564.25rpx; |
|||
} |
|||
.module1 { |
|||
top: 630rpx; |
|||
} |
|||
.module2 { |
|||
top: 780rpx; |
|||
} |
|||
.module3 { |
|||
top: 930rpx; |
|||
} |
|||
.module4 { |
|||
top: 1080rpx; |
|||
} |
|||
} |
|||
|
|||
.swiper-img { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
|
|||
/* 渐入动画样式 */ |
|||
.fade-in-image { |
|||
/* 初始状态：透明 */ |
|||
opacity: 0; |
|||
/* 添加过渡动画：1秒内透明度从0到1 */ |
|||
animation: fadeIn 1s ease-out forwards; |
|||
/* 根据需要调整图片的定位 */ |
|||
position: absolute; |
|||
} |
|||
|
|||
/* 渐入动画关键帧 */ |
|||
@keyframes fadeIn { |
|||
from { |
|||
opacity: 0; |
|||
transform: translateY(20rpx); /* 可选：添加轻微上移动画 */ |
|||
} |
|||
to { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
.fade-in-image:nth-child(1) { |
|||
width: 22.97rpx; |
|||
top: 825rpx; |
|||
right: 191rpx; |
|||
} |
|||
|
|||
.fade-in-image:nth-child(2) { |
|||
width: 34.95rpx; |
|||
top: 790rpx; |
|||
right: 170rpx; |
|||
} |
|||
|
|||
.fade-in-image:nth-child(3) { |
|||
width: 144.81rpx; |
|||
top: 680rpx; |
|||
right: 71rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,244 @@ |
|||
<template> |
|||
<view style="width: 100vw; position: relative;"> |
|||
<!-- 滑动拦截遮罩（仅在第5页且未输入内容时显示） --> |
|||
<view |
|||
v-if="currentIndex === 5 && !inputValue.trim()" |
|||
class="swipe-blocker" |
|||
@click="$refs.customPopup.open()" |
|||
></view> |
|||
|
|||
<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange"> |
|||
<swiper-item v-for="(image, index) in swiperImages" :key="index"> |
|||
<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }"> |
|||
<!-- 第5页内容 --> |
|||
<template v-if="index === 5"> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img6-text.png" |
|||
mode="widthFix" class="img6-text"></image> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img6-btn.png" |
|||
mode="widthFix" class="img6-btn" @click="$refs.customPopup.open()"></image> |
|||
</template> |
|||
|
|||
<!-- 第6页内容 --> |
|||
<template v-if="index === 6"> |
|||
<view class="img7-box"> |
|||
<view class="img7-textBg"> |
|||
<view>你的</view> |
|||
<view style="margin: 10rpx 0;">{{inputValue}}</view> |
|||
<view>已备好</view> |
|||
</view> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img7-text.png" |
|||
mode="widthFix" class="img7-text"></image> |
|||
</view> |
|||
</template> |
|||
|
|||
<template v-if="index === 7"> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img8-text.png" mode="widthFix" class="img8-text"></image> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/btn-img.png" mode="widthFix" |
|||
class="btn-img" @click="gotoPath('/xrcc/chapter4/index')"></image> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<!-- 输入弹框 --> |
|||
<uni-popup ref="customPopup" type="center"> |
|||
<view class="popup-content"> |
|||
<textarea v-model="inputValue" class="input-area" placeholder="填写你的“物件” (可以是一本书、一首歌、一段回忆、一个困惑...)" |
|||
maxlength="20"></textarea> |
|||
|
|||
<view class="word-count"> |
|||
{{ inputValue.length }}/20 |
|||
</view> |
|||
|
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img6-btns.png" mode="widthFix" @click="submit" class="confirm-btn"></image> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" /> |
|||
<MusicControl /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
// 脚本部分保持不变 |
|||
import MusicControl from '@/components/MusicControl.vue'; |
|||
import NavMenu from '../components/NavMenu.vue'; |
|||
export default { |
|||
components: { |
|||
MusicControl, |
|||
NavMenu |
|||
}, |
|||
data() { |
|||
return { |
|||
currentIndex: 0, |
|||
navIndex: 3, |
|||
swiperImages: [ |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img1.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img2s.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img3s.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img4s.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img5s.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img6.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img7.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img8.gif', |
|||
], |
|||
inputValue: '', |
|||
swipeDirection: '' |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
this.currentIndex = option.currentIndex || 0 |
|||
if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1; |
|||
}, |
|||
methods: { |
|||
handleJumpToPage(idx) { |
|||
this.navIndex = idx |
|||
if (idx == this.swiperImages.length - 1) this.navIndex = idx + 1 |
|||
}, |
|||
handleTouchStart(e) { |
|||
this.startY = e.touches[0].clientY; |
|||
}, |
|||
handleTouchMove(e) { |
|||
const moveY = e.touches[0].clientY; |
|||
this.swipeDirection = moveY < this.startY ? 'down' : 'up'; |
|||
}, |
|||
handleSwiperChange(e) { |
|||
const newIndex = e.detail.current; |
|||
|
|||
if (this.currentIndex === 5 && newIndex === 6 && !this.inputValue.trim()) { |
|||
this.currentIndex = 5; |
|||
uni.showToast({ |
|||
title: '请先填写内容才能继续', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
this.currentIndex = newIndex; |
|||
if (this.currentIndex === this.swiperImages.length - 1) { |
|||
this.navIndex = 4; |
|||
} else { |
|||
this.navIndex = 3; |
|||
} |
|||
}, |
|||
submit() { |
|||
if (!this.inputValue.trim()) return; |
|||
this.$refs.customPopup.close() |
|||
this.currentIndex = 6; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/* 原有样式保持不变 */ |
|||
.swiper { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.swiper-item { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-size: 100% 100%; |
|||
background-color: #000; |
|||
background-repeat: no-repeat; |
|||
position: relative; |
|||
|
|||
.img6-text { |
|||
width: 442.41rpx; |
|||
position: absolute; |
|||
top: 170rpx; |
|||
left: 0; |
|||
right: 0; |
|||
margin: 0 auto; |
|||
} |
|||
.img6-btn { |
|||
position: absolute; |
|||
width: 520.31rpx; |
|||
bottom: 210rpx; |
|||
left: 0; |
|||
right: 0; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
/* 其他样式保持不变 */ |
|||
.img7-box { |
|||
position: relative; |
|||
top: 170rpx; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.img7-textBg { |
|||
background-image: url('https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img7-textBg.png'); |
|||
background-size: 100% 100%; |
|||
padding: 30rpx 50rpx; |
|||
font-size: 50rpx; |
|||
text-align: center; |
|||
color: #fff; |
|||
width: 520.31rpx; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.img7-text { |
|||
display: block; |
|||
margin: 60rpx auto 0; |
|||
width: 447.4rpx; |
|||
} |
|||
|
|||
.img8-text { |
|||
width: 379.49rpx; |
|||
position: absolute; |
|||
top: 170rpx; |
|||
left: 100rpx; |
|||
} |
|||
|
|||
.btn-img { |
|||
position: absolute; |
|||
width: 149.8rpx; |
|||
bottom: 290rpx; |
|||
left: 100rpx; |
|||
} |
|||
} |
|||
|
|||
.swipe-blocker { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
z-index: 9; |
|||
} |
|||
|
|||
.popup-content { |
|||
width: 85vw; |
|||
background-color: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 40rpx 30rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.input-area { |
|||
width: 100%; |
|||
min-height: 180rpx; |
|||
padding: 20rpx; |
|||
border: 2rpx solid #eee; |
|||
border-radius: 8rpx; |
|||
font-size: 28rpx; |
|||
resize: none; |
|||
box-sizing: border-box; |
|||
margin-bottom: 15rpx; |
|||
} |
|||
|
|||
.word-count { |
|||
text-align: right; |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
margin-bottom: 35rpx; |
|||
} |
|||
|
|||
.confirm-btn { |
|||
width: 100%; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,132 @@ |
|||
<template> |
|||
<view style="width: 100vw;"> |
|||
<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange"> |
|||
<swiper-item v-for="(image, index) in swiperImages" :key="index"> |
|||
<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }"> |
|||
<template v-if="index === 3"> |
|||
<view class="module-box"> |
|||
<image :src="`https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img4-${i+1}.png`" |
|||
v-for="i in 5" :key="i" mode="widthFix" :class="['module-img', 'module'+(i+1)]" |
|||
@click="openPopup(i+1)"></image> |
|||
</view> |
|||
</template> |
|||
|
|||
<template v-if="index === 5"> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img5-text.png" mode="widthFix" class="img5-text"></image> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/btn-img.png" mode="widthFix" |
|||
class="btn-img" @click="gotoPath('/xrcc/chapter5/index')"></image> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<uni-popup ref="chapterPopup"> |
|||
<image :src="getImageUrl(`img4-${popupIndex}s.png`)" mode="widthFix" style="width: 600rpx;"> |
|||
</image> |
|||
</uni-popup> |
|||
|
|||
<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" /> |
|||
|
|||
<MusicControl /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import MusicControl from '@/components/MusicControl.vue'; |
|||
import NavMenu from '../components/NavMenu.vue'; |
|||
export default { |
|||
components: { |
|||
MusicControl, |
|||
NavMenu |
|||
}, |
|||
data() { |
|||
return { |
|||
currentIndex: 0, |
|||
navIndex: 4, |
|||
swiperImages: [ |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img1.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img2.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img3.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img4.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img5s.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img6.gif', |
|||
], |
|||
popupIndex: 1 |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
this.currentIndex = option.currentIndex || 0 |
|||
if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1; |
|||
}, |
|||
methods: { |
|||
handleJumpToPage(idx) { |
|||
this.navIndex = idx |
|||
if(idx == this.swiperImages.length - 1) this.navIndex = idx + 1 |
|||
}, |
|||
handleSwiperChange(e) { |
|||
this.currentIndex = e.detail.current; |
|||
if (this.currentIndex == this.swiperImages.length - 1) { |
|||
this.navIndex = 5; |
|||
}else { |
|||
this.navIndex = 4 |
|||
} |
|||
}, |
|||
openPopup(i) { |
|||
this.popupIndex = i |
|||
this.$refs.chapterPopup.open(); |
|||
}, |
|||
getImageUrl(path) { |
|||
if (typeof path === 'object') { |
|||
path = path.url; |
|||
} |
|||
return `https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/${path}`; |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.swiper { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.swiper-item { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-size: 100% 100%; |
|||
background-color: #000; |
|||
background-repeat: no-repeat; |
|||
position: relative; |
|||
|
|||
.img5-text { |
|||
width: 576.23rpx; |
|||
position: absolute; |
|||
top: 170rpx; |
|||
left: 100rpx; |
|||
} |
|||
|
|||
.btn-img { |
|||
position: absolute; |
|||
width: 149.8rpx; |
|||
bottom: 290rpx; |
|||
left: 100rpx; |
|||
} |
|||
|
|||
.module-box { |
|||
position: absolute; |
|||
top: 460rpx; |
|||
text-align: center; |
|||
|
|||
image { |
|||
width: 650rpx; |
|||
margin-bottom: 80rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.swiper-img { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,191 @@ |
|||
<template> |
|||
<view style="width: 100vw;"> |
|||
<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange"> |
|||
<swiper-item v-for="(image, index) in swiperImages" :key="index"> |
|||
<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }"> |
|||
<template v-if="index === 1"> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img2s.png" mode="widthFix" |
|||
:class="['img2s', {'animate-enter-from-right': animateShow}]"></image> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img2-btn.png" |
|||
mode="widthFix" class="img2-btn" @click="gotoPath('/subPackages/techan/detail?id=39')"></image> |
|||
</template> |
|||
<template v-if="index === 2"> |
|||
<view class="img3-btn" @click="gotoPath('/subPackages/techan/detail?id=39')">立即购买</view> |
|||
</template> |
|||
|
|||
<template v-if="index === 5"> |
|||
<view class="flex-column"> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img5-texts.png" mode="widthFix" |
|||
class="img5-text"></image> |
|||
<!-- <image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img5-btn.png" |
|||
mode="widthFix" class="img5-btn" @click="goHome"></image> --> |
|||
</view> |
|||
</template> |
|||
|
|||
<template v-if="index === 6"> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img6-text.png" mode="widthFix" |
|||
class="img6-text" @click="gotoPath('/xrcc/chapter6/index')"></image> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" /> |
|||
<MusicControl /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import MusicControl from '@/components/MusicControl.vue'; |
|||
import NavMenu from '../components/NavMenu.vue'; |
|||
export default { |
|||
components: { |
|||
MusicControl, |
|||
NavMenu |
|||
}, |
|||
data() { |
|||
return { |
|||
currentIndex: 0, |
|||
navIndex: 5, |
|||
swiperImages: [ |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img1.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img2ss.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img3.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img4.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img8.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img5.gif', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img6.png' |
|||
], |
|||
animateShow: false, |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
this.currentIndex = option.currentIndex || 0 |
|||
if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1; |
|||
}, |
|||
methods: { |
|||
handleJumpToPage(idx) { |
|||
this.navIndex = idx |
|||
if (idx == this.swiperImages.length - 1) this.navIndex = idx + 1 |
|||
}, |
|||
handleSwiperChange(e) { |
|||
this.currentIndex = e.detail.current; |
|||
if(this.currentIndex == 1) { |
|||
this.animateShow = true |
|||
}else { |
|||
this.animateShow = false |
|||
} |
|||
|
|||
if (this.currentIndex == this.swiperImages.length - 1) { |
|||
this.navIndex = 6; |
|||
} else { |
|||
this.navIndex = 5 |
|||
} |
|||
}, |
|||
// 去首页 |
|||
goHome() { |
|||
uni.switchTab({ |
|||
url: '/pages/index/index' |
|||
}) |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.swiper { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.swiper-item { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-size: 100% 100%; |
|||
background-color: #000; |
|||
background-repeat: no-repeat; |
|||
position: relative; |
|||
|
|||
.img2s { |
|||
position: absolute; |
|||
top: 380rpx; |
|||
right: 25rpx; |
|||
width: 358rpx; |
|||
transform: translateX(100%); |
|||
opacity: 0; |
|||
} |
|||
|
|||
.img2-btn { |
|||
width: 558rpx; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
margin: 0 auto; |
|||
bottom: 70rpx; |
|||
} |
|||
|
|||
.img3-btn { |
|||
width: 558rpx; |
|||
line-height: 72rpx; |
|||
text-align: center; |
|||
border-radius: 20rpx; |
|||
border: 2rpx solid; |
|||
font-size: 30rpx; |
|||
color: #fff; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
margin: 0 auto; |
|||
bottom: 180rpx; |
|||
} |
|||
|
|||
.flex-column { |
|||
position: absolute; |
|||
bottom: 280rpx; |
|||
width: 100%; |
|||
align-items: center; |
|||
|
|||
.img5-text { |
|||
width: 100%; |
|||
} |
|||
|
|||
.img5-btn { |
|||
width: 230rpx; |
|||
margin-top: 99rpx; |
|||
} |
|||
} |
|||
|
|||
.img6-text { |
|||
width: 408.46rpx; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
margin: 0 auto; |
|||
bottom: 365rpx |
|||
} |
|||
} |
|||
|
|||
/* 从右往左进入的动画 */ |
|||
.animate-enter-from-right { |
|||
animation: enterFromRight 2s ease-out forwards; |
|||
} |
|||
|
|||
@keyframes enterFromRight { |
|||
0% { |
|||
/* 起始位置：右侧外部 */ |
|||
transform: translateX(100%); |
|||
opacity: 0; |
|||
} |
|||
|
|||
100% { |
|||
/* 结束位置：正常位置 */ |
|||
transform: translateX(0); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
.swiper-img { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,216 @@ |
|||
<template> |
|||
<view style="width: 100vw;"> |
|||
<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange"> |
|||
<swiper-item v-for="(image, index) in swiperImages" :key="index"> |
|||
<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }"> |
|||
<template v-if="index === 0"> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img7-1.png" mode="widthFix" |
|||
class="img7-1" @click="$refs.customPopup.open()"></image> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img7-2.png" mode="widthFix" |
|||
class="img7-2" style="top: 620rpx;" @click="$refs.customPopups.open()"></image> |
|||
|
|||
<view class="bgm-box flex-between"> |
|||
<view :class="{'bgm-active': index == bgmIndex}" v-for="(item,index) in bgmList" :key="index" @click="bgmIndex = index">{{item}}</view> |
|||
</view> |
|||
|
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img7-btn.png" mode="widthFix" |
|||
class="img7-btn" @click="confirm"></image> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<!-- 输入弹框 --> |
|||
<uni-popup ref="customPopup" type="center"> |
|||
<view class="popup-content"> |
|||
<textarea v-model="inputValue" class="input-area" placeholder="我的星槎" |
|||
maxlength="20"></textarea> |
|||
|
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/confirm-btn.png" mode="widthFix" @click="submit" class="confirm-btn"></image> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
<!-- 输入弹框 --> |
|||
<uni-popup ref="customPopups" type="center"> |
|||
<view class="popup-content"> |
|||
<textarea v-model="inputValues" class="input-area" placeholder="我的目的地" |
|||
maxlength="20"></textarea> |
|||
|
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/confirm-btn.png" mode="widthFix" @click="submit" class="confirm-btn"></image> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" /> |
|||
|
|||
<MusicControl /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import MusicControl from '@/components/MusicControl.vue'; |
|||
import NavMenu from '../components/NavMenu.vue'; |
|||
export default { |
|||
components: { |
|||
MusicControl, |
|||
NavMenu |
|||
}, |
|||
data() { |
|||
return { |
|||
currentIndex: 0, |
|||
navIndex: 5, |
|||
swiperImages: [ |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img7.png', |
|||
], |
|||
inputValue: '', |
|||
inputValues: '', |
|||
bgmList: [ |
|||
'古典', |
|||
'民谣', |
|||
'电子', |
|||
'自然白噪音' |
|||
], |
|||
bgmIndex: null |
|||
} |
|||
}, |
|||
methods: { |
|||
handleJumpToPage(idx) { |
|||
this.navIndex = idx |
|||
if(idx == this.swiperImages.length - 1) this.navIndex = idx + 1 |
|||
}, |
|||
handleSwiperChange(e) { |
|||
this.currentIndex = e.detail.current; |
|||
}, |
|||
submit() { |
|||
this.$refs.customPopup.close() |
|||
this.$refs.customPopups.close() |
|||
}, |
|||
getImageUrl(path) { |
|||
if (typeof path === 'object') { |
|||
path = path.url; |
|||
} |
|||
return `https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter6/${path}`; |
|||
}, |
|||
confirm() { |
|||
if (!this.inputValue.trim() || !this.inputValues.trim() || this.bgmIndex == null) { |
|||
uni.showToast({ |
|||
title: '请先填写或选择您的日志信息', |
|||
icon: 'none' |
|||
}); |
|||
}else { |
|||
let data = { |
|||
text1: this.inputValue.trim(), |
|||
text2: this.inputValues.trim(), |
|||
imgSrc: this.getImageUrl(`img${this.bgmIndex + 1}s.png`), |
|||
imgTitle: this.bgmList[this.bgmIndex] |
|||
} |
|||
this.gotoPath('/xrcc/chapter7/index?data=' + JSON.stringify(data)) |
|||
} |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.swiper { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.swiper-item { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-size: 100% 100%; |
|||
background-color: #000; |
|||
background-repeat: no-repeat; |
|||
position: relative; |
|||
|
|||
.btn-img { |
|||
position: absolute; |
|||
width: 149.8rpx; |
|||
bottom: 290rpx; |
|||
left: 84rpx; |
|||
} |
|||
|
|||
.img7-1, .img7-2 { |
|||
width: 437.67rpx; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
margin: 0 auto; |
|||
top: 365rpx; |
|||
} |
|||
|
|||
.bgm-box { |
|||
width: 437.67rpx; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 650rpx; |
|||
margin: 0 auto; |
|||
flex-wrap: wrap; |
|||
|
|||
view { |
|||
width: 207.89rpx; |
|||
line-height: 42.77rpx; |
|||
border-radius: 2rpx; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-size: 20rpx; |
|||
border: 1rpx solid #fff; |
|||
} |
|||
view:nth-child(n+3) { |
|||
margin-top: 17rpx; |
|||
} |
|||
|
|||
.bgm-active { |
|||
border-color: #00C48C; |
|||
color: #00C48C; |
|||
} |
|||
} |
|||
|
|||
.img7-btn { |
|||
width: 439.66rpx; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 244rpx; |
|||
margin: 0 auto; |
|||
} |
|||
} |
|||
|
|||
.swiper-img { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.popup-content { |
|||
width: 85vw; |
|||
background-color: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 40rpx 30rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.input-area { |
|||
width: 100%; |
|||
min-height: 180rpx; |
|||
padding: 20rpx; |
|||
border: 2rpx solid #747c8e; |
|||
border-radius: 8rpx; |
|||
font-size: 28rpx; |
|||
resize: none; |
|||
box-sizing: border-box; |
|||
margin-bottom: 15rpx; |
|||
} |
|||
|
|||
.word-count { |
|||
text-align: right; |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
margin-bottom: 35rpx; |
|||
} |
|||
|
|||
.confirm-btn { |
|||
width: 100%; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,143 @@ |
|||
<template> |
|||
<view style="width: 100vw;"> |
|||
<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange"> |
|||
<swiper-item v-for="(image, index) in swiperImages" :key="index"> |
|||
<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }"> |
|||
<template v-if="index === 0"> |
|||
<view class="box"> |
|||
<!-- <view class="title">我的星槎</view> --> |
|||
<view class="subtitle subtitle1">{{info.text1}}</view> |
|||
<!-- <view class="title">我的目的地</view> --> |
|||
<view class="subtitle subtitle2">{{info.text2}}</view> |
|||
<!-- <view class="title">我的航行BGM</view> --> |
|||
<view class="subtitle subtitle3">{{info.imgTitle}}</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<template v-if="index === 1"> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter6/img5-text.png" mode="widthFix" class="img5-text.png"></image> |
|||
</template> |
|||
|
|||
<!-- 二维码 --> |
|||
<template v-if="index === 2"> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/bmzm/qrcode.png" mode="widthFix" class="qrcode" :show-menu-by-longpress="true"></image> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" /> |
|||
|
|||
<MusicControl /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import MusicControl from '@/components/MusicControl.vue'; |
|||
import NavMenu from '../components/NavMenu.vue'; |
|||
export default { |
|||
components: { |
|||
MusicControl, |
|||
NavMenu |
|||
}, |
|||
data() { |
|||
return { |
|||
currentIndex: 0, |
|||
navIndex: 5, |
|||
swiperImages: [ |
|||
'', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter6/img5.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img7.png' |
|||
], |
|||
info: {} |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
if(option) { |
|||
let data = JSON.parse(option.data) |
|||
this.info = data |
|||
console.log(data) |
|||
this.swiperImages[0] = data.imgSrc |
|||
} |
|||
}, |
|||
methods: { |
|||
handleJumpToPage(idx) { |
|||
this.navIndex = idx |
|||
}, |
|||
handleSwiperChange(e) { |
|||
this.currentIndex = e.detail.current; |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.swiper { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.swiper-item { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-size: 100% 100%; |
|||
background-color: #000; |
|||
background-repeat: no-repeat; |
|||
position: relative; |
|||
|
|||
.box { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
margin: 0 auto; |
|||
top: 300rpx; |
|||
text-align: center; |
|||
width: 100%; |
|||
color: rgba(220, 221, 221, 1); |
|||
|
|||
.title { |
|||
font-size: 25rpx; |
|||
margin-top: 50rpx; |
|||
} |
|||
.subtitle { |
|||
position: absolute; |
|||
font-size: 40rpx; |
|||
left: 0; |
|||
right: 0; |
|||
margin: 0 auto; |
|||
} |
|||
.subtitle1 { |
|||
top: 150rpx; |
|||
} |
|||
.subtitle2 { |
|||
top: 280rpx; |
|||
} |
|||
.subtitle3 { |
|||
top: 410rpx; |
|||
} |
|||
} |
|||
|
|||
.img5-text.png { |
|||
width: 312.58rpx; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
margin: 0 auto; |
|||
bottom: 492rpx; |
|||
} |
|||
} |
|||
|
|||
.swiper-img { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.qrcode { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
margin: 0 auto; |
|||
width: 25vw; |
|||
bottom: 28vh; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,75 @@ |
|||
<template> |
|||
<view style="width: 100vw;"> |
|||
<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange"> |
|||
<swiper-item v-for="(image, index) in swiperImages" :key="index"> |
|||
<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }"> |
|||
|
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" /> |
|||
|
|||
<MusicControl /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import MusicControl from '@/components/MusicControl.vue'; |
|||
import NavMenu from '../components/NavMenu.vue'; |
|||
export default { |
|||
components: { |
|||
MusicControl, |
|||
NavMenu |
|||
}, |
|||
data() { |
|||
return { |
|||
currentIndex: 0, |
|||
navIndex: 3, |
|||
swiperImages: [ |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1.gif', |
|||
] |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
this.currentIndex = option.currentIndex || 0 |
|||
if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1; |
|||
}, |
|||
methods: { |
|||
handleJumpToPage(idx) { |
|||
this.navIndex = idx |
|||
}, |
|||
handleSwiperChange(e) { |
|||
this.currentIndex = e.detail.current; |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.swiper { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.swiper-item { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-size: 100% auto; |
|||
background-color: #000; |
|||
background-repeat: no-repeat; |
|||
position: relative; |
|||
|
|||
.btn-img { |
|||
position: absolute; |
|||
width: 149.8rpx; |
|||
bottom: 290rpx; |
|||
left: 84rpx; |
|||
} |
|||
} |
|||
|
|||
.swiper-img { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,243 @@ |
|||
<template> |
|||
<view> |
|||
<view class="overlay" v-if="showMenu" @click="onCloseMenu"></view> |
|||
<view class="fixed-nav" :class="{'hidden': showMenu}" @click="onShowMenu"> |
|||
<image class="nav-icon" :class="{'rotated': iconRotated, 'bounce-back': iconBounceBack}" :src="navIconSrc" |
|||
mode="aspectFill"></image> |
|||
</view> |
|||
<view class="nav-menu" :class="{'show': showMenu}"> |
|||
<view class="nav-item" :class="{'item-active': isItemActive(item)}" v-for="item in menuItems" |
|||
:key="item.targetIndex" @click="() => onJumpToPage(item)"> |
|||
<view v-if="item.text.includes('#Chapter')" class="chapter-text"> |
|||
<text class="chapter-title">#Chapter</text> |
|||
<text :class="{'active': isItemActive(item)}" class="chapter-number"> |
|||
{{ item.text.replace('#Chapter', '') }} |
|||
</text> |
|||
</view> |
|||
<text v-else :class="{'active': isItemActive(item)}">{{ item.text }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
// 当前激活的索引 |
|||
navIndex: { |
|||
type: Number, |
|||
required: true |
|||
}, |
|||
// 导航图标地址 |
|||
navIconSrc: { |
|||
type: String, |
|||
default: 'https://static.ticket.sz-trip.com/epicSoul/taozi/nav-icon.png' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
showMenu: false, |
|||
iconRotated: false, |
|||
iconBounceBack: false, |
|||
menuItems: [{ |
|||
text: 'INTRO序曲', |
|||
targetIndex: 0, |
|||
path: "/xrcc/home/home" |
|||
}, |
|||
{ |
|||
text: 'SENCE01 星际飞船', |
|||
targetIndex: 1, |
|||
path: "/xrcc/home/home?currentIndex=3" |
|||
}, |
|||
{ |
|||
text: 'SENCE02 银河扁舟', |
|||
targetIndex: 2, |
|||
path: "/xrcc/chapter1/index?currentIndex=3" |
|||
}, |
|||
{ |
|||
text: 'SENCE03 渡梦旅人', |
|||
targetIndex: 3, |
|||
path: "/xrcc/chapter2/index?currentIndex=9" |
|||
}, |
|||
{ |
|||
text: 'SENCE04 今夜起航', |
|||
targetIndex: 4, |
|||
path: "/xrcc/chapter3/index?currentIndex=7" |
|||
}, |
|||
{ |
|||
text: 'SENCE05 当代星槎', |
|||
targetIndex: 5, |
|||
path: "/xrcc/chapter4/index?currentIndex=5" |
|||
}, |
|||
{ |
|||
text: '有感商品', |
|||
targetIndex: 6, |
|||
path: "/subPackages/techan/detail?id=39" |
|||
} |
|||
], |
|||
}; |
|||
}, |
|||
watch: { |
|||
navIndex(newVal) { |
|||
console.log(newVal) |
|||
if(newVal) this.navIndex = newVal |
|||
} |
|||
}, |
|||
methods: { |
|||
onShowMenu() { |
|||
this.iconRotated = true; |
|||
setTimeout(() => { |
|||
this.showMenu = true; |
|||
this.$emit('menu-show'); |
|||
}, 300); |
|||
}, |
|||
onCloseMenu() { |
|||
this.showMenu = false; |
|||
setTimeout(() => { |
|||
this.iconBounceBack = true; |
|||
this.iconRotated = false; |
|||
setTimeout(() => { |
|||
this.iconBounceBack = false; |
|||
}, 500); |
|||
}, 300); |
|||
this.$emit('menu-hide'); |
|||
}, |
|||
onJumpToPage(item) { |
|||
console.log(this.navIndex) |
|||
if(item.path && item.targetIndex != this.navIndex) this.gotoPath(item.path) |
|||
this.onCloseMenu(); |
|||
}, |
|||
isItemActive(item) { |
|||
return this.navIndex === item.targetIndex; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.overlay { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background-color: rgba(0, 0, 0, 0.3); |
|||
z-index: 100; |
|||
} |
|||
|
|||
.fixed-nav { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
background-color: rgb(0 0 0 / 0.7); |
|||
border-radius: 10rpx 0 0 10rpx; |
|||
position: fixed; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
margin: auto 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 9; |
|||
transition: transform 0.3s ease, opacity 0.3s ease; |
|||
} |
|||
|
|||
.fixed-nav.hidden { |
|||
transform: translateX(100%); |
|||
opacity: 0; |
|||
pointer-events: none; |
|||
} |
|||
|
|||
.nav-icon { |
|||
width: 35rpx; |
|||
height: 35rpx; |
|||
transition: transform 0.3s ease; |
|||
} |
|||
|
|||
.nav-icon.rotated { |
|||
transform: rotate(180deg); |
|||
} |
|||
|
|||
.nav-icon.bounce-back { |
|||
animation: bounceRotation 0.5s ease; |
|||
} |
|||
|
|||
@keyframes bounceRotation { |
|||
0% { |
|||
transform: rotate(180deg); |
|||
} |
|||
|
|||
50% { |
|||
transform: rotate(-20deg); |
|||
} |
|||
|
|||
75% { |
|||
transform: rotate(10deg); |
|||
} |
|||
|
|||
100% { |
|||
transform: rotate(0deg); |
|||
} |
|||
} |
|||
|
|||
.nav-menu { |
|||
position: fixed; |
|||
top: 50%; |
|||
right: 0; |
|||
transform: translate(100%, -50%); |
|||
z-index: 999; |
|||
background-color: rgba(255, 255, 255, 0.95); |
|||
border-radius: 16rpx 0 0 16rpx; |
|||
box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1); |
|||
transition: transform 0.3s ease; |
|||
} |
|||
|
|||
.nav-menu.show { |
|||
transform: translate(0, -50%); |
|||
} |
|||
|
|||
.nav-item { |
|||
padding: 20rpx; |
|||
text-align: center; |
|||
|
|||
text { |
|||
color: #333; |
|||
opacity: 0.7; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
|
|||
.item-active { |
|||
background-color: rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.nav-item .active { |
|||
color: #333; |
|||
opacity: 1; |
|||
} |
|||
|
|||
.chapter-text { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
line-height: 1.3; |
|||
} |
|||
|
|||
.chapter-title { |
|||
color: #fff; |
|||
opacity: 0.7; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.chapter-number { |
|||
color: #fff; |
|||
opacity: 0.7; |
|||
font-size: 28rpx; |
|||
margin-top: 8rpx; |
|||
} |
|||
|
|||
.item-active .chapter-title, |
|||
.item-active .chapter-number.active { |
|||
opacity: 1; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,95 @@ |
|||
<template> |
|||
<view class="gif-container"> |
|||
<view class="dynamic-container"> |
|||
<image |
|||
:src="gifSrc" |
|||
mode="widthFix" |
|||
class="gif-image" |
|||
:style="{ display: isPlaying ? 'block' : 'none' }" |
|||
@load="startGifPlay" |
|||
></image> |
|||
<image |
|||
:src="staticCover" |
|||
mode="widthFix" |
|||
class="gif-image" |
|||
:style="{ display: isPlaying ? 'none' : 'block' }" |
|||
></image> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
// GIF图片路径 |
|||
gifSrc: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
// 静态封面图 |
|||
staticCover: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// GIF播放时长(毫秒) |
|||
duration: { |
|||
type: Number, |
|||
default: 2000 |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
isPlaying: false, |
|||
playTimer: null |
|||
} |
|||
}, |
|||
methods: { |
|||
// 开始播放GIF |
|||
startGifPlay() { |
|||
this.isPlaying = true; |
|||
|
|||
// 清除之前的定时器 |
|||
if (this.playTimer) { |
|||
clearTimeout(this.playTimer); |
|||
} |
|||
|
|||
// 播放完成后显示静态封面 |
|||
this.playTimer = setTimeout(() => { |
|||
this.isPlaying = false; |
|||
}, this.duration); |
|||
} |
|||
}, |
|||
onUnload() { |
|||
// 页面卸载时清除定时器 |
|||
if (this.playTimer) { |
|||
clearTimeout(this.playTimer); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.gif-container { |
|||
width: 100vw; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.gif-image { |
|||
width: 100vw; |
|||
height: auto; |
|||
} |
|||
|
|||
.dynamic-container { |
|||
position: relative; |
|||
width: 100vw; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.dynamic-container image { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,148 @@ |
|||
<template> |
|||
<view style="width: 100vw;"> |
|||
<!-- <SinglePlayGif |
|||
gifSrc="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1.gif" |
|||
staticCover="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1.png" |
|||
duration="5000" |
|||
/> --> |
|||
|
|||
<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange"> |
|||
<swiper-item v-for="(image, index) in swiperImages" :key="index"> |
|||
<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }"> |
|||
<template v-if="index == 0"> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1-text.png" mode="widthFix" class="img1-text"></image> |
|||
</template> |
|||
<template v-if="index == 1"> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img2-text.png" mode="widthFix" class="img1-text" style="width: 115.85rpx;"></image> |
|||
</template> |
|||
<template v-if="index == 2"> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img3-text.png" mode="widthFix" class="img1-text" style="width: 577.23rpx;"></image> |
|||
</template> |
|||
<template v-if="index == 3"> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img4-text.png" mode="widthFix" class="img4-text"></image> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/btn-img.png" mode="widthFix" class="btn-img" @click="gotoPath('/xrcc/chapter1/index')"></image> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" /> |
|||
|
|||
<MusicControl /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import MusicControl from '@/components/MusicControl.vue'; |
|||
import SinglePlayGif from '../components/SinglePlayGif.vue'; |
|||
import NavMenu from '../components/NavMenu.vue'; |
|||
export default { |
|||
components: { |
|||
MusicControl, |
|||
SinglePlayGif, |
|||
NavMenu |
|||
}, |
|||
data() { |
|||
return { |
|||
isPlaying: false, |
|||
playTimer: null, |
|||
duration: 5000, |
|||
currentIndex: 0, |
|||
navIndex: 0, |
|||
swiperImages: [ |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1s.gif', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img2.gif', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img3.gif', |
|||
'https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img4.gif' |
|||
] |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
this.currentIndex = option.currentIndex || 0 |
|||
if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1; |
|||
}, |
|||
onShow() { |
|||
const app = getApp(); |
|||
app.updateMusicSrc('https://static.ticket.sz-trip.com/epicSoul/xrcc/bgm.mp3'); |
|||
app.initBackgroundMusic(); // 初始化背景音乐 |
|||
uni.$bgMusic.play(); // 播放音乐 |
|||
}, |
|||
methods: { |
|||
handleJumpToPage(idx) { |
|||
this.navIndex = idx |
|||
if(idx == this.swiperImages.length - 1) this.navIndex = idx + 1 |
|||
}, |
|||
handleSwiperChange(e) { |
|||
this.currentIndex = e.detail.current; |
|||
if (this.currentIndex == this.swiperImages.length - 1) { |
|||
this.navIndex = 1; |
|||
}else { |
|||
this.navIndex = 0 |
|||
} |
|||
}, |
|||
}, |
|||
// 微信分享配置 |
|||
// #ifdef MP-WEIXIN |
|||
onShareAppMessage() { |
|||
return { |
|||
title: '今夜,我们都有一艘秘密飞船｜「Epic Soul」阅读体 issue05', |
|||
mpId: 'wx8954209bb3ad489e', |
|||
path: '/xrcc/home/home', |
|||
imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/xrcc/share.png' |
|||
}; |
|||
}, |
|||
onShareTimeline() { |
|||
return { |
|||
title: '今夜,我们都有一艘秘密飞船｜「Epic Soul」阅读体 issue05', |
|||
query: '', |
|||
imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/xrcc/share.png' |
|||
}; |
|||
} |
|||
// #endif |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.swiper { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.swiper-item { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-size: 100% auto; |
|||
background-position: center center; |
|||
background-color: #000; |
|||
background-repeat: no-repeat; |
|||
position: relative; |
|||
|
|||
.img1-text { |
|||
position: absolute; |
|||
width: 632.16rpx; |
|||
top: 170rpx; |
|||
left: 0; |
|||
right: 0; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.img4-text { |
|||
position: absolute; |
|||
width: 476.36rpx; |
|||
top: 170rpx; |
|||
left: 84rpx; |
|||
} |
|||
|
|||
.btn-img { |
|||
position: absolute; |
|||
width: 149.8rpx; |
|||
bottom: 290rpx; |
|||
left: 84rpx; |
|||
} |
|||
} |
|||
|
|||
.swiper-img { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue