作者 RuoYi

顶部菜单样式调整

@@ -12,7 +12,7 @@ @@ -12,7 +12,7 @@
12 </template> 12 </template>
13 13
14 <!-- 顶部菜单超出数量折叠 --> 14 <!-- 顶部菜单超出数量折叠 -->
15 - <el-submenu index="more" v-if="topMenus.length > visibleNumber"> 15 + <el-submenu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
16 <template slot="title">更多菜单</template> 16 <template slot="title">更多菜单</template>
17 <template v-for="(item, index) in topMenus"> 17 <template v-for="(item, index) in topMenus">
18 <el-menu-item 18 <el-menu-item
@@ -169,25 +169,27 @@ export default { @@ -169,25 +169,27 @@ export default {
169 </script> 169 </script>
170 170
171 <style lang="scss"> 171 <style lang="scss">
172 -.el-menu--horizontal > .el-menu-item { 172 +.topmenu-container.el-menu--horizontal > .el-menu-item {
173 float: left; 173 float: left;
174 - height: 50px;  
175 - line-height: 50px;  
176 - margin: 0;  
177 - border-bottom: 3px solid transparent;  
178 - color: #999093;  
179 - padding: 0 5px;  
180 - margin: 0 10px; 174 + height: 50px !important;
  175 + line-height: 50px !important;
  176 + color: #999093 !important;
  177 + padding: 0 5px !important;
  178 + margin: 0 10px !important;
181 } 179 }
182 180
183 -.el-menu--horizontal > .el-menu-item.is-active {  
184 - border-bottom: 3px solid #{'var(--theme)'}; 181 +.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  182 + border-bottom: 2px solid #{'var(--theme)'} !important;
185 color: #303133; 183 color: #303133;
186 } 184 }
187 185
188 /* submenu item */ 186 /* submenu item */
189 -.el-menu--horizontal > .el-submenu .el-submenu__title { 187 +.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
  188 + float: left;
190 height: 50px !important; 189 height: 50px !important;
191 line-height: 50px !important; 190 line-height: 50px !important;
  191 + color: #999093 !important;
  192 + padding: 0 5px !important;
  193 + margin: 0 10px !important;
192 } 194 }
193 </style> 195 </style>