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"
/>
-
+
+
+
+
+

+
+
+
@@ -547,11 +566,13 @@ onUnmounted(() => {
@error="handleImageError"
/>
-
-
-
{{ scenes[6].description }}
-
探索东城五大商圈
-
+
+
@@ -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 {