<template>
|
<div class="header">
|
<div style="width: 600px;">
|
<el-menu :default-active="menuIndex" class="main-menu" mode="horizontal" @select="handleSelect">
|
<el-menu-item index="/">
|
<img src="@/assets/logo/logo.png" alt="云游四方" class="logo" />
|
<span class="logo-text">云游四方</span>
|
</el-menu-item>
|
<el-menu-item index="/">首页</el-menu-item>
|
<el-menu-item index="/product">产品中心</el-menu-item>
|
<el-menu-item index="/contact">联系我们</el-menu-item>
|
<el-menu-item index="/about">关于我们</el-menu-item>
|
</el-menu>
|
</div>
|
<div class="contact-phone">
|
<el-icon>
|
<Phone />
|
</el-icon>
|
<span>400-102-8686</span>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue';
|
import { Phone } from '@element-plus/icons-vue'
|
import { useRouter } from 'vue-router';
|
|
const router = useRouter();
|
|
|
// 默认选中的菜单项
|
const menuIndex = ref('home');
|
|
// 处理菜单点击事件
|
const handleSelect = (index) => {
|
// console.log('选中菜单:', index);
|
router.push(index);
|
};
|
</script>
|
<style scoped>
|
.el-menu--horizontal {
|
--el-menu-horizontal-height: 40px;
|
}
|
|
.header {
|
display: flex;
|
/* align-items: center; */
|
justify-content: space-between;
|
padding: 0 20px;
|
height: 60px;
|
width: 100%;
|
background-color: #fff;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
position: fixed;
|
top: 0;
|
left: 0;
|
z-index: 1000;
|
}
|
|
.logo {
|
width: 40px;
|
height: 40px;
|
margin-right: 10px;
|
}
|
|
.logo-text {
|
font-size: 18px;
|
font-weight: bold;
|
}
|
|
.contact-phone {
|
display: flex;
|
align-items: center;
|
font-size: 14px;
|
}
|
|
.main-menu {
|
flex: 1;
|
justify-content: center;
|
height: 100%;
|
}
|
|
|
.contact-phone {
|
width: 300px;
|
display: flex;
|
align-items: center;
|
color: #0056b3;
|
text-align: left;
|
}
|
|
.contact-phone .el-icon {
|
margin-right: 5px;
|
}
|
</style>
|
