<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>
      <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>


