chenkainan
3 months ago
10 changed files with 1073 additions and 0 deletions
@ -0,0 +1,140 @@ |
|||
<template> |
|||
<view> |
|||
<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange"> |
|||
<swiper-item v-for="(item, index) in swiperItems" :key="index" v-if="index < indexShow"> |
|||
<view :class="['swiper-item',{'swiper-item1-10': item.images}]" :style="{ backgroundImage: `url(${item.imageUrl})` }" @click="changeIndex(index)"> |
|||
<!-- 如果是第一章的第10个swiper-item，显示图片并绑定点击事件 --> |
|||
<template v-if="item.images"> |
|||
<image v-for="(image, imgIndex) in item.images" :key="imgIndex" :src="image.src" |
|||
mode="aspectFill" @click="setStorage(imgIndex);gotoPath(item.link.replace('{index}', imgIndex + item.linkIndex))"></image> |
|||
</template> |
|||
<!-- 视频 --> |
|||
<template v-if="index == 3"> |
|||
<video src="https://static.ticket.sz-trip.com/epicSoul/bmzm.mp4" style="width: 100vw;height: 30vh;" objectFit="cover"></video> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
<MusicControl /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import MusicControl from '@/components/MusicControl.vue'; |
|||
export default { |
|||
components: { |
|||
MusicControl |
|||
}, |
|||
data() { |
|||
return { |
|||
currentIndex: 0, |
|||
// 禁止滑动到的索引 |
|||
forbiddenIndex: 2, |
|||
initialIndex: 1, |
|||
popupIndex: 1, |
|||
// 抽象出swiper-item的数据 |
|||
swiperItems: [ |
|||
{ |
|||
imageUrl: `https://static.ticket.sz-trip.com/epicSoul/bmzm/index/index1.png` |
|||
}, |
|||
{ |
|||
imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/bmzm/index/index5.png' |
|||
}, |
|||
// 第一章 |
|||
...Array.from({ length: 9 }, (_, i) => ({ |
|||
imageUrl: `https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter1/img${i + 1}.png` |
|||
})), |
|||
{ |
|||
imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter1/img10.png', |
|||
images: Array.from({ length: 4 }, (_, i) => ({ |
|||
src: `https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter1/img10-${i + 1}.png` |
|||
})), |
|||
link: '/bmzm/chapter2/index?index={index}', |
|||
linkIndex: 11 |
|||
} |
|||
], |
|||
indexShow: 3 |
|||
}; |
|||
}, |
|||
onLoad(option) { |
|||
this.initialIndex = option.index; |
|||
// 更新第一个swiper-item的图片路径 |
|||
this.swiperItems[0].imageUrl = `https://static.ticket.sz-trip.com/epicSoul/bmzm/index/index${this.initialIndex}.png`; |
|||
}, |
|||
methods: { |
|||
touchmove() { |
|||
return this.currentIndex == 2 ? true : false |
|||
}, |
|||
changeIndex(index) { |
|||
if(index == 2) this.currentIndex = 3 |
|||
this.indexShow = 100 |
|||
}, |
|||
handleSwiperChange(e) { |
|||
this.currentIndex = e.detail.current; |
|||
if(this.currentIndex == 2) this.indexShow = 3 |
|||
}, |
|||
// 存储答案，供后面使用 |
|||
setStorage(i) { |
|||
let text = '' |
|||
switch (i){ |
|||
case 0: |
|||
text = '灵感的捕捉者' |
|||
break; |
|||
case 1: |
|||
text = '众智的编织者' |
|||
break; |
|||
case 2: |
|||
text = '智慧的开启者' |
|||
break; |
|||
case 3: |
|||
text = '自然的尊重者' |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
this.appendToStorage('answerObj', { answer2: text }); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.swiper { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.swiper-item { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.swiper-item1-10 { |
|||
padding: 506rpx 65rpx 370rpx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
|
|||
&>image:nth-child(n+1) { |
|||
width: 310rpx; |
|||
height: 316.58rpx; |
|||
} |
|||
|
|||
&>image:nth-child(n+2) { |
|||
width: 291.61rpx; |
|||
height: 334.55rpx; |
|||
} |
|||
|
|||
&>image:nth-child(n+3) { |
|||
width: 292.61rpx; |
|||
height: 334.55rpx; |
|||
} |
|||
|
|||
&>image:nth-child(n+4) { |
|||
width: 309.59rpx; |
|||
height: 317.58rpx; |
|||
margin-top: 15rpx; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,85 @@ |
|||
<template> |
|||
<view> |
|||
<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange"> |
|||
<!-- 动态渲染 swiper-item --> |
|||
<swiper-item v-for="(image, imageIndex) in allImages" :key="imageIndex"> |
|||
<view class="swiper-item" :style="{ backgroundImage: `url(${getImageUrl(image)})`}" |
|||
@click="image.onClick ? gotoPath('/bmzm/chapter3/index') : null"> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
<MusicControl /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import MusicControl from '@/components/MusicControl.vue'; |
|||
export default { |
|||
components: { |
|||
MusicControl |
|||
}, |
|||
data() { |
|||
return { |
|||
currentIndex: 0, |
|||
initialIndex: 1, |
|||
popupIndex: 1, |
|||
// 图片数据结构 |
|||
chapters: [ |
|||
{ |
|||
name: 'chapter1', |
|||
images: [ |
|||
{ url: `chapter1/img11.png` } |
|||
] |
|||
}, |
|||
{ |
|||
name: 'chapter2', |
|||
images: [ |
|||
{ url: 'chapter2/img1.png', onClick: true }, |
|||
] |
|||
} |
|||
] |
|||
}; |
|||
}, |
|||
computed: { |
|||
allImages() { |
|||
return this.chapters.reduce((acc, chapter) => { |
|||
return acc.concat(chapter.images); |
|||
}, []); |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
this.initialIndex = option.index; |
|||
// 更新第一章图片路径 |
|||
this.chapters[0].images[0].url = `chapter1/img${this.initialIndex}.png`; |
|||
}, |
|||
methods: { |
|||
// 处理 swiper 滑动事件 |
|||
handleSwiperChange(e) { |
|||
this.currentIndex = e.detail.current; |
|||
}, |
|||
// 生成图片完整 URL |
|||
getImageUrl(path) { |
|||
if (typeof path === 'object') { |
|||
path = path.url; |
|||
} |
|||
return `https://static.ticket.sz-trip.com/epicSoul/bmzm/${path}`; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.swiper { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.swiper-item { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-size: 100% 100%; |
|||
} |
|||
.image-popup { |
|||
width: 700rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,177 @@ |
|||
<template> |
|||
<view> |
|||
<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange"> |
|||
<!-- 动态渲染 swiper-item --> |
|||
<swiper-item v-for="(image, imageIndex) in allImages" :key="imageIndex"> |
|||
<view :class="['swiper-item', {'swiper-item2-4': image.hasSubImage, 'swiper-item2-10': image.hasSubImages}]" :style="{ backgroundImage: `url(${getImageUrl(image)})` }"> |
|||
<!-- 特殊处理需要显示小图片的情况 --> |
|||
<template v-if="image.hasSubImage || image.hasSubImages"> |
|||
<image |
|||
v-for="(subImage, subIndex) in image.subImages" |
|||
:key="subIndex" |
|||
:src="getImageUrl(subImage)" |
|||
mode="aspectFill" |
|||
@click="click(image,subIndex+1)" |
|||
></image> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<!-- 第二章 第四节弹框 --> |
|||
<uni-popup ref="chapterPopup" type="center"> |
|||
<image |
|||
:src="getImageUrl(`chapter2/img4-${popupIndex}s.png`)" |
|||
mode="widthFix" |
|||
class="image-popup" |
|||
></image> |
|||
</uni-popup> |
|||
|
|||
<MusicControl /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import MusicControl from '@/components/MusicControl.vue'; |
|||
export default { |
|||
components: { |
|||
MusicControl |
|||
}, |
|||
data() { |
|||
return { |
|||
currentIndex: 0, |
|||
initialIndex: 1, |
|||
popupIndex: 1, |
|||
// 图片数据结构 |
|||
chapters: [ |
|||
{ |
|||
name: 'chapter2', |
|||
images: [ |
|||
{ url: 'chapter2/img2.png' }, |
|||
{ url: 'chapter2/img3.png' }, |
|||
{ |
|||
url: 'chapter2/img4.png', |
|||
hasSubImage: true, |
|||
subImages: Array.from({ length: 4 }, (_, i) => `chapter2/img4-${i + 1}.png`) |
|||
}, |
|||
{ url: 'chapter2/img5.png' }, |
|||
{ url: 'chapter2/img6.png' }, |
|||
{ url: 'chapter2/img7.png' }, |
|||
{ url: 'chapter2/img8.png' }, |
|||
{ url: 'chapter2/img9.png' }, |
|||
{ |
|||
url: 'chapter2/img10.png', |
|||
hasSubImages: true, |
|||
subImages: Array.from({ length: 4 }, (_, i) => `chapter2/img10-${i + 1}.png`) |
|||
} |
|||
] |
|||
} |
|||
] |
|||
}; |
|||
}, |
|||
computed: { |
|||
allImages() { |
|||
return this.chapters.reduce((acc, chapter) => { |
|||
return acc.concat(chapter.images); |
|||
}, []); |
|||
} |
|||
}, |
|||
methods: { |
|||
// 处理 swiper 滑动事件 |
|||
handleSwiperChange(e) { |
|||
this.currentIndex = e.detail.current; |
|||
}, |
|||
click(item,index) { |
|||
if(item.hasSubImage) { |
|||
this.openPopup(index) |
|||
}else if(item.hasSubImages) { |
|||
let text = '' |
|||
switch (index){ |
|||
case 1: |
|||
text = '文字的秩序' |
|||
break; |
|||
case 2: |
|||
text = '诗歌的温度' |
|||
break; |
|||
case 3: |
|||
text = '世界的经纬' |
|||
break; |
|||
case 4: |
|||
text = '禅思的哲学' |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
this.appendToStorage('answerObj', { answer3: text }); |
|||
this.gotoPath(`/bmzm/chapter4/index?index=${index + 10}`) |
|||
} |
|||
}, |
|||
// 打开第二章第四节弹框 |
|||
openPopup(index) { |
|||
this.popupIndex = index; |
|||
this.$refs.chapterPopup.open(); |
|||
}, |
|||
// 生成图片完整 URL |
|||
getImageUrl(path) { |
|||
if (typeof path === 'object') { |
|||
path = path.url; |
|||
} |
|||
return `https://static.ticket.sz-trip.com/epicSoul/bmzm/${path}`; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.swiper { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.swiper-item { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.swiper-item2-4 { |
|||
padding: 160rpx 50rpx 500rpx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
|
|||
& > image:nth-child(n + 1) { |
|||
width: 244.67rpx; |
|||
height: 244.67rpx; |
|||
} |
|||
} |
|||
|
|||
.swiper-item2-10 { |
|||
padding: 600rpx 65rpx 370rpx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
|
|||
& > image:nth-child(n + 1) { |
|||
width: 310rpx; |
|||
height: 316.58rpx; |
|||
} |
|||
& > image:nth-child(n + 2) { |
|||
width: 291.61rpx; |
|||
height: 334.55rpx; |
|||
} |
|||
& > image:nth-child(n + 3) { |
|||
width: 292.61rpx; |
|||
height: 334.55rpx; |
|||
} |
|||
& > image:nth-child(n + 4) { |
|||
width: 309.59rpx; |
|||
height: 317.58rpx; |
|||
margin-top: 15rpx; |
|||
} |
|||
} |
|||
|
|||
.image-popup { |
|||
width: 700rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,57 @@ |
|||
<template> |
|||
<view> |
|||
<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange"> |
|||
<swiper-item> |
|||
<view class="swiper-item" :style="{backgroundImage: `url(https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter2/img${initialIndex}.png)`}"> |
|||
</view> |
|||
</swiper-item> |
|||
<swiper-item> |
|||
<view class="swiper-item" :style="{backgroundImage: 'url(https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter2/img15.png)'}"> |
|||
</view> |
|||
</swiper-item> |
|||
|
|||
<!-- 第三章 --> |
|||
<swiper-item> |
|||
<view class="swiper-item" :style="{backgroundImage: 'url(https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter3/img1.png)'}" |
|||
@click="gotoPath('/bmzm/chapter5/index')"> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
<MusicControl /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import MusicControl from '@/components/MusicControl.vue'; |
|||
export default { |
|||
components: { |
|||
MusicControl |
|||
}, |
|||
data() { |
|||
return { |
|||
currentIndex: 0, |
|||
initialIndex: 1, |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
this.initialIndex = option.index |
|||
}, |
|||
methods: { |
|||
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%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,53 @@ |
|||
<template> |
|||
<view> |
|||
<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange"> |
|||
<swiper-item v-for="(imageUrl, index) in swiperImages" :key="index"> |
|||
<view class="swiper-item" :style="{ backgroundImage: `url(${imageUrl})` }" |
|||
@click="index == 6 ? gotoPath('/bmzm/chapter6/index') : null"></view> |
|||
</swiper-item> |
|||
</swiper> |
|||
<MusicControl /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import MusicControl from '@/components/MusicControl.vue'; |
|||
export default { |
|||
components: { |
|||
MusicControl |
|||
}, |
|||
data() { |
|||
return { |
|||
currentIndex: 0, |
|||
popupIndex: 1, |
|||
swiperImages: [ |
|||
'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter3/img2.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter3/img3.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter3/img4.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter3/img5.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter3/img6.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter3/img7.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter4/img1.png' |
|||
] |
|||
}; |
|||
}, |
|||
methods: { |
|||
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%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,81 @@ |
|||
<template> |
|||
<view> |
|||
<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange"> |
|||
<swiper-item v-for="(imageUrl, index) in imageUrls" :key="index"> |
|||
<view class="swiper-item" :style="{ backgroundImage: `url(${imageUrl})` }" |
|||
@click="index == 10 ? gotoPath('/bmzm/chapter7/index') : null"> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter4/btn-img.png" mode="aspectFill" |
|||
:class="['btn-img', {'btn-imgs': index == 6}]" @click="gotoPath" v-if="index == 4 || index == 6"></image> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
<MusicControl /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import MusicControl from '@/components/MusicControl.vue'; |
|||
export default { |
|||
components: { |
|||
MusicControl |
|||
}, |
|||
data() { |
|||
return { |
|||
currentIndex: 0, |
|||
initialIndex: 1, |
|||
popupIndex: 1, |
|||
// 图片 URL 数组 |
|||
imageUrls: [ |
|||
"https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter4/img2.png", |
|||
"https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter4/img3.png", |
|||
"https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter4/img4.png", |
|||
"https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter4/img5.png", |
|||
"https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter4/img6.png", |
|||
"https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter4/img7.png", |
|||
"https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter4/img8.png", |
|||
"https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter4/img9.png", |
|||
"https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter4/img10.png", |
|||
"https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter4/img11.png", |
|||
// 第五章图片 |
|||
"https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img1.png" |
|||
] |
|||
}; |
|||
}, |
|||
methods: { |
|||
handleSwiperChange(e) { |
|||
this.currentIndex = e.detail.current; |
|||
}, |
|||
gotoPath() { |
|||
uni.switchTab({ |
|||
url: '/pages/index/sensoryStore' |
|||
}) |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.swiper { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.swiper-item { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-size: 100% 100%; |
|||
position: relative; |
|||
} |
|||
|
|||
.btn-img { |
|||
position: absolute; |
|||
width: 217.71rpx; |
|||
height: 36.95rpx; |
|||
left: 61rpx; |
|||
bottom: 86rpx; |
|||
} |
|||
.btn-imgs { |
|||
left: 465rpx; |
|||
bottom: 550rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,257 @@ |
|||
<template> |
|||
<view> |
|||
<!-- 垂直滑动的 swiper 组件 --> |
|||
<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange"> |
|||
<!-- 循环渲染 swiper-item --> |
|||
<swiper-item v-for="(imageUrl, index) in swiperImages" :key="index"> |
|||
<view class="swiper-item" :style="{ backgroundImage: `url(${imageUrl})` }"> |
|||
<!-- 根据索引添加特定元素 --> |
|||
<template v-if="index === 2"> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img4-text.png" mode="aspectFill" class="img4-text"></image> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img4-btn.png" mode="aspectFill" class="img4-btn" @click="showCustomModal"></image> |
|||
</template> |
|||
<template v-if="index === 3"> |
|||
<view class="img5-text">{{ inputValue }}</view> |
|||
<image src="https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img5-btn.png" mode="aspectFill" class="img5-btn"></image> |
|||
</template> |
|||
<template v-if="index === 1"> |
|||
<!-- 添加动态类名 --> |
|||
<view class="answer-box" :class="{ 'fade-in': showAnswerBox }"> |
|||
<view class="answer answer1">{{answerObj.answer1}}</view> |
|||
<view class="answer answer2">{{answerObj.answer2}}</view> |
|||
<view class="answer answer3">{{answerObj.answer3}}</view> |
|||
</view> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<!-- 自定义模态框 --> |
|||
<uni-popup ref="chapterPopup" type="center"> |
|||
<view class="modal-mask"> |
|||
<view class="modal-container"> |
|||
<view class="modal-title">心愿梦想</view> |
|||
<textarea |
|||
v-model="inputValue" |
|||
:maxlength="maxLength" |
|||
placeholder="最多输入25个字" |
|||
@input="handleInput" |
|||
></textarea> |
|||
<view class="char-count">{{ inputValue.length }}/{{ maxLength }}</view> |
|||
<view class="modal-buttons"> |
|||
<button @click="closeModal">取消</button> |
|||
<button @click="confirmInput">确认</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
<MusicControl /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import MusicControl from '@/components/MusicControl.vue'; |
|||
export default { |
|||
components: { |
|||
MusicControl |
|||
}, |
|||
data() { |
|||
return { |
|||
currentIndex: 0, |
|||
initialIndex: 1, |
|||
popupIndex: 1, |
|||
inputValue: '', |
|||
// 最大输入长度 |
|||
maxLength: 25, |
|||
// swiper 图片 URL 数组 |
|||
swiperImages: [ |
|||
'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img2.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img3.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img4.gif', |
|||
'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img5.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img6.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img7.png' |
|||
], |
|||
answerObj: {}, |
|||
showAnswerBox: false // 控制 answer-box 显示的标志位 |
|||
}; |
|||
}, |
|||
onShow() { |
|||
this.answerObj = uni.getStorageSync('answerObj'); |
|||
}, |
|||
methods: { |
|||
// 处理 swiper 滑动事件 |
|||
handleSwiperChange(e) { |
|||
this.currentIndex = e.detail.current; |
|||
if (this.currentIndex === 1) { |
|||
// 延迟 1.5s 显示 answer-box |
|||
setTimeout(() => { |
|||
this.showAnswerBox = true; |
|||
}, 1000); |
|||
} else { |
|||
this.showAnswerBox = false; |
|||
} |
|||
}, |
|||
// 显示自定义模态框 |
|||
showCustomModal() { |
|||
this.$refs.chapterPopup.open(); |
|||
this.inputValue = ''; // 清空输入框 |
|||
}, |
|||
// 处理输入事件 |
|||
handleInput(e) { |
|||
this.inputValue = e.detail.value.slice(0, this.maxLength); |
|||
}, |
|||
// 关闭模态框 |
|||
closeModal() { |
|||
this.inputValue = ''; // 清空输入框 |
|||
this.$refs.chapterPopup.close(); |
|||
}, |
|||
// 确认输入 |
|||
confirmInput() { |
|||
this.$refs.chapterPopup.close(); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.swiper { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
.swiper-item { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-size: 100% 100%; |
|||
position: relative; |
|||
} |
|||
.img4-text { |
|||
width: 466.38rpx; |
|||
height: 1033.62rpx; |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
margin: auto; |
|||
} |
|||
.img4-btn { |
|||
width: 161.78rpx; |
|||
height: 161.78rpx; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 330rpx; |
|||
margin: 0 auto; |
|||
} |
|||
.img5-text { |
|||
position: absolute; |
|||
top: 222rpx; |
|||
font-size: 42.14rpx; |
|||
font-weight: 500; |
|||
color: #fff; |
|||
padding: 0 57rpx; |
|||
} |
|||
.img5-btn { |
|||
width: 413.45rpx; |
|||
height: 79.89rpx; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 166rpx; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.modal-mask { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: rgba(0, 0, 0, 0.5); |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
z-index: 999; |
|||
} |
|||
|
|||
.modal-container { |
|||
background-color: #fff; |
|||
border-radius: 12rpx; |
|||
width: 600rpx; |
|||
padding: 40rpx; |
|||
} |
|||
|
|||
.modal-title { |
|||
font-size: 36rpx; |
|||
font-weight: bold; |
|||
text-align: center; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
textarea { |
|||
width: 480rpx; |
|||
height: 200rpx; |
|||
border: 1rpx solid #eee; |
|||
border-radius: 8rpx; |
|||
padding: 20rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.char-count { |
|||
text-align: right; |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
margin-top: 10rpx; |
|||
} |
|||
|
|||
.modal-buttons { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
margin-top: 40rpx; |
|||
} |
|||
|
|||
.modal-buttons button { |
|||
width: 240rpx; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
text-align: center; |
|||
border-radius: 40rpx; |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
.modal-buttons button:first-child { |
|||
background-color: #eee; |
|||
color: #333; |
|||
} |
|||
|
|||
.modal-buttons button:last-child { |
|||
background-color: #007aff; |
|||
color: #fff; |
|||
} |
|||
|
|||
.answer { |
|||
position: absolute; |
|||
color: rgb(0, 228, 216); |
|||
font-size: 32rpx; |
|||
} |
|||
.answer1 { |
|||
top: 593rpx; |
|||
left: 400rpx; |
|||
} |
|||
.answer2 { |
|||
top: 777rpx; |
|||
left: 252rpx; |
|||
} |
|||
.answer3 { |
|||
top: 870rpx; |
|||
left: 181rpx; |
|||
} |
|||
.answer-box { |
|||
opacity: 0; |
|||
transition: opacity 1s ease-in-out; |
|||
} |
|||
.fade-in { |
|||
opacity: 1; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,156 @@ |
|||
<template> |
|||
<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})` }"> |
|||
<!-- 仅在第四张图片添加子模块 --> |
|||
<template v-if="index === 3"> |
|||
<image |
|||
:src="`https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home4-${i + 1}.png`" |
|||
v-for="i in 4" |
|||
:key="i" |
|||
:class="'module'+(i+1)" |
|||
:style="{ animationDelay: `${i * animationConfig.delay}s` }" |
|||
@click="setStorage(i);gotoPath(`/bmzm/chapter1/index?index=${i + 1}`)" |
|||
></image> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
<MusicControl /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import MusicControl from '@/components/MusicControl.vue'; |
|||
export default { |
|||
components: { |
|||
MusicControl |
|||
}, |
|||
data() { |
|||
return { |
|||
currentIndex: 0, |
|||
swiperImages: [ |
|||
'https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home1.gif', |
|||
'https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home2.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home3.png', |
|||
'https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home4.png' |
|||
], |
|||
animationConfig: { |
|||
delay: 0.5, |
|||
duration: 3, |
|||
keyframes: { |
|||
start: 1, |
|||
first: 0.8, |
|||
second: 1.2, |
|||
third: 0.9, |
|||
end: 1.1 |
|||
} |
|||
} |
|||
}; |
|||
}, |
|||
onShow() { |
|||
uni.removeStorageSync('answerObj'); |
|||
const app = getApp(); |
|||
app.updateMusicSrc('https://static.ticket.sz-trip.com/epicSoul/bmzm.mp3'); |
|||
app.initBackgroundMusic(); // 初始化背景音乐 |
|||
uni.$bgMusic.play(); // 播放音乐 |
|||
}, |
|||
methods: { |
|||
handleSwiperChange(e) { |
|||
this.currentIndex = e.detail.current; |
|||
}, |
|||
// 存储答案，供后面使用 |
|||
setStorage(i) { |
|||
let text = '' |
|||
switch (i){ |
|||
case 0: |
|||
text = '月光白' |
|||
break; |
|||
case 1: |
|||
text = '黎明青' |
|||
break; |
|||
case 2: |
|||
text = '玄天黑' |
|||
break; |
|||
case 3: |
|||
text = '胭脂红' |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
this.appendToStorage('answerObj', { answer1: text }); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.swiper { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.swiper-item { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-size: 100% 100%; |
|||
position: relative; |
|||
|
|||
.module1 { |
|||
position: absolute; |
|||
width: 345.97rpx; |
|||
height: 323.42rpx; |
|||
top: 154rpx; |
|||
left: 48rpx; |
|||
animation: randomSize 3s infinite alternate; |
|||
} |
|||
.module2 { |
|||
position: absolute; |
|||
width: 271.11rpx; |
|||
height: 293.67rpx; |
|||
top: 276rpx; |
|||
right: 36rpx; |
|||
animation: randomSize 3s infinite alternate; |
|||
} |
|||
.module3 { |
|||
position: absolute; |
|||
width: 245.2rpx; |
|||
height: 232.25rpx; |
|||
top: 746rpx; |
|||
left: 71rpx; |
|||
animation: randomSize 3s infinite alternate; |
|||
} |
|||
.module4 { |
|||
position: absolute; |
|||
width: 293.19rpx; |
|||
height: 270.15rpx; |
|||
top: 605rpx; |
|||
right: 115rpx; |
|||
animation: randomSize 3s infinite alternate; |
|||
} |
|||
} |
|||
|
|||
.swiper-img { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
|
|||
@keyframes randomSize { |
|||
0% { |
|||
transform: scale(1); |
|||
} |
|||
25% { |
|||
transform: scale(0.8); |
|||
} |
|||
50% { |
|||
transform: scale(1.2); |
|||
} |
|||
75% { |
|||
transform: scale(0.9); |
|||
} |
|||
100% { |
|||
transform: scale(1.1); |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue