//主布局
|
.main-layout {
|
overflow: hidden;
|
width: 100%;
|
height: 100%;
|
&.hide-side{
|
.main-layout-side{
|
left: -200px;
|
}
|
.main-layout-container{
|
left: 0;
|
}
|
}
|
}
|
//左侧布局
|
.main-layout-side {
|
width: 200px;
|
height: 100%;
|
background: @sideColor;
|
position: absolute;
|
left: 0;
|
top: 0;
|
bottom: 0;
|
overflow: auto;
|
z-index: 1;
|
.transition(left .3s);
|
.m-logo {
|
width: 100%;
|
height: 60px;
|
background: #00b5f9 url(../images/logo.png) center center no-repeat;
|
}
|
.layui-nav{
|
background: @sideColor;
|
.iconfont{
|
padding-right: 10px;
|
font-size: 18px;
|
color: #8f94a1;
|
position: relative;
|
top: 2px;
|
}
|
}
|
.layui-nav-itemed>a{
|
background: @sideColor!important;
|
}
|
.layui-nav-tree .layui-nav-child a {
|
height: 40px;
|
line-height: 40px;
|
color: #77829f;
|
&:hover{
|
color: #00b5f9;
|
}
|
.l-line {
|
width: 12px;
|
display: inline-block;
|
line-height: 40px;
|
height: 40px;
|
float: left;
|
margin-right: 10px;
|
margin-left: 30px;
|
background: url("../images/l-line.png") left center no-repeat;
|
}
|
}
|
.layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-this{
|
background-color: @sideColor;
|
}
|
.layui-nav-tree .layui-nav-child .layui-this>a{
|
background-color: @sideColor;
|
color: @blue;
|
// .l-line {
|
// background: url("../images/l-line-white.png") left center no-repeat;
|
// }
|
}
|
.layui-nav-tree .layui-this>a{
|
background-color: rgba(0, 181, 249, 0.8);
|
color: #fff;
|
.iconfont{color: #fff;}
|
}
|
.layui-nav-tree .layui-nav-bar{
|
background-color: rgba(0,181,245,0.8);
|
}
|
}
|
//右侧内容
|
.main-layout-container{
|
position: absolute;
|
left: 200px;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
background: #f5f5f5;
|
.transition(left .3s);
|
}
|
//头部
|
.main-layout-header{
|
@num: 60px;
|
height: @num;
|
border-bottom: 1px solid #f0f0f0;
|
background: #fff;
|
a {
|
text-decoration: none;
|
}
|
.menu-btn {
|
float: left;
|
width: @num;
|
height: @num;
|
line-height: @num;
|
text-align: center;
|
.iconfont {
|
font-size: 20px;
|
color: @sideColor;
|
}
|
}
|
.layui-nav{
|
float: right;
|
padding: 0;
|
background: transparent;
|
li{
|
border-left: 1px solid #f2f3f5;
|
}
|
.layui-nav-item > a:hover{
|
color: #999;
|
}
|
&>.layui-this a{
|
color: #00b5f9;
|
}
|
.layui-nav-bar{
|
display: none;
|
}
|
.layui-this:after{
|
height: 0;
|
}
|
.layui-nav-child dd.layui-this a{
|
color: #333;
|
}
|
.layui-nav-child dd.layui-this{
|
color: #333;
|
background: rgb(242,242,242);
|
}
|
}
|
}
|
.main-layout-body{
|
position: absolute;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
top: 61px;
|
overflow: hidden;
|
}
|
//tab
|
.main-layout-tab{
|
margin-top: 0;
|
.layui-tab-title{
|
border-bottom: 1px solid #f0f0f0;
|
z-index: 98;
|
background: #fff;
|
}
|
&.layui-tab-brief>.layui-tab-title .layui-this{
|
color: #00b5f9;
|
}
|
&.layui-tab-brief>.layui-tab-more li.layui-this:after, &.layui-tab-brief>.layui-tab-title .layui-this:after {
|
border: none;
|
border-radius: 0;
|
border-bottom: 3px solid #00b5f9;
|
}
|
//去掉后台主页tab的关闭按钮
|
.welcome{
|
.layui-tab-close{
|
display: none;
|
}
|
}
|
.layui-tab-content{
|
position: absolute;
|
right: 0;
|
left: 0;
|
bottom: 0;
|
top: 41px;
|
padding: 0;
|
z-index: 97;
|
background: #f5f5f5;
|
padding: 0px;
|
box-sizing: border-box;
|
.layui-tab-item{
|
width: 100%;
|
height: 100%;
|
background: #fff;
|
}
|
}
|
}
|
//页面主容器
|
.wrap-container {
|
width: 100%;
|
height: 100%;
|
overflow-x: hidden;
|
overflow-y: auto;
|
.box-sizing(border-box);
|
}
|
.iframe{
|
border:0;
|
}
|
.main-mask{
|
display: none;
|
position: fixed;
|
z-index: 99;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
background: rgba(0,0,0,0.3);
|
}
|
@media (max-width: 768px) {
|
.main-layout-side{
|
position: fixed;
|
left: -200px;
|
overflow: auto;
|
overflow-x: hidden;
|
z-index: 100;
|
}
|
.main-layout-container{
|
position: absolute;
|
left:0px;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
}
|
.main-layout.hide-side {
|
.main-layout-side{
|
left: 0;
|
}
|
.main-mask{
|
display: block;
|
}
|
}
|
::-webkit-scrollbar{width:2px;height:10px}
|
}
|
