diff --git a/src/assets/iconfont/iconfont.css b/src/assets/iconfont/iconfont.css new file mode 100644 index 0000000..a99ab4e --- /dev/null +++ b/src/assets/iconfont/iconfont.css @@ -0,0 +1,51 @@ +@font-face { + font-family: "iconfont"; /* Project id 3943555 */ + src: url('iconfont.woff2?t=1678435002469') format('woff2'), + url('iconfont.woff?t=1678435002469') format('woff'), + url('iconfont.ttf?t=1678435002469') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-icon-video:before { + content: "\e73f"; +} + +.icon-icon-home:before { + content: "\e737"; +} + +.icon-icon-category:before { + content: "\e738"; +} + +.icon-icon-file:before { + content: "\e739"; +} + +.icon-icon-study:before { + content: "\e73a"; +} + +.icon-icon-user:before { + content: "\e73b"; +} + +.icon-icon-setting:before { + content: "\e73c"; +} + +.icon-icon-password:before { + content: "\e73d"; +} + +.icon-a-icon-logout:before { + content: "\e73e"; +} + diff --git a/src/assets/iconfont/iconfont.ttf b/src/assets/iconfont/iconfont.ttf new file mode 100644 index 0000000..7c1f649 Binary files /dev/null and b/src/assets/iconfont/iconfont.ttf differ diff --git a/src/assets/iconfont/iconfont.woff b/src/assets/iconfont/iconfont.woff new file mode 100644 index 0000000..c14bf3c Binary files /dev/null and b/src/assets/iconfont/iconfont.woff differ diff --git a/src/assets/iconfont/iconfont.woff2 b/src/assets/iconfont/iconfont.woff2 new file mode 100644 index 0000000..5eb0809 Binary files /dev/null and b/src/assets/iconfont/iconfont.woff2 differ diff --git a/src/compenents/header/index.tsx b/src/compenents/header/index.tsx index 1ab6b5c..e6c6f31 100644 --- a/src/compenents/header/index.tsx +++ b/src/compenents/header/index.tsx @@ -6,11 +6,7 @@ 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 { createFromIconfontCN } from "@ant-design/icons"; - -const IconFont = createFromIconfontCN({ - scriptUrl: "//at.alicdn.com/t/c/font_3943555_yvbihmb40xn.js", -}); +import "../../assets/iconfont/iconfont.css"; export const Header: React.FC = () => { const dispatch = useDispatch(); @@ -29,12 +25,12 @@ export const Header: React.FC = () => { { label: "修改密码", key: "change_password", - icon: , + icon: , }, { label: "退出登录", key: "login_out", - icon: , + icon: , }, ]; return ( diff --git a/src/compenents/left-menu/index.tsx b/src/compenents/left-menu/index.tsx index 2c617e1..4931c25 100644 --- a/src/compenents/left-menu/index.tsx +++ b/src/compenents/left-menu/index.tsx @@ -1,14 +1,10 @@ import React, { useEffect } from "react"; -import { createFromIconfontCN } from "@ant-design/icons"; import { Menu } from "antd"; //导出路由跳转hooks函数 import { useNavigate, Link, useLocation } from "react-router-dom"; import styles from "./index.module.less"; import logo from "../../assets/logo.png"; - -const IconFont = createFromIconfontCN({ - scriptUrl: "//at.alicdn.com/t/c/font_3943555_yvbihmb40xn.js", -}); +import "../../assets/iconfont/iconfont.css"; function getItem(label: any, key: any, icon: any, children: any, type: any) { return { @@ -20,18 +16,24 @@ function getItem(label: any, key: any, icon: any, children: any, type: any) { }; } const items = [ - getItem("首页概览", "/", , null, null), + getItem( + "首页概览", + "/", + , + null, + null + ), getItem( "分类管理", "/resource-category", - , + , null, null ), getItem( "资源管理", "3", - , + , [ getItem("视频", "/videos", null, null, null), getItem("图片", "/images", null, null, null), @@ -41,14 +43,14 @@ const items = [ getItem( "课程中心", "4", - , + , [getItem("线上课", "/course", null, null, null)], null ), getItem( "学员管理", "5", - , + , [ getItem("学员", "/member", null, null, null), getItem("部门", "/department", null, null, null), @@ -58,7 +60,7 @@ const items = [ getItem( "系统设置", "6", - , + , [ getItem("管理人员", "/system/administrator", null, null, null), getItem("系统配置", "/system/index", null, null, null), diff --git a/src/index.less b/src/index.less index 24b39e6..540b414 100644 --- a/src/index.less +++ b/src/index.less @@ -28,7 +28,7 @@ code { margin-right: 16px; } -.mb-10{ +.mb-10 { margin-bottom: 10px; } @@ -109,10 +109,6 @@ code { color: #04c877; } -.c-gray { - color: #999999; -} - .c-red { color: #ff4d4f; } @@ -157,6 +153,10 @@ code { margin-right: 16px !important; margin-top: 8px !important; margin-bottom: 8px !important; + color: rgba(#333333, 0.3); + .ant-menu-title-content { + color: #333333; + } } .ant-menu-submenu { @@ -165,6 +165,10 @@ code { margin-right: 12px !important; margin-top: 6px !important; margin-bottom: 6px !important; + color: rgba(#333333, 0.3); + .ant-menu-title-content { + color: #333333; + } } .ant-menu, @@ -187,15 +191,24 @@ code { .ant-menu-submenu-active > .ant-menu-submenu-title { background-color: rgba(#ff4d4f, 0.1) !important; + .iconfont { + color: rgba(#333333, 0.3); + } } .ant-menu-item-active { background-color: rgba(#ff4d4f, 0.1) !important; + .iconfont { + color: rgba(#333333, 0.3) !important; + } } .ant-menu-item-selected { background-color: #ff4d4f !important; color: white !important; + .ant-menu-title-content { + color: white; + } } .ant-menu-submenu-selected > .ant-menu-submenu-title { @@ -238,3 +251,7 @@ textarea.ant-input { color: rgba(#ff4d4f, 0.8) !important; } } + +.c-gray { + color: rgba(#333333, 0.3); +}