parent
c56c4383dc
commit
6954a9213c
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -536,6 +544,17 @@ onUnmounted(() => {
|
|||
@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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue