order-stats.css 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. body { background-color: #F7F8FA;
  2. }
  3. .container { min-height: 100vh; background-color: #F7F8FA; padding: 0.625rem 0 0; display: flex; flex-direction: column;
  4. }
  5. /* ===== 统计banner:圆角浮动卡,左右30rpx边距 ===== */
  6. .stats-banner {
  7. background: linear-gradient(135deg, #FF9800 0%, #FF5722 100%);
  8. padding: 0.875rem 0.5rem;
  9. display: flex;
  10. justify-content: space-around;
  11. margin: 0 0.9375rem 0.625rem;
  12. border-radius: 0.625rem;
  13. box-shadow: 0 0.1875rem 0.625rem rgba(255, 87, 34, 0.25);
  14. flex-shrink: 0;
  15. }
  16. .banner-item { display: flex; flex-direction: column; align-items: center;
  17. }
  18. .banner-num { font-size: 1.0625rem; font-weight: bold; color: #fff; margin-bottom: 0.125rem;
  19. }
  20. .banner-unit { font-size: 0.6875rem; font-weight: normal;
  21. }
  22. .banner-label { font-size: 0.625rem; color: rgba(255,255,255,0.85);
  23. }
  24. /* ===== 标签页:全宽平铺,无圆角,无side margin ===== */
  25. .tab-bar {
  26. background-color: #fff;
  27. display: flex;
  28. padding: 0 0.9375rem;
  29. border-bottom: 0.03125rem solid #f0f0f0;
  30. margin-bottom: 0;
  31. flex-shrink: 0;
  32. }
  33. .tab-item {
  34. padding: 0.625rem 0.75rem;
  35. font-size: 0.875rem;
  36. color: #999;
  37. position: relative;
  38. display: flex;
  39. flex-direction: column;
  40. align-items: center;
  41. }
  42. .tab-item.active { color: #FF9800; font-weight: bold;
  43. }
  44. .tab-line {
  45. position: absolute;
  46. bottom: 0;
  47. left: 50%;
  48. transform: translateX(-50%);
  49. width: 1.125rem;
  50. height: 0.125rem;
  51. background-color: #FF9800;
  52. border-radius: 0.0625rem;
  53. }
  54. /* ===== 订单列表:scroll-view 全宽,每张card用margin左右30rpx ===== */
  55. .order-scroll { flex: 1; height: 0; width: 100%;
  56. }
  57. .order-card {
  58. background-color: #fff;
  59. border-radius: 0.5rem;
  60. padding: 0.75rem;
  61. margin: 0 0.9375rem 0.5rem;
  62. box-sizing: border-box;
  63. }
  64. /* 卡片头部 */
  65. .card-header {
  66. display: flex;
  67. align-items: center;
  68. justify-content: space-between;
  69. margin-bottom: 0.3125rem;
  70. }
  71. .type-badge { display: flex; align-items: center;
  72. }
  73. .type-icon {
  74. width: 1.375rem;
  75. height: 1.375rem;
  76. margin-right: 0.375rem;
  77. }
  78. .type-text { font-size: 0.9375rem; font-weight: bold; color: #333;
  79. }
  80. .status-text { font-size: 0.75rem;
  81. }
  82. .status-text.green { color: #4CAF50;
  83. }
  84. .status-text.red { color: #F44336;
  85. }
  86. /* 服务时间 */
  87. .service-time {
  88. font-size: 0.75rem;
  89. color: #999;
  90. margin-bottom: 0.5rem;
  91. display: block;
  92. }
  93. /* 宠物信息卡(灰底背景,右侧显示价格) */
  94. .pet-card {
  95. background-color: #F7F8FA;
  96. border-radius: 0.3125rem;
  97. padding: 0.5rem 0.625rem;
  98. display: flex;
  99. align-items: center;
  100. margin-bottom: 0.5rem;
  101. }
  102. .pet-avatar { width: 2.1875rem; height: 2.1875rem; border-radius: 50%; margin-right: 0.5rem; flex-shrink: 0;
  103. }
  104. .pet-info { flex: 1; display: flex; flex-direction: column;
  105. }
  106. .pet-name { font-size: 0.875rem; font-weight: bold; color: #333; margin-bottom: 0.125rem;
  107. }
  108. .pet-breed { font-size: 0.75rem; color: #999;
  109. }
  110. /* 价格在宠物卡右侧 */
  111. .pet-price { font-size: 1.0625rem; font-weight: bold; color: #FF5722; flex-shrink: 0;
  112. }
  113. /* 路线信息 */
  114. .route-info { display: flex; flex-direction: column;
  115. }
  116. .route-item {
  117. display: flex;
  118. align-items: flex-start;
  119. position: relative;
  120. padding-bottom: 0.25rem;
  121. }
  122. .icon-circle {
  123. width: 1.375rem;
  124. height: 1.375rem;
  125. border-radius: 50%;
  126. display: flex;
  127. align-items: center;
  128. justify-content: center;
  129. font-size: 0.6875rem;
  130. font-weight: bold;
  131. color: #fff;
  132. flex-shrink: 0;
  133. margin-right: 0.5rem;
  134. margin-top: 0.0625rem;
  135. }
  136. .icon-circle.pickup { background: linear-gradient(135deg, #FF9800, #FF6D00);
  137. }
  138. .icon-circle.deliver { background: linear-gradient(135deg, #4CAF50, #2E7D32);
  139. }
  140. .icon-circle.service { background: linear-gradient(135deg, #4CAF50, #1B5E20);
  141. }
  142. /* 取→送之间的虚线连接 */
  143. .route-connector {
  144. position: absolute;
  145. left: 0.65625rem;
  146. top: 1.4375rem;
  147. width: 0.0625rem;
  148. height: 0.9375rem;
  149. background-color: #e0e0e0;
  150. }
  151. .address-box { flex: 1; padding-bottom: 0.4375rem;
  152. }
  153. .addr-title { font-size: 0.8125rem; color: #333; display: block; margin-bottom: 0.125rem;
  154. }
  155. .addr-desc { font-size: 0.75rem; color: #999; display: block;
  156. }
  157. /* 服务内容说明(喂遛/洗护) */
  158. .service-note-row { padding: 0.125rem 0 0 1.875rem;
  159. }
  160. .service-note-text { font-size: 0.75rem; color: #999;
  161. }
  162. /* 空状态 */
  163. .empty-state { text-align: center; padding: 2.5rem 0;
  164. }
  165. .empty-text { font-size: 0.875rem; color: #ccc;
  166. }
  167. .loading-more { text-align: center; padding: 0.625rem; font-size: 0.75rem; color: #999;
  168. }