xlqx/app/components/AppHeader.vue

<script lang="ts" setup>

const isScrolled = ref(false)
const headerUI = ref({
  root: 'fixed top-0 left-0 right-0 z-50 bg-green-600/25 backdrop-filter-none h-8 lg:h-16'
})

const handleScroll = () => {
  isScrolled.value = window.scrollY > 10
  headerUI.value.root = isScrolled.value
      ? 'fixed top-0 left-0 right-0 z-50 bg-green-700 h-8 lg:h-16' // 不透明
      : 'fixed top-0 left-0 right-0 z-50 bg-green-600/25 backdrop-filter-none h-8 lg:h-16' // 半透明
}

onMounted(() => window.addEventListener('scroll', handleScroll))
onUnmounted(() => window.removeEventListener('scroll', handleScroll))




</script>

<template>
  <UHeader
      :ui="{root:'fixed right-0 left-0 h-8 lg:h-16'}">
    <!-- 标题部分 -->
    <template #title>
      <view class="h-6 w-auto text-primary">
        小鹿骑行
      </view>
    </template>

    <!-- 右侧区域 -->
    <template #right>
      <view class="h-6 w-auto text-primary">
        商户中心
      </view>
    </template>
  </UHeader>
</template>