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