From 6954a9213cac027e28c3f4de2bc80947a34193b2 Mon Sep 17 00:00:00 2001
From: Wenzhe <wenzhe@wxinh5.com>
Date: Thu, 29 Jan 2026 13:20:05 +0800
Subject: [PATCH] v1.0.2
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1、初步完成首页的功能，包括标题动态展示、新年文案展示、页面自动定位到首页
---
 components/SinglePageContainer.vue | 89 +++++++++++++++++++++---------
 1 file changed, 63 insertions(+), 26 deletions(-)

diff --git a/components/SinglePageContainer.vue b/components/SinglePageContainer.vue
index 262d16c..1b5d2d1 100644
--- a/components/SinglePageContainer.vue
+++ b/components/SinglePageContainer.vue
@@ -16,6 +16,8 @@ const collectionStore = useCollectionStore()
 
 // 当前活动场景索引
 const activeSceneIndex = ref(0)
+// 标题图片是否已显示过（用于保持显示状态）
+const titleImageShown = ref(false)
 // 滑动容器引用
 const scrollContainer = ref(null)
 // 是否在滚动中
@@ -227,6 +229,7 @@ onMounted(() => {
         setTimeout(() => {
           // 标记页面准备就绪，隐藏加载提示并显示页面
           isPageReady.value = true
+          titleImageShown.value = true
           console.log('设置 isPageReady = true，准备显示页面')
         }, 50)
       } else {
@@ -234,6 +237,7 @@ onMounted(() => {
         // 滚动成功后显示容器
         // 标记页面准备就绪，隐藏加载提示并显示页面
         isPageReady.value = true
+        titleImageShown.value = true
         console.log('设置 isPageReady = true，准备显示页面')
       }
     }, 300)
@@ -274,6 +278,10 @@ const handleScroll = (event) => {
     if (activeSceneIndex.value > 0 && activeSceneIndex.value < scenes.value.length - 1) {
       sceneStore.activateScene(scenes.value[activeSceneIndex.value].id)
     }
+    // 如果滚动到首页，标记标题图片已显示
+    if (clampedIndex === 6) {
+      titleImageShown.value = true
+    }
   }
 }
 
@@ -535,7 +543,18 @@ onUnmounted(() => {
         @play-drum="handleSceneInteraction(5)"
         @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 }">
         <!-- 背景图片层 -->
@@ -547,11 +566,13 @@ onUnmounted(() => {
             @error="handleImageError"
           />
         </div>
-        <!-- 内容层 -->
-        <div class="scene-content">
-          <h1 class="title">{{ scenes[6].description }}</h1>
-          <p class="subtitle">探索东城五大商圈</p>
-        </div>
+        <!-- 标题图片 -->
+        <img 
+          src="/static/images/img_title.png" 
+          alt="马年新春2026" 
+          class="title-image"
+          :class="{ 'title-image-active': titleImageShown }"
+        />
       </section>
 
       <!-- 向上滑动提示 -->
@@ -1089,8 +1110,9 @@ onUnmounted(() => {
 .home-section {
   position: relative;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   height: 100vh;
   overflow: hidden;
 }
@@ -1111,17 +1133,6 @@ onUnmounted(() => {
   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 {
   position: fixed;
@@ -1147,17 +1158,43 @@ onUnmounted(() => {
   }
 }
 
-.home-section .title {
-  font-size: 36px;
-  color: #FF6B35;
-  margin-bottom: 15px;
+/* 新年文案模块样式 */
+.new-year-section {
+  width: 100%;
+  background-color: #f94332;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  padding: 15px 0;
+}
+
+.new-year-content {
   text-align: center;
 }
 
-.home-section .subtitle {
-  font-size: 18px;
-  color: #666;
-  text-align: center;
+.new-year-text {
+  display: inline-block;
+  width: 546rpx;
+  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 {