1 line
4.0 KiB
JSON
1 line
4.0 KiB
JSON
{"file":"NavBar.vue2.mjs","mappings":";;;;;;;;;;;AAsEc,aAAS;AACjB,UAAA,EAAE,EAAE,IAAI,QAAQ;AAChB,UAAA,iBAAiB,IAAI,KAAK;AAC1B,UAAA,WAAW,IAAI,KAAK;AAE1B,UAAM,WAAW;AAAA,MACf,EAAE,SAAS,YAAY,MAAM,IAAI;AAAA,MACjC,EAAE,SAAS,gBAAgB,MAAM,YAAY;AAAA,MAC7C,EAAE,SAAS,iBAAiB,MAAM,aAAa;AAAA,MAC/C,EAAE,SAAS,aAAa,MAAM,SAAS;AAAA,MACvC,EAAE,SAAS,aAAa,MAAM,SAAS;AAAA,MACvC,EAAE,SAAS,eAAe,MAAM,WAAW;AAAA,IAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../../../../components/NavBar.vue"],"sourcesContent":["<template>\r\n <nav :class=\"['bg-primary shadow-md fixed w-full z-50', { 'nav-scrolled': scrolled }]\">\r\n <div class=\"container\">\r\n <div class=\"flex items-center justify-between h-16\">\r\n <NuxtLink to=\"/\" class=\"flex items-center text-white\">\r\n <i class=\"fas fa-cloud text-2xl mr-2\"></i>\r\n <span class=\"text-xl font-bold\">{{ $t('common.appName') }}</span>\r\n </NuxtLink>\r\n \r\n <!-- 桌面端导航 -->\r\n <div class=\"hidden md:flex items-center space-x-8\">\r\n <NuxtLink \r\n v-for=\"(item, index) in navItems\" \r\n :key=\"index\" \r\n :to=\"item.path\" \r\n class=\"text-white/85 hover:text-secondary transition-colors duration-300\"\r\n :class=\"{ 'text-white': $route.path === item.path }\"\r\n >\r\n {{ $t(item.i18nKey) }}\r\n </NuxtLink>\r\n \r\n <!-- 语言切换器 -->\r\n <LanguageSwitcher />\r\n </div>\r\n\r\n <!-- 移动端菜单按钮 -->\r\n <button\r\n class=\"md:hidden text-white p-2 rounded-lg hover:bg-white/10 transition-colors duration-300\"\r\n aria-label=\"打开菜单\"\r\n @click=\"toggleMobileMenu\"\r\n >\r\n <i class=\"fas fa-bars text-xl\"></i>\r\n </button>\r\n </div>\r\n\r\n <!-- 移动端菜单 -->\r\n <div :class=\"['md:hidden bg-primary absolute top-16 left-0 right-0 shadow-lg', { 'hidden': !mobileMenuOpen }]\">\r\n <div class=\"container py-4\">\r\n <div class=\"flex flex-col space-y-4\">\r\n <NuxtLink\r\n v-for=\"(item, index) in navItems\"\r\n :key=\"index\"\r\n :to=\"item.path\"\r\n class=\"text-white/85 hover:text-secondary transition-colors duration-300 py-2\"\r\n :class=\"{ 'text-white': $route.path === item.path }\"\r\n @click=\"mobileMenuOpen = false\"\r\n >\r\n {{ $t(item.i18nKey) }}\r\n </NuxtLink>\r\n \r\n <!-- 移动端语言切换器 -->\r\n <div class=\"py-2\">\r\n <LanguageSwitcher />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </nav>\r\n\r\n <!-- 添加导航栏占位，防止内容被导航栏遮挡 -->\r\n <div class=\"h-16\"></div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, onMounted, onUnmounted } from 'vue';\r\nimport { useRoute } from 'vue-router';\r\nimport { useI18n } from 'vue-i18n';\r\nimport LanguageSwitcher from './LanguageSwitcher.vue';\r\n\r\nconst route = useRoute();\r\nconst { t } = useI18n();\r\nconst mobileMenuOpen = ref(false);\r\nconst scrolled = ref(false);\r\n\r\nconst navItems = [\r\n { i18nKey: 'nav.home', path: '/' },\r\n { i18nKey: 'nav.products', path: '/products' },\r\n { i18nKey: 'nav.solutions', path: '/solutions' },\r\n { i18nKey: 'nav.cases', path: '/cases' },\r\n { i18nKey: 'nav.about', path: '/about' },\r\n { i18nKey: 'nav.contact', path: '/contact' }\r\n];\r\n\r\nconst toggleMobileMenu = () => {\r\n mobileMenuOpen.value = !mobileMenuOpen.value;\r\n};\r\n\r\nconst handleScroll = () => {\r\n if (window.scrollY > 100) {\r\n scrolled.value = true;\r\n } else {\r\n scrolled.value = false;\r\n }\r\n};\r\n\r\nonMounted(() => {\r\n window.addEventListener('scroll', handleScroll);\r\n});\r\n\r\nonUnmounted(() => {\r\n window.removeEventListener('scroll', handleScroll);\r\n});\r\n</script> "],"version":3} |