Files
template-10490/components/AppHeader/Menu/Menu.vue
赵忠林 7b43a20d43 chore(config): 更新环境变量和配置信息
- 更新 APPID 从10398 到 10490- 在页脚版权信息中添加电话号码显示
- 在顶部导航栏添加移动端电话展示- 注释掉开发环境 API 地址配置- 移除菜单样式中的 margin-right 设置
- 修改文章详情页作者字段为发布员
- 替换校园风光模块跳转链接 ID
-优化搜索关键词高亮逻辑
- 移除轮播图图片路径前缀拼接
- 调整顶部欢迎信息在不同设备上的显示方式- 更新顶部联系信息图标及文案内容
2025-10-27 15:13:27 +08:00

97 lines
2.9 KiB
Vue

<template>
<!-- PC版菜单 -->
<el-menu
class="hidden-sm-and-down"
mode="horizontal"
style="background-color: transparent;"
active-text-color="#1b850c"
:ellipsis="false"
@select="handleSelect"
>
<template v-for="(item,index) in navigations" :key="index">
<template v-if="item.children && item.children.length > 0">
<el-sub-menu :index="`${index}`">
<template #title><span class="text-gray-900 hover:text-green-700 text-[1rem]">{{ item.title }}</span></template>
<template v-for="(sub,subIndex) in item.children" :key="subIndex">
<template v-if="sub.children && sub.children.length > 0">
<el-sub-menu :index="`${index}-${subIndex}`">
<template #title><p class="text-base">{{ sub.title }}</p></template>
<el-menu-item v-for="(sub2,sub2Index) in sub.children" :key="sub2Index" :index="`${index}-${subIndex}-${sub2Index}`">
<nuxt-link :to="navTo(sub2)" class="text-base">{{ sub2.title }}</nuxt-link>
</el-menu-item>
</el-sub-menu>
</template>
<template v-else>
<el-menu-item :index="`${index}-${subIndex}`">
<nuxt-link :to="sub.path" class="text-base"><el-space><el-image v-if="sub.icon" class="ws-icon" :src="sub.icon" />{{ sub.title }}</el-space></nuxt-link>
</el-menu-item>
</template>
</template>
</el-sub-menu>
</template>
<el-menu-item v-else :index="`${index}`">
<nuxt-link :to="navTo(item)" class="text-base">{{ item.title }}</nuxt-link>
</el-menu-item>
</template>
</el-menu>
</template>
<script setup lang="ts">
import {navigateTo} from "#imports";
import {useMenu} from "~/composables/configState";
const navigations = useMenu();
const handleSelect = (index: any,keyPath: string[]) => {
const split = index.split('-');
if(split.length == 1){
const item = navigations.value[index];
navigateTo(item)
}
if(split.length == 2){
const item = navigations.value[split[0]];
if(item.children){
const child = item.children[split[1]];
navigateTo(child.path)
}
}
}
</script>
<style scoped lang="scss">
//.el-menu--horizontal > .el-menu-item:nth-child(1) {
// margin-right: auto;
//}
.el-menu{
border-bottom: none;
}
.ws-icon{
width: 24px;
height: 24px;
}
.el-menu-item:hover{
outline: 0 !important;
color: #1b850c !important;
background-color: #f1f8eb !important;
}
.el-menu-item.is-active {
color: #1b850c !important;
background: #FFFFFF !important;
}
.el-sub-menu .el-sub-menu__title:link{
color: #ff9900;
}
.el-sub-menu:hover{
color: #ff9900;
}
.text-base:hover{
color: #1b850c;
}
//
//$--menu-item-hover-fill: #ff0000;
//$--el-menu-hover-bg-color: #1b850c;
.el-menu--horizontal {
color: #f1ffec;
background-color: #1b850c;
}
</style>