parent
c56c4383dc
commit
6954a9213c
|
|
@ -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
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -535,7 +543,18 @@ onUnmounted(() => {
|
||||||
@play-drum="handleSceneInteraction(5)"
|
@play-drum="handleSceneInteraction(5)"
|
||||||
@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 {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue