order.wxss 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. .page-container.data-v-88bf5328 {
  2. min-height: 100vh;
  3. background: #F0F1F5;
  4. display: flex;
  5. flex-direction: column;
  6. font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  7. }
  8. /* 导航栏 */
  9. .custom-navbar.data-v-88bf5328 {
  10. background: #FFFFFF;
  11. display: flex;
  12. align-items: center;
  13. justify-content: space-between;
  14. padding: 88rpx 28rpx 28rpx;
  15. position: relative;
  16. }
  17. .navbar-back.data-v-88bf5328 {
  18. width: 68rpx;
  19. height: 68rpx;
  20. background: #F5F6F8;
  21. border-radius: 50%;
  22. display: flex;
  23. align-items: center;
  24. justify-content: center;
  25. }
  26. .back-icon.data-v-88bf5328 {
  27. font-size: 48rpx;
  28. color: #1F2937;
  29. font-weight: 300;
  30. margin-top: -4rpx;
  31. }
  32. .navbar-title.data-v-88bf5328 {
  33. position: absolute;
  34. left: 50%;
  35. transform: translateX(-50%);
  36. }
  37. .title-text.data-v-88bf5328 {
  38. font-size: 34rpx;
  39. font-weight: 600;
  40. color: #1F2937;
  41. }
  42. .navbar-placeholder.data-v-88bf5328 {
  43. width: 68rpx;
  44. }
  45. /* 滚动区域 */
  46. .scroll-view.data-v-88bf5328 {
  47. flex: 1;
  48. height: 0;
  49. }
  50. .content-wrapper.data-v-88bf5328 {
  51. padding: 28rpx;
  52. }
  53. /* 主卡片 - 弥散阴影 */
  54. .main-card.data-v-88bf5328 {
  55. background: #FFFFFF;
  56. border-radius: 32rpx;
  57. padding: 8rpx;
  58. box-shadow:
  59. 0 2rpx 8rpx rgba(0, 0, 0, 0.02),
  60. 0 8rpx 24rpx rgba(0, 0, 0, 0.04),
  61. 0 24rpx 48rpx rgba(0, 0, 0, 0.04);
  62. }
  63. /* 加载状态 */
  64. .loading-state.data-v-88bf5328 {
  65. display: flex;
  66. flex-direction: column;
  67. align-items: center;
  68. padding: 100rpx 40rpx;
  69. }
  70. .loading-spinner.data-v-88bf5328 {
  71. width: 44rpx;
  72. height: 44rpx;
  73. border: 3rpx solid #E5E7EB;
  74. border-top-color: #6366F1;
  75. border-radius: 50%;
  76. animation: spin-88bf5328 0.8s linear infinite;
  77. margin-bottom: 20rpx;
  78. }
  79. @keyframes spin-88bf5328 {
  80. to { transform: rotate(360deg);
  81. }
  82. }
  83. .loading-text.data-v-88bf5328 {
  84. font-size: 26rpx;
  85. color: #9CA3AF;
  86. }
  87. /* 空状态 */
  88. .empty-state.data-v-88bf5328 {
  89. display: flex;
  90. flex-direction: column;
  91. align-items: center;
  92. padding: 100rpx 40rpx;
  93. }
  94. .empty-icon-wrap.data-v-88bf5328 {
  95. width: 120rpx;
  96. height: 120rpx;
  97. background: #F9FAFB;
  98. border-radius: 50%;
  99. display: flex;
  100. align-items: center;
  101. justify-content: center;
  102. margin-bottom: 24rpx;
  103. }
  104. .empty-icon.data-v-88bf5328 {
  105. font-size: 52rpx;
  106. }
  107. .empty-title.data-v-88bf5328 {
  108. font-size: 30rpx;
  109. font-weight: 600;
  110. color: #1F2937;
  111. margin-bottom: 8rpx;
  112. }
  113. .empty-desc.data-v-88bf5328 {
  114. font-size: 26rpx;
  115. color: #9CA3AF;
  116. }
  117. /* 订单列表 */
  118. .order-list.data-v-88bf5328 {
  119. padding: 16rpx;
  120. }
  121. .order-item.data-v-88bf5328 {
  122. padding: 28rpx 0;
  123. border-bottom: 1rpx solid #F3F4F6;
  124. }
  125. .order-item.no-border.data-v-88bf5328 {
  126. border-bottom: none;
  127. }
  128. /* 顶部:标签 + 状态 */
  129. .order-top.data-v-88bf5328 {
  130. display: flex;
  131. justify-content: space-between;
  132. align-items: center;
  133. margin-bottom: 20rpx;
  134. }
  135. .pool-tag.data-v-88bf5328 {
  136. display: flex;
  137. align-items: center;
  138. padding: 10rpx 18rpx;
  139. border-radius: 12rpx;
  140. gap: 8rpx;
  141. }
  142. .pool-tag.tag-purple.data-v-88bf5328 {
  143. background: rgba(139, 92, 246, 0.1);
  144. }
  145. .pool-tag.tag-orange.data-v-88bf5328 {
  146. background: rgba(251, 146, 60, 0.12);
  147. }
  148. .tag-icon.data-v-88bf5328 {
  149. font-size: 26rpx;
  150. }
  151. .tag-text.data-v-88bf5328 {
  152. font-size: 26rpx;
  153. font-weight: 600;
  154. color: #374151;
  155. }
  156. .status-badge.data-v-88bf5328 {
  157. padding: 8rpx 20rpx;
  158. border-radius: 32rpx;
  159. font-size: 22rpx;
  160. font-weight: 500;
  161. }
  162. .status-badge.status-paid.data-v-88bf5328 {
  163. background: rgba(34, 197, 94, 0.12);
  164. color: #16A34A;
  165. }
  166. .status-badge.status-pending.data-v-88bf5328 {
  167. background: rgba(251, 191, 36, 0.15);
  168. color: #D97706;
  169. }
  170. .status-badge.status-cancelled.data-v-88bf5328 {
  171. background: #F3F4F6;
  172. color: #9CA3AF;
  173. }
  174. .status-badge.status-closed.data-v-88bf5328 {
  175. background: rgba(239, 68, 68, 0.1);
  176. color: #DC2626;
  177. }
  178. /* 中间:订单号 + 价格 */
  179. .order-middle.data-v-88bf5328 {
  180. display: flex;
  181. justify-content: space-between;
  182. align-items: flex-start;
  183. margin-bottom: 16rpx;
  184. }
  185. .order-info.data-v-88bf5328 {
  186. display: flex;
  187. flex-direction: column;
  188. gap: 4rpx;
  189. }
  190. .info-label.data-v-88bf5328 {
  191. font-size: 22rpx;
  192. color: #9CA3AF;
  193. }
  194. .order-no.data-v-88bf5328 {
  195. font-size: 24rpx;
  196. color: #6B7280;
  197. font-family: 'SF Mono', Monaco, Consolas, monospace;
  198. }
  199. .order-price.data-v-88bf5328 {
  200. font-size: 40rpx;
  201. font-weight: 700;
  202. color: #EF4444;
  203. }
  204. /* 底部:时间信息 */
  205. .order-bottom.data-v-88bf5328 {
  206. display: flex;
  207. flex-direction: column;
  208. gap: 8rpx;
  209. }
  210. .time-row.data-v-88bf5328 {
  211. display: flex;
  212. align-items: center;
  213. gap: 12rpx;
  214. }
  215. .time-label.data-v-88bf5328 {
  216. font-size: 22rpx;
  217. color: #9CA3AF;
  218. min-width: 100rpx;
  219. }
  220. .time-value.data-v-88bf5328 {
  221. font-size: 24rpx;
  222. color: #6B7280;
  223. }
  224. .time-value.highlight.data-v-88bf5328 {
  225. color: #3B82F6;
  226. font-weight: 500;
  227. }
  228. /* 支付按钮 */
  229. .order-action.data-v-88bf5328 {
  230. margin-top: 20rpx;
  231. display: flex;
  232. justify-content: flex-end;
  233. }
  234. .pay-btn.data-v-88bf5328 {
  235. background: linear-gradient(135deg, #6366F1, #8B5CF6);
  236. padding: 16rpx 36rpx;
  237. border-radius: 32rpx;
  238. box-shadow: 0 6rpx 20rpx rgba(99, 102, 241, 0.3);
  239. }
  240. .pay-btn text.data-v-88bf5328 {
  241. font-size: 26rpx;
  242. color: #FFFFFF;
  243. font-weight: 600;
  244. }
  245. .pay-btn.data-v-88bf5328:active {
  246. opacity: 0.9;
  247. transform: scale(0.98);
  248. }
  249. .bottom-safe-area.data-v-88bf5328 {
  250. height: 60rpx;
  251. }