transportation.wxss 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. /* 水平间距 */
  2. /* 水平间距 */
  3. .container.data-v-12c962df {
  4. position: relative;
  5. height: 100vh;
  6. color: #001713;
  7. background-color: #fff;
  8. overflow-y: auto;
  9. }
  10. .container .banner.data-v-12c962df {
  11. width: 100%;
  12. height: 482rpx;
  13. }
  14. .container .title.data-v-12c962df {
  15. position: absolute;
  16. display: flex;
  17. align-items: center;
  18. width: 100vh;
  19. font-size: 40rpx;
  20. }
  21. .container .title .title_back.data-v-12c962df {
  22. margin-left: 26rpx;
  23. margin-right: 232rpx;
  24. }
  25. .container .body.data-v-12c962df {
  26. position: absolute;
  27. top: 160rpx;
  28. box-sizing: border-box;
  29. padding: 0 40rpx;
  30. width: 100%;
  31. }
  32. .container .body .body_card.data-v-12c962df {
  33. box-sizing: border-box;
  34. padding: 40rpx 50rpx 30rpx;
  35. width: 100%;
  36. height: 316rpx;
  37. font-size: 24rpx;
  38. border-radius: 60rpx;
  39. border-radius: 30px;
  40. box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  41. }
  42. .container .body .body_card .card_type.data-v-12c962df {
  43. display: flex;
  44. align-items: center;
  45. font-weight: bold;
  46. }
  47. .container .body .body_card .card_type .type_name.data-v-12c962df {
  48. display: flex;
  49. align-items: center;
  50. font-size: 40rpx;
  51. }
  52. .container .body .body_card .card_type .type_name .img.data-v-12c962df {
  53. margin-right: 10rpx;
  54. width: 40rpx;
  55. height: 40rpx;
  56. }
  57. .container .body .body_card .card_type .type_au.data-v-12c962df {
  58. display: flex;
  59. align-items: center;
  60. margin-left: 40rpx;
  61. font-size: 24rpx;
  62. }
  63. .container .body .body_card .card_type .type_au .text.data-v-12c962df {
  64. margin-right: 5rpx;
  65. }
  66. .container .body .body_card .card_num.data-v-12c962df {
  67. margin-top: 22rpx;
  68. margin-bottom: 18rpx;
  69. }
  70. .container .body .body_card .card_num .text.data-v-12c962df {
  71. font-weight: bold;
  72. }
  73. .container .body .body_card .card_btn.data-v-12c962df {
  74. display: flex;
  75. align-items: center;
  76. justify-content: center;
  77. margin-top: 20rpx;
  78. margin-left: auto;
  79. width: 234rpx;
  80. height: 50rpx;
  81. font-size: 28rpx;
  82. font-weight: bold;
  83. border-radius: 8rpx;
  84. }
  85. .container .body .body_card .btn_excellent.data-v-12c962df {
  86. color: #2b507a;
  87. border: 2rpx solid #2d537d;
  88. background-color: #cfe0eb;
  89. }
  90. .container .body .body_card .btn_teacher.data-v-12c962df {
  91. color: #a46509;
  92. border: 2rpx solid #c77417;
  93. background-color: #fddb9f;
  94. }
  95. .container .body .body_card .btn_warm.data-v-12c962df {
  96. color: #1580ed;
  97. border: 2rpx solid #0d71fb;
  98. background-color: #e2eef9;
  99. }
  100. .container .body .body_card .card_line.data-v-12c962df {
  101. margin-top: 16rpx;
  102. width: 100%;
  103. height: 8rpx;
  104. border-radius: 10rpx;
  105. }
  106. .container .body .body_card .line_excellent.data-v-12c962df {
  107. background: linear-gradient(90deg, #72a8d2 0%, #2b507a 100%);
  108. }
  109. .container .body .body_card .line_teacher.data-v-12c962df {
  110. background: linear-gradient(90deg, #f1a045 0%, #bf6c0f 100%);
  111. }
  112. .container .body .body_card .line_warm.data-v-12c962df {
  113. background: linear-gradient(90deg, #218dfb 0%, #0c70fb 100%);
  114. }
  115. .container .body .excellent.data-v-12c962df {
  116. color: #2b507a;
  117. background: linear-gradient(146.58deg, rgba(243, 245, 245, 0.5) 0%, rgba(229, 240, 244, 0.5) 100%);
  118. }
  119. .container .body .teacher.data-v-12c962df {
  120. color: #9f5300;
  121. background: linear-gradient(148.48deg, rgba(254, 228, 182, 0.5) 0%, rgba(253, 205, 121, 0.5) 59.21%, rgba(248, 212, 140, 0.5) 100%);
  122. }
  123. .container .body .warm.data-v-12c962df {
  124. color: #1580ed;
  125. background: linear-gradient(146.58deg, rgba(243, 245, 245, 0.5) 0%, rgba(201, 229, 255, 0.5) 100%);
  126. }
  127. .container .body .body_btns.data-v-12c962df {
  128. display: flex;
  129. justify-content: space-between;
  130. align-items: center;
  131. margin: 40rpx 0;
  132. }
  133. .container .body .body_btns .btn.data-v-12c962df {
  134. display: flex;
  135. align-items: center;
  136. justify-content: center;
  137. width: 310rpx;
  138. height: 72rpx;
  139. font-size: 32rpx;
  140. border-radius: 16rpx;
  141. }
  142. .container .body .body_btns .pull.data-v-12c962df {
  143. color: #fff;
  144. background-color: #ff8205;
  145. }
  146. .container .body .body_btns .refund.data-v-12c962df {
  147. color: #ff8205;
  148. border: 2rpx solid #ff8205;
  149. }
  150. .container .body .body_rule.data-v-12c962df {
  151. font-size: 36rpx;
  152. }
  153. .container .body .body_rule_img.data-v-12c962df {
  154. width: 100%;
  155. height: 200px;
  156. background-size: 100%;
  157. }
  158. .pop.data-v-12c962df {
  159. display: flex;
  160. flex-direction: column;
  161. align-items: center;
  162. box-sizing: border-box;
  163. padding-bottom: 60rpx;
  164. font-size: 32rpx;
  165. color: #001713;
  166. line-height: 46rpx;
  167. }
  168. .pop .pop_title.data-v-12c962df {
  169. position: relative;
  170. height: 60rpx;
  171. width: 100%;
  172. background-color: #ff8205;
  173. }
  174. .pop .pop_title .title_close.data-v-12c962df {
  175. position: absolute;
  176. top: 6rpx;
  177. right: 30rpx;
  178. }
  179. .pop .pop_tips.data-v-12c962df {
  180. margin-top: 24rpx;
  181. }
  182. .pop .pop_msg.data-v-12c962df {
  183. margin: 50rpx 0;
  184. width: 456rpx;
  185. }
  186. .pop .pop_btn.data-v-12c962df {
  187. display: flex;
  188. align-items: center;
  189. justify-content: center;
  190. width: 480rpx;
  191. height: 72rpx;
  192. color: #ff8205;
  193. border-radius: 16rpx;
  194. border: 2rpx solid #ff8205;
  195. }