richard/mp-pilates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 优化首页效果

Browse Source
This commit is contained in:
richarjiang
2026-04-06 16:50:28 +08:00
parent f8268cb6f6
commit ba4e4bb301
1 changed files with 70 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
packages/app/src/pages/home/index.vue
View File

@@ -1,6 +1,11 @@
<template> <template>
<view class="home-page"> <view class="home-page">
<!-- Pull-to-refresh wrapper --> <!-- ① Brand Banner — fixed background layer -->
<view class="banner-fixed">
<BrandBanner :studio-info="studioStore.studioInfo" />
</view>
<!-- Pull-to-refresh wrapper — scrollable foreground -->
<scroll-view <scroll-view
class="page-scroll" class="page-scroll"
scroll-y scroll-y
@@ -11,34 +16,39 @@
@refresherrefresh="handleRefresh" @refresherrefresh="handleRefresh"
@refresherrestore="refreshing = false" @refresherrestore="refreshing = false"
> >
<!-- ① Brand Banner (hero with bg image + centered logo) --> <!-- Transparent spacer to reveal Banner behind -->
<BrandBanner :studio-info="studioStore.studioInfo" /> <view class="banner-spacer" />
<!-- ② Studio Info (photo strip + address/phone) --> <!-- Floating card with rounded top corners -->
<StudioInfo :studio-info="studioStore.studioInfo" /> <view class="floating-card">
<!-- Drag indicator -->
<view class="card-handle">
<view class="card-handle-bar" />
</view>
<!-- Divider --> <!-- ② Studio Info (photo strip + address/phone) -->
<view class="section-divider" /> <StudioInfo :studio-info="studioStore.studioInfo" />
<!-- ③ Quick Entry (login / trial / book / renew) --> <!-- ③ Quick Entry (login / trial / book / renew) -->
<QuickEntry @scroll-to-card-shop="scrollToCardShop" /> <QuickEntry @scroll-to-card-shop="scrollToCardShop" />
<!-- ④ Upcoming Bookings --> <!-- ④ Upcoming Bookings -->
<UpcomingBooking /> <UpcomingBooking />
<!-- ⑤ Card Shop (vertical list) --> <!-- ⑤ Card Shop (vertical list) -->
<view :id="cardShopAnchorId"> <view :id="cardShopAnchorId">
<CardShop ref="cardShopRef" /> <CardShop ref="cardShopRef" />
</view>
<!-- Bottom padding for tab bar -->
<view class="bottom-padding" />
</view> </view>
<!-- Bottom padding for tab bar -->
<view class="bottom-padding" />
</scroll-view> </scroll-view>
</view> </view>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed } from 'vue' import { ref } from 'vue'
import { onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app' import { onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import BrandBanner from '../../components/BrandBanner.vue' import BrandBanner from '../../components/BrandBanner.vue'
@@ -121,20 +131,55 @@ function scrollToCardShop() {
<style lang="scss" scoped> <style lang="scss" scoped>
.home-page { .home-page {
display: flex; position: relative;
flex-direction: column;
height: 100vh; height: 100vh;
background: #FAF8F5; background: #FAF8F5;
} }
.page-scroll { /* Banner fixed behind everything */
flex: 1; .banner-fixed {
overflow-y: auto; position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 0;
} }
.section-divider { /* Scroll layer sits above banner */
height: 16rpx; .page-scroll {
position: relative;
z-index: 1;
flex: 1;
height: 100vh;
}
/* Transparent spacer lets banner peek through */
.banner-spacer {
height: 420rpx;
}
/* Floating card that overlaps the banner */
.floating-card {
position: relative;
background: #FAF8F5; background: #FAF8F5;
border-radius: 32rpx 32rpx 0 0;
min-height: 100vh;
padding-top: 12rpx;
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
}
/* Small drag indicator at top of card */
.card-handle {
display: flex;
justify-content: center;
padding: 16rpx 0 8rpx;
}
.card-handle-bar {
width: 64rpx;
height: 8rpx;
border-radius: 4rpx;
background: rgba(0, 0, 0, 0.1);
} }
.bottom-padding { .bottom-padding {