style:更改侧边栏的颜色

src/modules/root/Menu.jsx

@@ -2,7 +2,17 @@ import React from "react";
 import { HashRouter as Router, withRouter, Link } from "react-router-dom";
 import { HashRouter as Router, withRouter, Link } from "react-router-dom";
 import "./Menu.less";
 import "./Menu.less";
 import classNames from "classnames";
 import classNames from "classnames";
-import { Menu, Icon, Modal, Badge } from "antd";
+import { Menu, Modal, Badge } from "antd";
+import {
+  AppstoreOutlined,
+  MenuUnfoldOutlined,
+  MenuFoldOutlined,
+  PieChartOutlined,
+  DesktopOutlined,
+  ContainerOutlined,
+  PlayCircleOutlined
+} from '@ant-design/icons';
+
 import Bus from '@/core/bus'
 import Bus from '@/core/bus'
 const MenuItem = Menu.Item;
 const MenuItem = Menu.Item;
 
 
@@ -48,49 +58,50 @@ class Menus extends React.Component {
                 key="1"
                 key="1"
                 title={
                 title={
                   <span>
                   <span>
-                    <Icon type="mail" />
+                    {/* <Icon type="mail" /> */}
                     {!!this.state.menuType &&(
                     {!!this.state.menuType &&(
                       <span>课程管理</span>
                       <span>课程管理</span>
                     )}
                     )}
                   </span>
                   </span>
                 }
                 }
+                icon={<ContainerOutlined />}
               >
               >
                   <Menu.Item key="1-1">
                   <Menu.Item key="1-1">
-                    <span>直播课</span>
+                 
+                    <span  className="name">直播课</span>
                   </Menu.Item>
                   </Menu.Item>
                   <Menu.Item key="1-2">
                   <Menu.Item key="1-2">
-                    <span>视频课</span>
+                    <span  className="name">视频课</span>
                   </Menu.Item>
                   </Menu.Item>
               </SubMenu>
               </SubMenu>
 
 
-              <Menu.Item key="2">
-                <Icon type="pie-chart" />
+              <Menu.Item key="2" icon={<PlayCircleOutlined/>}>
                 {!!this.state.menuType &&(
                 {!!this.state.menuType &&(
-                  <span>资料云盘</span>
+                  <span  className="name">资料云盘</span>
                 )}
                 )}
               </Menu.Item>
               </Menu.Item>
               <SubMenu
               <SubMenu
                 key="3"
                 key="3"
                 title={
                 title={
                   <span>
                   <span>
-                    <Icon type="mail" />
                     {!!this.state.menuType &&(
                     {!!this.state.menuType &&(
-                      <span>课程管理</span>
+                      <span >课程管理</span>
                     )}
                     )}
                   </span>
                   </span>
                 }
                 }
+                icon={<PlayCircleOutlined/>}
               >
               >
                   <Menu.Item key="3-1">
                   <Menu.Item key="3-1">
-                    <span>讲师管理</span>
+                    <span  className="name">讲师管理</span>
                   </Menu.Item>
                   </Menu.Item>
                   <Menu.Item key="3-2">
                   <Menu.Item key="3-2">
-                    <span>用户管理</span>
+                    <span  className="name">用户管理</span>
                   </Menu.Item>
                   </Menu.Item>
                   <Menu.Item key="3-3">
                   <Menu.Item key="3-3">
-                    <span>课程分类</span>
+                    <span  className="name">课程分类</span>
                   </Menu.Item>
                   </Menu.Item>
                   <Menu.Item key="3-4">
                   <Menu.Item key="3-4">
-                    <span>店铺装修</span>
+                    <span  className="name">店铺装修</span>
                   </Menu.Item>
                   </Menu.Item>
               </SubMenu>
               </SubMenu>
             </Menu>
             </Menu>

src/modules/root/Menu.less

 @import '../../core/variables.less';
 @import '../../core/variables.less';
 
 
 @top-height: 50px;
 @top-height: 50px;
-@menu-bakg: #21242e;
-@active-color: #ff8534;
+@menu-bakg: #2B2E37;
+@active-color: #FFB714;
 
 
 .left-container {
 .left-container {
   position: absolute;
   position: absolute;
@@ -13,7 +13,6 @@
   width: @xm-left-width;
   width: @xm-left-width;
   background: @menu-bakg;
   background: @menu-bakg;
   color: #FFFFFF;
   color: #FFFFFF;
-
   .ant-menu {
   .ant-menu {
     padding-left: 0 !important;
     padding-left: 0 !important;
     background: transparent;
     background: transparent;
@@ -43,11 +42,9 @@
       .icon {
       .icon {
         margin-right: 20px
         margin-right: 20px
       }
       }
-
       .fistLevel {
       .fistLevel {
         position: relative;
         position: relative;
         &:hover {
         &:hover {
-
           .ant-menu-submenu-title,
           .ant-menu-submenu-title,
           .home-title {
           .home-title {
             color: #fff !important;
             color: #fff !important;
@@ -528,7 +525,9 @@
     }
     }
   }
   }
 }
 }
-
+.ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected {
+  background: none !important;
+}
 .v4-to-v5-update-modal {
 .v4-to-v5-update-modal {
   .ant-modal-body {
   .ant-modal-body {
     padding: 0 !important;
     padding: 0 !important;