fashion-ssr-vue3/components/AppHeader.vue

<!-- @format -->

<script lang="ts" setup>
import { useUserStore } from '@/stores/modules/user'
import { useCommonStore } from '@/stores/modules/common'

// const userStore = useUserStore()
// const { isLogin } = storeToRefs(userStore)

const commonStore = useCommonStore()
const { navigateBgColor, navigateTextColor } = storeToRefs(commonStore)

// 使用 useI18n 钩子
// const { t } = useI18n()
</script>

<template>
  <div
    class="pos-fixed left-50% translate-x--50% w-full py-20px custom-bg z-101" :style="{
      background: navigateBgColor,
      color: navigateTextColor,
    }"
  >
    <div class="flex justify-between items-center h-32px lh-32px w-1200-auto">
      <div class="flex items-center">
        <NuxtLink to="/">
          <svgo-spark-logo
            class="!w-132px !h-32px"
            :class="navigateTextColor"
          />
        </NuxtLink>
      </div>
      <div class="mx-auto">
        <common-navigation />
      </div>
      <div class="flex items-center">
        <!-- {{ t('Popular_test') }}
      <div class="w-1px bg-#D8D8D8 h-20px mx-20px" />
      <common-select-lang /> -->
        <common-user-avatar class="ml-30px" />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.custom-bg {
  opacity: 0.9;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: background-color 0.3s ease;
}
</style>