caiping/public/static/assets/gougu/css/layout.css

.gg-layout .layui-header {position: fixed; top: 0;left: 0; width: 100%; height: 50px; border-bottom: 1px solid #eeeeee;box-sizing: border-box;background-color: #fff}
.gg-layout .layui-header a,
.gg-layout .layui-header a cite {color: #162a48}
.gg-layout .layui-header a:hover {color: #000}
.gg-head-item{display:block; padding:0 16px; height:50px; line-height:50px; float:left;}
.gg-head-item i.layui-icon{font-size:20px;}
.gg-head-item .layui-nav{background:0 0;padding:0;}
.gg-head-item .layui-nav .layui-nav-item a{padding:0;}
.layui-layout-right .gg-head-item{border-left:1px solid #eeeeee;}
.layui-layout-right .gg-head-item i.layui-icon{font-weight:600}

.layui-layout-right .gg-head-message{position:relative;}
.layui-layout-right .gg-message-num{height: 18px;position: absolute; top: -12px;margin-left: -4px;left: 50%;}
.layui-layout-right .gg-message-num span {min-width: 18px; height: 18px; margin: 0;padding: 0 4px; display: inline-block; font-size: 11px; line-height: 18px; text-align: center;background-color: #FF5722; color: #fff; border-radius: 12px;cursor: pointer;}
.gg-head-avatar img{width:28px; height:28px; border-radius:50%; margin-right:3px;}
.gg-head-avatar i.layui-icon{font-size:14px;position: relative;}
.layui-layout-right .layui-nav .layui-nav-item{height: 50px;line-height: 50px}
.gg-head-item .layui-nav .layui-this:after{display:none;}

.gg-layout .layui-side {width: 200px;top: 0;z-index: 1001}
.gg-layout .layui-logo {position: fixed;left: 0; top: 0; z-index: 1001; width: 200px; height: 49px; text-align:center; line-height:49px; overflow: hidden;background-color: #001529;  border-bottom: 1px solid #011120; cursor:pointer;}
.gg-layout .layui-logo,
.gg-layout .layui-logo a {color: #f1f1f1; text-align:center;}

.layui-side-menu {box-shadow: 1px 0 2px 0 rgba(0, 0, 0, .05);background-color: #001529; color: #fff}
.layui-side-menu .layui-side-scroll {width: 100%}
.layui-side-menu .layui-nav {width: 200px; margin-top: 50px; background: 0 0}
.layui-side-menu .layui-nav .layui-nav-item a {height: 40px;line-height: 40px; padding-left: 44px; padding-right: 20px}
.layui-side-menu .layui-nav .layui-nav-item>a {padding-top: 2px;padding-bottom: 2px}
.layui-side-menu .layui-nav .layui-nav-itemed>.layui-nav-child { padding: 0}
.layui-side-menu .layui-nav .layui-nav-item .icon,
.layui-side-menu .layui-nav .layui-nav-item .iconfont,
.layui-side-menu .layui-nav .layui-nav-item .layui-icon{position: absolute; top: 50%;left: 16px; margin-top: -20px}
.layui-side-menu .layui-nav .layui-nav-item .icon,
.layui-side-menu .layui-nav .layui-nav-item .iconfont{font-size:20px;}
.layui-side-menu .layui-nav .layui-nav-item .layui-nav-more {margin-top: -24px; color:#677C91}
.layui-side-menu .layui-nav .layui-nav-child .layui-nav-more {margin-top: -20px; color:#677C91}

.layui-side-menu .layui-nav .layui-nav-child .layui-nav-child { background: 0 0 !important}
.layui-side-menu .layui-nav .layui-nav-child .layui-nav-child a {padding-left: 58px}
.layui-side-menu .layui-nav .layui-nav-more {right: 12px}

.layui-nav-tree .layui-nav-child dd.layui-this,
.layui-nav-tree .layui-nav-child dd.layui-this a,
.layui-nav-tree .layui-this,
.layui-nav-tree .layui-this>a,
.layui-nav-tree .layui-this>a:hover {background-color: #192A3B;color: #3C9CFF;}

.layui-side .layui-nav-tree .layui-nav-child dd a:hover{background-color:#192A3B;}
.layui-side .layui-nav-tree .layui-nav-bar{background-color: #3C9CFF;width:3px;}

.layui-side-white{background-color: #fff; color: #323232}
.layui-side-white .layui-logo {background-color: #ffffff;border-bottom: 1px solid #eeeeee;}
.layui-side-white .layui-nav .layui-nav-item a{color: #323232}
.layui-side-white .layui-nav .layui-nav-item .iconfont{font-weight:600;}
.layui-side-white .layui-nav-itemed>.layui-nav-child{background-color:#fff!important;}
.layui-side-white .layui-nav-itemed>a,
.layui-side-white .layui-nav-tree .layui-nav-title a,
.layui-side-white .layui-nav-tree .layui-nav-title a:hover{color:#187FDD!important;}
.layui-side-white .layui-nav-tree .layui-nav-child dd.layui-this,
.layui-side-white .layui-nav-tree .layui-nav-child dd.layui-this a,
.layui-side-white .layui-nav-tree .layui-this,
.layui-side-white .layui-nav-tree .layui-this>a,
.layui-side-white .layui-nav-tree .layui-this>a:hover {background-color: #ECF6FF;color: #187FDD;}
.layui-side-white .layui-nav-tree .layui-nav-child dd a:hover{background-color:#ffffff;color: #187FDD;}
.layui-side-white .layui-nav-tree .layui-nav-bar{background-color: #187FDD;width:3px;left:inherit;right:0}


.layui-side-blue{background-color:#192A5E; color: #C5C9D2}
.layui-side-blue .layui-logo {background-color: #122150;border-bottom: 1px solid #122150;}
.layui-side-blue .layui-nav .layui-nav-item a{color: #C5C9D2}
.layui-side-blue .layui-nav .layui-nav-item .iconfont{font-weight:600;}
.layui-side-blue .layui-nav-itemed>.layui-nav-child{background-color:#122150!important;}
.layui-side-blue .layui-nav-itemed>a,
.layui-side-blue .layui-nav-tree .layui-nav-title a,
.layui-side-blue .layui-nav-tree .layui-nav-title a:hover{color:#C5C9D2!important;}
.layui-side-blue .layui-nav-tree .layui-nav-child dd.layui-this,
.layui-side-blue .layui-nav-tree .layui-nav-child dd.layui-this a,
.layui-side-blue .layui-nav-tree .layui-this,
.layui-side-blue .layui-nav-tree .layui-this>a,
.layui-side-blue .layui-nav-tree .layui-this>a:hover {background-color: #3c508c;color: #fff;}
.layui-side-blue .layui-nav-tree .layui-nav-child dd a:hover{background-color:#2b3e79;color: #C5C9D2;}
.layui-side-blue .layui-nav-tree .layui-nav-bar{background-color: #122150;width:3px;left:inherit;right:0}

.page-tabs{ position: fixed;top: 50px;right: 0; z-index: 999; height: 40px; line-height: 40px; padding: 0 80px 0 40px; background-color: #fff;box-sizing: border-box; box-shadow: 0 1px 3px rgb(0 0 0 / 10%);}
.page-tabs,
.gg-layout .layui-body,
.gg-layout .layui-footer,
.gg-layout .layui-layout-left {left: 200px}

.page-tabs,
.gg-layout .layui-body,
.gg-layout .layui-footer,
.gg-layout .layui-header .layui-layout-right,
.gg-layout .layui-header .layui-nav .layui-nav-item,
.gg-layout .layui-layout-left,
.gg-layout .layui-logo,
.gg-layout .layui-side {transition: all .3s;-webkit-transition: all .3s}

.gg-layout .layui-body {top: 90px;bottom: 0;position: fixed;}
.gg-layout .gg-tab-page {position: absolute; top: 0; bottom: 0;left: 0; right: 0; display: none; overflow: hidden;}
.gg-layout .layui-footer {padding: 10px 0;text-align: center; box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .05)}
.gg-body-shade {position: fixed; display: none;left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, .3); z-index: 1000}

.page-tabs .gg-tabs-control { position: absolute; top: 0;width: 40px; height: 100%;text-align: center; cursor: pointer;box-sizing: border-box; border-left: 1px solid #eeeeee;
    transition: all .3s;
    -webkit-transition: all .3s;
}
.page-tabs .gg-tabs-control:hover {background-color: #fafafa}
.page-tabs .layui-icon-prev {left: 0; border-left: none; border-right: 1px solid #eeeeee}
.page-tabs .layui-icon-next {right: 40px}
.page-tabs .layui-icon-down {right: 0}
.page-tabs .layui-tab {margin: 0; overflow: hidden}
.page-tabs .layui-tab-title {height: 40px;border: none}
.page-tabs .layui-tab-title i{font-size:18px; font-weight:600}

.page-tabs .layui-tab-title li { min-width: 0; line-height: 40px; max-width: 160px; text-overflow: ellipsis; padding-left:12px; padding-right: 32px;overflow: hidden;border-right: 1px solid #eeeeee;vertical-align: top}
.page-tabs .layui-tab-title li:first-child {padding-right: 15px}
.page-tabs .layui-tab-title li .layui-tab-close { position: absolute;right: 8px; top: 50%;margin: -7px 0 0; width: 16px; height: 16px;line-height: 16px;border-radius: 50%;font-size: 12px}
.page-tabs .layui-tab-title li:after { content: ''; position: absolute; top: 0; left: 0;width: 0; height: 2px; border-radius: 0; background-color: #1E9FFF;
    transition: all .3s;
    -webkit-transition: all .3s
}

.page-tabs .layui-tab-title li:hover:after {width: 100%}

.page-tabs .layui-tab-title li.layui-this,
.page-tabs .layui-tab-title li:hover { background-color: #fafafa; color:#187FDD}

.page-tabs .layui-tab-title li.layui-this:after {width: 100%; border: none;height: 2px; background-color: #1E9FFF}

.page-tabs .layui-tab-title li:first-child .layui-tab-close,
.gg-tabs-select.layui-nav .layui-nav-bar,
.gg-tabs-select.layui-nav .layui-nav-more {display: none}

.gg-tabs-select.layui-nav { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0; background: 0 0}
.gg-tabs-select.layui-nav .layui-nav-item { line-height: 40px}
.gg-tabs-select.layui-nav .layui-nav-item>a {height: 40px}
.gg-tabs-select.layui-nav .layui-nav-item a {color: #666}
.gg-tabs-select.layui-nav .layui-nav-child {top: 40px;left: auto;right: 0}

.gg-tabs-select.layui-nav .layui-nav-child dd.layui-this,
.gg-tabs-select.layui-nav .layui-nav-child dd.layui-this a {background-color: #f2f2f2 !important;color: #333}

.gg-layout .layui-logo .logo{display: none}
.side-spread .gg-layout .layui-logo {width: 53px;}
.side-spread .gg-layout .layui-logo .syslogo{display: none}
.side-spread .gg-layout .layui-logo .logo{display: inline-block}
.side-spread .layui-side {left: 0;width: 53px}

.side-spread .page-tabs,
.side-spread .gg-layout .layui-body,
.side-spread .gg-layout .layui-footer,
.side-spread .gg-layout .layui-layout-left {left: 53px}

.side-spread .layui-side-menu .layui-nav {position: static; width: 53px}
.side-spread .layui-side-menu .layui-nav-item {position: static}
.side-spread .layui-side-menu .layui-nav-item>a {padding-right: 0;padding-left:55px;}

.side-spread .layui-side-menu .layui-nav-item cite,
.side-spread .layui-side-menu .layui-nav>.layui-nav-item>.layui-nav-child,
.side-spread .layui-side-menu .layui-nav>.layui-nav-item>a .layui-nav-more {display: none; padding: 8px 0;width: 180px}

.side-spread .layui-side-menu .layui-nav>.layui-nav-itemed>a {background: rgba(0, 0, 0, .3)}

.side-layout .layui-layer-TipsG.layui-layer-TipsR{display:none;}
.side-layout.layui-layer-tips .layui-layer-content{padding:0!important; border-radius:0!important;}
.side-layout .layui-nav-tree .layui-nav-bar{background-color: #3C9CFF;width:3px;}
@media screen and (max-width:992px) {
    .gg-layout .layui-side {
        transform: translate3d(-200px, 0, 0);
        -webkit-transform: translate3d(-200px, 0, 0);
        width: 200px
    }
    .page-tabs,
    .gg-layout .layui-body,
    .gg-layout .layui-footer,
    .gg-layout .layui-layout-left {
        left: 0
    }
	.gg-head-screen,
	.gg-head-refresh,
	.gg-head-cache,
	.gg-head-home{display:none;}
}

.side-spread-sm .layui-side {
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}
.side-spread-sm .page-tabs,
.side-spread-sm .gg-layout .layui-body,
.side-spread-sm .gg-layout .layui-footer,
.side-spread-sm .gg-layout .layui-layout-left {
    left: 0;
    transform: translate3d(200px,0,0);
    -webkit-transform: translate3d(200px,0,0);
}
.side-spread-sm .gg-body-shade {
    display: block;
}

.gg-tab-page.layui-show {animation:moveTop .4s;-webkit-animation:moveTop .4s;animation-fill-mode:both;-webkit-animation-fill-mode:both;position:relative;height:100%;-webkit-overflow-scrolling:touch;}
@keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);}
    100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
}
@-o-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);}
    100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
}
@-moz-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);}
    100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
}
@-webkit-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);}
    100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
}