From 99a0a483ca2ef18d13cfb983f12191af28c6a4b0 Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Mon, 29 Jun 2026 20:54:38 +0800
Subject: [PATCH] style(chat-main-list): refine header UI and transitions

- add v-show to toggle top navbar visibility
- adjust z-indexes for proper stacking context
- update header background transition and sticky styling
---
 src/pages/home/components/ChatMainList/index.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/pages/home/components/ChatMainList/index.vue b/src/pages/home/components/ChatMainList/index.vue
index 7faf352..593f2c3 100644
--- a/src/pages/home/components/ChatMainList/index.vue
+++ b/src/pages/home/components/ChatMainList/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex h-dvh flex-col relative overflow-hidden">
     <!-- 顶部自定义导航栏 -->
-    <div class="absolute top-0 left-0 w-full z-10">
+    <div v-show="!isHeaderCollapsed" class="absolute top-0 left-0 w-full z-200">
       <ChatTopNavBar ref="topNavBarRef" :mainPageDataModel="mainPageDataModel" />
     </div>
 
@@ -9,9 +9,8 @@
       class="min-h-0 flex-1 overflow-y-auto overscroll-contain scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
       @scroll="handleScroll" @touchstart.capture="handleScrollAreaTouchStart" @touchstart="handleScrollAreaTouchStart"
       @touchmove="handleScrollAreaTouchMove">
-      <div class="relative transition-all duration-300 ease-in-out bg-cover bg-center bg-no-repeat"
-        :class="{ 'sticky top-0 z-100': isHeaderCollapsed }"
-        :style="{ height: isHeaderCollapsed ? '50px' : '252px', backgroundImage: mainPageDataModel?.initPageImages?.backgroundImageUrl ? `url(${mainPageDataModel.initPageImages.backgroundImageUrl})` : 'none' }">
+      <div class="sticky top-0 z-[100] bg-cover bg-center bg-no-repeat overflow-hidden"
+        :style="{ height: isHeaderCollapsed ? '50px' : '252px', backgroundImage: mainPageDataModel?.initPageImages?.backgroundImageUrl ? `url(${mainPageDataModel.initPageImages.backgroundImageUrl})` : 'none', transition: 'height 0.3s cubic-bezier(0.4, 0, 0.2, 1)' }">
         <div class="absolute bottom-0 left-0 right-0 flex-1">
           <div class="px-[12px] pt-[12px] transition-all duration-300"
             :class="{ 'opacity-0 max-h-0 overflow-hidden pt-0': isHeaderCollapsed }">