/* * 自定义管理界面,基于LayUI框架构建 * Layui link: http://www.layui.com * Custom style author: Bie Jun */ /* * 字体图标 */ @font-face {font-family: "AI"; src: url('../font/ai.eot?t=1522660080732'); /* IE9*/ src: url('../font/ai.eot?t=1522660080732#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), url('../font/ai.ttf?t=1522660080732') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('../font/ai.svg?t=1522660080732#AI') format('svg'); /* iOS 4.1- */ } .ai { font-family:"AI" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ai-enter:before { content: "\e766"; } .ai-menufold:before { content: "\e636"; } .ai-menuunfold:before { content: "\e6c0"; } /* 预定义整体布局配色,你可以修改这里的色值为自己喜欢的颜色 */ .layui-layout-body{ background-color: #f0f2f5; } .layui-layout-admin .layui-header{ background-color: #fff; } .layui-layout-admin .layui-side, .layui-nav, .custom-admin .layui-nav-tree .layui-nav-item.layui-nav-itemed > a, .layui-nav-tree .layui-nav-item a:hover{ background-color: #001529; } .custom-admin .layui-nav-child, .custom-admin .layui-nav-child a{ background-color: #000c17!important; } .custom-admin .layui-nav-child dd.layui-this a{ background-color: #177ce3; background-repeat: repeat-y; background-image: -moz-linear-gradient(left,#29adeb,#177ce3); background-image: -webkit-linear-gradient(left,#29adeb,#177ce3); background-image: -o-linear-gradient(left,#29adeb,#177ce3); background-image: linear-gradient(left,#29adeb,#177ce3); } .custom-header .layui-nav, .custom-header .layui-nav .layui-nav-item a{ color: rgba(0,0,0,.8); } .custom-admin .layui-nav-tree .layui-nav-item a{ color: hsla(0,0%,100%,.65); transition: all .3s; } .custom-admin .layui-nav-tree .layui-nav-item a:hover, .custom-admin .layui-nav-tree .layui-nav-item a:hover .layui-nav-more:before, .custom-admin .layui-nav-tree .layui-nav-itemed > a .layui-nav-more:before{ color: #fff; } .custom-admin .layui-nav-tree .layui-nav-item a > i{ margin-right: 5px; } .custom-admin .layui-nav-tree .layui-nav-item a > em{ font-style: normal; } .layui-layout-admin .layui-footer{ background-color: #e8eaed; } /* 折叠边栏 */ .layui-layout.fold-side-bar .layui-side.custom-admin, .layui-layout.fold-side-bar .layui-side.custom-admin .layui-nav-tree{ width: 60px; } .layui-layout.fold-side-bar .layui-side.custom-admin .layui-side-scroll{ width: 80px; } .layui-layout.fold-side-bar .custom-header .layui-nav.layui-layout-left, .layui-layout.fold-side-bar .layui-body, .layui-layout.fold-side-bar .layui-footer{ left: 60px; } .fold-side-bar .custom-admin .custom-logo img{ margin-left: 12px; } .fold-side-bar .layui-side.custom-admin .layui-nav-more, .fold-side-bar .custom-admin .layui-nav-item a > em, .fold-side-bar .custom-admin .custom-logo h1, .fold-side-bar .layui-side.custom-admin .layui-nav-child{ display: none; } /* 布局样式重定义 */ html, body , .app-container{ height: 100%; } .layui-layout{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } .app-container{ position: absolute; top: 0; left:0; right: 0; bottom: 0; margin:0; } .app-container .layui-tab-content{ position: absolute; top: 40px; bottom: 0; left: 0; right: 0; padding: 0; overflow: hidden; } .app-container .layui-tab-content .layui-tab-item, .app-container .layui-tab-item > iframe{ width: 100%; height: 100%; } .custom-header{ height: 50px; } .custom-tab{ padding: 0 20px; background-color: #fff; box-shadow: rgba(0, 21, 41, 0.08) 0px 1px 4px; border:none; border-top:1px solid #f6f6f6; z-index: 999; } .layui-tab-title.custom-tab .layui-this{ background-color: #f0f4fb; } .layui-tab-title.custom-tab .layui-this:after{ border: none; height: 3px; background-color: #177ce3; background-repeat: repeat-y; background-image: -moz-linear-gradient(left,#29adeb,#177ce3); background-image: -webkit-linear-gradient(left,#29adeb,#177ce3); background-image: -o-linear-gradient(left,#29adeb,#177ce3); background-image: linear-gradient(left,#29adeb,#177ce3); } .layui-layout-admin .layui-side.custom-admin, .layui-layout-admin .layui-side.custom-admin .layui-nav-tree{ width: 260px; } .layui-layout-admin .layui-side.custom-admin .layui-side-scroll{ width: 280px; } .layui-body, .layui-layout-admin .layui-footer, .layui-layout-admin .custom-header .layui-nav.layui-layout-left{ left: 260px; } .layui-layout-admin .layui-side.custom-admin{ top: 0; z-index: 1001; -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35); box-shadow: 2px 0 6px rgba(0,21,41,.35); } .custom-header .layui-nav .layui-nav-item{ line-height: 50px; } .custom-header .layui-nav-child{ top: 55px; } .custom-admin .layui-nav-itemed .layui-nav-child dd a{ padding-left: 43px; } .layui-layout-admin .layui-body{ top: 50px; } .layui-layout-admin .layui-footer{ border-top: 1px solid #dfdfdf; } .layui-layout-admin .layui-footer p{ color: rgba(0,0,0,.45); } .layui-side.custom-admin, .layui-body, .custom-header, .custom-header .layui-nav.layui-layout-left, .layui-footer{ transition: all .3s; -webkit-transition: all .3s; } @media screen and (max-width: 992px){ .layui-layout-admin .layui-side.custom-admin { transform: translate3d(-265px,0,0); -webkit-transform: translate3d(-265px,0,0); } .layui-body, .layui-layout-admin .layui-footer, .layui-layout-admin .custom-header .layui-nav.layui-layout-left{ left: 0; } .fold-side-bar-xs .layui-side.custom-admin{ -webkit-transform: translate(0,0,0); transform: translate3d(0,0,0); } .fold-side-bar-xs .layui-body, .fold-side-bar-xs .layui-footer, .fold-side-bar-xs .custom-header{ transform: translate3d(260px,0,0); -webkit-transform: translate3d(260px,0,0); } } .custom-header .layui-nav .layui-nav-more, .custom-admin .layui-nav .layui-nav-more{ width: 25px; top: 0; border:none; overflow: visible; margin-top: 0; } .custom-header .layui-nav .layui-nav-more{ top: 0; right: -10px; } .custom-header .layui-nav .slide-sidebar a.icon-font{ padding: 0; color: #2c2e2f; } .custom-header .layui-nav .slide-sidebar a.icon-font > i{ font-size: 18px; } .custom-header .layui-nav .layui-nav-more:before, .custom-admin .layui-nav .layui-nav-more:before, .custom-admin .layui-nav-itemed .layui-nav-more:before{ font-family: layui-icon!important; font-size: 11px; color: #6d747a; } .custom-header .layui-nav .layui-nav-more:before, .custom-admin .layui-nav .layui-nav-more:before, .custom-admin .layui-nav-itemed .layui-nav-more:before{ position: absolute; left: 0; top: 0; } .custom-header .layui-nav .layui-nav-more:before, .custom-admin .layui-nav .layui-nav-more:before{ content: '\e61a'; } .custom-admin .layui-nav-itemed > a .layui-nav-more:before{ content: '\e619'; } .custom-logo{ height: 50px; line-height: 50px; color: #fff; background-color: #002140; vertical-align: middle; } .custom-logo img{ margin-left: 20px; height: 32px; } .custom-logo h1{ display: inline; margin: 0 20px 0 10px; font-size: 18px; vertical-align: middle; } .layui-nav-bar{ height: 3px; background-color: #177ce3; background-repeat: repeat-y; background-image: -moz-linear-gradient(left,#29adeb,#177ce3); background-image: -webkit-linear-gradient(left,#29adeb,#177ce3); background-image: -o-linear-gradient(left,#29adeb,#177ce3); background-image: linear-gradient(left,#29adeb,#177ce3); } .custom-header .layui-nav-bar{ top: 0!important; } .layui-nav-tree .layui-nav-bar{ display: none; } .custom-header .layui-tab-title li .custom-header .layui-tab-title li.layui-this .layui-tab-close{ color: #000; } .mobile-mask{ position: fixed; display: none; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,.3); z-index: 1000; }