<template>
|
<nav class="navbar navbar-expand-lg bg-light fixed-top">
|
<div class="container-fluid">
|
<a class="navbar-brand" href="#">
|
<img src="@/assets/logo/logo.png" alt="云游四方" class="logo" />
|
<span class="text-xl font-bold">云游四方</span>
|
</a>
|
<!-- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" >
|
<span class="navbar-toggler-icon"></span>
|
</button> -->
|
<button class="navbar-toggler btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
aria-controls="navbarNav" aria-expanded="false" aria-label="导航菜单" ref="navbarToggler">
|
<span class="navbar-toggler-icon"></span>
|
</button>
|
<div class="collapse navbar-collapse" id="navbarNav">
|
<ul class="navbar-nav">
|
<li v-for="item in navItems" :key="item.label" class="nav-item">
|
<a class="nav-link" href="#" :class="{ active: isActive(item.path) }"
|
@click.prevent="navigateTo(item.path)">
|
{{ item.label }}
|
</a>
|
</li>
|
</ul>
|
</div>
|
<div class="contact-phone d-none d-md-block">
|
<img src="/icons/hotline.png" alt="电话" class="hot-line-img" />
|
<span class="text-lg font-bold">13862676702</span>
|
</div>
|
</div>
|
</nav>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue';
|
import { useRouter, useRoute } from "vue-router";
|
|
const router = useRouter();
|
const route = useRoute()
|
|
const navItems = [
|
{ label: '首页', path: '/' },
|
{ label: '产品中心', path: '/product' },
|
// { label: '关于我们', path: '/about#third-other' }
|
{ label: '关于我们', path: '/about2' }
|
];
|
|
// Handle navigation for the menu items
|
// const navigateTo = (path) => {
|
// router.push(path);
|
// };
|
|
const isActive = (targetPath) => {
|
// 可根据需要改为更精确的匹配逻辑
|
return route.fullPath === targetPath || route.path === targetPath.split('#')[0];
|
};
|
|
// navbarToggler 引用，用于手动触发点击事件
|
const navbarToggler = ref(null);
|
const navigateTo = (path) => {
|
if (path.includes('#')) {
|
const [basePath, hash] = path.split('#');
|
router.push({ path: basePath, hash: `#${hash}` });
|
} else {
|
router.push(path);
|
}
|
if (navbarToggler.value) {
|
navbarToggler.value.click();
|
}
|
|
};
|
|
|
|
|
</script>
|
|
<style scoped>
|
.navbar {
|
padding: 10px 20px;
|
}
|
|
.navbar-brand {
|
display: flex;
|
align-items: center;
|
}
|
|
.logo {
|
width: 40px;
|
height: 40px;
|
margin-right: 10px;
|
}
|
|
.nav-link {
|
font-size: 16px;
|
}
|
|
.contact-phone {
|
display: flex;
|
align-items: center;
|
font-size: 14px;
|
}
|
|
.contact-phone .el-icon {
|
margin-right: 5px;
|
}
|
|
.navbar-nav .nav-link {
|
margin-right: 15px;
|
}
|
|
.fixed-top {
|
z-index: 1000;
|
}
|
|
.hot-line-img {
|
width: 20px;
|
height: 20px;
|
margin-right: 5px;
|
}
|
</style>
|
<style scoped>
|
.navbar-nav .nav-link {
|
color: #000;
|
font-weight: normal;
|
padding: 10px 15px;
|
text-transform: uppercase;
|
transition: color 0.3s, background-color 0.3s;
|
}
|
|
.navbar-nav .nav-link:hover {
|
color: #007bff;
|
}
|
|
.navbar-nav .nav-link.active {
|
color: #007bff;
|
/* background-color: #007bff; */
|
font-weight: bold;
|
border-radius: 5px;
|
}
|
</style>
|
