console.layout.less 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. /* 页面布局 - 全局 */
  2. .layui-layout {
  3. > .layui-side {
  4. top: 50px;
  5. bottom: 0;
  6. overflow: auto
  7. }
  8. > .layui-body {
  9. top: 50px;
  10. bottom: 0;
  11. overflow: auto;
  12. > .layui-card {
  13. box-shadow: none;
  14. > .layui-card-body {
  15. padding: 15px 15px
  16. }
  17. > .layui-card-header {
  18. height: 50px;
  19. border: none;
  20. line-height: 50px;
  21. box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
  22. background: #fff
  23. }
  24. }
  25. }
  26. }
  27. /* 页面布局 - 头部 */
  28. .layui-header {
  29. height: 50px;
  30. background: #393D49 !important;
  31. [data-target-menu-type] {
  32. // box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .15);
  33. border-left: 1px solid rgba(0, 0, 0, 0);
  34. border-right: 1px solid rgba(0, 0, 0, .15);
  35. }
  36. .layui-layout-left,
  37. .layui-layout-right {
  38. padding: 0
  39. }
  40. .layui-logo {
  41. color: #fff;
  42. width: 199px;
  43. height: auto;
  44. font-size: 18px;
  45. line-height: 49px;
  46. border-right: 1px solid rgba(0, 0, 0, .15);
  47. border-bottom: 1px solid rgba(0, 0, 0, .15);
  48. sup {
  49. font-size: 9px;
  50. line-height: 9px
  51. }
  52. }
  53. .layui-nav-item {
  54. height: 50px;
  55. line-height: 50px;
  56. &.layui-this {
  57. background: #009688
  58. }
  59. > a {
  60. color: #fff !important
  61. }
  62. .layui-nav-child {
  63. top: 49px;
  64. padding: 0;
  65. border: none;
  66. line-height: 45px;
  67. + a {
  68. padding-right: 35px
  69. }
  70. &.layui-show + a {
  71. background: #fff
  72. }
  73. &.layui-show + a span {
  74. color: #333
  75. }
  76. dd a {
  77. padding: 0;
  78. color: #333;
  79. text-align: center;
  80. border-top: 1px solid #eaedf1
  81. }
  82. }
  83. }
  84. .layui-nav-bar, .layui-nav-item:after {
  85. display: none !important
  86. }
  87. .layui-layout-right {
  88. > li > a {
  89. border-left: 1px solid rgba(0, 0, 0, .15);
  90. border-right: 1px solid rgba(0, 0, 0, 0);
  91. }
  92. }
  93. }
  94. /* 页面布局 - 左则 */
  95. .layui-layout {
  96. > .layui-side {
  97. .layui-nav-bar {
  98. display: none !important
  99. }
  100. .layui-side-scroll {
  101. width: 100% !important
  102. }
  103. .layui-nav-item {
  104. border-bottom: 1px solid rgba(0, 0, 0, .2);
  105. a {
  106. height: 45px;
  107. display: block;
  108. line-height: 45px;
  109. color: #fff !important;
  110. &:hover {
  111. background: hsla(0, 0%, 39%, .2) !important
  112. }
  113. }
  114. }
  115. .layui-nav-itemed {
  116. border-bottom: none !important
  117. }
  118. .layui-nav-tree-top a {
  119. height: 28px !important;
  120. line-height: 28px !important
  121. }
  122. }
  123. &.layui-layout-left-mini {
  124. > .layui-body {
  125. left: 50px
  126. }
  127. > .layui-side {
  128. .layui-nav-more {
  129. display: none !important
  130. }
  131. .layui-nav-item {
  132. a {
  133. padding: 0
  134. }
  135. .nav-text {
  136. display: none
  137. }
  138. .nav-icon {
  139. display: inline-block !important;
  140. padding: 0 !important
  141. }
  142. .layui-nav-child {
  143. padding: 0;
  144. display: block !important;
  145. background-color: rgba(0, 0, 0, .3) !important
  146. }
  147. }
  148. &, .layui-nav-tree, .layui-side-scroll {
  149. width: 50px;
  150. text-align: center
  151. }
  152. }
  153. [data-target-menu-type] i {
  154. display: inline-block;
  155. -webkit-transform: rotate(180deg);
  156. transform: rotate(180deg);
  157. -ms-transform: rotate(180deg)
  158. }
  159. }
  160. &.layui-layout-left-hide {
  161. > .layui-body {
  162. left: 0 !important
  163. }
  164. > .layui-side {
  165. display: none
  166. }
  167. [data-target-menu-type] {
  168. display: none;
  169. }
  170. }
  171. }