Skip to content

X
xiaomai-cloud-class-web
Commit 93c161cf by zhangleyuan
Options

feat:调整左边栏

parent 41842c8b
Showing with 99 additions and 76 deletions
src/index.html
<!--
* @Author: 吴文洁
* @Date: 2020-08-24 12:20:57
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-05-10 13:41:52
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-05-24 15:39:59
* @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有
-->
......@@ -25,7 +25,7 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_vs61tfrogho.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_jnqch2ijn6e.css">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
......
src/modules/home/Home.less
.home-page {
padding: 0 16px 16px;
// padding: 0 16px 16px;
min-width: 1100px;
position: relative;
z-index:3;
......
src/modules/root/App.tsx
/*
* @Author: 吴文洁
* @Date: 2019-07-10 10:30:49
* @LastEditors: wufan
* @LastEditTime: 2021-03-26 16:13:48
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-05-24 16:29:05
* @Description:
*/
import React, { useContext, useEffect, useState } from 'react';
......@@ -127,7 +127,7 @@ const App: React.FC = (props: any) => {
<ConfigProvider locale={zhCN} autoInsertSpaceInButton={false}>
<Main menuType={menuType} />
</ConfigProvider>
<Menu menuType={menuType} />
<Menu menuType={menuType} handleMenuType={handleMenuType}/>
</div>
)
}
......
src/modules/root/Header.jsx
......@@ -2,7 +2,7 @@
* @Author: 吴文洁
* @Date: 2019-09-10 18:26:03
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-05-24 11:25:56
* @LastEditTime: 2021-05-24 16:51:01
* @Description:
*/
import React, { useRef, useContext, useEffect, useState } from "react";
......@@ -221,21 +221,6 @@ function Header(props) {
<div>
<img src='https://image.xiaomaiketang.com/xm/WEsMPAYxAs.png' className="logo" alt="" />
</div>
{menuType ? (
<span
className="icon iconfont cursor ml20 handLike"
onClick={handleMenu}
>
&#xe83d;
</span>
) : (
<span
className="icon iconfont cursor ml20 handLike"
onClick={handleMenu}
>
&#xe615;
</span>
)}
<div className="message-help">
{list.length ? (
<ClickOutside
......
src/modules/root/Header.less
......@@ -16,6 +16,7 @@
background: linear-gradient(180deg, #2966FF 0%, rgba(41, 102, 255, 0.82) 29%, rgba(41, 102, 255, 0.58) 55%, rgba(41, 102, 255, 0.27) 77%, rgba(7, 78, 255, 0) 100%);
position:absolute;
z-index:2;
top:59px;
}
.logo {
display: inline-block;
......
src/modules/root/Main.less
......@@ -14,6 +14,7 @@
bottom: 0;
background-color: #f0f2f5;
overflow-x: scroll;
padding:0 16px;
// z-index: 1;
&.right-container-vertical{
left:@xm-left-min-width;
......
src/modules/root/Menu.less
......@@ -12,9 +12,27 @@
width: @xm-left-width;
background: @menu-bakg;
color: #333;
.menu-type-icon{
position: absolute;
display:inline-block;
width: 24px;
height: 24px;
background: #FFFFFF;
border-radius: 50%;
border: 1px solid #F1F3F6;
right:-12px;
top:29px;
text-align:center;
z-index:3;
cursor: pointer;
.icon{
font-size:11px;
}
display:none;
}
.ant-menu {
padding-left: 0 !important;
// background: transparent;
color: #333;
background: #FFF !important;
}
.left {
......@@ -50,12 +68,31 @@
left: 38px;
position: absolute;
}
.ant-menu-item{
padding-left: 13px !important;
padding-right: 0px;
margin: 6px 8px;
width: calc(100% - 15px);
&:hover{
background: #F3F6FA;
border-radius: 2px;
color:#333;
}
}
.ant-menu-item-selected{
color:@active-color;
background-color:@active-color;
color:#FFF;
&:hover{
color:#FFF;
}
}
.ant-menu-sub{
.ant-menu-submenu{
.ant-menu-submenu-title{
margin:6px 8px;
padding-left:13px !important;
}
.ant-menu-item{
padding-left:58px
padding-left:46px !important;
}
}
......@@ -84,10 +121,14 @@
}
.shink-footer {
left: 74px;
&:hover{
.menu-type-icon{
display:inline-block;
}
}
}
.ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected {
background:@menu-bakg !important;
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
background:@active-color !important;
}
.ant-menu.ant-menu-dark, .ant-menu-dark .ant-menu-sub, .ant-menu.ant-menu-dark .ant-menu-sub{
......@@ -96,55 +137,32 @@
.ant-menu-submenu-popup>.ant-menu {
background: @menu-bakg !important;
color: #9A9DA7;
color: #333;
padding-left: 15px;
width: 132px;
min-width: auto;
li {
padding-left: 22px;
padding-right: 0;
width: 117px;
margin-bottom:0 !important;
&:first-child{
margin-top:8px !important;
width: calc(100% - 16px);
padding-left: 20px;
margin:12px 8px !important;
&:hover{
background: #F3F6FA;
border-radius: 2px;
color:#333 !important;
}
&:last-child{
margin-bottom:8px !important;
}
}
.listType {
width: 5px;
height: 5px;
background: #9A9DA7;
border-radius: 50%;
top: 18px;
left: 10px;
position: absolute;
}
.ant-menu-item-selected {
background: @menu-bakg;
background: @active-color;
color: #fff;
.listType {
background: @active-color;
&:hover{
color: #fff !important;
}
}
&:hover {
.ant-menu-item-active {
color: #fff;
.listType {
background: #fff;
}
}
.ant-menu-item-selected {
.listType {
background: @active-color;
}
}
}
}
src/modules/root/Menu.tsx
......@@ -10,7 +10,7 @@ import "./Menu.less";
const { SubMenu } = Menu;
function Aside(props: any) {
const {menuType} = props
const {menuType,handleMenuType}= props
const ctx: any = useContext(XMContext);
const [selectKey, setSelectKey] = useState();
const [openKeys, setOpenKeys] = useState(['']);
......@@ -38,6 +38,10 @@ function Aside(props: any) {
function onOpenChange(openKeys:any){
setOpenKeys(_.last(openKeys, 1))
}
function handleMenu() {
handleMenuType();
}
return (
<div
id="left-container"
......@@ -47,6 +51,21 @@ function Aside(props: any) {
: "left-container left-container-vertical"
}
>
<span className="menu-type-icon" onClick={handleMenu}>
{menuType ? (
<span
className="icon iconfont"
>
&#xe83d;
</span>
) : (
<span
className="icon iconfont"
>
&#xe615;
</span>
)}
</span>
<div className="left">
<div className="nav">
......@@ -66,7 +85,7 @@ function Aside(props: any) {
}
if (item.children) {
return <SubMenu key={item.groupCode} style={{ marginTop: 0 }} className="first-menu-item" title={<div >
<span style={{ marginRight: 6 }} className="iconfont icon" dangerouslySetInnerHTML={{ __html:item.icon}}></span>
<span style={{ marginRight: 16 }} className="iconfont icon" dangerouslySetInnerHTML={{ __html:item.icon}}></span>
{menuType &&
<span>{item.groupName}</span>
}</div>
......@@ -77,7 +96,6 @@ function Aside(props: any) {
return null;
}
return <Menu.Item onClick={() => { toggleMenu(_item) }} style={{ marginTop: 0 }} key={_item.groupCode + index + _index}>
<span className="listType"></span>
<span className="name">{_item.groupName}</span>
</Menu.Item>
......@@ -87,7 +105,7 @@ function Aside(props: any) {
} else {
return <Menu.Item onClick={() => { toggleMenu(item) }} key={item.groupCode} className="first-menu-item">
<span style={{ marginRight: 6 }} className="iconfont icon" dangerouslySetInnerHTML={{ __html:item.icon}}></span>
<span style={{ marginRight: 16 }} className="iconfont icon" dangerouslySetInnerHTML={{ __html:item.icon}}></span>
{menuType &&
<span>{item.groupName}</span>
}
......
src/routes/config/menuList.tsx
/*
* @Author: yuananting
* @Date: 2021-02-21 15:53:31
* @LastEditors: yuananting
* @LastEditTime: 2021-03-27 15:20:42
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-05-24 15:45:36
* @Description: 描述一下咯
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -10,13 +10,13 @@ export const menuList: any = [
{
groupName: "中心首页",
groupCode: "CloudPage",
icon: '&#xe6b7;',
icon: '&#xe8a7;',
link: '/home'
},
{
groupName: "课程管理",
groupCode: "CloudCourse",
icon: '&#xe831;',
icon: '&#xe8a5;',
children: [
{
groupName: "直播课",
......@@ -38,19 +38,19 @@ export const menuList: any = [
{
groupName: "知识库",
groupCode: "CloudKnowledge",
icon: '&#xe840;',
icon: '&#xe8a8;',
link: '/knowledge-base'
},
{
groupName: "资料云盘",
groupCode: "CloudDisk",
icon: '&#xe83b;',
icon: '&#xe8aa;',
link: '/resource-disk'
},
{
groupName: "培训管理",
groupCode: "TrainManage",
icon: '&#xe863;',
icon: '&#xe8a6;',
children: [
{
groupName: "培训计划",
......@@ -62,7 +62,7 @@ export const menuList: any = [
{
groupName: "助学工具",
groupCode: "AidTool",
icon: '&#xe828;',
icon: '&#xe8a9;',
children: [
{
groupName: "题库",
......@@ -84,7 +84,7 @@ export const menuList: any = [
{
groupName: "学院管理",
groupCode: "CloudShop",
icon: '&#xe82e;',
icon: '&#xe8a4;',
children: [
{
groupName: "学院信息",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment