1. 使用 ruoyi 项目时出现的问题。
<template>
<el-menu
:default-active="activeMenu"
:collapse="false"
:unique-opened="true"
class="container"
:collapse-transition="true"
mode="horizontal"
>
<sidebar-item
v-for="(route, index) in sidebarRouters"
:key="route.path + index"
:item="route"
:base-path="route.path"
/>
</el-menu>
</template>
class=“container” 中的样式是这样的
.container {
box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.1);
float: left;
height: 100%;
width: 200px;
background-color: transparent !important;
overflow: hidden;
-webkit-transition: width .28s;
transition: width 0.28s;
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
box-shadow: 2px 0 6px rgba(0,21,41,.35);
.svg-icon {
margin-right: 10px;
margin-left: 3px;
}
// menu hover
.el-submenu__title {
font-size: 17px;
color: white !important;
&:hover {
background-color: transparent !important;
}
}
}
2. 问题描述
- .svg-icon 这个 样式只对 一级菜单 “高速公路” 生效! 二级菜单和 其中的选项则不能生效!
2. 解决方法
- html 文档中 是没有 弹出菜单项(出入口收费站 -> 总流量 。。。)的。
- 他们在 html 文档的末尾可以看到
- 所以 根据 弹出菜单出现的位置 设置样式就可以了!在 el-menu–popup这个样式的基础上作修改
.el-menu--popup {
.el-submenu__title{
background-color: #0B1423 !important;
color: #FFF !important;
}
.el-menu-item{
background-color: #0B1423 !important;
color: #FFF !important;
}
.el-menu-item:hover {
background-color: #FFF !important;
color: #0B1423 !important;
}
.el-menu-item.is-active {
background-color: #FFF !important;
color: #0B1423 !important;
}
.svg-icon {
margin-right: 10px;
margin-left: 3px;
}
}
4. 总结
修改弹出框元素 不在 el-menu 样式中,我们 需要在 el-menu–popup 中修改样式!