Browse Source

'修改tab语言切换问题'

main
hflllll 2 weeks ago
parent
commit
e42b95c67b
1 changed files with 123 additions and 34 deletions
  1. +123
    -34
      src/components/layout/NavBar.vue

+ 123
- 34
src/components/layout/NavBar.vue View File

@ -29,17 +29,6 @@ const currentLanguage = computed(() => {
return languages.find(lang => lang.code === locale.value)?.name || t('language.en');
});
//
const navItems = [
{ name: t('nav.home'), path: '/' },
{ name: t('nav.ecosystem'), path: '/ecosystem' },
{ name: t('nav.about'), path: '/about' },
{ name: t('nav.resources'), path: '/resources' },
{ name: t('nav.community'), path: '/community' },
{ name: t('nav.faq'), path: '/faq' },
{ name: t('nav.contact'), path: '/contact' }
];
//
const isLangDropdownOpen = ref(false);
const toggleLangDropdown = () => {
@ -61,20 +50,67 @@ const emit = defineEmits(['changeLanguage']);
<!-- Desktop Navigation -->
<nav class="hidden md:flex items-center space-x-6">
<!-- 首页 -->
<router-link
v-for="(item, index) in navItems"
:key="item.path"
:to="item.path"
to="/"
class="text-text-secondary hover:text-text transition-colors duration-200 animate__animated animate__fadeInDown animate__duration-fast"
:class="{
'text-primary-light font-medium': $route.path === item.path,
'animate__delay-xs': index === 1,
'animate__delay-sm': index === 2,
'animate__delay-md': index === 3,
'animate__delay-lg': index === 4
}"
:class="{ 'text-primary-light font-medium': $route.path === '/' }"
>
{{ t('nav.home') }}
</router-link>
<!-- 生态系统 -->
<router-link
to="/ecosystem"
class="text-text-secondary hover:text-text transition-colors duration-200 animate__animated animate__fadeInDown animate__duration-fast animate__delay-xs"
:class="{ 'text-primary-light font-medium': $route.path === '/ecosystem' }"
>
{{ t('nav.ecosystem') }}
</router-link>
<!-- 关于我们 -->
<router-link
to="/about"
class="text-text-secondary hover:text-text transition-colors duration-200 animate__animated animate__fadeInDown animate__duration-fast animate__delay-sm"
:class="{ 'text-primary-light font-medium': $route.path === '/about' }"
>
{{ t('nav.about') }}
</router-link>
<!-- 资源 -->
<router-link
to="/resources"
class="text-text-secondary hover:text-text transition-colors duration-200 animate__animated animate__fadeInDown animate__duration-fast animate__delay-md"
:class="{ 'text-primary-light font-medium': $route.path === '/resources' }"
>
{{ item.name }}
{{ t('nav.resources') }}
</router-link>
<!-- 社区 -->
<router-link
to="/community"
class="text-text-secondary hover:text-text transition-colors duration-200 animate__animated animate__fadeInDown animate__duration-fast animate__delay-lg"
:class="{ 'text-primary-light font-medium': $route.path === '/community' }"
>
{{ t('nav.community') }}
</router-link>
<!-- 常见问题 -->
<router-link
to="/faq"
class="text-text-secondary hover:text-text transition-colors duration-200 animate__animated animate__fadeInDown animate__duration-fast animate__delay-lg"
:class="{ 'text-primary-light font-medium': $route.path === '/faq' }"
>
{{ t('nav.faq') }}
</router-link>
<!-- 联系我们 -->
<router-link
to="/contact"
class="text-text-secondary hover:text-text transition-colors duration-200 animate__animated animate__fadeInDown animate__duration-fast animate__delay-lg"
:class="{ 'text-primary-light font-medium': $route.path === '/contact' }"
>
{{ t('nav.contact') }}
</router-link>
<!-- Language Selector -->
@ -143,26 +179,79 @@ const emit = defineEmits(['changeLanguage']);
:class="{'animate__fadeIn': isMenuOpen, 'animate__fadeOut': !isMenuOpen}"
>
<div class="flex flex-col space-y-4">
<!-- 首页 -->
<router-link
v-for="(item, index) in navItems"
:key="item.path"
:to="item.path"
to="/"
class="text-text-secondary hover:text-text py-2 animate__animated animate__fadeInRight animate__duration-fast"
:class="{
'text-primary-light font-medium': $route.path === item.path,
'animate__delay-xs': index === 1,
'animate__delay-sm': index === 2,
'animate__delay-md': index === 3,
'animate__delay-lg': index === 4
}"
:class="{ 'text-primary-light font-medium': $route.path === '/' }"
@click="isMenuOpen = false"
>
{{ t('nav.home') }}
</router-link>
<!-- 生态系统 -->
<router-link
to="/ecosystem"
class="text-text-secondary hover:text-text py-2 animate__animated animate__fadeInRight animate__duration-fast animate__delay-xs"
:class="{ 'text-primary-light font-medium': $route.path === '/ecosystem' }"
@click="isMenuOpen = false"
>
{{ t('nav.ecosystem') }}
</router-link>
<!-- 关于我们 -->
<router-link
to="/about"
class="text-text-secondary hover:text-text py-2 animate__animated animate__fadeInRight animate__duration-fast animate__delay-sm"
:class="{ 'text-primary-light font-medium': $route.path === '/about' }"
@click="isMenuOpen = false"
>
{{ t('nav.about') }}
</router-link>
<!-- 资源 -->
<router-link
to="/resources"
class="text-text-secondary hover:text-text py-2 animate__animated animate__fadeInRight animate__duration-fast animate__delay-md"
:class="{ 'text-primary-light font-medium': $route.path === '/resources' }"
@click="isMenuOpen = false"
>
{{ t('nav.resources') }}
</router-link>
<!-- 社区 -->
<router-link
to="/community"
class="text-text-secondary hover:text-text py-2 animate__animated animate__fadeInRight animate__duration-fast animate__delay-md"
:class="{ 'text-primary-light font-medium': $route.path === '/community' }"
@click="isMenuOpen = false"
>
{{ t('nav.community') }}
</router-link>
<!-- 常见问题 -->
<router-link
to="/faq"
class="text-text-secondary hover:text-text py-2 animate__animated animate__fadeInRight animate__duration-fast animate__delay-lg"
:class="{ 'text-primary-light font-medium': $route.path === '/faq' }"
@click="isMenuOpen = false"
>
{{ t('nav.faq') }}
</router-link>
<!-- 联系我们 -->
<router-link
to="/contact"
class="text-text-secondary hover:text-text py-2 animate__animated animate__fadeInRight animate__duration-fast animate__delay-lg"
:class="{ 'text-primary-light font-medium': $route.path === '/contact' }"
@click="isMenuOpen = false"
>
{{ item.name }}
{{ t('nav.contact') }}
</router-link>
<!-- Mobile Language Selector -->
<div class="py-2 border-t border-background animate__animated animate__fadeInUp animate__delay-lg animate__duration-fast">
<p class="text-text-secondary mb-2">{{ t('language.en') }}</p>
<!-- <p class="text-text-secondary mb-2">{{ t('language.en') }}</p> -->
<div class="flex flex-col space-y-2">
<button
v-for="lang in languages"


Loading…
Cancel
Save