271 lines
15 KiB
CSS
271 lines
15 KiB
CSS
|
body{color:#323232}
|
||
|
|
.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: #323232}
|
||
|
|
.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: 180px; height:100%; z-index: 1000; overflow: auto;}
|
||
|
|
.gg-layout .layui-side::-webkit-scrollbar { width: 0; }
|
||
|
|
.gg-layout .layui-side{scrollbar-width: none;}
|
||
|
|
.gg-layout .layui-logo {position: fixed;left: 0; top: 0; z-index: 1001; width: 180px; height: 49px; text-align:center; line-height:49px; overflow: hidden;background-color: #111827; border-bottom: 1px solid #011120; cursor:pointer;}
|
||
|
|
.gg-layout .layui-logo,.gg-layout .layui-logo a {color: #f1f1f1; text-align:center;}
|
||
|
|
.gg-layout .layui-side .layui-nav-item .iconfont{font-weight:600; font-size:18px;}
|
||
|
|
.gg-layout .layui-side .layui-nav-bar{width:3px;left:inherit;right:0; background-color:#1A75FF}
|
||
|
|
|
||
|
|
/** 展开菜单模式 **/
|
||
|
|
.gg-layout .layui-side-expand,
|
||
|
|
.gg-layout .layui-side-expand .layui-logo{width: 120px;}
|
||
|
|
.layui-side-expand ul {margin-top: 49px;}
|
||
|
|
.layui-side-expand .menu-li {padding-top:1px;}
|
||
|
|
.layui-side-expand .menu-li > a { position: relative; display: block; padding-right: 12px; padding-left: 36px; height: 42px; color: rgba(255, 255, 255, 0.75); transition: 0.1s cubic-bezier(0.145, 0.045, 0.355, 1); line-height: 42px;}
|
||
|
|
.layui-side-expand .menu-li > a > i { position: absolute; top: 50%; left: 8px; margin-top: -21px;}
|
||
|
|
.layui-side-expand .menu-li > a > cite { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
|
||
|
|
|
||
|
|
/**二级菜单**/
|
||
|
|
.layui-side-expand .menu-li .gg-second-menu::-webkit-scrollbar { width: 0; }
|
||
|
|
.layui-side-expand .menu-li .gg-second-menu { position: fixed; top: 93px; bottom: 0; left: 120px; display: none; overflow-y: auto; width: 120px; background: #ffffff;border-left: 1px solid rgba(0, 0, 0, .05); box-shadow: 1px 0 2px 0 rgba(0, 0, 0, .05);transition: all 0.3s;}
|
||
|
|
.layui-side-expand .menu-li .gg-second-menu.current { display: block; }
|
||
|
|
.layui-side-expand .menu-li .gg-second-menu dt {height: 42px; font-size: 15px; line-height:42px; border-bottom: 1px solid #eeeeee;}
|
||
|
|
.layui-side-expand .menu-li .gg-second-menu dt strong {display: block; padding-left: 12px; color:#323232;}
|
||
|
|
.layui-side-expand .menu-li .gg-second-menu dd { display: block; width: 100%; line-height: 43px; }
|
||
|
|
.layui-side-expand .menu-li .gg-second-menu dd a { position: relative; display: block; padding-left: 12px; font-size: 14px; color: #323232!important;}
|
||
|
|
.layui-side-expand .menu-li .gg-second-menu dd > a > i { position: absolute; top: 1px; right: 5px; display: inline-block; font-size: 12px; transition: all 0.3s ease-in-out; }
|
||
|
|
.layui-side-expand .menu-li .gg-second-menu dd a.layui-this {background: #F0F6FE; color:#1A75FF!important;border-right:3px solid #186AF2}
|
||
|
|
.layui-side-expand .menu-li .gg-second-menu dd a:hover {color:#1A75FF!important;}
|
||
|
|
|
||
|
|
.layui-side-expand .menu-li .gg-three-menu dt {height: 43px; font-size: 14px; line-height:43px; cursor:pointer; border-bottom: 0; position:relative;}
|
||
|
|
.layui-side-expand .menu-li .gg-three-menu dt strong {display: block; padding-left: 12px; color:#323232;}
|
||
|
|
.layui-side-expand .menu-li .gg-three-menu .layui-icon{position: absolute; top: 50%;right: 12px; margin-top: -22px; color:#677C91}
|
||
|
|
.layui-side-expand .menu-li .gg-three-menu .layui-icon-up{display:block}
|
||
|
|
.layui-side-expand .menu-li .gg-three-menu .layui-icon-down{display:none;}
|
||
|
|
.layui-side-expand .menu-li .gg-three-menu.show-up .layui-icon-down{display:block}
|
||
|
|
.layui-side-expand .menu-li .gg-three-menu.show-up .layui-icon-up,.layui-side-expand .menu-li .gg-three-menu.show-up dd{display:none;}
|
||
|
|
|
||
|
|
/**默认菜单模式**/
|
||
|
|
.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: 180px; margin-top: 50px; background: 0 0}
|
||
|
|
.layui-side-menu .layui-nav-item a {height: 42px;line-height: 42px; padding-left: 44px; padding-right: 20px}
|
||
|
|
.layui-side-menu .layui-nav-item>a {padding-top: 2px;padding-bottom: 2px}
|
||
|
|
.layui-side-menu .layui-nav-itemed>.layui-nav-child { padding: 0}
|
||
|
|
.layui-side-menu .layui-nav-item .bi,
|
||
|
|
.layui-side-menu .layui-nav-item .iconfont,
|
||
|
|
.layui-side-menu .layui-nav-item .layui-icon{position: absolute; top: 50%;left: 16px; margin-top: -21px}
|
||
|
|
.layui-side-menu .layui-nav-item .layui-nav-more {margin-top: -24px; color:#677C91}
|
||
|
|
.layui-side-menu .layui-nav-child .layui-nav-more {margin-top: -20px; color:#677C91}
|
||
|
|
|
||
|
|
.layui-side-menu .layui-nav-child .layui-nav-child { background: 0 0 !important}
|
||
|
|
.layui-side-menu .layui-nav-child .layui-nav-child a {padding-left: 58px}
|
||
|
|
.layui-side-menu .layui-nav-more {right: 12px}
|
||
|
|
|
||
|
|
|
||
|
|
/**black**/
|
||
|
|
.layui-side-black{background-color:#111827;}
|
||
|
|
.layui-side-black .layui-logo {border-bottom: 1px solid #000F1D;}
|
||
|
|
.layui-side-black .layui-nav-child dd.layui-this,
|
||
|
|
.layui-side-black .layui-nav-child dd.layui-this a,
|
||
|
|
.layui-side-black .layui-this,
|
||
|
|
.layui-side-black .layui-this>a,
|
||
|
|
.layui-side-black .layui-this>a:hover {background-color: #2F333F;}
|
||
|
|
.layui-side-black .layui-nav-child dd a:hover{background-color:#2F333F!important;}
|
||
|
|
|
||
|
|
|
||
|
|
/**white**/
|
||
|
|
.layui-side-white{background-color: #fff; color: #323232; box-shadow: 1px 0 2px 0 rgba(0, 0, 0, .05);}
|
||
|
|
.layui-side-white .layui-logo {background-color: #ffffff;border-bottom: 1px solid #eeeeee;}
|
||
|
|
.layui-side-white .layui-nav-itemed>.layui-nav-child{background-color:#ffffff!important;}
|
||
|
|
.layui-side-white .layui-nav-item a,.layui-side-white .layui-nav-itemed>a{color:#323232!important;}
|
||
|
|
.layui-side-white .layui-nav-item a:hover{color:#1A75FF!important;}
|
||
|
|
.layui-side-white .layui-nav-item a.layui-this{color:#1A75FF!important;}
|
||
|
|
.layout-menu-classical .layui-side-white .layui-nav-item a.layui-this{border-right:3px solid #186AF2}
|
||
|
|
.layui-side-white .layui-nav-child dd.layui-this,
|
||
|
|
.layui-side-white .layui-nav-child dd.layui-this a,
|
||
|
|
.layui-side-white .layui-this,
|
||
|
|
.layui-side-white .layui-this>a,
|
||
|
|
.layui-side-white .layui-this>a:hover {background-color: #EBF3FF;}
|
||
|
|
.layui-side-white .layui-nav-child dd a:hover{background-color:#F8FAFF!important;color: #1A75FF!important; opacity: 0.9;}
|
||
|
|
|
||
|
|
/**blue**/
|
||
|
|
.layui-side-blue{background-color:#192A5E; color: #C5C9D2;}
|
||
|
|
.layui-side-blue .layui-logo {background-color:#192A5E;border-bottom: 1px solid #122150;}
|
||
|
|
.layui-side-blue .layui-nav-itemed>.layui-nav-child{background-color:#122150!important;}
|
||
|
|
.layui-side-blue .layui-nav-item a,
|
||
|
|
.layui-side-blue .layui-nav-itemed>a,
|
||
|
|
.layui-side-blue .layui-nav-title a,
|
||
|
|
.layui-side-blue .layui-nav-title a:hover{color:#C5C9D2!important;}
|
||
|
|
.layui-side-blue .layui-nav-child dd.layui-this,
|
||
|
|
.layui-side-blue .layui-nav-child dd.layui-this a,
|
||
|
|
.layui-side-blue .layui-this,
|
||
|
|
.layui-side-blue .layui-this>a,
|
||
|
|
.layui-side-blue .layui-this>a:hover {background-color: #3c508c;color: #ffffff;}
|
||
|
|
.layui-side-blue .layui-nav-child dd a:hover{background-color:#2b3e79!important;color: #C5C9D2!important;}
|
||
|
|
|
||
|
|
.page-tabs{ position: fixed; top: 50px; right: 0; z-index: 999; height: 42px; line-height: 42px; padding: 0 80px 0 40px; background-color: #fff; box-sizing: border-box; box-shadow: 0 1px 3px rgb(0 0 0 / 12%);}
|
||
|
|
.gg-layout .page-tabs,
|
||
|
|
.gg-layout .layui-body,
|
||
|
|
.gg-layout .layui-footer,
|
||
|
|
.gg-layout .layui-layout-left {left: 180px}
|
||
|
|
|
||
|
|
.layout-menu-expand .page-tabs,
|
||
|
|
.layout-menu-expand .layui-body,
|
||
|
|
.layout-menu-expand .layui-footer,
|
||
|
|
.layout-menu-expand .layui-layout-left {left: 120px;}
|
||
|
|
.layout-menu-expand .layui-logo{width:120px;}
|
||
|
|
|
||
|
|
.layout-menu-expand .layui-body.sub-menu{left: 240px;}
|
||
|
|
|
||
|
|
.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: 42px;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: 42px; 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: 3px; border-radius: 0; background-color: #1A75FF;
|
||
|
|
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:#1A75FF}
|
||
|
|
|
||
|
|
.page-tabs .layui-tab-title li.layui-this:after {width: 100%; border: none; background-color: #1A75FF}
|
||
|
|
|
||
|
|
.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: #323232}
|
||
|
|
|
||
|
|
.gg-layout .layui-logo .logo{display: none}
|
||
|
|
.side-spread .gg-layout .layui-logo {width: 52px;}
|
||
|
|
.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: 52px}
|
||
|
|
.side-spread .layui-side-expand .menu-li > a > i{left:15px;}
|
||
|
|
.side-spread .layui-side-expand .menu-li .gg-second-menu{left:52px;}
|
||
|
|
|
||
|
|
.side-spread .page-tabs,
|
||
|
|
.side-spread .gg-layout .layui-body,
|
||
|
|
.side-spread .gg-layout .layui-footer,
|
||
|
|
.side-spread .gg-layout .layui-layout-left {left: 52px}
|
||
|
|
|
||
|
|
.side-spread .layout-menu-expand .layui-body.sub-menu{left: 172px;}
|
||
|
|
|
||
|
|
.side-spread .layui-side .layui-nav {position: static; width: 52px}
|
||
|
|
.side-spread .layui-side .layui-nav-item {position: static}
|
||
|
|
.side-spread .layui-side .layui-nav-item>a {padding-right: 0;padding-left:55px;}
|
||
|
|
|
||
|
|
.side-spread .layui-side .layui-nav-item cite,
|
||
|
|
.side-spread .layui-side .layui-nav>.layui-nav-item>.layui-nav-child,
|
||
|
|
.side-spread .layui-side .layui-nav>.layui-nav-item>a .layui-nav-more {display: none; padding: 8px 0;width: 180px}
|
||
|
|
|
||
|
|
.side-spread .layui-side .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;}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
/** tab过场动画 **/
|
||
|
|
.tab-loading{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 666666; display: block; width: 100%; height: 100%; background-color: #fafafa;}
|
||
|
|
.tab-loader {position: absolute;top: calc(50% - 1.6em);left: calc(50% - 1.6em); width: 3.2em; height: 3.2em; transform: rotate(165deg);}
|
||
|
|
.tab-loader:before,.tab-loader:after {content: ""; position: absolute; top: 50%; left: 50%; display: block; width: 0.6em; height: 0.6em; border-radius: 0.3em; transform: translate(-50%, -50%);}
|
||
|
|
.tab-loader:before { animation: before 2s infinite;}
|
||
|
|
.tab-loader:after {animation: after 2s infinite;}
|
||
|
|
|
||
|
|
@keyframes before {
|
||
|
|
0% {
|
||
|
|
width: 0.6em;
|
||
|
|
box-shadow: 1.6em -0.6em rgba(225, 20, 98, 0.88), -1.6em 0.6em rgba(111, 202, 220, 0.88);
|
||
|
|
}
|
||
|
|
35% {
|
||
|
|
width: 3.2em;
|
||
|
|
box-shadow: 0 -0.6em rgba(225, 20, 98, 0.88), 0 0.6em rgba(111, 202, 220, 0.88);
|
||
|
|
}
|
||
|
|
70% {
|
||
|
|
width: 0.6em;
|
||
|
|
box-shadow: -1em -0.6em rgba(225, 20, 98, 0.88), 1.6em 0.6em rgba(111, 202, 220, 0.88);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
box-shadow: 1em -0.6em rgba(225, 20, 98, 0.88), -1.6em 0.6em rgba(111, 202, 220, 0.88);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes after {
|
||
|
|
0% {
|
||
|
|
height: 0.6em;
|
||
|
|
box-shadow: 0.6em 1.6em rgba(61, 184, 143, 0.88), -0.6em -1.6em rgba(233, 169, 32, 0.88);
|
||
|
|
}
|
||
|
|
35% {
|
||
|
|
height: 3.2em;
|
||
|
|
box-shadow: 0.6em 0 rgba(61, 184, 143, 0.88), -0.6em 0 rgba(233, 169, 32, 0.88);
|
||
|
|
}
|
||
|
|
70% {
|
||
|
|
height: 0.6em;
|
||
|
|
box-shadow: 0.6em -1.6em rgba(61, 184, 143, 0.88), -0.6em 1.6em rgba(233, 169, 32, 0.88);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
box-shadow: 0.6em 1.6em rgba(61, 184, 143, 0.88), -0.6em -1.6em rgba(233, 169, 32, 0.88);
|
||
|
|
}
|
||
|
|
}
|