| | |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <scroll-view class="page-scroll" scroll-y lower-threshold="80" @scroll="handleScroll" @scrolltolower="loadMoreServices"> |
|---|
| | | <scroll-view :show-scrollbar="false" class="page-scroll" scroll-y lower-threshold="80" @scroll="handleScroll" @scrolltolower="loadMoreServices"> |
|---|
| | | <view class="hero"> |
|---|
| | | <image class="hero-image" :src="currentScene.image" mode="aspectFill" @error="replaceHeroImage"></image> |
|---|
| | | <swiper v-if="scenes.length > 0" class="hero-swiper" :current="activeIndex < 0 ? 0 : activeIndex" :circular="scenes.length > 1" :duration="240" @change="handleHeroChange"> |
|---|
| | | <swiper-item v-for="(item, index) in scenes" :key="item.id"> |
|---|
| | | <image class="hero-image" :src="item.image" mode="aspectFill" @error="replaceSceneImage(index)"></image> |
|---|
| | | </swiper-item> |
|---|
| | | </swiper> |
|---|
| | | <image v-else class="hero-image" :src="currentScene.image" mode="aspectFill" @error="replaceHeroImage"></image> |
|---|
| | | <view class="hero-top-shade"></view> |
|---|
| | | <view class="hero-bottom-shade"></view> |
|---|
| | | <text v-if="currentScene.name != ''" class="scene-name">{{currentScene.name}}</text> |
|---|
| | |
|---|
| | | const retryInitialLoad = () => loadInitialServices(); const retryLoadMore = () => loadMoreServices() |
|---|
| | | const selectScene = (index: number) => { if (index < 0 || index >= scenes.value.length) return; activeIndex.value = index; currentScene.value = scenes.value[index]; sceneScrollLeft.value = index * 137 * windowWidth.value / 750 } |
|---|
| | | const handleSceneScrollEnd = (event: any) => { let index = Math.round(event.detail.scrollLeft * 750 / windowWidth.value / 137); if (index < 0) index = 0; if (index >= scenes.value.length) index = scenes.value.length - 1; selectScene(index) } |
|---|
| | | /** 主图左右滑动：滑动落点同步到缩略图、名称与描述。 */ |
|---|
| | | const handleHeroChange = (event: any) => { const current = event != null && event.detail != null && event.detail.current != null ? Number(event.detail.current) : -1; if (current < 0) return; selectScene(current) } |
|---|
| | | const handleScroll = (event: any) => { isSolidNav.value = event.detail.scrollTop > 64 } |
|---|
| | | const selectTab = (tab: string) => { if (activeTab.value == tab && hasLoaded.value) return; activeTab.value = tab; loadInitialServices() } |
|---|
| | | const loadServices = (append: boolean) => { |
|---|
| | |
|---|
| | | .capsule-space { height: 100%; flex-shrink: 0; } |
|---|
| | | .hero { height: 730rpx; position: relative; z-index: 2; overflow: visible; background-color: #6A563E; } |
|---|
| | | .hero-image { position: absolute; left: 0; top: 0; width: 100%; height: 730rpx; } |
|---|
| | | /* 主图轮播：与下方缩略图带同高同位，盖在原来的静态主图上。 */ |
|---|
| | | .hero-swiper { position: absolute; left: 0; top: 0; width: 100%; height: 730rpx; } |
|---|
| | | .hero-top-shade { position: absolute; left: 0; right: 0; top: 0; height: 230rpx; background-image: linear-gradient(180deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.18) 68%, rgba(0,0,0,0) 100%); } |
|---|
| | | .hero-bottom-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 230rpx; background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.46) 100%); } |
|---|
| | | .scene-name { position: absolute; z-index: 3; left: 38rpx; top: 322rpx; color: #FFFFFF; font-family: 'FoodCalligraphy'; font-size: 48rpx; line-height: 66rpx; text-shadow: 0 3rpx 10rpx rgba(0,0,0,.55); } |
|---|
