index.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. /*公共样式*/
  2. .header .layui-nav-child{ z-index:99999; top:60px; left: auto; right: 0;}
  3. .seraph{ font-size:16px !important;}
  4. .main_body{ min-width:320px; }
  5. .layui-nav .layui-nav-item a{ cursor:pointer;}
  6. .layui-nav .layui-nav-item>a{ color:rgba(255,255,255,1); max-height:60px;}
  7. .layui-layer-tab .layui-layer-title span{ padding:0 !important;}
  8. iframe{ position:absolute; height:100%; width:100%; border:none;}
  9. .top_menu.layui-nav .layui-nav-child dd.layui-this a,.closeBox.layui-nav .layui-nav-child dd.layui-this a,.closeBox .layui-nav-child dd.layui-this,.top_menu .layui-nav-child dd.layui-this{ background:none; color:#333;}
  10. .layui-nav .layui-nav-child a:hover,.layui-nav .layui-nav-child dd.layui-this a:hover{background-color:#5FB878;color:#fff;}
  11. .layui-nava a{ cursor:pointer;}
  12. .layui-nava{ background:none; color:#333;}
  13. .layui-nava a:hover{ background-color:#5FB878;color:#fff}
  14. /*模拟加载层图标样式*/
  15. .layui-layer-dialog .layui-layer-content .layui-layer-ico16{ background-size:100% 100% !important; }
  16. /*样式改变的过渡*/
  17. .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; }
  18. /*隐藏*/
  19. *[mobile],.component .layui-select-title i.layui-edge{ display:none;}
  20. /*打开页面动画*/
  21. .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; }
  22. @keyframes moveTop{
  23. 0% {opacity: 0;-webkit-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px);}
  24. 100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
  25. }
  26. @-o-keyframes moveTop{
  27. 0% {opacity: 0;-webkit-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px);}
  28. 100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
  29. }
  30. @-moz-keyframes moveTop{
  31. 0% {opacity: 0;-webkit-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px);}
  32. 100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
  33. }
  34. @-webkit-keyframes moveTop{
  35. 0% {opacity: 0;-webkit-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px);}
  36. 100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
  37. }
  38. /*锁屏*/
  39. .admin-header-lock{width: 320px; height: 170px; padding: 20px; position: relative; text-align: center;}
  40. .admin-header-lock-img{width:70px; height:70px; margin: 0 auto;}
  41. .admin-header-lock-img img{width:70px; height:70px; border-radius: 100%; box-shadow:0 0 30px #44576b;}
  42. .admin-header-lock-name{color: #009688;margin: 8px 0 15px 0;}
  43. .input_btn{ overflow: hidden; margin-bottom: 10px; }
  44. .admin-header-lock-input{width: 170px; color: #fff;background-color: #009688; float: left; margin:0 10px 0 40px; border:none;}
  45. .admin-header-lock-input::-webkit-input-placeholder {color:#fff;}
  46. .admin-header-lock-input::-moz-placeholder {color:#fff;}
  47. .admin-header-lock-input:-ms-input-placeholder {color:#fff;}
  48. .admin-header-lock-input:-moz-placeholder {color:#fff;}
  49. #unlock{ float: left; }
  50. #lock-box p{ color:#e60000; }
  51. /*顶部*/
  52. .header{ z-index:2000;}
  53. .logo{ color: #fff; float: left; line-height:60px; font-size:20px; padding:0 25px; text-align: center; width:150px;}
  54. .hideMenu{ float:left; width:20px; height:20px; margin-top:15px; font-size:17px; line-height:20px; text-align:center; padding:5px 5px; color:#fff; background-color:#1AA094; }
  55. .hideMenu:hover{ color:#fff; }
  56. .layui-nav cite{ margin-left: 5px;}
  57. /*顶部右侧*/
  58. .topLevelMenus{float:left;}
  59. .topLevelMenus li.layui-nav-item:hover{ background-color:rgba(221,221,221,0.2);}
  60. .layui-nav .layui-this:after{ bottom:-5px!important;}
  61. .header .layui-nav-bar{top:60px !important;}
  62. .topLevelMenus .layui-nav-item.layui-this{ background-color:rgba(0,0,0,0.5);}
  63. .top_menu.layui-nav .layui-this:after{ width:0px; }
  64. .top_menu .layui-nav-bar,.mobileTopLevelMenus .layui-nav-bar{background-color:rgba(0,0,0,0.7);}
  65. /*左侧导航*/
  66. .layui-nav{background-color: inherit !important;}
  67. .showMenu.layui-layout-admin .layui-side{ left:-200px; }
  68. .showMenu .layui-body,.showMenu .layui-footer{ left:0; }
  69. /*左侧用户头像*/
  70. /*.top_menu{ background-color:inherit !important; position:absolute; right:0;top:0;}*/
  71. .topmenu_a{background-color:inherit !important; position:absolute; right:0;top:0;}
  72. .layui-layout-admin .layui-side{ left:0; overflow:hidden;}
  73. .user-photo{width: 200px; height: 120px; padding:15px 0 5px;}
  74. .user-photo a.img{ display: block; width:80px; height:80px; margin: 0 auto 10px;}
  75. .user-photo a.img img{ display: block; border: none; width: 100%; height: 100%; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border: 4px solid #44576b; box-sizing:border-box;}
  76. .user-photo p{ display: block; width: 100%; height: 25px; color: #ffffff; text-align: center; font-size: 12px; white-space: nowrap;line-height: 25px; overflow: hidden;}
  77. /*左侧导航重定义*/
  78. .layui-nav-item.layui-nav-itemed{ background-color:#2B2E37 !important;}
  79. .layui-nav-itemed:before{ width:5px; height:100%; background-color:#009688; position:absolute; content:''; left:0; top:0;}
  80. .layui-nav-itemed .layui-nav-child a{ padding-left:40px;}
  81. /*左侧搜索框*/
  82. .component{ width:180px; height:30px; margin:0 auto 5px; position:relative;}
  83. .component .layui-input{ height:30px; line-height: 30px; font-size:12px; border:none; transition: all 0.3s; background:rgba(255,255,255,0.05); }
  84. .component .layui-input:focus{ background:#fff; color:#000; }
  85. .component .layui-form-select dl{ top:33px; background:#fff; }
  86. .component .layui-icon{ position: absolute; right:8px; top:8px; color:#000; }
  87. .component dl dd{ color:#000 !important;}
  88. .component dl dd.layui-this{ color:#fff !important;}
  89. .component dl dd.layui-select-tips{ color:#999 !important;}
  90. /*layui-body*/
  91. .layui-body{overflow:hidden; border-top:5px solid #1AA094;border-left:2px solid #1AA094; background:#fff;}
  92. #top_tabs_box{ padding-right:138px; height:40px; border-bottom:1px solid #e2e2e2; }
  93. #top_tabs{ position: absolute; border-bottom:none;}
  94. .layui-tab-title .layui-this{ background-color:#1AA094; color:#fff; }
  95. .layui-tab-title .layui-this:after{ border:none; }
  96. .layui-tab-title li cite{ font-style: normal; padding-left:5px; }
  97. .clildFrame.layui-tab-content{ top:41px; position:absolute; bottom:0; width:100%; padding:0;}
  98. /*多窗口页面操作下拉*/
  99. #closeBox{position:absolute; right:0; background-color:#fff !important; color:#000; border-left:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2;}
  100. /*.closeBox .layui-nav-item{ line-height:40px; }*/
  101. /*.closeBox .layui-nav-item>a,.closeBox .layui-nav-item>a:hover{ color:#000; }*/
  102. /*.closeBox .layui-nav-child{ top:42px; left:-12px; }*/
  103. /*.closeBox .layui-nav-bar{ display:none; }*/
  104. /*.closeBox a i.caozuo{ font-size: 20px; position:absolute; top:1px; left:0; }*/
  105. /*.closeBox a span.layui-nav-more{ border-color:#333 transparent transparent;}*/
  106. /*.closeBox a span.layui-nav-more.layui-nav-mored{ border-color:transparent transparent #333;}*/
  107. #closeBox .layui-nav-item{ line-height:40px; }
  108. #closeBox .layui-nav-item>a,#closeBox .layui-nav-item>a:hover{ color:#000; }
  109. #closeBox .layui-nav-child{ top:42px; left:-12px; }
  110. #closeBox .layui-nav-bar{ display:none; }
  111. #closeBox a i.caozuo{ font-size: 20px; position:absolute; top:1px; left:0; }
  112. #closeBox a span.layui-nav-more{ border-color:#333 transparent transparent;}
  113. #closeBox a span.layui-nav-more.layui-nav-mored{ border-color:transparent transparent #333;}
  114. /*功能设定*/
  115. .functionSrtting_box{ padding-top:15px;}
  116. .functionSrtting_box .layui-form-label{ width:81px;}
  117. .functionSrtting_box .layui-word-aux{ position:absolute;left:60px; top:9px; font-size: 12px;}
  118. /*换肤*/
  119. .skins_box{ padding:10px 34px 0; }
  120. .skinBtn{ text-align:center; }
  121. /*橙色*/
  122. .orange .layui-layout-admin .layui-header{ background-color:orange !important; }
  123. .orange .layui-bg-black{ background-color:#e47214 !important; }
  124. /*蓝色*/
  125. .blue .layui-layout-admin .layui-header{ background-color:#3396d8 !important; }
  126. .blue .layui-bg-black,.blue .hideMenu{ background-color:#146aa2 !important; }
  127. /*自定义*/
  128. .skinCustom{ visibility:hidden; }
  129. .skinCustom input{ width:48%; margin:5px 2% 5px 0; float:left; }
  130. .orange .layui-nav-tree .layui-nav-child a,.blue .layui-nav-tree .layui-nav-child a{ color:#fff; }
  131. .orange .top_menu.layui-nav .layui-nav-more,.blue .top_menu.layui-nav .layui-nav-more{border-color:#fff transparent transparent !important;}
  132. .orange .top_menu.layui-nav-itemed .layui-nav-more,.orange .top_menu.layui-nav .layui-nav-mored,.blue .top_menu.layui-nav-itemed .layui-nav-more,.blue .top_menu.layui-nav .layui-nav-mored{border-color:transparent transparent #fff !important;}
  133. /*底部*/
  134. .footer{ text-align: center; line-height:44px;border-left: 2px solid #1AA094; z-index:999;}
  135. .top_menu{}
  136. /*响应式样式*/
  137. @media screen and (max-width:1080px){
  138. .mobileTopLevelMenus[mobile]{display:inline-block;}
  139. .site-mobile .site-tree-mobile,.topLevelMenus[pc]{display:none !important;}
  140. }
  141. @media screen and (max-width: 720px){
  142. .hideMenu{ display: none !important; }
  143. .mobileTopLevelMenus[mobile]{ padding:0;}
  144. .top_menu>li[pc]{ display: none !important; }
  145. /*左侧导航*/
  146. .layui-layout-admin .layui-side{ left:-260px; }
  147. .site-mobile .layui-side{ left: 0; z-index:1100; }
  148. .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;}
  149. .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;}
  150. .layui-body,.layui-layout-admin .layui-footer{ left:-2px; }
  151. }
  152. @media screen and (max-width:480px){
  153. .logo{ width:120px; font-size: 18px;}
  154. #userInfo>a{ padding:0 10px;}
  155. .mobileTopLevelMenus[mobile] li>a{ padding:0 17px 0 15px;}
  156. .logo,.layui-nav.top_menu{ padding:0 5px;}
  157. .adminName,.top_menu dd[pc]{ display: none !important; }
  158. *[mobile],.top_menu .layui-nav-item.showNotice[pc]{ display:inline-block !important; }
  159. }
  160. /*修改顶部高度*/
  161. .header .layui-nav-child,.layui-body,.layui-layout-admin .layui-side,.header .layui-nav-bar{ top:50px !important;}
  162. .header .layui-nav .layui-nav-item,.header .layui-nav .layui-nav-item>a,.header,.logo{ line-height:50px !important; max-height:50px; !important;}
  163. .mobileTopLevelMenus{ float:left;}
  164. .hideMenu{ margin-top: 10px;}