导航样式

微信图片_20230213102701.png

sidebar.scss文件中删除 min-width: $sideBarWidth
variables.scss

  --menuText: #777; //导航字默认颜色
  --menuActiveText: #fff; //导航字选中颜色
  $sideBarWidth: 270px; //导航宽度

app.vue

// 修改导航样式---------------------开始
.el-menu {
  .el-menu-item.is-active {
    background: linear-gradient(90deg, #1026f1 0%, #1bb1f2 100%);
    border-radius: 25px;
  }
  .el-submenu {
    margin: 5px 15px;
  }
  .el-menu-item {
    min-width: 1px !important;
    margin: 5px 15px;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    span {
      position: relative;
      top: -1px;
    }
    svg {
      position: relative;
      top: 2px;
    }
  }
  .svg-icon {
    font-size: 22px;
  }
  .el-menu-item.is-active span {
    color: #fff !important;
  }
  .el-menu-item:hover {
    background: linear-gradient(90deg, #1026f1 0%, #1bb1f2 100%);
    color: #fff !important;
    border-radius: 25px;
  }
  .el-submenu__title:hover {
    background: linear-gradient(90deg, #1026f1 0%, #1bb1f2 100%);
    color: #fff !important;
    border-radius: 25px;
  }
  .el-menu--inline .el-menu-item {
    margin: 5px 0;
    margin-left: 15px;
  }
}
// 修改导航样式---------------------结束