nav.less 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. /*导航风格1*/
  2. .menuStyle1 {
  3. width: 100%;
  4. height: 130px;
  5. background: #1C5468;
  6. .componentBorder {
  7. border-left: 2px dashed #999;
  8. border-right: 2px dashed #999;
  9. }
  10. .menuBoxBg {
  11. width: 1200px;
  12. height: 130px;
  13. background: #1C5468;
  14. margin: 0 auto;
  15. display: flex;
  16. align-items: center;
  17. justify-content: center;
  18. .menuBox {
  19. box-sizing: border-box;
  20. display: flex;
  21. flex-wrap: wrap;
  22. justify-content: flex-start;
  23. width: 100%;
  24. div {
  25. width: 12.5%;
  26. cursor: pointer;
  27. box-sizing: border-box;
  28. font-size: 14px;
  29. height: 22px;
  30. line-height: 22px;
  31. text-align: center;
  32. overflow: hidden;
  33. white-space: nowrap;
  34. text-overflow: ellipsis;
  35. text-align: center;
  36. color: #fff;
  37. background: #1C5468;
  38. border-right: #002D41 1px solid;
  39. border-left: #29799D 1px solid;
  40. margin-bottom: 15px;
  41. /* 当是第17个及以后的div时去掉margin-bottom */
  42. &:nth-child(n+17) {
  43. margin-bottom: 0;
  44. }
  45. /* 每行的第一个(第1、9、17...个)去掉左边框 */
  46. &:nth-child(8n+1) {
  47. border-left: none;
  48. }
  49. /* 每行的最后一个(第8、16、24...个)去掉右边框 */
  50. &:nth-child(8n) {
  51. border-right: none;
  52. }
  53. /* 最后一行的最后一个(如果总数不是8的倍数)去掉右边框 */
  54. &:last-child {
  55. border-right: none;
  56. }
  57. a {
  58. color: #fff;
  59. }
  60. }
  61. }
  62. }
  63. .menuSectorInputBox {
  64. display: flex;
  65. align-items: center;
  66. justify-content: space-between;
  67. font-size: 14px;
  68. width: 80%;
  69. margin: 0 auto;
  70. border-top: none;
  71. height: 50px;
  72. .menuSectorInputBoxItem {
  73. padding: 0 10px;
  74. input {
  75. margin-right: 10px;
  76. }
  77. .el-select {
  78. margin-right: 10px;
  79. }
  80. }
  81. }
  82. .componentMenuBorder {
  83. border: 2px dashed #999;
  84. }
  85. }
  86. /*导航风格2*/
  87. .menuStyle2 {
  88. width: 100%;
  89. height: 130px;
  90. background: #A91B33;
  91. .componentBorder {
  92. border-left: 2px dashed #999;
  93. border-right: 2px dashed #999;
  94. }
  95. .menuBoxBg {
  96. width: 1200px;
  97. height: 130px;
  98. background: #A91B33;
  99. margin: 0 auto;
  100. display: flex;
  101. align-items: center;
  102. justify-content: center;
  103. .menuBox {
  104. box-sizing: border-box;
  105. display: flex;
  106. flex-wrap: wrap;
  107. justify-content: flex-start;
  108. width: 100%;
  109. div {
  110. width: 12.5%;
  111. cursor: pointer;
  112. box-sizing: border-box;
  113. font-size: 14px;
  114. height: 22px;
  115. line-height: 22px;
  116. text-align: center;
  117. overflow: hidden;
  118. white-space: nowrap;
  119. text-overflow: ellipsis;
  120. text-align: center;
  121. color: #fff;
  122. background: #A91B33;
  123. border-right: #88172A 1px solid;
  124. border-left: #DE3350 1px solid;
  125. margin-bottom: 15px;
  126. /* 当是第17个及以后的div时去掉margin-bottom */
  127. &:nth-child(n+17) {
  128. margin-bottom: 0;
  129. }
  130. /* 每行的第一个(第1、9、17...个)去掉左边框 */
  131. &:nth-child(8n+1) {
  132. border-left: none;
  133. }
  134. /* 每行的最后一个(第8、16、24...个)去掉右边框 */
  135. &:nth-child(8n) {
  136. border-right: none;
  137. }
  138. /* 最后一行的最后一个(如果总数不是8的倍数)去掉右边框 */
  139. &:last-child {
  140. border-right: none;
  141. }
  142. }
  143. }
  144. }
  145. .menuSectorInputBox {
  146. display: flex;
  147. align-items: center;
  148. justify-content: space-between;
  149. font-size: 14px;
  150. width: 80%;
  151. margin: 0 auto;
  152. border-top: none;
  153. height: 50px;
  154. .menuSectorInputBoxItem {
  155. padding: 0 10px;
  156. input {
  157. margin-right: 10px;
  158. }
  159. .el-select {
  160. margin-right: 10px;
  161. }
  162. }
  163. }
  164. .componentMenuBorder {
  165. border: 2px dashed #999;
  166. }
  167. }