chenkainan
2 months ago
15 changed files with 2561 additions and 551 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