1 line
3.6 KiB
Plaintext
1 line
3.6 KiB
Plaintext
{"version":3,"file":"NavBar.vue2.mjs","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\">云服务专家</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 {{ item.name }}\r\n </NuxtLink>\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 {{ item.name }}\r\n </NuxtLink>\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\n\r\nconst route = useRoute();\r\nconst mobileMenuOpen = ref(false);\r\nconst scrolled = ref(false);\r\n\r\nconst navItems = [\r\n { name: '首页', path: '/' },\r\n { name: 'AWS产品', path: '/products' },\r\n { name: '解决方案', path: '/solutions' },\r\n { name: '客户案例', path: '/cases' },\r\n { name: '关于我们', path: '/about' },\r\n { name: '联系我们', 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> "],"names":[],"mappings":";;;;;;;;AA4Dc,aAAS;AACjB,UAAA,iBAAiB,IAAI,KAAK;AAC1B,UAAA,WAAW,IAAI,KAAK;AAE1B,UAAM,WAAW;AAAA,MACf,EAAE,MAAM,MAAM,MAAM,IAAI;AAAA,MACxB,EAAE,MAAM,SAAS,MAAM,YAAY;AAAA,MACnC,EAAE,MAAM,QAAQ,MAAM,aAAa;AAAA,MACnC,EAAE,MAAM,QAAQ,MAAM,SAAS;AAAA,MAC/B,EAAE,MAAM,QAAQ,MAAM,SAAS;AAAA,MAC/B,EAAE,MAAM,QAAQ,MAAM,WAAW;AAAA,IACnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"} |