104 lines
3.1 KiB
Vue
104 lines
3.1 KiB
Vue
|
<template>
|
|||
|
|
<nav :class="['bg-primary shadow-md fixed w-full z-50', { 'nav-scrolled': scrolled }]">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="flex items-center justify-between h-16">
|
|||
|
|
<NuxtLink to="/" class="flex items-center text-white">
|
|||
|
|
<i class="fas fa-cloud text-2xl mr-2"></i>
|
|||
|
|
<span class="text-xl font-bold">{{ $t('common.appName') }}</span>
|
|||
|
|
</NuxtLink>
|
|||
|
|
|
|||
|
|
<!-- 桌面端导航 -->
|
|||
|
|
<div class="hidden md:flex items-center space-x-8">
|
|||
|
|
<NuxtLink
|
|||
|
|
v-for="(item, index) in navItems"
|
|||
|
|
:key="index"
|
|||
|
|
:to="item.path"
|
|||
|
|
class="text-white/85 hover:text-secondary transition-colors duration-300"
|
|||
|
|
:class="{ 'text-white': $route.path === item.path }"
|
|||
|
|
>
|
|||
|
|
{{ $t(item.i18nKey) }}
|
|||
|
|
</NuxtLink>
|
|||
|
|
|
|||
|
|
<!-- 语言切换器 -->
|
|||
|
|
<LanguageSwitcher />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 移动端菜单按钮 -->
|
|||
|
|
<button
|
|||
|
|
class="md:hidden text-white p-2 rounded-lg hover:bg-white/10 transition-colors duration-300"
|
|||
|
|
aria-label="打开菜单"
|
|||
|
|
@click="toggleMobileMenu"
|
|||
|
|
>
|
|||
|
|
<i class="fas fa-bars text-xl"></i>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 移动端菜单 -->
|
|||
|
|
<div :class="['md:hidden bg-primary absolute top-16 left-0 right-0 shadow-lg', { 'hidden': !mobileMenuOpen }]">
|
|||
|
|
<div class="container py-4">
|
|||
|
|
<div class="flex flex-col space-y-4">
|
|||
|
|
<NuxtLink
|
|||
|
|
v-for="(item, index) in navItems"
|
|||
|
|
:key="index"
|
|||
|
|
:to="item.path"
|
|||
|
|
class="text-white/85 hover:text-secondary transition-colors duration-300 py-2"
|
|||
|
|
:class="{ 'text-white': $route.path === item.path }"
|
|||
|
|
@click="mobileMenuOpen = false"
|
|||
|
|
>
|
|||
|
|
{{ $t(item.i18nKey) }}
|
|||
|
|
</NuxtLink>
|
|||
|
|
|
|||
|
|
<!-- 移动端语言切换器 -->
|
|||
|
|
<div class="py-2">
|
|||
|
|
<LanguageSwitcher />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
<!-- 添加导航栏占位，防止内容被导航栏遮挡 -->
|
|||
|
|
<div class="h-16"></div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, onMounted, onUnmounted } from 'vue';
|
|||
|
|
import { useRoute } from 'vue-router';
|
|||
|
|
import { useI18n } from 'vue-i18n';
|
|||
|
|
import LanguageSwitcher from './LanguageSwitcher.vue';
|
|||
|
|
|
|||
|
|
const route = useRoute();
|
|||
|
|
const { t } = useI18n();
|
|||
|
|
const mobileMenuOpen = ref(false);
|
|||
|
|
const scrolled = ref(false);
|
|||
|
|
|
|||
|
|
const navItems = [
|
|||
|
|
{ i18nKey: 'nav.home', path: '/' },
|
|||
|
|
{ i18nKey: 'nav.products', path: '/products' },
|
|||
|
|
{ i18nKey: 'nav.solutions', path: '/solutions' },
|
|||
|
|
{ i18nKey: 'nav.cases', path: '/cases' },
|
|||
|
|
{ i18nKey: 'nav.about', path: '/about' },
|
|||
|
|
{ i18nKey: 'nav.contact', path: '/contact' }
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const toggleMobileMenu = () => {
|
|||
|
|
mobileMenuOpen.value = !mobileMenuOpen.value;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleScroll = () => {
|
|||
|
|
if (window.scrollY > 100) {
|
|||
|
|
scrolled.value = true;
|
|||
|
|
} else {
|
|||
|
|
scrolled.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
window.addEventListener('scroll', handleScroll);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onUnmounted(() => {
|
|||
|
|
window.removeEventListener('scroll', handleScroll);
|
|||
|
|
});
|
|||
|
|
</script>
|