修改element-admin侧边栏

来自项目开发中的需求

实现的界面，渐变。如图所示：

具体步骤如下：

1.在这个样式界面中

修改如下部分的代码

$menuText:#bfcbd9;
$menuActiveText:#fff;
$subMenuActiveText:#f4f4f5;//https://github.com/ElemeFE/element/issues/12951

$menuBg:#2A49A1;
$menuHover:#4880F1;

$subMenuBg:#2F569B;//打开子目录
$subMenuHover:#4880F1;

2.在这个侧边栏样式文件中

添加本段代码：这段代码是点击后的样式，属于高亮。

.el-menu-item.is-active{
  background-color: #2C50A7 !important;
}

修改如下代码

  .sidebar-container {
    transition: width 0.28s;
    width: $sideBarWidth !important;
    //注释掉这段代码 background-color: $menuBg;
   //添加下方这两段代码
    background: linear-gradient(to bottom, $menuBg, #3975C6);
    box-shadow: 2px 0 5px #00000040;

3.在这个文件中

添加如下代码：

::v-deep .el-menu {
  background-color: transparent !important;
}

4.最后一步：

把这个界面中的

  //把这句话删掉 :background-color="variables.menuBg"

经过以上步骤即可实现对element-admin侧边导航栏样式的修改。