_layout_2.less 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. @charset "UTF-8";
  2. @import "_config.less";
  3. > .layui-layout-admin {
  4. > .layui-side {
  5. width: 260px;
  6. display: block !important;
  7. box-shadow: none !important;
  8. background-color: @mainColor;
  9. .layui-logo {
  10. z-index: 3;
  11. }
  12. .layui-side-target {
  13. display: block;
  14. }
  15. .layui-side-scroll {
  16. display: flex !important;
  17. box-sizing: border-box;
  18. .layui-nav-child {
  19. background: none !important;
  20. }
  21. .layui-side-icon {
  22. width: 100px;
  23. display: block;
  24. background: @mainColor;
  25. a {
  26. height: 60px;
  27. display: block;
  28. font-size: 14px;
  29. text-align: center;
  30. line-height: 60px;
  31. white-space: nowrap;
  32. &:hover {
  33. background-color: rgba(0, 0, 0, 0.1);;
  34. }
  35. .layui-icon, span {
  36. color: #fff;
  37. overflow: hidden;
  38. max-width: 4em;
  39. // margin-right: 5px;
  40. text-overflow: ellipsis;
  41. vertical-align: middle;
  42. display: inline-block !important;
  43. }
  44. }
  45. > .layui-this {
  46. background: #fff;
  47. a {
  48. &:hover {
  49. background-color: #fff;
  50. }
  51. .layui-icon, span {
  52. color: @textColor;
  53. }
  54. }
  55. }
  56. }
  57. .layui-side-tree {
  58. flex: 1;
  59. background-color: #fff;
  60. > .layui-nav-tree {
  61. width: unset !important;
  62. }
  63. .layui-nav-item {
  64. background: none !important;
  65. border-bottom-color: #fff;
  66. a {
  67. color: #333 !important;
  68. background: none !important;
  69. border-bottom: none !important;
  70. &:hover {
  71. color: @textColor;
  72. }
  73. }
  74. .layui-this, &.layui-this {
  75. > a {
  76. color: @textColor;
  77. background: none !important;
  78. font-weight: bold !important;
  79. &:hover {
  80. background: none !important;
  81. }
  82. }
  83. }
  84. &ed > a {
  85. color: #999 !important;
  86. }
  87. }
  88. }
  89. }
  90. }
  91. > .layui-body {
  92. left: 260px;
  93. > .think-page-body > .layui-card {
  94. &:before {
  95. top: 0;
  96. left: 0;
  97. bottom: 0;
  98. z-index: 4;
  99. content: '';
  100. position: absolute;
  101. box-shadow: @ShadowBodyRight;
  102. }
  103. > .layui-card-header {
  104. left: 261px;
  105. }
  106. }
  107. }
  108. > .layui-header {
  109. left: 260px;
  110. background-color: @mainColor;
  111. .layui-layout-left {
  112. .layui-nav-item {
  113. display: none !important;
  114. }
  115. }
  116. .layui-nav-item {
  117. &.layui-this > a {
  118. color: #fff !important;
  119. font-weight: bold;
  120. }
  121. > a {
  122. color: #eee !important;
  123. &:hover {
  124. color: #fff !important;
  125. background: none !important;
  126. }
  127. }
  128. }
  129. }
  130. }
  131. > .layui-layout-left-hide,
  132. > .layui-layout-left-mini {
  133. > .layui-side {
  134. .layui-logo {
  135. .headimg {
  136. margin-right: 10px !important;
  137. }
  138. .headtxt {
  139. display: inline-block !important;
  140. }
  141. }
  142. .layui-side-target {
  143. left: @iconWidth;
  144. margin-left: -12px;
  145. }
  146. .layui-side-scroll .layui-side-icon {
  147. width: @iconWidth;
  148. display: block;
  149. background: #098;
  150. }
  151. }
  152. > .layui-body {
  153. left: @iconWidth;
  154. z-index: 333;
  155. > .think-page-body > .layui-card > .layui-card-header {
  156. left: @iconWidth+1;
  157. }
  158. }
  159. > .layui-header {
  160. left: 260px !important;
  161. z-index: 334;
  162. }
  163. }
  164. .help-label b,
  165. .layui-tab-title .layui-this {
  166. color: @mainColor
  167. }
  168. .layui-btn-group {
  169. border-color: @mainColor;
  170. background-color: @mainColor;
  171. .layui-btn {
  172. &:hover:not(.layui-btn-active) {
  173. color: @mainColor;
  174. }
  175. &.layui-btn-active {
  176. background-color: @mainColor
  177. }
  178. }
  179. }