ruoyi/RuoYi-Vue3
1
0
Fork 1
mirror of https://github.com/yangzongzhuan/RuoYi-Vue3.git synced 2025-12-27 11:47:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

优化topbar顶部菜单样式

Browse Source
This commit is contained in:
RuoYi
2025-12-18 14:40:52 +08:00
parent 63cfd07f74
commit 686fd011a9
2 changed files with 10 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/styles/ruoyi.scss
View File

@@ -156,12 +156,10 @@
width: inherit; width: inherit;
} }
/* el menu */ /* horizontal el menu */
.el-menu-item, .el-menu--horizontal .el-menu-item .svg-icon + span,
.el-sub-menu { .el-menu--horizontal .el-sub-menu__title .svg-icon + span {
.svg-icon + span { margin-left: 3px;
margin-left: 5px;
}
} }
.el-menu--horizontal .el-menu--popup { .el-menu--horizontal .el-menu--popup {

19
src/layout/components/TopBar/index.vue
View File

@@ -58,6 +58,11 @@ onMounted(() => {
</script> </script>
<style lang="scss"> <style lang="scss">
/* menu item */
.topbar-menu.el-menu--horizontal .el-submenu__title, .topbar-menu.el-menu--horizontal .el-menu-item {
padding: 0 10px !important;
}
.topbar-menu.el-menu--horizontal > .el-menu-item { .topbar-menu.el-menu--horizontal > .el-menu-item {
float: left; float: left;
height: 50px !important; height: 50px !important;
@@ -74,21 +79,9 @@ onMounted(() => {
/* sub-menu item */ /* sub-menu item */
.topbar-menu.el-menu--horizontal > .el-sub-menu .el-sub-menu__title { .topbar-menu.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
float: left; float: left;
height: 62px !important;
line-height: 50px !important; line-height: 50px !important;
color: #303133 !important; color: #303133 !important;
padding: 0 5px !important; margin: 0 15px -3px!important;
margin: 0 20px -4px!important;
}
/* 背景色隐藏 */
.topbar-menu.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .topbar-menu.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .topbar-menu.el-menu--horizontal>.el-submenu .el-submenu__title:hover {
background-color: #ffffff;
}
/* 图标右间距 */
.topbar-menu .svg-icon {
margin-right: 4px;
} }
/* topbar more arrow */ /* topbar more arrow */