Skip to content

X
xiaomai-cloud-class-web
Commit 8685b0da by zhangleyuan
Options

feat:修正左侧导航样式

parent 9d1acf6f
Showing with 41 additions and 28 deletions
src/modules/root/Menu.less
...@@ -13,22 +13,11 @@ ...@@ -13,22 +13,11 @@
background: @menu-bakg; background: @menu-bakg;
color: #333; color: #333;
.menu-type-icon{ .menu-type-icon{
position: absolute; margin:4px 0 4px 156px;
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; cursor: pointer;
.icon{ .icon{
font-size:11px; font-size:14px;
} }
display:none;
} }
.ant-menu { .ant-menu {
padding-left: 0 !important; padding-left: 0 !important;
...@@ -50,7 +39,6 @@ ...@@ -50,7 +39,6 @@
-webkit-flex: 1; -webkit-flex: 1;
cursor: default; cursor: default;
font-size: 16px; font-size: 16px;
margin-top: 16px;
height: calc(~'100% - 72px'); height: calc(~'100% - 72px');
overflow: auto; overflow: auto;
&::-webkit-scrollbar { &::-webkit-scrollbar {
...@@ -59,6 +47,11 @@ ...@@ -59,6 +47,11 @@
.icon { .icon {
margin-right: 20px margin-right: 20px
} }
.icon-img{
width:16px;
height:16px;
margin-right:16px;
}
.listType { .listType {
width: 5px; width: 5px;
height: 5px; height: 5px;
...@@ -113,6 +106,9 @@ ...@@ -113,6 +106,9 @@
&.left-container-vertical { &.left-container-vertical {
width: 62px; width: 62px;
.menu-type-icon{
margin:4px 0 4px 22px;
}
.left { .left {
.ant-menu-submenu-arrow{ .ant-menu-submenu-arrow{
display:none !important; display:none !important;
...@@ -122,11 +118,11 @@ ...@@ -122,11 +118,11 @@
.shink-footer { .shink-footer {
left: 74px; left: 74px;
} }
&:hover{ // &:hover{
.menu-type-icon{ // .menu-type-icon{
display:inline-block; // display:inline-block;
} // }
} // }
} }
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected { .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
background:@active-color !important; background:@active-color !important;
......
src/modules/root/Menu.tsx
...@@ -54,7 +54,7 @@ function Aside(props: any) { ...@@ -54,7 +54,7 @@ function Aside(props: any) {
: "left-container left-container-vertical" : "left-container left-container-vertical"
} }
> >
<span className="menu-type-icon" onClick={handleMenu}> <div className="menu-type-icon" onClick={handleMenu}>
{menuType ? ( {menuType ? (
<span <span
className="icon iconfont" className="icon iconfont"
...@@ -68,7 +68,7 @@ function Aside(props: any) { ...@@ -68,7 +68,7 @@ function Aside(props: any) {
&#xe615; &#xe615;
</span> </span>
)} )}
</span> </div>
<div className="left"> <div className="left">
<div className="nav"> <div className="nav">
...@@ -86,7 +86,8 @@ function Aside(props: any) { ...@@ -86,7 +86,8 @@ function Aside(props: any) {
} }
if (item.children) { if (item.children) {
return <SubMenu key={item.groupCode} style={{ marginTop: 0 }} className="first-menu-item" title={<div > return <SubMenu key={item.groupCode} style={{ marginTop: 0 }} className="first-menu-item" title={<div >
<span style={{ marginRight: 16 }} className="iconfont icon" dangerouslySetInnerHTML={{ __html:item.icon}}></span> {/* <span style={{ marginRight: 16 }} className="iconfont icon" dangerouslySetInnerHTML={{ __html:item.icon}}></span> */}
<img src={item.img} className="icon-img"></img>
{menuType && {menuType &&
<span>{item.groupName}</span> <span>{item.groupName}</span>
}</div> }</div>
...@@ -105,8 +106,14 @@ function Aside(props: any) { ...@@ -105,8 +106,14 @@ function Aside(props: any) {
</SubMenu> </SubMenu>
} else { } else {
return <Menu.Item onClick={() => { toggleMenu(item) }} key={item.groupCode} className="first-menu-item"> return <Menu.Item onClick={() => { toggleMenu(item) }} key={item.groupCode} className="first-menu-item">
{/* <span style={{ marginRight: 16 }} className="iconfont icon" dangerouslySetInnerHTML={{ __html:item.icon}}></span> */}
{selectKey === item.groupCode ?
<img src={item.selectImg} className="icon-img"></img>
:
<img src={item.img} className="icon-img"></img>
}
<span style={{ marginRight: 16 }} className="iconfont icon" dangerouslySetInnerHTML={{ __html:item.icon}}></span>
{menuType && {menuType &&
<span>{item.groupName}</span> <span>{item.groupName}</span>
} }
......
src/routes/config/menuList.tsx
/* /*
* @Author: yuananting * @Author: yuananting
* @Date: 2021-02-21 15:53:31 * @Date: 2021-02-21 15:53:31
* @LastEditors: wufan * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-05-27 10:23:30 * @LastEditTime: 2021-05-30 11:00:09
* @Description: 描述一下咯 * @Description: 描述一下咯
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -11,12 +11,15 @@ export const menuList: any = [ ...@@ -11,12 +11,15 @@ export const menuList: any = [
groupName: "中心首页", groupName: "中心首页",
groupCode: "CloudPage", groupCode: "CloudPage",
icon: '&#xe8a7;', icon: '&#xe8a7;',
link: '/home' link: '/home',
img:'https://image.xiaomaiketang.com/xm/ni3BFJDT3a.png',
selectImg:'https://image.xiaomaiketang.com/xm/GRDztTAWaM.png'
}, },
{ {
groupName: "课程管理", groupName: "课程管理",
groupCode: "CloudCourse", groupCode: "CloudCourse",
icon: '&#xe8a5;', icon: '&#xe8a5;',
img:'https://image.xiaomaiketang.com/xm/jBGrGjM7HQ.png',
children: [ children: [
{ {
groupName: "直播课", groupName: "直播课",
...@@ -44,18 +47,23 @@ export const menuList: any = [ ...@@ -44,18 +47,23 @@ export const menuList: any = [
groupName: "知识库", groupName: "知识库",
groupCode: "CloudKnowledge", groupCode: "CloudKnowledge",
icon: '&#xe8a8;', icon: '&#xe8a8;',
link: '/knowledge-base' link: '/knowledge-base',
img:'https://image.xiaomaiketang.com/xm/8sbP5rGQWh.png',
selectImg:'https://image.xiaomaiketang.com/xm/hJKCfibC22.png'
}, },
{ {
groupName: "资料云盘", groupName: "资料云盘",
groupCode: "CloudDisk", groupCode: "CloudDisk",
icon: '&#xe8aa;', icon: '&#xe8aa;',
link: '/resource-disk' link: '/resource-disk',
img:'https://image.xiaomaiketang.com/xm/zGKbXJPzXx.png',
selectImg:'https://image.xiaomaiketang.com/xm/5sN4MzjxYc.png',
}, },
{ {
groupName: "培训管理", groupName: "培训管理",
groupCode: "TrainManage", groupCode: "TrainManage",
icon: '&#xe8a6;', icon: '&#xe8a6;',
img:'https://image.xiaomaiketang.com/xm/Yy6pZ6G6kS.png',
children: [ children: [
{ {
groupName: "培训计划", groupName: "培训计划",
...@@ -68,6 +76,7 @@ export const menuList: any = [ ...@@ -68,6 +76,7 @@ export const menuList: any = [
groupName: "助学工具", groupName: "助学工具",
groupCode: "AidTool", groupCode: "AidTool",
icon: '&#xe8a9;', icon: '&#xe8a9;',
img:'https://image.xiaomaiketang.com/xm/xsma4hx3b3.png',
children: [ children: [
{ {
groupName: "题库", groupName: "题库",
...@@ -90,6 +99,7 @@ export const menuList: any = [ ...@@ -90,6 +99,7 @@ export const menuList: any = [
groupName: "学院管理", groupName: "学院管理",
groupCode: "CloudShop", groupCode: "CloudShop",
icon: '&#xe8a4;', icon: '&#xe8a4;',
img:'https://image.xiaomaiketang.com/xm/Q8i5RSMKNc.png',
children: [ children: [
{ {
groupName: "学院信息", 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