From 0a282cf93b45bdf08989fbafe845920539495c32 Mon Sep 17 00:00:00 2001
From: none <none>
Date: Fri, 10 Mar 2023 17:21:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A6=E4=BE=A7=E8=8F=9C=E5=8D=95=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/compenents/header/index.tsx            |   1 -
 src/compenents/left-menu/index.module.less |   1 +
 src/compenents/left-menu/index.tsx         |   6 +-
 src/index.less                             | 105 +++++++++++++--------
 4 files changed, 70 insertions(+), 43 deletions(-)

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 a143aac..919f890 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 {
@@ -109,9 +113,8 @@ code {
   color: #04c877;
 }
 
-
 .c-red {
-  color: #ff4d4f;
+  color: @primaryColor;
 }
 
 .form-avatar {
@@ -143,27 +146,12 @@ code {
   box-sizing: border-box;
   padding: 24px;
   border-radius: 12px;
+
   &.only {
     min-height: calc(100vh - 276px);
   }
 }
 
-.ant-menu-item {
-  width: calc(100% - 32px) !important;
-  margin-left: 16px !important;
-  margin-right: 16px !important;
-  margin-top: 8px !important;
-  margin-bottom: 8px !important;
-}
-
-.ant-menu-submenu {
-  width: calc(100% - 24px) !important;
-  margin-left: 12px !important;
-  margin-right: 12px !important;
-  margin-top: 6px !important;
-  margin-bottom: 6px !important;
-}
-
 .ant-menu,
 .ant-menu-sub,
 .ant-menu-inline {
@@ -171,7 +159,65 @@ code {
 }
 
 .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 {
+  width: calc(100% - 24px) !important;
+  margin-left: 12px !important;
+  margin-right: 12px !important;
+  margin-top: 6px !important;
+  margin-bottom: 6px !important;
+
+  .ant-menu-item-icon {
+    &.iconfont {
+      color: rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  &.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 {
@@ -182,23 +228,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;
 }
@@ -219,7 +248,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 {
@@ -232,7 +261,7 @@ textarea.ant-input {
 .b-link {
   padding: 0 !important;
   &:hover {
-    color: rgba(#ff4d4f, 0.8) !important;
+    color: rgba(@primaryColor, 0.8) !important;
   }
 }