You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.4 KiB
89 lines
2.4 KiB
2 months ago
|
<template>
|
||
|
|
<el-menu
|
||
|
|
:default-active="activeIndex"
|
||
|
|
class="el-menu-demo"
|
||
|
|
mode="horizontal"
|
||
|
|
@select="handleSelect"
|
||
|
|
background-color="#ffffff"
|
||
|
|
text-color="#000000"
|
||
|
|
active-text-color="#FEB2D7"
|
||
|
|
>
|
||
|
|
<div class="logo">
|
||
|
|
<img src="../assets/pictures/Logo.png" alt="Logo" />
|
||
|
|
</div>
|
||
|
|
<el-menu-item index="1">智能推荐</el-menu-item>
|
||
|
|
<el-sub-menu index="2">
|
||
|
|
<template #title>{{communityName}}</template>
|
||
|
|
<el-menu-item index="2-1">私信聊天</el-menu-item>
|
||
|
|
<el-menu-item index="2-2">社区动态</el-menu-item>
|
||
|
|
</el-sub-menu>
|
||
|
|
<el-menu-item index="3" disabled>情感助手</el-menu-item>
|
||
|
|
<el-menu-item index="4">个人空间</el-menu-item>
|
||
|
|
<div class="tu">
|
||
|
|
<img src="@/assets/pictures/tu.png" alt="tu" />
|
||
|
|
</div>
|
||
|
|
</el-menu>
|
||
|
|
<div class="h-6" />
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { useRouter } from 'vue-router'
|
||
|
|
import { ref,onMounted } from 'vue'
|
||
|
|
const router = useRouter()
|
||
|
|
const activeIndex = ref('1') // 设置默认选中的索引为 '1'
|
||
|
|
const communityName = ref('社区互动')
|
||
|
|
const handleSelect = (indexPath) => {
|
||
|
|
if (indexPath === '1') {
|
||
|
|
router.push('/main/recommend') // 当选择“智能推荐”时，导航到子路由
|
||
|
|
}
|
||
|
|
else if(indexPath === '2-1') {
|
||
|
|
router.push('/main/chat')
|
||
|
|
communityName.value = '私信聊天'
|
||
|
|
}
|
||
|
|
else if(indexPath === '2-2') {
|
||
|
|
router.push('/main/community')
|
||
|
|
communityName.value = '社区动态'
|
||
|
|
}
|
||
|
|
else if(indexPath === '4') {
|
||
|
|
router.push('/main/space')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onMounted(() => {
|
||
|
|
if (window.location.pathname === '/') {
|
||
|
|
router.push('/main/recommend')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'HeaderComponent',
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.el-menu-demo {
|
||
|
|
justify-content: space-between; /* 平铺菜单项 */
|
||
|
|
font-weight: bold; /* 加粗字体 */
|
||
|
|
|
||
|
|
}
|
||
|
|
/* 取消悬停和选中时的背景色 */
|
||
|
|
.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
|
||
|
|
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
|
||
|
|
.el-menu--horizontal > .el-menu-item.is-active {
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
.logo img,
|
||
|
|
.tu img {
|
||
|
|
height: 50px; /* 根据需要调整高度 */
|
||
|
|
width: auto; /* 自适应宽度 */
|
||
|
|
margin-right: 10px; /* 与菜单项的间距 */
|
||
|
|
}
|
||
|
|
.el-menu-item {
|
||
|
|
line-height: 70px; /* 设置菜单项的行高，和菜单高度一致 */
|
||
|
|
font-weight: bold; /* 加粗字体 */
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|