优化topbar顶部菜单样式

RuoYi

2025-12-18 873444dd0bcf718f8322dca198cbd5e7d9167ae5

优化topbar顶部菜单样式

 ruoyi-ui/src/assets/styles/ruoyi.scss

@@ -130,12 +130,10 @@
  border-radius: 4px;

}



/* el menu */

.el-menu-item,

.el-sub-menu {

  .svg-icon + span {

    margin-left: 5px;

  }

/* horizontal el menu */

.el-menu--horizontal .el-menu-item .svg-icon + span,

.el-menu--horizontal .el-submenu__title .svg-icon + span {

  margin-left: 3px;

}



.el-menu--horizontal .el-menu--popup {


 ruoyi-ui/src/assets/styles/sidebar.scss

@@ -116,6 +116,7 @@
      margin-left: 54px;

    }



    .el-menu:not(.el-menu--horizontal) {

    .submenu-title-noDropdown {

      padding: 0 !important;

      position: relative;

@@ -128,6 +129,7 @@
        }

      }

    }

    }



    .el-submenu {

      overflow: hidden;


 ruoyi-ui/src/layout/components/TopBar/index.vue

@@ -60,36 +60,22 @@
</script>

<style lang="scss">
.topbar-menu.el-menu--horizontal > .el-menu-item {
  float: left;
  height: 50px !important;
  line-height: 50px !important;
  color: #303133 !important;
  padding: 0 5px !important;
  margin: 0 10px !important;
/* menu item */
.topbar-menu.el-menu--horizontal .el-submenu__title, .topbar-menu.el-menu--horizontal .el-menu-item {
  padding: 0 10px !important;
}

.el-menu-item.is-active .svg-icon + span, .el-submenu.is-active .svg-icon + span{
  color: v-bind(theme);
}

.el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title {
  color: #303133 !important;
.el-menu--horizontal .el-menu--popup .el-menu-item:hover {
  background-color: #f5f7fa !important;
}

/* submenu item */
.topbar-menu.el-menu--horizontal > .el-submenu .el-submenu__title {
  float: left;
  height: 50px !important;
  height: 47px !important;
  line-height: 50px !important;
  color: #303133 !important;
  padding: 0 5px !important;
  margin: 0 10px !important;
}

/* 图标右间距 */
.topbar-menu .svg-icon {
  margin-right: 4px;
  color: #303133;
  margin: 0 15px !important;
}

/* topbar more arrow */ 
@@ -103,6 +89,10 @@
/* menu__title el-menu-item */
.topbar-menu.el-menu--horizontal .el-submenu__title, .topbar-menu.el-menu--horizontal .el-menu-item {
  height: 55px;
  padding: 0 15px;
}

.el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title{
  color: #303133;
}
</style>