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