71 lines
2.0 KiB
Vue
71 lines
2.0 KiB
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 flex items-center gap-1">
|
|
<img src="https://api.ccttiot.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250429085112-1757670595288.png" alt="" class="w-6 h-6 object-cover">
|
|
小鹿骑行
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 右侧区域 -->
|
|
<template #right>
|
|
<UButton
|
|
color='primary'
|
|
label='商户中心'
|
|
to="https://ele.ccttiot.com/login"
|
|
class="gap-2"
|
|
variant="ghost"
|
|
>
|
|
<template #leading>
|
|
<span class="relative flex size-2">
|
|
<span
|
|
class='bg-primary animate-ping absolute inline-flex size-full rounded-full opacity-75'
|
|
|
|
/>
|
|
<span
|
|
|
|
class=" bg-primary relative inline-flex size-2 scale-90 rounded-full"
|
|
/>
|
|
</span>
|
|
</template>
|
|
</UButton>
|
|
<!-- <NuxtLink-->
|
|
<!-- to="https://ele.ccttiot.com/login"-->
|
|
<!-- target="_blank"-->
|
|
<!-- class="admin-link"-->
|
|
<!-- >-->
|
|
<!-- <view class="h-6 w-auto text-primary text-md hover:scale-105 hover:text-shadow-xs">-->
|
|
<!-- -->
|
|
<!-- </view>-->
|
|
<!-- </NuxtLink>-->
|
|
</template>
|
|
</UHeader>
|
|
</template>
|
|
|
|
|