fashion-ssr-vue3/components/AppHeader.vue

<!-- @format -->

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

const commonStore = useCommonStore()
const { customNavigateColor } = storeToRefs(commonStore)
const userStore = useUserStore()
const { isLogin } = storeToRefs(userStore)

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

<template>
  <div
    class="pos-fixed left-50% translate-x--50% w-full py-20px custom-bg z-100"
  >
    <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="customNavigateColor"
          />
        </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 {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 0.3s;
}
</style>