common.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. /**
  2. 配色方案(如有需要,请自行配置)
  3. */
  4. /**头部-配色*/
  5. .layui-layout-admin .layui-header{background-color:#1aa094;}
  6. .layui-header>ul>.layui-nav-item.layui-this,.LM-tool i:hover{background-color:#197971;}
  7. /**logo-配色*/
  8. .layui-layout-admin .layui-logo {background-color:#243346;}
  9. /**左侧-配色*/
  10. .layui-side.layui-bg-black,.layui-side.layui-bg-black>.layui-left-menu>ul {background-color:#2f4056;}
  11. .layui-left-menu .layui-nav .layui-nav-child a:hover:not(.layui-this) {background-color:#3b3f4b;}
  12. /**左侧菜单选中-配色*/
  13. .layui-layout-admin .layui-nav-tree .layui-this, .layui-layout-admin .layui-nav-tree .layui-this>a, .layui-layout-admin .layui-nav-tree .layui-nav-child dd.layui-this, .layui-layout-admin .layui-nav-tree .layui-nav-child dd.layui-this a {
  14. background-color: #1aa094;
  15. }
  16. /**头部样式 */
  17. .layui-layout-admin .header {position: fixed;left: 0;right: 0;top: 0;bottom: 0;}
  18. .layui-header-menu,.layui-header {height:60px !important;}
  19. .layui-header-pc-menu{width:calc(100% - 225px - 295px) !important; padding-right: 224px;box-sizing: border-box;}
  20. .layui-header-menu > .layui-nav-item {color:#1b1d21;height:30px !important;line-height:30px !important;}
  21. .layui-header > .layui-layout-right > .layui-nav-item {height:60px !important;line-height:60px !important;}
  22. .layui-layout-left {left:295px!important;}
  23. .layui-nav.layui-layout-left.layui-header-menu.mobile.layui-hide-xs {font-weight:bold;transition:all .2s;}
  24. /**头部样式(缩放) */
  25. .LM-mini .layui-layout-left.layui-header-menu.layui-hide-xs {left:155px!important;}
  26. /**logo演示(通用) */
  27. .layui-layout-admin .layui-logo {font-weight:bold;color:#ffffff!important;height:60px!important;line-height:60px !important;overflow:hidden;line-height:64px;transition:all .2s!important;}
  28. .layui-layout-admin .layui-logo img {display:inline-block;height:30px;vertical-align:middle;}
  29. .layui-layout-admin .layui-logo h1 {display:inline-block;margin:0 0 0 12px;color:#dadde2;font-weight:600;font-size:20px;font-family:Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;vertical-align:middle;}
  30. /**logo演示(缩放) */
  31. .LM-mini .layui-layout-admin .layui-logo {width:60px!important;}
  32. .LM-mini .layui-layout-admin .layui-logo h1 {display:none;}
  33. /**缩放工具(通用) */
  34. .LM-tool {position:absolute!important;top:0;left:235px;width:60px;height:100%;line-height:60px;text-align:center;color:#ffffff!important;transition:all .2s;}
  35. /**缩放工具(缩放) */
  36. .LM-mini .LM-tool {left:95px!important;}
  37. .LM-tool i {display:block;color:#fff;width:32px;height:32px;line-height:32px;border-radius:3px;text-align:center;margin-top:15px;cursor:pointer;}
  38. /**tab选项卡 */
  39. .layui-tab-title li cite {font-style:normal;padding-left:5px;}
  40. /*新增*/
  41. #top_tabs_box{background: #fff;}
  42. #top_tabs_box>.layui-tab-title {color:#acafb1;}
  43. #top_tabs_box>.layui-tab-title li:hover {color:#000000;background-color:#e7ebed;}
  44. #top_tabs_box .layui-tab-close {font-size:12px!important;width:14px!important;height:14px!important;line-height:16px!important;}
  45. #top_tabs_box .layui-tab-close:hover {border-radius:4em;background:#ff5722;}
  46. #top_tabs_box>.layui-tab-title>.layui-this>i:first-child {color:#009688;}
  47. #top_tabs_box>.layui-tab-title li {border-right:1px solid #e2e2e2;font-size: 12.5px!important;}
  48. #top_tabs_box>.layui-tab-title .layui-this {color:#000000;}
  49. #top_tabs_box>.layui-tab-title .layui-this:after {margin-top:33px;width: 100%;border: none;height: 2px;background-color: #243346;}
  50. #top_tabs_box {padding-right:138px;height:34px;border-bottom:1px solid #e2e2e2;}
  51. #top_tabs_box > .layui-tab-title ,#top_tabs_box > .closeBox {height:35px !important;}
  52. #top_tabs_box > .layui-tab-title > li ,#top_tabs_box > .closeBox > li {line-height:35px !important;}
  53. #top_tabs {position:absolute;border-bottom:none;}
  54. /**多窗口页面操作下拉**/
  55. .closeBox {position:absolute;right:15px;background-color:#fff !important;color:#000;border-left:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;padding:0 10px !important;}
  56. .closeBox .layui-nav-item {line-height:40px;}
  57. .closeBox .layui-nav-item > a,.closeBox .layui-nav-item > a:hover {color:#000;}
  58. .closeBox .layui-nav-child {top:40px;}
  59. .closeBox .layui-nav-bar {display:none;}
  60. .closeBox a i.caozuo {font-size:20px;position:absolute;top:1px;left:0;}
  61. .closeBox a span.layui-nav-more {border-color:#333 transparent transparent;}
  62. .closeBox a span.layui-nav-more.layui-nav-mored {border-color:transparent transparent #333;}
  63. /**左侧菜单栏 (通用) */
  64. .layui-side.layui-bg-black {transition:all .2s;}
  65. .layui-side.layui-bg-black>.layui-left-menu>ul {transition:all .2s;}
  66. .layui-side.layui-bg-black>.layui-left-menu > ul > .layui-nav-item:first-child {border-top:1px solid #4b5461;}
  67. .layui-left-menu .layui-nav .layui-nav-item a {height:40px;line-height:40px;padding-right:30px;}
  68. .layui-left-menu .layui-nav .layui-nav-item>a {padding-top:5px;padding-bottom:5px;}
  69. .layui-left-menu .layui-nav .layui-nav-child .layui-nav-child {background:0 0!important}
  70. .layui-left-menu .layui-nav .layui-nav-more {right:15px;}
  71. /**左侧菜单栏 (正常) */
  72. .LM-all .layui-nav-itemed .layui-nav-child a ,.LM-all .layui-left-menu .layui-nav .layui-nav-child a{padding-left:35px;}
  73. .LM-all .layui-left-menu .layui-nav .layui-nav-child .layui-nav-child a {padding-left:45px;}
  74. .LM-all .layui-left-menu .layui-nav .layui-nav-child .layui-nav-child .layui-nav-child a {padding-left:55px;}
  75. .LM-all .layui-left-menu .layui-nav .layui-nav-child .layui-nav-child .layui-nav-child .layui-nav-child a {padding-left:65px;}
  76. .LM-all .layui-left-menu .layui-nav .layui-nav-itemed>.layui-nav-child {padding:5px 0;}
  77. /**左侧菜单栏(缩放) */
  78. .LM-mini .layui-left-menu {width: 80px !important;}
  79. .LM-mini .layui-side.layui-bg-black,.LM-mini .layui-left-menu>ul ,.LM-mini .layui-left-menu>ul li i {width:60px!important;}
  80. .LM-mini .layui-left-menu>ul li span:first-child {display:none;}
  81. .LM-mini .layui-left-menu>ul li span:last-child {float:right; right: 7px;}
  82. .LM-mini .layui-left-menu .layui-nav .layui-nav-item a {height:40px;line-height:40px;padding-right:0px!important;}
  83. /**内容主体(通用) */
  84. .layui-layout-admin .layui-body {overflow:hidden;bottom:0px !important;top:60px !important;transition:all .2s;}
  85. /**内容主体(缩放) */
  86. .LM-mini .layui-layout-admin .layui-body {left:60px!important;}
  87. /**选择配色方案 */
  88. .LM-color .color-title {padding: 10px 0 10px 20px;border-bottom: 1px solid #d9dada;margin-bottom: 8px;}
  89. .LM-color .color-content {padding: 0 5px 0 5px;}
  90. .LM-color .color-content ul {list-style: none;text-align: center;}
  91. .LM-color .color-content ul li {position: relative;display: inline-block;vertical-align: top;width: 80px;height: 50px;margin: 0 15px 15px 0;padding: 2px 2px 4px 2px;background-color: #f2f2f2;cursor: pointer;font-size: 12px;color: #666;}
  92. .LM-color .color-content li.layui-this:after, .LM-color .color-content li:hover:after {width: 100%;height: 100%;padding: 4px;top: -5px;left: -5px;border-color: #d8d8d8;opacity: 1;}
  93. .LM-color .color-content li:after {content: '';position: absolute;z-index: 20;top: 50%;left: 50%;width: 1px;height: 0;border: 1px solid #f2f2f2;transition: all .3s;-webkit-transition: all .3s;opacity: 0;}
  94. /**其它 */
  95. .layui-tab-item {width:100% !important;height:100% !important;}
  96. .layui-nav-item.layui-this {background-color:#1b1d21;}
  97. .layui-width-height {width:100%;height:95%;}
  98. .layui-tab {margin:0 0 0 0;z-index:99999;}
  99. .text-center {height:30px !important;line-height:30px !important;text-align:center !important;}
  100. .layui-nav {padding:0 !important;}
  101. .layui-nav .layui-this:after,.layui-nav-bar,.layui-nav-tree .layui-nav-itemed:after {width:0 !important;height:0 !important;}
  102. .layui-layout-admin .layui-side {top:60px !important;}
  103. .layui-tab-card {box-shadow:0px 0px 0px #888888;border-bottom:0;}
  104. .clildFrame.layui-tab-content {top:35px;position:absolute;bottom:0px;width:100%;padding:0;}
  105. * {touch-action:pan-y;}
  106. .layui-layout-admin .layui-footer{ font-size: 12px;text-align: center;width: 100%;height: 30px;line-height: 30px;}
  107. /*打开页面动画*/
  108. .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; }
  109. @keyframes moveTop{
  110. 0% {opacity: 0;-webkit-transform: translateY(30px);-ms-transform: translateY(30px);transform: translateY(30px);}
  111. 100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
  112. }
  113. @-o-keyframes moveTop{
  114. 0% {opacity: 0;-webkit-transform: translateY(30px);-ms-transform: translateY(30px);transform: translateY(30px);}
  115. 100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
  116. }
  117. @-moz-keyframes moveTop{
  118. 0% {opacity: 0;-webkit-transform: translateY(30px);-ms-transform: translateY(30px);transform: translateY(30px);}
  119. 100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
  120. }
  121. @-webkit-keyframes moveTop{
  122. 0% {opacity: 0;-webkit-transform: translateY(30px);-ms-transform: translateY(30px);transform: translateY(30px);}
  123. 100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
  124. }
  125. /**
  126. 手机自适应样式
  127. */
  128. @media screen and (max-width:750px) {
  129. #top_tabs_box {border-bottom:0px!important;}
  130. .layui-layout-admin .layui-body .layui-tab-item.layui-show{border-top:1px solid #e2e2e2;}
  131. .LM-mini .LM-tool {left:15px !important;}
  132. .LM-tool i:hover {background-color:transparent!important;}
  133. .LM-all .layui-layout-left.layui-header-menu {transition:all .2s;float:right;right:5px;}
  134. .LM-all .layui-header-menu > .layui-nav-item {float:right;right:0px;}
  135. .LM-mini .layui-layout-left.layui-header-menu {left:50px !important;transition:all .2s;}
  136. .layui-layout-admin .layui-nav.layui-layout-right {margin-right:15px!important;}
  137. .layui-layout-admin .layui-nav.layui-layout-right>li:not(.LM-setting) {width:40px!important;}
  138. .layui-layout-admin .layui-nav.layui-layout-right>li:not(.LM-setting) a {padding:0 15px;}
  139. .LM-mini .layui-layout-admin .layui-body {left:0px!important;}
  140. .layui-layout-admin .layui-body .clildFrame.layui-tab-content {top:0px!important;}
  141. .layui-layout-admin .layui-body .clildFrame.layui-tab-content {overflow:scroll;able-layout:fixed;word-wrap:break-word;word-break:break-all;-webkit-overflow-scrolling:touch!important;}
  142. .LM-all .layui-nav.layui-layout-right,.LM-mini .layui-layout-admin .layui-logo ,.LM-mini .layui-side.layui-bg-black,.LM-mini .layui-left-menu,.layui-layout-admin .layui-body #top_tabs,.layui-layout-admin .layui-body .layui-nav.closeBox{
  143. transition:all .2s;display:none;}
  144. }
  145. /**
  146. 手机自适应样式
  147. */
  148. @media screen and (min-width:1782px) {
  149. .layui-header-menu > .layui-nav-item {color:#1b1d21;height:60px !important;line-height:60px !important;}
  150. }
  151. @media screen and (max-width:1220px) {
  152. .layui-hide-sm{
  153. display: block !important;
  154. }
  155. .layui-header-pc-menu {
  156. display: none !important;
  157. }
  158. .layui-header-menu > .layui-nav-item {color:#1b1d21;height:60px !important;line-height:60px !important;}
  159. }