feat:调整左边栏

93c161cf · zhangleyuan · 41842c8b · 93c161cf · 93c161cf · 93c161cf
Commit 93c161cf authored May 24, 2021 by zhangleyuan
9 changed files
--- a/src/index.html
+++ b/src/index.html
 <!--
 * @Author: 吴文洁
 * @Date: 2020-08-24 12:20:57
- * @LastEditors: zhangleyuan
+ * @LastEditors: Please set LastEditors
- * @LastEditTime: 2021-05-10 13:41:52
+ * @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.

--- a/src/modules/home/Home.less
+++ b/src/modules/home/Home.less
 .home-page {
-  padding: 0 16px 16px;
+  // padding: 0 16px 16px;
  min-width: 1100px;
  position: relative;
  z-index:3;

--- a/src/modules/root/App.tsx
+++ b/src/modules/root/App.tsx
 /*
 * @Author: 吴文洁
 * @Date: 2019-07-10 10:30:49
- * @LastEditors: wufan
+ * @LastEditors: Please set LastEditors
- * @LastEditTime: 2021-03-26 16:13:48
+ * @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>
  )
 }

--- a/src/modules/root/Header.jsx
+++ b/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

--- a/src/modules/root/Header.less
+++ b/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;

--- a/src/modules/root/Main.less
+++ b/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;

--- a/src/modules/root/Menu.less
+++ b/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 {
+.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
-  background:@menu-bakg !important;
+  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;
+    width: calc(100% - 16px);
-    padding-right: 0;
+    padding-left: 20px;
-    width: 117px;
+    margin:12px  8px !important;
-    margin-bottom:0 !important;
+    &:hover{
-    &:first-child{
+      background: #F3F6FA;
-      margin-top:8px !important;
+      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;
+    &:hover{
-    .listType {
+      color: #fff !important; 
-      background: @active-color;
    }
  }
  &:hover {
    .ant-menu-item-active {
      color: #fff;
-      .listType {
-        background: #fff;
-      }
-    }
-    .ant-menu-item-selected {
-      .listType {
-        background: @active-color;
-      }
    }
  }
 }
--- a/src/modules/root/Menu.tsx
+++ b/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>
                  }

--- a/src/routes/config/menuList.tsx
+++ b/src/routes/config/menuList.tsx
 /*
 * @Author: yuananting
 * @Date: 2021-02-21 15:53:31
- * @LastEditors: yuananting
+ * @LastEditors: Please set LastEditors
- * @LastEditTime: 2021-03-27 15:20:42
+ * @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: "学院信息",