优化移动端Header UI

src/@core/scss/template/placeholders/_misc.scss

@@ -1,47 +1,38 @@
 %blurry-bg {
     position: relative;
-    background: transparent;
     box-shadow: none;
 
-    &::before {
-      position: absolute;
-      z-index: -1;
 
-      // 磨砂渐变效果
+    @media (width <= 768px) {
-      backdrop-filter: blur(20px);
+      background: transparent;
-      block-size: calc(env(safe-area-inset-top, 0px) + var(--navbar-height) + 6rem);
-      content: "";
-      inset-block-start: 0;
-      inset-inline: 0;
 
-      // 使用遮罩实现渐变效果
+      &::before {
-      mask: linear-gradient(
+        position: absolute;
-        to bottom,
+        z-index: -1;
-        rgba(0, 0, 0, 100%) 0%,
+        backdrop-filter: blur(24px);
-        rgba(0, 0, 0, 90%) calc(env(safe-area-inset-top, 0px) + var(--navbar-height) + 1rem),
+        block-size: calc(env(safe-area-inset-top, 0px) + var(--navbar-height) + 4.5rem);
-        rgba(0, 0, 0, 70%) calc(env(safe-area-inset-top, 0px) + var(--navbar-height) + 2rem),
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 4%), 0 1px 2px rgba(0, 0, 0, 2%);
-        rgba(0, 0, 0, 50%) calc(env(safe-area-inset-top, 0px) + var(--navbar-height) + 3rem),
+        content: "";
-        rgba(0, 0, 0, 30%) calc(env(safe-area-inset-top, 0px) + var(--navbar-height) + 4rem),
+        inset-block-start: 0;
-        rgba(0, 0, 0, 10%) calc(env(safe-area-inset-top, 0px) + var(--navbar-height) + 5rem),
+        inset-inline: 0;
-        rgba(0, 0, 0, 0%) 100%
+        pointer-events: none;
-      );
+        transition: all 0.3s ease-in-out;
-      pointer-events: none;
-      transition: all 0.5s ease-in-out;
         
-      .v-theme--light & {
+        .v-theme--light & {
-        background: rgba(var(--v-theme-surface), 0.8);
+          background: rgba(var(--v-theme-surface), 0.6);
-      }
+        }
         
-      .v-theme--dark & {
+        .v-theme--dark & {
-        background: rgba(var(--v-theme-background), 0.6);
+          background: rgba(var(--v-theme-background), 0.5);
-      }
+        }
 
-      .v-theme--purple & {
+        .v-theme--purple & {
-        background: rgba(var(--v-theme-background), 0.6);
+          background: rgba(var(--v-theme-background), 0.5);
-      }
+        }
 
-      .v-theme--transparent & {
+        .v-theme--transparent & {
-        background: rgba(var(--v-theme-background), 0.3);
+          background: rgba(var(--v-theme-background), 0.3);
-      }
+        }
     }
+  }
 }

src/composables/usePullDownGesture.ts

@@ -85,7 +85,7 @@ export function usePullDownGesture(options: PullDownOptions = {}) {
   })
 
   const indicatorTransform = computed(() => {
-    return `translate(-50%, ${Math.min(20 + pullDistance.value - config.SHOW_INDICATOR, 50)}px)`
+    return `translate(-50%, ${Math.min(60 + pullDistance.value - config.SHOW_INDICATOR, 70)}px)`
   })
 
   // 弹窗检测函数

src/layouts/components/Footer.vue

@@ -248,7 +248,7 @@ const showDynamicButton = computed(() => {
   position: relative;
   overflow: hidden;
   backdrop-filter: blur(16px);
-  background-color: rgba(var(--v-theme-surface), 0.6);
+  background-color: rgba(var(--v-theme-surface), 0.3);
   pointer-events: auto;
   transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
 

src/layouts/components/HeaderTab.vue

@@ -33,16 +33,13 @@ const showTabsScrollIndicator = ref(false)
 const showLeftButton = ref(false)
 const showRightButton = ref(false)
 
-// 滚动检测相关
-const scrollDistance = ref(0)
-const showBlurBackground = ref(false)
-
 // Function to scroll the tabs
 const scrollTabs = (direction: 'left' | 'right') => {
   const el = tabsContainerRef.value
   if (!el) return
 
-  const scrollAmount = 200 // 可以根据需要调整滚动量
+  // 可以根据需要调整滚动量
+  const scrollAmount = 200
   const scrollPosition = direction === 'left' ? el.scrollLeft - scrollAmount : el.scrollLeft + scrollAmount
 
   el.scrollTo({
@@ -66,13 +63,6 @@ const updateTabsIndicator = () => {
   showRightButton.value = hasOverflow && !isScrolledToEnd
 }
 
-// 滚动检测处理函数
-const handleScroll = () => {
-  scrollDistance.value = window.scrollY
-  // 当滚动距离大于10px时显示透明背景
-  showBlurBackground.value = scrollDistance.value > 10
-}
-
 // Debounce resize handler
 let resizeTimeout: ReturnType<typeof setTimeout> | null = null
 const handleResize = () => {
@@ -85,29 +75,20 @@ const handleResize = () => {
 onMounted(async () => {
   // Add resize listener for tabs indicator
   window.addEventListener('resize', handleResize)
-  // Add scroll listener for blur background
-  window.addEventListener('scroll', handleScroll, { passive: true })
   // Initial check for tabs indicator after DOM update
   await nextTick() // Ensure element is rendered
   updateTabsIndicator()
-  // Initial scroll check
-  handleScroll()
-
-  // Listen for scroll events specifically on the tabs container
-  tabsContainerRef.value?.addEventListener('scroll', updateTabsIndicator, { passive: true })
 })
 
 onUnmounted(() => {
   // Remove resize listener
   window.removeEventListener('resize', handleResize)
-  // Remove scroll listener
-  window.removeEventListener('scroll', handleScroll)
   // Remove tabs scroll listener
   tabsContainerRef.value?.removeEventListener('scroll', updateTabsIndicator)
 })
 </script>
 <template>
-  <div class="tab-header" :class="{ 'blur-background': showBlurBackground }">
+  <div class="tab-header">
     <VBtn v-if="showLeftButton" class="scroll-button left-button" @click="scrollTabs('left')" variant="text" icon>
       <VIcon icon="tabler-chevron-left" size="small" color="secondary" />
     </VBtn>
@@ -135,34 +116,10 @@ onUnmounted(() => {
 <style scoped lang="scss">
 .tab-header {
   position: relative;
-  z-index: 10;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-inline: 16px;
   transition: all 0.3s ease;
-
-  // 透明模糊背景样式
-  &.blur-background {
-    &::before {
-      position: absolute;
-      z-index: -1;
-      backdrop-filter: blur(3px);
-      background: linear-gradient(
-        to bottom,
-        rgba(var(--v-theme-background), 0) 0%,
-        rgba(var(--v-theme-background), 0.05) 25%,
-        rgba(var(--v-theme-background), 0.1) 50%,
-        rgba(var(--v-theme-background), 0.05) 75%,
-        rgba(var(--v-theme-background), 0) 100%
-      );
-      content: '';
-      inset: 0;
-      margin-block: -8px;
-      pointer-events: none;
-      transition: all 0.3s ease;
-    }
-  }
 }
 
 .scroll-button {