<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>