schedule-list.wxss 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  1. .schedule-list {
  2. background: #F8F9FA;
  3. min-height: 100vh;
  4. padding-bottom: 40rpx;
  5. }
  6. /* 头部信息 */
  7. .header-section {
  8. background: linear-gradient(135deg, #4A90C2 0%, #357ABD 100%);
  9. padding: 40rpx 32rpx;
  10. color: #fff;
  11. }
  12. .activity-name {
  13. font-size: 40rpx;
  14. font-weight: bold;
  15. margin-bottom: 16rpx;
  16. }
  17. .route-display {
  18. font-size: 28rpx;
  19. opacity: 0.9;
  20. margin-bottom: 8rpx;
  21. }
  22. .trip-type-info {
  23. font-size: 24rpx;
  24. background: rgba(255, 255, 255, 0.2);
  25. padding: 6rpx 12rpx;
  26. border-radius: 12rpx;
  27. display: inline-block;
  28. font-weight: 500;
  29. }
  30. /* 日期选择区域 */
  31. .date-section {
  32. background: #fff;
  33. padding: 32rpx;
  34. margin-bottom: 16rpx;
  35. }
  36. .section-title {
  37. font-size: 32rpx;
  38. font-weight: bold;
  39. color: #333;
  40. margin-bottom: 24rpx;
  41. }
  42. .schedule-count {
  43. font-size: 24rpx;
  44. color: #666;
  45. font-weight: normal;
  46. }
  47. .date-scroll {
  48. white-space: nowrap;
  49. }
  50. .date-btn {
  51. display: inline-block;
  52. padding: 20rpx 32rpx;
  53. margin-right: 20rpx;
  54. border-radius: 50rpx;
  55. background: #f8f9fa;
  56. color: #666;
  57. text-align: center;
  58. min-width: 160rpx;
  59. transition: all 0.3s ease;
  60. }
  61. .date-btn.active {
  62. background: #FFA940;
  63. color: #fff;
  64. font-weight: bold;
  65. transform: scale(1.05);
  66. }
  67. .date-text {
  68. font-size: 28rpx;
  69. margin-bottom: 4rpx;
  70. }
  71. .weekday {
  72. font-size: 22rpx;
  73. opacity: 0.8;
  74. }
  75. /* 班次列表区域 */
  76. .schedules-section {
  77. padding: 0 32rpx;
  78. }
  79. /* 普通班次卡片 */
  80. .schedule-card {
  81. background: #FFFFFF;
  82. border-radius: 20rpx;
  83. padding: 32rpx;
  84. margin-bottom: 24rpx;
  85. box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
  86. border: 1rpx solid #E5E5EA;
  87. }
  88. /* 包车卡片 - 高端黑金UI */
  89. .charter-card {
  90. background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  91. border: 2rpx solid #d4af37;
  92. box-shadow: 0 8rpx 32rpx rgba(212, 175, 55, 0.3);
  93. }
  94. .charter-card .departure-time,
  95. .charter-card .duration,
  96. .charter-card .price,
  97. .charter-card .price-unit,
  98. .charter-card .vehicle-model,
  99. .charter-card .location-label,
  100. .charter-card .location-text,
  101. .charter-card .capacity-text,
  102. .charter-card .policy-text {
  103. color: #fff;
  104. }
  105. .charter-card .price {
  106. color: #d4af37;
  107. }
  108. /* 卡片头部 */
  109. .card-header {
  110. display: flex;
  111. justify-content: space-between;
  112. align-items: flex-start;
  113. margin-bottom: 24rpx;
  114. }
  115. .time-info {
  116. display: flex;
  117. flex-direction: column;
  118. }
  119. .departure-time {
  120. font-size: 40rpx;
  121. font-weight: bold;
  122. color: #4A90C2;
  123. margin-bottom: 8rpx;
  124. }
  125. .duration {
  126. font-size: 24rpx;
  127. color: #999;
  128. }
  129. .price-info {
  130. text-align: right;
  131. }
  132. .price {
  133. font-size: 36rpx;
  134. font-weight: bold;
  135. color: #4A90C2;
  136. }
  137. .price-unit {
  138. font-size: 24rpx;
  139. color: #666;
  140. }
  141. /* 车辆信息 */
  142. .vehicle-info {
  143. display: flex;
  144. justify-content: space-between;
  145. align-items: center;
  146. margin-bottom: 24rpx;
  147. }
  148. .vehicle-model {
  149. font-size: 32rpx;
  150. font-weight: bold;
  151. color: #333;
  152. }
  153. .vehicle-tags {
  154. display: flex;
  155. gap: 12rpx;
  156. }
  157. .tag {
  158. padding: 8rpx 16rpx;
  159. border-radius: 20rpx;
  160. font-size: 22rpx;
  161. font-weight: bold;
  162. }
  163. .share-tag {
  164. background: #E8F4FD;
  165. color: #4A90C2;
  166. }
  167. .charter-tag {
  168. background: #d4af37;
  169. color: #1a1a1a;
  170. }
  171. /* 位置信息 */
  172. .location-info {
  173. margin-bottom: 24rpx;
  174. }
  175. .location-item {
  176. display: flex;
  177. margin-bottom: 12rpx;
  178. }
  179. .location-label {
  180. font-size: 26rpx;
  181. color: #666;
  182. width: 80rpx;
  183. flex-shrink: 0;
  184. }
  185. .location-text {
  186. font-size: 26rpx;
  187. color: #333;
  188. flex: 1;
  189. }
  190. /* 容量信息 */
  191. .capacity-info {
  192. display: flex;
  193. justify-content: space-between;
  194. align-items: center;
  195. margin-bottom: 16rpx;
  196. }
  197. .capacity-text {
  198. font-size: 26rpx;
  199. color: #666;
  200. }
  201. .features {
  202. display: flex;
  203. gap: 8rpx;
  204. }
  205. .feature-tag {
  206. background: #e8f5e8;
  207. color: #52c41a;
  208. padding: 4rpx 12rpx;
  209. border-radius: 16rpx;
  210. font-size: 20rpx;
  211. }
  212. /* 政策信息 */
  213. .policy-info {
  214. margin-bottom: 24rpx;
  215. }
  216. .policy-text {
  217. font-size: 22rpx;
  218. color: #999;
  219. }
  220. /* 预订按钮 */
  221. .book-btn {
  222. width: 100%;
  223. background: linear-gradient(135deg, #4A90C2 0%, #357ABD 100%);
  224. color: #fff;
  225. border: none;
  226. border-radius: 50rpx;
  227. padding: 24rpx 0;
  228. font-size: 32rpx;
  229. font-weight: bold;
  230. box-shadow: 0 8rpx 24rpx rgba(74, 144, 194, 0.4);
  231. }
  232. .charter-btn {
  233. background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
  234. color: #1a1a1a;
  235. box-shadow: 0 8rpx 24rpx rgba(212, 175, 55, 0.4);
  236. }
  237. .book-btn[disabled] {
  238. background: #e0e0e0;
  239. color: #999;
  240. box-shadow: none;
  241. }
  242. /* 空状态 */
  243. .empty-schedules {
  244. text-align: center;
  245. padding: 120rpx 32rpx;
  246. }
  247. .empty-icon {
  248. font-size: 120rpx;
  249. margin-bottom: 32rpx;
  250. }
  251. .empty-text {
  252. font-size: 32rpx;
  253. color: #666;
  254. margin-bottom: 16rpx;
  255. font-weight: bold;
  256. }
  257. .empty-desc {
  258. font-size: 26rpx;
  259. color: #999;
  260. }