| | |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <scroll-view class="page-scroll" scroll-y lower-threshold="80" @scroll="handleScroll" @scrolltolower="loadMore"> |
|---|
| | | <scroll-view :show-scrollbar="false" class="page-scroll" scroll-y lower-threshold="80" @scroll="handleScroll" @scrolltolower="loadMore"> |
|---|
| | | <view class="hero"> |
|---|
| | | <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"> |
|---|
| | |
|---|
| | | <view class="hero-shade"></view> |
|---|
| | | <text v-if="currentScene.name != ''" class="scene-name">{{currentScene.name}}</text> |
|---|
| | | <text v-if="scenes.length == 0" class="no-gallery">暂无图册内容</text> |
|---|
| | | <scroll-view v-else class="scene-scroll" scroll-x scroll-with-animation :scroll-left="sceneScrollLeft" @scrollend="handleSceneScrollEnd"> |
|---|
| | | <scroll-view :show-scrollbar="false" v-else class="scene-scroll" scroll-x scroll-with-animation :scroll-left="sceneScrollLeft" @scrollend="handleSceneScrollEnd"> |
|---|
| | | <view class="scene-row" :style="'width:' + sceneTrackWidth + 'rpx'"><view class="scene-pad"></view><view v-for="(item, index) in scenes" :key="item.id" class="scene-item" :class="index == activeIndex ? 'active' : ''" @tap="selectScene(index)"><image :src="item.image" mode="aspectFill" @error="replaceSceneImage(index)"></image></view><view class="scene-pad"></view></view> |
|---|
| | | </scroll-view> |
|---|
| | | </view> |
|---|
| | |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | /* 顶部大图标题用行楷：优先 App.uvue 动态加载的服务器完整字体，回退包内子集与系统字体。 */ |
|---|
| | | .scene-name { font-family: 'FoodCalligraphyFull', 'FoodCalligraphy'; } |
|---|
| | | .page, .page-scroll { width: 100%; height: 100vh; background-color: #FFFFFF; } |
|---|
| | | .custom-nav { position: fixed; z-index: 20; left: 0; right: 0; top: 0; padding-bottom: 20rpx; } |
|---|
| | | .nav-bg { position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity: 0; background-image: linear-gradient(180deg, #F26A38 0%, #EE542B 100%); transition: opacity 280ms ease-out; } |
|---|
