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