huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-30 03:01:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

v3.7.0 顶部菜单样式调整

Browse Source
This commit is contained in:
YunaiV 2022-02-17 00:53:44 +08:00
parent f736e0a1c4
commit f1f602c131
1 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
yudao-ui-admin/src/components/TopNav/index.vue
View File

@ -12,7 +12,7 @@
</template> </template>
<!-- 顶部菜单超出数量折叠 --> <!-- 顶部菜单超出数量折叠 -->
<el-submenu index="more" v-if="topMenus.length > visibleNumber"> <el-submenu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
<template slot="title">更多菜单</template> <template slot="title">更多菜单</template>
<template v-for="(item, index) in topMenus"> <template v-for="(item, index) in topMenus">
<el-menu-item <el-menu-item
@ -169,25 +169,27 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.el-menu--horizontal > .el-menu-item { .topmenu-container.el-menu--horizontal > .el-menu-item {
float: left; float: left;
height: 50px; height: 50px !important;
line-height: 50px; line-height: 50px !important;
margin: 0; color: #999093 !important;
border-bottom: 3px solid transparent; padding: 0 5px !important;
color: #999093; margin: 0 10px !important;
padding: 0 5px;
margin: 0 10px;
} }
.el-menu--horizontal > .el-menu-item.is-active { .topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
border-bottom: 3px solid #{'var(--theme)'}; border-bottom: 2px solid #{'var(--theme)'} !important;
color: #303133; color: #303133;
} }
/* submenu item */ /* submenu item */
.el-menu--horizontal > .el-submenu .el-submenu__title { .topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
float: left;
height: 50px !important; height: 50px !important;
line-height: 50px !important; line-height: 50px !important;
color: #999093 !important;
padding: 0 5px !important;
margin: 0 10px !important;
} }
</style> </style>