diff --git a/src/compenents/header/index.tsx b/src/compenents/header/index.tsx
index bdae660..d9b864f 100644
--- a/src/compenents/header/index.tsx
+++ b/src/compenents/header/index.tsx
@@ -6,7 +6,6 @@ import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { LoginOutActionCreator } from "../../store/user/userActions";
 import avatar from "../../assets/images/commen/avatar.png";
-import "../../assets/iconfont/iconfont.css";
 
 export const Header: React.FC = () => {
   const dispatch = useDispatch();
diff --git a/src/compenents/left-menu/index.module.less b/src/compenents/left-menu/index.module.less
index eb45f03..77ea9cf 100644
--- a/src/compenents/left-menu/index.module.less
+++ b/src/compenents/left-menu/index.module.less
@@ -2,6 +2,7 @@
   width: 200px;
   height: 100%;
   background-color: #fff;
+
   .App-logo {
     width: 124px;
     height: 40px;
diff --git a/src/compenents/left-menu/index.tsx b/src/compenents/left-menu/index.tsx
index 1826d15..bea96a4 100644
--- a/src/compenents/left-menu/index.tsx
+++ b/src/compenents/left-menu/index.tsx
@@ -1,10 +1,8 @@
 import React, { useEffect } from "react";
 import { Menu } from "antd";
-//导出路由跳转hooks函数
-import { useNavigate, Link, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import styles from "./index.module.less";
 import logo from "../../assets/logo.png";
-import "../../assets/iconfont/iconfont.css";
 
 function getItem(label: any, key: any, icon: any, children: any, type: any) {
   return {
@@ -19,7 +17,7 @@ const items = [
   getItem(
     "首页概览",
     "/",
-    <i className="iconfont icon-icon-home" />,
+    <i className={`iconfont icon-icon-home`} />,
     null,
     null
   ),
diff --git a/src/index.less b/src/index.less
index a01a5f3..0be2a5d 100644
--- a/src/index.less
+++ b/src/index.less
@@ -1,3 +1,7 @@
+@import "./assets/iconfont/iconfont.css";
+
+@primaryColor: #ff4d4f;
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
@@ -98,7 +102,7 @@ code {
 }
 
 .primary {
-  color: #ff4d4f;
+  color: @primaryColor;
 }
 
 .c-yellow {
@@ -110,7 +114,7 @@ code {
 }
 
 .c-red {
-  color: #ff4d4f;
+  color: @primaryColor;
 }
 
 .form-avatar {
@@ -142,6 +146,7 @@ code {
   box-sizing: border-box;
   padding: 24px;
   border-radius: 12px;
+
   &.only {
     min-height: calc(100vh - 276px);
   }
@@ -155,12 +160,40 @@ code {
   }
 }
 
+.ant-menu,
+.ant-menu-sub,
+.ant-menu-inline {
+  background-color: #ffffff !important;
+}
+
 .ant-menu-item {
   width: calc(100% - 32px) !important;
   margin-left: 16px !important;
   margin-right: 16px !important;
   margin-top: 8px !important;
   margin-bottom: 8px !important;
+  height: 48px !important;
+
+  .ant-menu-item-icon {
+    &.iconfont {
+      color: rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  &.ant-menu-item-active {
+    background-color: rgba(@primaryColor, 0.1) !important;
+  }
+
+  &.ant-menu-item-selected {
+    background-color: @primaryColor!important;
+    color: white;
+
+    .ant-menu-item-icon {
+      &.iconfont {
+        color: white;
+      }
+    }
+  }
 }
 
 .ant-menu-submenu {
@@ -169,16 +202,30 @@ code {
   margin-right: 12px !important;
   margin-top: 6px !important;
   margin-bottom: 6px !important;
-}
 
-.ant-menu,
-.ant-menu-sub,
-.ant-menu-inline {
-  background-color: #ffffff !important;
-}
+  .ant-menu-item-icon {
+    &.iconfont {
+      color: rgba(0, 0, 0, 0.3);
+    }
+  }
 
-.ant-menu-item {
-  height: 48px !important;
+  &.ant-menu-submenu-active {
+    .ant-menu-submenu-title {
+      background-color: rgba(@primaryColor, 0.1) !important;
+    }
+  }
+
+  &.ant-menu-submenu-selected {
+    .ant-menu-submenu-title {
+      color: @primaryColor !important;
+
+      .ant-menu-item-icon {
+        &.iconfont {
+          color: @primaryColor;
+        }
+      }
+    }
+  }
 }
 
 .ant-menu-submenu-title {
@@ -189,23 +236,6 @@ code {
   height: 40px !important;
 }
 
-.ant-menu-submenu-active > .ant-menu-submenu-title {
-  background-color: rgba(#ff4d4f, 0.1) !important;
-}
-
-.ant-menu-item-active {
-  background-color: rgba(#ff4d4f, 0.1) !important;
-}
-
-.ant-menu-item-selected {
-  background-color: #ff4d4f !important;
-  color: white !important;
-}
-
-.ant-menu-submenu-selected > .ant-menu-submenu-title {
-  color: #ff4d4f !important;
-}
-
 textarea.ant-input {
   vertical-align: middle;
 }
@@ -226,7 +256,7 @@ textarea.ant-input {
 }
 
 .ant-dropdown-menu-item:hover {
-  background-color: rgba(#ff4d4f, 0.1) !important;
+  background-color: rgba(@primaryColor, 0.1) !important;
 }
 
 .ant-dropdown-menu-item {
@@ -239,7 +269,7 @@ textarea.ant-input {
 .b-link {
   padding: 0 !important;
   &:hover {
-    color: rgba(#ff4d4f, 0.8) !important;
+    color: rgba(@primaryColor, 0.8) !important;
   }
 }