dz-app/pages/index/components/gradient-navbar.vue

<template>
    <uv-navbar v-bind="navBinding">
        <template #left>
            <view class="text-primary-deep text-xl font-[FZBangSKJW]">单招一卡通</view>
        </template>
        <template #right>
            <uv-text slot="right" color="var(--primary-deep-color)" prefix-icon="map" :text="provinceName"
                     :icon-style="{color: 'var(--primary-deep-color)', fontSize: '20px'}"/>
        </template>
    </uv-navbar>
</template>

<script setup>
import {computed} from 'vue'
import {useInjectPageScroll} from "@/hooks/usePageScrollInjection";
import {useUserStore} from "@/hooks/useUserStore";
import {useInjectPageConfig} from "@/hooks/usePageConfigInjection";

const {scrollTop} = useInjectPageScroll()
const {currentUser} = useUserStore()
const {headerOption} = useInjectPageConfig()

const provinceName = computed(() => currentUser.value.provinceName || '湖南')
const bgOpacity = computed(() => {
    if (scrollTop.value <= 0) return 0
    return Math.min(1, scrollTop.value / 44)
})
const navBinding = computed(() => ({
    bgColor: uni.$uv.colorToRgba('#ffffff', bgOpacity.value),
    border: bgOpacity.value >= 1,
    ...headerOption.value
}))
</script>

<style scoped>

</style>