reagent_manage/vue/src/component/menu/NavMenu/style.scss

@import "~@/asset/style/variables.scss";

//原始样式使用 '>' 可能导致侧边栏折叠时还会显示右侧箭头图标
//此样式只对垂直状态生效
.el-menu--collapse .el-submenu .el-submenu__title .el-submenu__icon-arrow {
    display: none;
}

//hover时，菜单左侧图标放大
.el-menu-item,
.el-submenu__title {
    > .icon, > .el-tooltip > .icon {
        transition: transform .1s;
    }

    &:hover > .icon,
    &:hover > .el-tooltip > .icon {
        transform: scale(1.2);
    }
}

/*-------侧边栏垂直菜单开始---------*/
.el-menu--vertical.el-menu {
    overflow-y: auto;
}

.el-menu--vertical .el-menu,
.el-menu--vertical.el-menu {
    background-color: $aside-menu-background;

    .icon {
        font-size: $aside-icon-size;
    }

    .icon + .menu-item-content {
        margin-left: $menu-icon-text-gap;
    }

    //菜单的文字以及hover颜色
    .el-menu-item,
    .el-submenu__title {
        color: $aside-menu-item-color;

        &:hover {
            color: $aside-menu-item-hover-color;
        }

        //菜单文字的最大宽度
        > .menu-item-content {
            //侧边栏宽度、菜单左右padding、左侧图标宽度、距离左右的距离、右侧图标宽度
            max-width: $aside-width - 20px * 2 - $aside-icon-size - $menu-icon-text-gap * 2 - 12px;
        }
    }

    //子级菜单的背景颜色
    &.el-menu--inline,
    .el-submenu .el-submenu > .el-submenu__title {
        background-color: $aside-sub-menu-background;
    }

    //子级菜单内阴影
    &.el-menu--inline {
        box-shadow: inset 0 2px 8px rgba(0, 0, 0, .45)
    }

    //设置了显示弹出菜单的父级
    &.el-menu--popup .popover-menu__title {
        cursor: auto;
        color: $aside-menu-item-hover-color;
        border-bottom: 1px solid $aside-sub-menu-background;
    }
}

/*-------侧边栏垂直菜单结束---------*/

/*-------顶部水平菜单开始-----------*/
.el-menu--horizontal .el-menu,
.el-menu--horizontal.el-menu {
    font-size: 14px;

    .icon {
        font-size: 14px;
    }

    //图标和文字的间隔
    .icon + .menu-item-content {
        margin-left: $menu-icon-text-gap;
    }

    //菜单的文字以及hover颜色
    .el-menu-item,
    .el-submenu__title {
        color: $head-menu-item-color;

        &:hover {
            color: $head-menu-item-hover-color;
        }

        > span {
            max-width: 100px;
        }
    }

    //submenu的右侧箭头会稍微偏上，不懂为啥
    .el-submenu__icon-arrow {
        margin-top: -4px;
    }
}

//顶部菜单的顶级节点
.el-menu--horizontal.el-menu {
    //不显示折叠展开按钮
    > .el-submenu > .el-submenu__title > .el-submenu__icon-arrow {
        display: none;
    }

    //顶级节点的高度以及hover颜色
    > .el-menu-item,
    > .el-submenu > .el-submenu__title {
        height: $nav-height;
        line-height: $nav-height;

        &:hover {
            border-bottom: 2px solid $head-menu-item-hover-color;
        }
    }
}

/*-------顶部水平菜单结束---------*/