header.less 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. #app {
  2. width: 100%;
  3. }
  4. .headerView {
  5. padding: 0 6.25rem;
  6. height: 4.5rem;
  7. margin: auto;
  8. display: flex;
  9. align-items: center;
  10. justify-content: space-between;
  11. .headerView-left,
  12. .headerView-right {
  13. display: flex;
  14. flex-direction: row;
  15. align-items: center;
  16. height: 100%;
  17. .header-logo {
  18. width: 6.875rem;
  19. padding-right: 5.625rem;
  20. }
  21. .header-list {
  22. display: flex;
  23. align-items: center;
  24. height: 100%;
  25. margin-left: 2rem;
  26. .header-item {
  27. margin-right: 3.75rem;
  28. font-size: 1rem;
  29. height: 100%;
  30. display: flex;
  31. align-items: center;
  32. box-sizing: border-box;
  33. a {
  34. display: block;
  35. display: flex;
  36. align-items: center;
  37. height: 3.5rem;
  38. border-bottom: .0125rem solid rgba(0, 0, 0, 0);
  39. }
  40. &::last-child {
  41. margin-right: 0;
  42. }
  43. }
  44. .productRectangle {
  45. span {
  46. display: block;
  47. display: flex;
  48. align-items: center;
  49. height: 3.5rem;
  50. border-bottom: .0125rem solid rgba(0, 0, 0, 0);
  51. }
  52. }
  53. .item-hover {
  54. color: #3396FB;
  55. border-bottom: 0.125rem solid #3396FB !important;
  56. }
  57. a {
  58. display: block;
  59. height: 100%;
  60. color: inherit;
  61. text-decoration: none;
  62. }
  63. }
  64. }
  65. .img {
  66. width: 100%;
  67. height: 100%;
  68. }
  69. }
  70. .headerProduct {
  71. width: 16.5rem;
  72. padding-bottom: 20px;
  73. background: #fff;
  74. border: 1px solid #FFFFFF;
  75. box-shadow: 0px 0px 20px 0px #00000019;
  76. position: relative;
  77. left: 320px;
  78. .content {
  79. width: 100%;
  80. .product {
  81. width: 100%;
  82. font-size: 1.125rem;
  83. .product-title {
  84. color: #3396FB;
  85. font-family: Microsoft YaHei UI;
  86. font-weight: bold;
  87. font-size: 1rem;
  88. line-height: normal;
  89. letter-spacing: 0px;
  90. padding: 1rem 0 1.125rem 1.125rem;
  91. }
  92. .hove {
  93. background: #3396FB;
  94. color: #fff;
  95. }
  96. .product-item {
  97. width: 100%;
  98. height: 2.625rem;
  99. display: flex;
  100. align-items: center;
  101. font-size: 1rem;
  102. padding-left: 1.375rem;
  103. box-sizing: border-box;
  104. img {
  105. width: 1.25rem;
  106. height: 1.25rem;
  107. padding-right: .625rem;
  108. }
  109. a {
  110. display: block;
  111. width: 100%;
  112. height: 100%;
  113. display: flex;
  114. align-items: center;
  115. color: inherit;
  116. text-decoration: none;
  117. }
  118. }
  119. }
  120. }
  121. }
  122. ::-webkit-scrollbar {
  123. width: 0px; /* 设置滚动条宽度 */
  124. }
  125. ::-webkit-scrollbar-button {
  126. height: 0;
  127. background-color: #ccc; /* 按钮背景颜色 */
  128. }
  129. ::-webkit-scrollbar-track {
  130. background-color: #f1f1f1;
  131. }
  132. ::-webkit-scrollbar-thumb {
  133. background-color: #888;
  134. border-radius: 5px;
  135. }
  136. ::-webkit-scrollbar-thumb:hover {
  137. background-color: #555;
  138. }
  139. ::-webkit-scrollbar-thumb:active {
  140. background-color: #333;
  141. }