<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>
|
<div class="collapse navbar-collapse" id="navbarNav">
|
<ul class="navbar-nav">
|
<li class="nav-item">
|
<a
|
class="nav-link active"
|
aria-current="page"
|
href="#"
|
@click="navigateTo('/')"
|
>首页</a
|
>
|
</li>
|
<li class="nav-item">
|
<a class="nav-link" href="#" @click="navigateTo('/product')"
|
>产品中心</a
|
>
|
</li>
|
<li class="nav-item">
|
<a class="nav-link" href="#" @click="navigateTo('/about')"
|
>关于我们</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 { useRouter } from "vue-router";
|
|
const router = useRouter();
|
|
// Handle navigation for the menu items
|
// const navigateTo = (path) => {
|
// router.push(path);
|
// };
|
|
const navigateTo = (path) => {
|
// console.log('选中菜单:', index);
|
if(path === '/logo'){
|
router.push('/');
|
}else if(path === '/about'){
|
router.push({path:'/',hash:'#third-other'});
|
}
|
else{
|
router.push(path);
|
}
|
|
};
|
|
</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>
|
|
