43 lines
1015 B
Vue
43 lines
1015 B
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>
|
|
|
|
|