1、初步完成首页的功能,包括标题动态展示、新年文案展示、页面自动定位到首页
This commit is contained in:
Wenzhe 2026-01-29 13:20:05 +08:00
parent c56c4383dc
commit 6954a9213c
1 changed files with 63 additions and 26 deletions

View File

@ -16,6 +16,8 @@ const collectionStore = useCollectionStore()
// //
const activeSceneIndex = ref(0) const activeSceneIndex = ref(0)
//
const titleImageShown = ref(false)
// //
const scrollContainer = ref(null) const scrollContainer = ref(null)
// //
@ -227,6 +229,7 @@ onMounted(() => {
setTimeout(() => { setTimeout(() => {
// //
isPageReady.value = true isPageReady.value = true
titleImageShown.value = true
console.log('设置 isPageReady = true准备显示页面') console.log('设置 isPageReady = true准备显示页面')
}, 50) }, 50)
} else { } else {
@ -234,6 +237,7 @@ onMounted(() => {
// //
// //
isPageReady.value = true isPageReady.value = true
titleImageShown.value = true
console.log('设置 isPageReady = true准备显示页面') console.log('设置 isPageReady = true准备显示页面')
} }
}, 300) }, 300)
@ -274,6 +278,10 @@ const handleScroll = (event) => {
if (activeSceneIndex.value > 0 && activeSceneIndex.value < scenes.value.length - 1) { if (activeSceneIndex.value > 0 && activeSceneIndex.value < scenes.value.length - 1) {
sceneStore.activateScene(scenes.value[activeSceneIndex.value].id) sceneStore.activateScene(scenes.value[activeSceneIndex.value].id)
} }
//
if (clampedIndex === 6) {
titleImageShown.value = true
}
} }
} }
@ -536,6 +544,17 @@ onUnmounted(() => {
@height-changed="handleQianmenHeightChanged" @height-changed="handleQianmenHeightChanged"
/> />
<!-- 新年文案模块 -->
<section class="new-year-section">
<div class="new-year-content">
<img
src="/static/images/main_text.png"
alt="新年文案"
class="new-year-text"
/>
</div>
</section>
<!-- 首页 --> <!-- 首页 -->
<section id="home-section" class="scene-section home-section" :class="{ 'active': activeSceneIndex === 6 }"> <section id="home-section" class="scene-section home-section" :class="{ 'active': activeSceneIndex === 6 }">
<!-- 背景图片层 --> <!-- 背景图片层 -->
@ -547,11 +566,13 @@ onUnmounted(() => {
@error="handleImageError" @error="handleImageError"
/> />
</div> </div>
<!-- 内容层 --> <!-- 标题图片 -->
<div class="scene-content"> <img
<h1 class="title">{{ scenes[6].description }}</h1> src="/static/images/img_title.png"
<p class="subtitle">探索东城五大商圈</p> alt="马年新春2026"
</div> class="title-image"
:class="{ 'title-image-active': titleImageShown }"
/>
</section> </section>
<!-- 向上滑动提示 --> <!-- 向上滑动提示 -->
@ -1089,8 +1110,9 @@ onUnmounted(() => {
.home-section { .home-section {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-start;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
} }
@ -1111,17 +1133,6 @@ onUnmounted(() => {
object-position: center center; object-position: center center;
} }
.home-section .scene-content {
position: relative;
z-index: 2;
text-align: center;
padding: 20px;
background: rgba(255, 255, 255, 0.85);
border-radius: 15px;
backdrop-filter: blur(5px);
max-width: 90%;
}
/* 向上滑动提示样式 */ /* 向上滑动提示样式 */
.scroll-tip-bottom { .scroll-tip-bottom {
position: fixed; position: fixed;
@ -1147,17 +1158,43 @@ onUnmounted(() => {
} }
} }
.home-section .title { /* 新年文案模块样式 */
font-size: 36px; .new-year-section {
color: #FF6B35; width: 100%;
margin-bottom: 15px; background-color: #f94332;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 15px 0;
}
.new-year-content {
text-align: center; text-align: center;
} }
.home-section .subtitle { .new-year-text {
font-size: 18px; display: inline-block;
color: #666; width: 546rpx;
text-align: center; height: auto;
object-fit: contain;
}
/* 标题图片样式 */
.title-image {
width: 80%;
max-width: 400px;
height: auto;
margin: 40rpx auto 20px;
display: block;
transform: scale(0);
transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
z-index: 2;
}
.title-image-active {
transform: scale(1);
} }
.scroll-tip { .scroll-tip {