smg.css 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. *{
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. .floor-switch {
  7. top: 45% !important;
  8. }
  9. .carList {
  10. position: fixed;
  11. bottom: 64px;
  12. left: -10px;
  13. z-index: 100;
  14. transition: all 0.3s;
  15. display: none;
  16. }
  17. .carList .carList1 {
  18. display: flex;
  19. align-items: center;
  20. position: relative;
  21. }
  22. .carList .carList1 .carList1_1 {
  23. width: 95px;
  24. }
  25. .carList .carList1 .carList1_2 {
  26. cursor: pointer;
  27. width: 110px;
  28. }
  29. .carList .carList2 {
  30. display: none;
  31. position: relative;
  32. }
  33. .carList .carList2 .carList2_1 {
  34. width: 95px;
  35. }
  36. .carList .carList2 .carList2_2Back {
  37. position: absolute;
  38. z-index: 10;
  39. bottom: 70px;
  40. left: 86px;
  41. width: 22px;
  42. /* height: 66px; */
  43. cursor: pointer;
  44. }
  45. .carList .carList2 .carList2_2Bac {
  46. position: absolute;
  47. left: 104px;
  48. bottom: 33px;
  49. width: 15px;
  50. height: 240px;
  51. z-index: 8;
  52. background-image: url('../myJs/img/txtBac.png');
  53. background-size: 100% 100%;
  54. }
  55. .carList .carList2 .carList2_2 {
  56. position: absolute;
  57. left: 119px;
  58. bottom: 33px;
  59. width: 202px;
  60. height: 240px;
  61. padding-right: 30px;
  62. overflow-y: auto;
  63. background-color: rgba(255, 255, 255, 0.5);
  64. -webkit-backdrop-filter: blur(4px);
  65. backdrop-filter: blur(4px);
  66. border-radius: 0 8px 8px 0;
  67. }
  68. .carList .carList2 .carList2_2::-webkit-scrollbar {
  69. /*滚动条整体样式*/
  70. width: 3px;
  71. /*高宽分别对应横竖滚动条的尺寸*/
  72. height: 1px;
  73. }
  74. .carList .carList2 .carList2_2::-webkit-scrollbar-thumb {
  75. /*滚动条里面小方块*/
  76. border-radius: 10px;
  77. -webkit-box-shadow: inset 0 0 5px transparent;
  78. background: #1864ff;
  79. }
  80. .carList .carList2 .carList2_2::-webkit-scrollbar-track {
  81. /*滚动条里面轨道*/
  82. -webkit-box-shadow: inset 0 0 5px transparent;
  83. border-radius: 10px;
  84. background: transparent;
  85. }
  86. .carList .carList2 .carList2_2 .carList2_2Main {
  87. width: 100%;
  88. /* height: 100%; */
  89. padding: 10px 0 10px 16px;
  90. }
  91. .carList .carList2 .carList2_2 .carList2_2Main .c_box {
  92. width: 100%;
  93. margin-bottom: 20px;
  94. background-color: rgba(217, 217, 217, 0.6);
  95. border-radius: 6px 6px 6px 6px;
  96. padding: 10px 10px 15px 10px;
  97. -webkit-backdrop-filter: blur(10px);
  98. backdrop-filter: blur(10px);
  99. }
  100. .carList .carList2 .carList2_2 .carList2_2Main .c_box .c_boxTit {
  101. color: #fff;
  102. font-weight: 700;
  103. font-size: 16px;
  104. padding-bottom: 5px;
  105. position: relative;
  106. text-shadow: 1px 1px 1px black;
  107. margin-bottom: 10px;
  108. }
  109. .carList .carList2 .carList2_2 .carList2_2Main .c_box .c_boxTit::before {
  110. content: '';
  111. width: 100%;
  112. height: 1px;
  113. position: absolute;
  114. bottom: 0;
  115. left: 0;
  116. background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.2));
  117. }
  118. .carList .carList2 .carList2_2 .carList2_2Main .c_box .c_boxTit::after {
  119. content: '';
  120. position: absolute;
  121. top: -10px;
  122. left: -20px;
  123. width: 100px;
  124. height: 36px;
  125. z-index: 10;
  126. background-image: url('../myJs/img/txtTit.png');
  127. background-size: 100% 100%;
  128. }
  129. .carList .carList2 .carList2_2 .carList2_2Main .c_box .c_boxTxt {
  130. cursor: pointer;
  131. position: relative;
  132. }
  133. .carList .carList2 .carList2_2 .carList2_2Main .c_box .c_boxTxt > p {
  134. overflow: hidden;
  135. text-overflow: ellipsis;
  136. white-space: nowrap;
  137. height: 27px;
  138. line-height: 24px;
  139. font-size: 14px;
  140. padding: 0 5px 0 10px;
  141. position: relative;
  142. z-index: 11;
  143. }
  144. .carList .carList2 .carList2_2 .carList2_2Main .c_box .c_boxTxt::before {
  145. content: '';
  146. opacity: 0;
  147. z-index: 10;
  148. width: calc(100% + 30px);
  149. height: 100%;
  150. position: absolute;
  151. left: 0px;
  152. top: 0;
  153. background-image: url('../myJs/img/txtAc.png');
  154. background-size: 100% 100%;
  155. }
  156. .carList .carList2 .carList2_2 .carList2_2Main .c_box .c_boxTxt:hover > p {
  157. color: #fff;
  158. }
  159. .carList .carList2 .carList2_2 .carList2_2Main .c_box .c_boxTxt:hover::before {
  160. opacity: 1;
  161. }
  162. .carList .carList2 .carList2_2 .carList2_2Main .c_box .c_boxTxtAc {
  163. pointer-events: none;
  164. }
  165. .carList .carList2 .carList2_2 .carList2_2Main .c_box .c_boxTxtAc > p {
  166. color: #fff;
  167. }
  168. .carList .carList2 .carList2_2 .carList2_2Main .c_box .c_boxTxtAc::before {
  169. opacity: 1;
  170. }