duanshuwen/nianxx-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(chat-main-list): refine header UI and transitions

Browse Source 
- add v-show to toggle top navbar visibility
- adjust z-indexes for proper stacking context
- update header background transition and sticky styling
This commit is contained in:
duanshuwen
2026-06-29 20:54:38 +08:00
parent bbee6bad40
commit 99a0a483ca
1 changed files with 3 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/pages/home/components/ChatMainList/index.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex h-dvh flex-col relative overflow-hidden"> <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" /> <ChatTopNavBar ref="topNavBarRef" :mainPageDataModel="mainPageDataModel" />
</div> </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" 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" @scroll="handleScroll" @touchstart.capture="handleScrollAreaTouchStart" @touchstart="handleScrollAreaTouchStart"
@touchmove="handleScrollAreaTouchMove"> @touchmove="handleScrollAreaTouchMove">
<div class="relative transition-all duration-300 ease-in-out bg-cover bg-center bg-no-repeat" <div class="sticky top-0 z-[100] bg-cover bg-center bg-no-repeat overflow-hidden"
:class="{ 'sticky top-0 z-100': isHeaderCollapsed }" :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)' }">
:style="{ height: isHeaderCollapsed ? '50px' : '252px', backgroundImage: mainPageDataModel?.initPageImages?.backgroundImageUrl ? `url(${mainPageDataModel.initPageImages.backgroundImageUrl})` : 'none' }">
<div class="absolute bottom-0 left-0 right-0 flex-1"> <div class="absolute bottom-0 left-0 right-0 flex-1">
<div class="px-[12px] pt-[12px] transition-all duration-300" <div class="px-[12px] pt-[12px] transition-all duration-300"
:class="{ 'opacity-0 max-h-0 overflow-hidden pt-0': isHeaderCollapsed }"> :class="{ 'opacity-0 max-h-0 overflow-hidden pt-0': isHeaderCollapsed }">