yexuejc007/PlayEdu-backend
1
0
Fork 0
mirror of https://github.com/PlayEdu/backend synced 2025-06-23 06:12:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

左侧菜单样式

Browse Source
This commit is contained in:
none 2023-03-10 17:21:22 +08:00
parent b585766d84
commit 0a282cf93b
4 changed files with 70 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/compenents/header/index.tsx
View File

@ -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();

1
src/compenents/left-menu/index.module.less
View File

@ -2,6 +2,7 @@
width: 200px;
height: 100%;
background-color: #fff;
.App-logo {
width: 124px;
height: 40px;

6
src/compenents/left-menu/index.tsx
View File

@ -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
),

105
src/index.less
View File

@ -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;
}
}