Skip to content

X
xiaomai-cloud-class-web
Commit db5a63c0 by zhangleyuan
Options

style:调整左侧导航栏的的样式

parent 8cbd2a07
Showing with 48 additions and 579 deletions
src/index.html
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ 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="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_1wpr50mnvdo.css"> <link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_128twwfsj82.css">
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
......
src/modules/root/Header.jsx
...@@ -59,11 +59,12 @@ class Header extends React.Component { ...@@ -59,11 +59,12 @@ class Header extends React.Component {
</div> </div>
{this.state.menuType ? ( {this.state.menuType ? (
<span className="icon iconfont cursor ml20 handLike" onClick={this.handleMenu}> <span className="icon iconfont cursor ml20 handLike" onClick={this.handleMenu}>
&#xe7ff;{' '} &#xe83d;{' '}
</span> </span>
) : ( ) : (
<span className="icon iconfont cursor ml20 handLike" onClick={this.handleMenu}> <span className="icon iconfont cursor ml20 handLike" onClick={this.handleMenu}>
&#xe7fe; &#xe615;
</span> </span>
)} )}
<div className="message-help"> <div className="message-help">
......
src/modules/root/Menu.jsx
...@@ -57,14 +57,21 @@ class Menus extends React.Component { ...@@ -57,14 +57,21 @@ class Menus extends React.Component {
<SubMenu <SubMenu
key="1" key="1"
title={ title={
<span> <span
{/* <Icon type="mail" /> */} >
{!!this.state.menuType &&( <span className="title">
<span>课程管理</span> <span
)} className="iconfont icon"
dangerouslySetInnerHTML={{ __html: "&#xe831;" }}
></span>
{!!this.state.menuType && (
<span className="menu-name" id="menu_home">
课程管理
</span>
)}
</span>
</span> </span>
} }
icon={<ContainerOutlined />}
> >
<Menu.Item key="1-1"> <Menu.Item key="1-1">
...@@ -74,22 +81,40 @@ class Menus extends React.Component { ...@@ -74,22 +81,40 @@ class Menus extends React.Component {
<span className="name">视频课</span> <span className="name">视频课</span>
</Menu.Item> </Menu.Item>
</SubMenu> </SubMenu>
<Menu.Item key="2">
<Menu.Item key="2" icon={<PlayCircleOutlined/>}> <span
{!!this.state.menuType &&( >
<span className="name">资料云盘</span> <span className="title">
)} <span
className="iconfont icon"
dangerouslySetInnerHTML={{ __html: "&#xe83b;" }}
></span>
{!!this.state.menuType && (
<span className="menu-name" id="menu_home">
资料云盘
</span>
)}
</span>
</span>
</Menu.Item> </Menu.Item>
<SubMenu <SubMenu
key="3" key="3"
title={ title={
<span> <span
{!!this.state.menuType &&( >
<span >课程管理</span> <span className="title">
)} <span
className="iconfont icon"
dangerouslySetInnerHTML={{ __html: "&#xe82e;" }}
></span>
{!!this.state.menuType && (
<span className="menu-name" id="menu_home">
店铺管理
</span>
)}
</span>
</span> </span>
} }
icon={<PlayCircleOutlined/>}
> >
<Menu.Item key="3-1"> <Menu.Item key="3-1">
<span className="name">讲师管理</span> <span className="name">讲师管理</span>
......
src/modules/root/Menu.less
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
@top-height: 50px; @top-height: 50px;
@menu-bakg: #2B2E37; @menu-bakg: #2B2E37;
@active-color: #FFB714; @active-color: #FFB714;
.left-container { .left-container {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
...@@ -17,7 +16,6 @@ ...@@ -17,7 +16,6 @@
padding-left: 0 !important; padding-left: 0 !important;
background: transparent; background: transparent;
} }
.left { .left {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
...@@ -42,145 +40,6 @@ ...@@ -42,145 +40,6 @@
.icon { .icon {
margin-right: 20px margin-right: 20px
} }
.fistLevel {
position: relative;
&:hover {
.ant-menu-submenu-title,
.home-title {
color: #fff !important;
.iconfont {
color: #fff !important;
}
.listType {
background: #fff !important;
}
.ant-menu-submenu-arrow {
&::before {
background: #fff !important;
}
&::after {
background: #fff !important;
}
}
}
}
.submenu-item-cls {
position: relative;
&.new-icon {
position: absolute;
background: #d90b1b;
height: 8px;
width: 8px;
border-radius: 50%;
right: 56px;
top: 10px;
}
}
.menu-item {
position: relative;
.menu-item-cls {
&.new-icon {
&::before {
line-height: 18px;
content: "\65B0\529F\80FD";
display: block;
width: 39px;
height: 18px;
background-color: #d90b1b;
background-size: cover;
color: #fff;
font-size: 10px;
position: absolute;
top: 10px;
right: 6px;
text-align: center;
border-radius: 10px;
}
}
}
}
}
.ant-menu-submenu-selected,
.ant-menu-item-selected {
&:hover {
.iconfont {
color: @active-color !important;
}
.ant-menu-submenu-title,
.home-title {
color: @active-color !important;
.iconfont {
color: @active-color !important;
}
.listType {
background: @active-color !important;
}
.ant-menu-submenu-arrow {
&::before {
background: @active-color !important;
}
&::after {
background: @active-color !important;
}
}
}
}
}
.ant-menu-submenu-title {
line-height: 40px;
height: 40px;
}
.ant-menu-submenu > .ant-menu {
background-color: transparent;
}
.ant-menu-submenu,
.ant-menu-item {
position: relative;
transition: none !important;
background: @menu-bakg;
color: #9A9DA7;
width: 100%;
.icon {
color: #9A9DA7;
}
div {
.name {
margin-left: 15px;
}
position: relative;
.listType {
width: 5px;
height: 5px;
background: #9A9DA7;
border-radius: 50%;
top: 18px;
left: 5px;
position: absolute;
}
}
}
.ant-menu-item { .ant-menu-item {
color: @xm-color-text-menu; color: @xm-color-text-menu;
} }
...@@ -190,440 +49,25 @@ ...@@ -190,440 +49,25 @@
color: #fff; color: #fff;
} }
} }
.activeMenu,
.ant-menu-item-selected {
background: @menu-bakg;
color: @active-color;
.icon {
color: @active-color;
}
.ant-menu-submenu-arrow {
&::before {
background: @active-color;
}
&::after {
background: @active-color;
}
}
}
.rc-menu-hidden {
display: none;
}
.homeBar {
.iconfont {
transition: none;
}
.ant-menu-submenu-title:after {
display: none;
}
}
}
.border-tip {
display: inline-block;
margin: 0 auto;
border: 1px solid #979797;
height: 28px;
line-height: 28px;
border-radius: 14px;
padding: 0 8px;
box-sizing: content-box;
cursor: pointer;
}
.referral-tip {
position: relative;
text-align: center;
img{
width: 121px;
cursor: pointer;
}
.gif-style {
width: 180px;
}
.referral-content{
position: relative;
width:116px;
height:28px;
white-space: nowrap;
border-radius:14px;
border:1px solid rgba(255,133,52,1);
font-size:13px;
line-height:25px;
padding-left: 20px;
color:rgba(255,133,52,1);
margin-left: 36px;
cursor: pointer;
&::before{
position: absolute;
top: 0px;
left: -11px;
content: '';
width: 25px;
height: 26px;
background: url("https://image.xiaomaiketang.com/xm/r2mDMKFtAw.png") no-repeat center;
background-size: 100% auto;
}
}
.close-referral {
position: absolute;
top: -7px;
right: 22px;
display: inline-block;
width: 10px;
height: 10px;
background: url("https://image.xiaomaiketang.com/xm/jBG6Hp4fF7.png") no-repeat center;
background-size: 100% auto;
cursor: pointer;
}
}
.pay-warning {
.icon {
color: #FBD140;
font-size: 16px;
margin-right: 4px;
}
.tip {
float: right;
color: #fff;
}
}
.update-order {
.updated {
margin: 10px 0;
color: #FFBF02;
border: 1px solid #FFBF02;
}
.upgrade_wrap {
margin: 10px 0;
text-align: center;
cursor: pointer;
&.zoom_in {
animation-duration: 0.5s;
animation-fill-mode: both;
animation-name: zoomIn;
}
img {
width: 130px;
height: 55px;
}
}
}
.copy-right {
padding-top: 10px;
padding-bottom: 10px;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
img {
width: 80px;
}
}
.questionButton {
position: fixed;
right: 0;
bottom: 100px;
width: 50px;
height: 100px;
z-index: 999;
background: #0c0c0c;
} }
} }
&.left-container-vertical { &.left-container-vertical {
width: 62px; width: 62px;
.ant-badge-not-a-wrapper .ant-badge-count{
box-shadow: none;
}
.left { .left {
.ant-menu-item { .ant-menu-item {
text-align: center; text-align: center;
} }
.ant-menu-submenu-arrow {
display: none !important;
}
.ant-menu-submenu-title {
font-size: 25px;
line-height: 50px;
height: 50px;
text-align: center;
}
.ant-menu-vertical .ant-menu-submenu-title {
text-overflow: inherit;
}
.ant-menu-submenu-vertical>.ant-menu-submenu-title:after {
display: none;
}
.title {
text-align: center;
}
.pay-warning {
display: none;
}
.icon { .icon {
margin-right: 0px; margin-right: 0px;
} }
} }
} }
.ant-menu-submenu-inline {
.ant-menu-item {
>div {
padding-left: 10px;
.listType {
left: 12px !important;
}
}
}
}
.ant-menu-vertical.ant-menu-sub {
min-width: 135px;
.ant-menu-item {
&:nth-child(1) {
padding-top: 15px;
height: 57px;
}
&:nth-last-child(1) {
padding-bottom: 15px;
height: 57px;
}
>div {
padding-left: 10px;
.listType {
left: 12px !important;
}
}
}
}
.left .nav .ant-menu-item.ant-menu-item-selected div .listType {
background: @active-color !important;
}
.market-item-name {
position: relative;
.new-tip {
position: absolute;
top: 5px;
right: -34px;
width: 32px;
border-radius: 10px;
background: red;
color: #fff;
text-align: center;
height: 14px;
line-height: 13px;
font-size: 12px;
}
}
.market-badge {
.ant-badge-dot {
box-shadow: unset;
height: 10px;
width: 10px;
margin-left: 10px;
}
}
.menu-item-content{
position: relative;
.menu-item-tips{
position: absolute;
font-size: 12px;
color: #fff;
background: #EC4B35;
line-height: 18px;
height: 18px;
border-radius: 10px;
padding: 0 4px;
right: -11px;
top: 50%;
margin-top: -8px;
z-index: 1;
}
}
}
.ant-menu-submenu-popup>.ant-menu {
background: @menu-bakg !important;
color: #9A9DA7;
padding-left: 15px;
width: 132px;
min-width: auto;
li {
padding-left: 22px;
padding-right: 0;
width: 117px;
}
.listType {
width: 5px;
height: 5px;
background: #9A9DA7;
border-radius: 50%;
top: 18px;
left: 5px;
position: absolute;
}
.ant-menu-item-selected {
background: @menu-bakg;
color: #fff;
.listType {
background: @active-color;
}
}
&:hover {
.ant-menu-item-active {
color: #fff;
.listType {
background: #fff;
}
}
.ant-menu-item-selected {
.listType {
background: @active-color;
}
}
}
} }
.ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected { .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected {
background: none !important; background:@menu-bakg !important;
} }
.v4-to-v5-update-modal {
.ant-modal-body {
padding: 0 !important;
.success-box {
position: relative;
.modal-main-bg {
width: 100%;
}
.try-btn {
background: linear-gradient(90deg, rgba(255, 158, 82, 1) 0%, rgba(255, 73, 31, 1) 100%);
box-shadow: 1px 10px 13px 0px rgba(230, 100, 0, 0.35);
width: 244px;
height: 50px;
line-height: 50px;
border-radius: 7px;
margin: auto;
bottom: 45px;
position: absolute;
z-index: 10;
color: #fff;
font-size: 23px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
text-align: center;
left: 0;
right: 0;
cursor: pointer;
}
}
.failed-box { .ant-menu.ant-menu-dark, .ant-menu-dark .ant-menu-sub, .ant-menu.ant-menu-dark .ant-menu-sub{
padding: 48px 72px 40px; background: @menu-bakg !important;
.close-bg {
width: 160px;
margin: auto;
display: block;
}
.content {
font-size: 16px;
color: #333;
margin-top: 24px;
}
.tip {
margin-top: 12px;
color: #999;
font-size: 16px;
}
.close-btn {
margin: auto;
margin-top: 90px;
color: #fff;
background: #FF8534;
border-radius: 4px;
width: 200px;
height: 40px;
line-height: 40px;
font-size: 16px;
text-align: center;
}
}
}
.ant-modal-close-x {
display: none;
}
}
@-webkit-keyframes zoomIn {
0% {
-webkit-transform: scale(0) translate3d(0%, 0%, 0);
transform: scale(0) translate3d(0%, 0%, 0);
opacity: 0;
}
100% {
-webkit-transform: scale(1) translate3d(-0%, 0%, 0);
transform: scale(1) translate3d(-0%, 0%, 0);
opacity: 1;
}
} }
@keyframes zoomIn {
0% {
-webkit-transform: scale(0) translate3d(0%, 0%, 0);
transform: scale(0) translate3d(0%, 0%, 0);
opacity: 0;
}
100% {
-webkit-transform: scale(1) translate3d(-0%, 0%, 0);
transform: scale(1) translate3d(-0%, 0%, 0);
opacity: 1;
}
}
\ No newline at end of file
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