From 856d1ceba8162cca4da1df39d336a0e493e8e955 Mon Sep 17 00:00:00 2001 From: RuoYi <yzz_ivy@163.com> Date: 星期日, 25 七月 2021 19:06:57 +0800 Subject: [PATCH] 顶部菜单样式调整 --- ruoyi-ui/src/components/TopNav/index.vue | 30 ++++++++++++++++-------------- 1 files changed, 16 insertions(+), 14 deletions(-) diff --git a/ruoyi-ui/src/components/TopNav/index.vue b/ruoyi-ui/src/components/TopNav/index.vue index edb9c53..1b7c4d9 100644 --- a/ruoyi-ui/src/components/TopNav/index.vue +++ b/ruoyi-ui/src/components/TopNav/index.vue @@ -12,7 +12,7 @@ </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 v-for="(item, index) in topMenus"> <el-menu-item @@ -169,25 +169,27 @@ </script> <style lang="scss"> -.el-menu--horizontal > .el-menu-item { +.topmenu-container.el-menu--horizontal > .el-menu-item { float: left; - height: 50px; - line-height: 50px; - margin: 0; - border-bottom: 3px solid transparent; - color: #999093; - padding: 0 5px; - margin: 0 10px; + height: 50px !important; + line-height: 50px !important; + color: #999093 !important; + padding: 0 5px !important; + margin: 0 10px !important; } -.el-menu--horizontal > .el-menu-item.is-active { - border-bottom: 3px solid #{'var(--theme)'}; +.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title { + border-bottom: 2px solid #{'var(--theme)'} !important; color: #303133; } /* submenu item */ -.el-menu--horizontal > .el-submenu .el-submenu__title { - height: 50px !important; - line-height: 50px !important; +.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title { + float: left; + height: 50px !important; + line-height: 50px !important; + color: #999093 !important; + padding: 0 5px !important; + margin: 0 10px !important; } </style> -- Gitblit v1.9.2