126 lines
3.5 KiB
Vue
126 lines
3.5 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}`" class="ws-menu">
|
|
<template #title><span class="text-lg hover:text-green-700 menu-1">{{ 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-lg">{{ 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-lg">{{ 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-lg"><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-white text-lg">{{ 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, .el-sub-menu .el-sub-menu__title {
|
|
color: #f3f3f3 !important; // 默认字体颜色为白色
|
|
}
|
|
|
|
.el-menu-item:hover, .el-sub-menu .el-sub-menu__title:hover {
|
|
background-color: #ecffe7 !important; // 悬停时背景色为白色
|
|
color: #1b850c !important; // 悬停时字体颜色改为绿色
|
|
}
|
|
|
|
.el-menu-item.is-active {
|
|
color: #1b850c !important;
|
|
background: #ecffe7 !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;
|
|
}
|
|
.text-white {
|
|
color: #125c09; // 确保字体颜色为白色
|
|
}
|
|
.text-white:hover {
|
|
color: #1b850c !important;
|
|
}
|
|
.text-lg {
|
|
font-size: 1.125rem; // 保持原有字体大小
|
|
}
|
|
.menu-1{
|
|
color: #f3f3f3;
|
|
}
|
|
.menu-1:hover{
|
|
color: #1b850c !important;
|
|
}
|
|
//.el-sub-emnu .ws-menu{
|
|
// color: #ff0000 !important;
|
|
//}
|
|
//
|
|
//.menu-1{
|
|
// color: #ff0000 !important;
|
|
//}
|
|
//.el-menu--horizontal>.el-sub-menu:hover .el-sub-menu__title{
|
|
// color: #1b850c !important;
|
|
//}
|
|
</style>
|