You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
6.6 KiB
140 lines
6.6 KiB
|
|
|
|
/*模拟加载层图标样式*/
|
|
.layui-layer-dialog .layui-layer-content .layui-layer-ico16{ background-size:100% 100% !important; }
|
|
/*样式改变的过渡*/
|
|
.layui-body,.layui-footer,.layui-layout-admin .layui-side,.logo,.topLevelMenus li.layui-nav-item,.topLevelMenus li.layui-nav-item:hover{ transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; }
|
|
|
|
|
|
/*打开页面动画*/
|
|
.layui-tab-item.layui-show{ animation:moveTop 1s; -webkit-animation:moveTop 1s; animation-fill-mode:both; -webkit-animation-fill-mode:both; position:relative; height:100%; -webkit-overflow-scrolling: touch; overflow:auto; }
|
|
@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);}
|
|
}
|
|
|
|
|
|
/* layui框架样式定义 */
|
|
body .layui-layout-admin .layui-body{
|
|
padding-bottom: 0px;
|
|
}
|
|
/* layui头部 */
|
|
body .layui-layout-admin .layui-header {
|
|
background-color: #3352AF;
|
|
height:80px;
|
|
}
|
|
body .layui-layout-admin .layui-header .layui-main { line-height:80px; height:80px;}
|
|
/* ======================= */
|
|
|
|
/* layui头部-左侧*/
|
|
body .layui-layout-admin .layui-header .layui-main .logo{ color: #fff; float: left; font-size:30px; text-align: center; background:url(../images/logo.png) no-repeat center left; padding-left:60px;}
|
|
body .layui-layout-admin .layui-header .layui-main .hideMenu{ vertical-align:middle; width:20px; height:20px; font-size:17px; margin-left:20px; text-align:center; padding:5px 5px; color:#fff; background-color:rgba(30,32,38,0.4); }
|
|
|
|
|
|
/* layui头部-右侧*/
|
|
.layui-header .layui-main ul.larry-header-item{
|
|
height: 80px;
|
|
float:right;
|
|
color:#738AD0;
|
|
}
|
|
.layui-header .layui-main ul.larry-header-item li.layui-nav-item{
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
|
|
}
|
|
|
|
.layui-header .layui-main ul.larry-header-item .layui-this{
|
|
|
|
border-bottom: none;
|
|
}
|
|
.layui-header .layui-main ul.larry-header-item .layui-this::after{
|
|
background: transparent;
|
|
}
|
|
/* ======================= */
|
|
|
|
|
|
/* layui左侧 */
|
|
body .layui-layout-admin .layui-side {top: 80px; width: 300px; overflow-x: hidden; background-color: #0C1D55;}
|
|
/*左侧导航树形菜单样式 */
|
|
.layui-side-scroll{ width:320px;}
|
|
.layui-nav{background-color: inherit !important; }
|
|
.layui-nav-tree .layui-nav-itemed{ border:none;background:#3352AF !important;}
|
|
.layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after{background:rgba(16,57,173,1);}
|
|
.layui-nav-tree{color:#fff; width:300px; background:none; height:100%; top:0; bottom:0; margin-top:0px;}
|
|
.layui-nav-tree li{ background:rgba(16,57,173,0.1); margin-top:2px;}
|
|
.layui-nav-tree li:hover { border:none;}
|
|
.layui-nav-tree .layui-nav-item a:hover { background:rgba(16,57,173,0.6); border:none;}
|
|
.layui-nav-tree li a{ font-size:16px; font-weight:bold; color:#fff;}
|
|
.layui-nav-tree .layui-nav-child dd.layui-this a{background:rgba(16,57,173,0.8);}
|
|
.layui-nav-tree .layui-nav-item a cite{ margin-left:10px;}
|
|
|
|
.layui-nav .layui-nav-child {background:rgba(16,57,173,0.1); margin-left:0px; }
|
|
.layui-nav .layui-nav-child dd { margin-top:2px; background:rgba(16,57,173,0.1);}
|
|
.layui-nav .layui-nav-child dd a{ padding-left:40px;}
|
|
.layui-nav-tree .layui-nav-bar {width: 5px; height: 0; background-color: rgba(16,57,173,1); }
|
|
.icon-menu-apple{background:url(../img/arrow_right.png) no-repeat;}
|
|
/* ======================= */
|
|
|
|
|
|
/* layui右侧 */
|
|
body .layui-layout-admin .layui-body{ top: 80px; left:300px; bottom:0px;overflow:hidden;}
|
|
|
|
#top_tabs_box{ padding-right:138px; height:40px; border-bottom:1px solid #e2e2e2; margin:0px; background:#F2F2F2; }
|
|
#top_tabs{ position: absolute; border-bottom:none;}
|
|
.layui-tab-title{ height:35px; margin-top:5px; float:left }
|
|
.layui-tab-title .layui-this{ background-color:#3079EA; color:#fff; }
|
|
.layui-tab-title .layui-this:after{ border:none; }
|
|
.layui-tab-title li{height:35px; margin-left:2px;color:#575757; background-color:#fff;border:1px solid #e2e2e2;border-radius:5px 5px 0 0; }
|
|
.layui-tab-title li cite{ font-style: normal; padding-left:5px; }
|
|
.layui-tab-title li .layui-tab-close{top:-10px; right:-14px;}
|
|
.clildFrame.layui-tab-content{ top:41px; position:absolute; bottom:0; width:100%; padding:0;}
|
|
.clildFrame.layui-tab-content iframe{ position:absolute; height:100%; width:100%; border:none;}
|
|
|
|
|
|
|
|
|
|
|
|
.hideMenu:hover{ color:#fff; }
|
|
.showMenu.layui-layout-admin .layui-side{ left:-300px; }
|
|
.showMenu.layui-layout-admin .layui-body{ left:0px; }
|
|
/* ======================= */
|
|
|
|
|
|
|
|
|
|
/*响应式样式*/
|
|
@media screen and (max-width:1080px){
|
|
.mobileTopLevelMenus[mobile]{display:inline-block;}
|
|
.site-mobile .site-tree-mobile,.topLevelMenus[pc]{display:none !important;}
|
|
}
|
|
@media screen and (max-width: 720px){
|
|
.hideMenu{ display: none !important; }
|
|
.mobileTopLevelMenus[mobile]{ padding:0;}
|
|
.top_menu>li[pc]{ display: none !important; }
|
|
/*左侧导航*/
|
|
.layui-layout-admin .layui-side{ left:-260px; }
|
|
.site-mobile .layui-side{ left: 0; z-index:1100; }
|
|
.site-tree-mobile {display: block!important; position: fixed; z-index: 100000; bottom: 15px; left: 15px; width:40px; height:40px; line-height:40px; border-radius: 2px; text-align: center; background-color: rgba(0,0,0,.7); color: #fff;}
|
|
.site-mobile .site-mobile-shade { content: ''; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,.8); z-index: 999;}
|
|
.layui-body,.layui-layout-admin .layui-footer{ left:-2px; }
|
|
}
|
|
@media screen and (max-width:480px){
|
|
.logo{ width:120px; font-size: 18px;}
|
|
#userInfo>a{ padding:0 10px;}
|
|
.mobileTopLevelMenus[mobile] li>a{ padding:0 17px 0 15px;}
|
|
.logo,.layui-nav.top_menu{ padding:0 5px;}
|
|
.adminName,.top_menu dd[pc]{ display: none !important; }
|
|
*[mobile],.top_menu .layui-nav-item.showNotice[pc]{ display:inline-block !important; }
|
|
}
|
|
|