优化：首页导航吸顶

src/components/couponList.vue

@@ -273,9 +273,11 @@ async function couponTypeChange(type) {
         <view class="invite-content">
             <!-- <view class="invite-content"
             :style="{ marginTop: `calc(${topSafeAreaHeight}px + 88rpx)`, height: `calc(100vh - ${topSafeAreaHeight}px - 108rpx)`}"> -->
-            <!-- coupon-tabs -->
-            <view
-                class="coupon-types h-42rpx bg-#ffffff pr-10rpx pl-10rpx flex flex-row flex-nowrap justify-between items-center gap-34rpx">
+            <up-sticky :offset-top="topSafeAreaHeight + 38">
+                <view class="invite-sticky">
+                    <!-- coupon-tabs -->
+                    <view
+                class="coupon-types h-42rpx bg-#ffffff pr-8rpx pl-8rpx flex flex-row flex-nowrap justify-between items-center gap-34rpx">
                 <view :class="{ 'coupon_type_active': couponType === '2' }"
                     @click="couponTypeChange('2')">
                     折扣券
@@ -288,10 +290,10 @@ async function couponTypeChange(type) {
                     @click="couponTypeChange('4')">
                     兑换券
                 </view>
-            </view>
-
-            <!-- search -->
-            <view class="invite-content-search bg-white">
+                    </view>
+                
+                    <!-- search -->
+                    <view class="invite-content-search bg-white">
                 <view class="content-search-prefix" @tap="regionSelection">
                     <up-icon size="12" style="margin-top: 2rpx;" name="map" />
                     <text>
@@ -306,18 +308,19 @@ async function couponTypeChange(type) {
                         搜索
                     </up-button>
                 </view>
-            </view>
-
-            <!-- category-tabs -->
-            <view class="tabs-container flex">
+                    </view>
+                
+                    <!-- category-tabs -->
+                    <view class="tabs-container flex">
             <!-- <view :class="[!isSearching ? 'expanded' : 'collapsed']" class="tabs-container flex"> -->
                 <up-tabs v-model:current="activeIndex" :scrollable="true" class="tabs-content" lineWidth="0" :list="categoryList" 
                     :active-style="{ color: '#ffffff', backgroundColor: '#FF5365', borderRadius: '999rpx', padding: '0 16rpx', lineHeight: '44rpx', zIndex: 2 }"
                     :inactive-style="{ backgroundColor: '#F5F5F5', borderRadius: '999rpx', padding: '0 16rpx', lineHeight: '44rpx' }"
                     item-style="height: 44rpx; padding: 0 20rpx 0 0" style="width: 100%;" @change="tabChange" />
                 <view class="tabs-mask"/>  
-            </view>
-
+                    </view>
+                </view>
+            </up-sticky>
             <!-- coupon-list -->
             <view v-if="!hasLogin" class="empty-container">
                 <view class="custom-empty"
@@ -383,7 +386,14 @@ async function couponTypeChange(type) {
         flex-direction: column;
         border-radius: 32rpx 32rpx 32rpx 32rpx;
         background-color: #ffffff;
-        padding: 24rpx 20rpx 20rpx;
+        padding: 0 20rpx 20rpx;
+
+        .invite-sticky {
+            background: #ffffff;
+            padding: 24rpx 0 6rpx;
+            margin-top: 2rpx;
+            z-index: 100;
+        }
 
        .coupon-types {
             view {

src/pages/home/index.vue

@@ -10,6 +10,7 @@ import { useTokenStore } from '@/store/token'
 import { useUserStore } from '@/store/user'
 import { getImageUrl } from '@/utils/imageUtil'
 import { toLoginPage } from '@/utils/toLoginPage'
+import { menuButtonInfo, rpxToPx, safeAreaInsets, systemInfo } from '@/utils'
 import { delayLoadingMiddleware } from '@/http/tools/delayLoadingMiddleware'
 
 defineOptions({
@@ -139,11 +140,23 @@ async function onRefresh() {
     }
     refreshing.value = false
 }
+
+// 新增：滚动距离和透明度
+const scrollTop = ref(0)
+const headerOverlayOpacity = computed(() => {
+    // 当滚动距离超过150px时，完全显示纯色背景
+    const headerHeightForRPX = 526
+    const headerHeightForPx = rpxToPx(headerHeightForRPX)
+    const maxScroll = menuButtonInfo.height + safeAreaInsets.top + 64 + (headerHeightForPx - (menuButtonInfo.height + safeAreaInsets.top + 64)) / 2
+    return Math.min(scrollTop.value / maxScroll, 1)
+})
 </script>
 
 <template>
     <view class="home-container">
-        <up-pull-refresh :refreshing="refreshing" @refresh="onRefresh">
+        <view class="home-header-overlay"
+            :style="{ opacity: headerOverlayOpacity, height: `calc(${menuButtonInfo.bottom + 4}px + 50rpx)` }" />
+        <!-- <up-pull-refresh :refreshing="refreshing" @refresh="onRefresh"> -->
             <!-- 顶部区域 -->
             <view class="home-header">
                 <view class="planet-font absolute z-3 text-xl c-black" :style="{ top: `${navigationBarHeight - 39}px` }">
@@ -201,7 +214,9 @@ async function onRefresh() {
                 </view>
             </view>
             <!-- 邀请新人 -->
-            <view class="home-header-invite"
+            <up-sticky :offset-top="-120">
+                <view class="invite-header">
+                    <view class="home-header-invite"
             :style="{
                 backgroundImage: `url(${getImageUrl('@img/index/invite-card-bg.png')})`,
                 backgroundSize: 'cover',
@@ -219,9 +234,9 @@ async function onRefresh() {
                     @click="toInviteFriend"
                     />
                 </view>
-            </view>
-            <!-- 分享优惠券 -->
-            <view class="home-coupon-share">
+                    </view>
+                    <!-- 分享优惠券 -->
+                    <view class="home-coupon-share">
                 <view class="share-card-bg"
                 :style="{
                     backgroundImage: `url(${getImageUrl('@img/index/share-card-bg.png')})`,
@@ -231,15 +246,15 @@ async function onRefresh() {
                     <view v-if="!hasLogin" class="share-card-text">分享优惠券, 领现金佣金!</view>
                     <view v-else class="share-card-text">分享优惠券{{couponSituationData?.pushCouponCountThreshold || '*'}}张, 领{{couponSituationData?.pushCouponAmount || '*'}}元现金佣金!</view>
                 </view>
-            </view>
+                    </view>
+                </view>
+            </up-sticky>
             <view class="home-coupon-list">
                 <view class="coupon-list">
-                    <u-sticky :offset-top="navigationBarHeight" :customNavHeight="44">
-                        <CouponList />
-                    </u-sticky>
+                    <CouponList />
                 </view>
             </view>
-        </up-pull-refresh>
+        <!-- </up-pull-refresh> -->
     </view>
 </template>
 
@@ -251,6 +266,17 @@ async function onRefresh() {
     min-height: calc(100vh - 100rpx - var(--safe-area-inset-bottom));
     padding: 0 32rpx;
 
+    .home-header-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        background-color: #ed6b66;
+        border-radius: 10rpx 10rpx 0rpx 0rpx;
+        z-index: 99;
+        pointer-events: none; // 确保不影响点击事件
+    }
+
     .home-header {
         position: relative;
         overflow: hidden;
@@ -377,6 +403,11 @@ async function onRefresh() {
     }
 
     // 邀请新人
+    .invite-header {
+        background: #ffffff;
+        height: 398rpx;
+    }
+
     .home-header-invite {
         width: 100%;
         height: 296rpx;
@@ -411,6 +442,7 @@ async function onRefresh() {
     .home-coupon-share {
         position: relative;
         top: -52rpx;
+        z-index: 9;
 
         .share-card-bg {
             width: 100%;
@@ -431,7 +463,7 @@ async function onRefresh() {
 
     // 优惠券列表
     .home-coupon-list {
-        margin-top: -52rpx;
+        margin-top: -2rpx;
 
         .coupon-list {
             min-height: 209rpx;