373 lines
8.9 KiB
Plaintext
373 lines
8.9 KiB
Plaintext
|
:global {
|
||
|
|
@opacity-bg : #ffffff;//#f5f5f5菜单背景色
|
||
|
|
@active-color: #0047FF;
|
||
|
|
@sider-prefix: sider;
|
||
|
|
.ant-menu-inline-collapsed {
|
||
|
|
.ant-menu-item {
|
||
|
|
padding: 5px 0px 5px 0px !important;
|
||
|
|
.anticon {
|
||
|
|
font-size: 24px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.ant-menu-submenu .ant-menu-submenu-title {
|
||
|
|
padding: 5px 0px 5px 0px !important;
|
||
|
|
.anticon {
|
||
|
|
font-size: 24px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
.ant-menu-inline {
|
||
|
|
.ant-menu-submenu {
|
||
|
|
.ant-menu-submenu-title {
|
||
|
|
line-height: 30px;
|
||
|
|
height: 35px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.ant-menu-sub.ant-menu-inline{
|
||
|
|
.ant-menu-submenu {
|
||
|
|
.ant-menu-submenu-title{
|
||
|
|
line-height: 20px;
|
||
|
|
height: 30px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.ant-menu-sub.ant-menu-inline {
|
||
|
|
.ant-menu-item {
|
||
|
|
line-height: 18px;
|
||
|
|
height: 28px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.ant-menu-submenu-popup {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.ant-menu-vertical {
|
||
|
|
border-right: 0px;
|
||
|
|
}
|
||
|
|
.ant-menu-inline {
|
||
|
|
border-right: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.@{sider-prefix} {
|
||
|
|
position : relative;
|
||
|
|
width : 100%;
|
||
|
|
height : 100%;
|
||
|
|
// padding : 0 12px;
|
||
|
|
background-color: @opacity-bg;
|
||
|
|
transition : width .2s ease;
|
||
|
|
// box-shadow : 0 0 10px rgba(0, 0, 0, 0.25);
|
||
|
|
|
||
|
|
&.shortMenuShow {
|
||
|
|
|
||
|
|
height: 100%;
|
||
|
|
// overflow: auto;
|
||
|
|
// position: relative;
|
||
|
|
background-color: #ffffff;
|
||
|
|
// display: flex;
|
||
|
|
// flex-direction: row;
|
||
|
|
}
|
||
|
|
&.shortMenuShow_overflow {
|
||
|
|
width: 256;
|
||
|
|
overflow: auto;
|
||
|
|
height: 100%;
|
||
|
|
// width: ~'calc(100% - 12px)';
|
||
|
|
}
|
||
|
|
&.shortMenuShow_overflow::-webkit-scrollbar {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
&__menuAll,
|
||
|
|
&__menu {
|
||
|
|
display : flex;
|
||
|
|
flex-direction : row;
|
||
|
|
justify-content: flex-start;
|
||
|
|
align-items : center;
|
||
|
|
width : 100%;
|
||
|
|
padding : 0 12px;
|
||
|
|
cursor : pointer;
|
||
|
|
overflow : hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__menuAll {
|
||
|
|
height : 61px;
|
||
|
|
border-bottom: 1px solid #333333;//#333333菜单下划线颜色
|
||
|
|
|
||
|
|
&-icon {
|
||
|
|
width : auto;
|
||
|
|
height: 28px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&__menuExpand {
|
||
|
|
position : absolute;
|
||
|
|
top : 0;
|
||
|
|
left : 100%;
|
||
|
|
width : 0;
|
||
|
|
height : 100%;
|
||
|
|
transition : width .2s ease;
|
||
|
|
background-color: @opacity-bg;
|
||
|
|
box-shadow : 6px 0 10px rgba(0, 0, 0, 0.1);
|
||
|
|
|
||
|
|
&-divempty {
|
||
|
|
position: absolute;
|
||
|
|
top : -52px;
|
||
|
|
left : -30%;
|
||
|
|
height : 50px;
|
||
|
|
width : 130%;
|
||
|
|
}
|
||
|
|
|
||
|
|
&-divempty-hide {
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
|
||
|
|
&-inner {
|
||
|
|
height : 100%;
|
||
|
|
padding: 0 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&-divider {
|
||
|
|
position : absolute;
|
||
|
|
top : 0;
|
||
|
|
left : 0;
|
||
|
|
height : 100%;
|
||
|
|
border-left: 1px solid #333333;//#333333
|
||
|
|
}
|
||
|
|
|
||
|
|
&-divempty-right {
|
||
|
|
position: relative;
|
||
|
|
bottom : 100%;
|
||
|
|
left : 100%;
|
||
|
|
height : 100%;
|
||
|
|
width : 200px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&-header {
|
||
|
|
display : flex;
|
||
|
|
// flex-wrap : nowrap;
|
||
|
|
// width : 100%;
|
||
|
|
// height : 61px;
|
||
|
|
border-bottom: 1px solid #333333;//#333333菜单扩展处下划线颜色
|
||
|
|
flex-direction: column;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&-body {
|
||
|
|
width : 100%;
|
||
|
|
height : ~'calc(100% - 140px)';
|
||
|
|
padding: 12px 0;
|
||
|
|
|
||
|
|
&--scroll {
|
||
|
|
display : flex;
|
||
|
|
flex-direction : column;
|
||
|
|
justify-content: flex-start;
|
||
|
|
align-items : flex-start;
|
||
|
|
flex-wrap : wrap;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&-footer {
|
||
|
|
position : relative;
|
||
|
|
height : 70px;
|
||
|
|
padding : 4px;
|
||
|
|
border : 1px solid #e1e1e1;
|
||
|
|
border-radius: 4px;
|
||
|
|
|
||
|
|
&--title {
|
||
|
|
position: absolute;
|
||
|
|
top : -24px;
|
||
|
|
left : 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
&--scroll {
|
||
|
|
font-size : 14px;
|
||
|
|
line-height: 18px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&-menu {
|
||
|
|
position : relative;
|
||
|
|
display : flex;
|
||
|
|
flex-direction : column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items : center;
|
||
|
|
width : 82px;
|
||
|
|
height : 100%;
|
||
|
|
margin-right : 40px;
|
||
|
|
cursor : pointer;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
|
||
|
|
.@{sider-prefix}__menuExpand-menu--itemIcon,
|
||
|
|
.@{sider-prefix}__menuExpand-menu--itemText {
|
||
|
|
color: @active-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
.@{sider-prefix}__menuExpand-menu--indicator {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.lastChild {
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
&--item {
|
||
|
|
width : 100%;
|
||
|
|
display : flex;
|
||
|
|
flex-direction : row;
|
||
|
|
justify-content: center;
|
||
|
|
align-items : center;
|
||
|
|
|
||
|
|
&Icon {
|
||
|
|
font-size : 12px;
|
||
|
|
color : #333333;//#333333右侧扩展菜单图标颜色
|
||
|
|
margin-right: 5px;
|
||
|
|
transition : color .2s ease;
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
color: @active-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&Text {
|
||
|
|
font-size : 16px;
|
||
|
|
color : #333333;//#333333右侧扩展菜单字体颜色
|
||
|
|
transition: color .2s ease;
|
||
|
|
&.active {
|
||
|
|
color: @active-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&--indicator {
|
||
|
|
position : absolute;
|
||
|
|
bottom : 12px;
|
||
|
|
width : 48px;
|
||
|
|
height : 2px;
|
||
|
|
background-color: @active-color;
|
||
|
|
border-radius : 2px;
|
||
|
|
opacity : 0;
|
||
|
|
transition : opacity .2s ease;
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&-subMenu {
|
||
|
|
display : flex;
|
||
|
|
flex-direction: column;
|
||
|
|
padding-right : 20px;
|
||
|
|
margin-bottom : 4px;
|
||
|
|
overflow : hidden;
|
||
|
|
|
||
|
|
&--title {
|
||
|
|
font-size : 12px;
|
||
|
|
color : #333333;//#ABABAB二级菜单颜色
|
||
|
|
margin-bottom: 18px;
|
||
|
|
cursor : pointer;
|
||
|
|
|
||
|
|
&--icon {
|
||
|
|
margin-left: 5px;
|
||
|
|
font-size : 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
color: @active-color;;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&--menu {
|
||
|
|
width : 100%;
|
||
|
|
// padding-left : 20px;
|
||
|
|
margin-bottom : 20px;
|
||
|
|
display : flex;
|
||
|
|
flex-direction : row;
|
||
|
|
justify-content: flex-start;
|
||
|
|
align-items : center;
|
||
|
|
cursor : pointer;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
|
||
|
|
.@{sider-prefix}__menuExpand-menu--itemIcon,
|
||
|
|
.@{sider-prefix}__menuExpand-menu--itemText {
|
||
|
|
color: @active-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&__scrollbars {
|
||
|
|
width : 100%;
|
||
|
|
height: ~'calc(100% - 61px)' !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__menu {
|
||
|
|
height : 28px;
|
||
|
|
margin-top: 30px;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
|
||
|
|
.@{sider-prefix}__menu-icon,
|
||
|
|
.@{sider-prefix}__menu-font--text {
|
||
|
|
color: @active-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.lastChild {
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&-icon {
|
||
|
|
font-size : 28px;
|
||
|
|
color : #333333;//#333333左侧常用菜单图标颜色
|
||
|
|
transition: color .2s ease;
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
color: @active-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&-font {
|
||
|
|
display : flex;
|
||
|
|
flex-direction : row;
|
||
|
|
justify-content: flex-start;
|
||
|
|
align-items : center;
|
||
|
|
margin-left : 16px;
|
||
|
|
|
||
|
|
&--text {
|
||
|
|
font-size : 16px;
|
||
|
|
color : #333333;//#333333左侧常用菜单字体颜色
|
||
|
|
margin-right: 4px;
|
||
|
|
white-space : nowrap;
|
||
|
|
transition : color .2s ease;
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
color: @active-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&--icon {
|
||
|
|
font-size: 12px;
|
||
|
|
color : #000000;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|