order.wxss 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. .page-container.data-v-88bf5328 {
  2. min-height: 100vh;
  3. background: #f5f6fb;
  4. display: flex;
  5. flex-direction: column;
  6. }
  7. .custom-navbar.data-v-88bf5328 {
  8. background: #ffffff;
  9. display: flex;
  10. align-items: center;
  11. justify-content: space-between;
  12. padding: 80rpx 32rpx 30rpx;
  13. box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  14. position: relative;
  15. }
  16. .navbar-back.data-v-88bf5328 {
  17. width: 80rpx;
  18. height: 60rpx;
  19. display: flex;
  20. align-items: center;
  21. }
  22. .back-icon.data-v-88bf5328 {
  23. font-size: 40rpx;
  24. color: #222222;
  25. font-weight: bold;
  26. }
  27. .navbar-title.data-v-88bf5328 {
  28. position: absolute;
  29. left: 50%;
  30. transform: translateX(-50%);
  31. }
  32. .title-text.data-v-88bf5328 {
  33. font-size: 36rpx;
  34. font-weight: 600;
  35. color: #222222;
  36. }
  37. .navbar-placeholder.data-v-88bf5328 {
  38. width: 80rpx;
  39. }
  40. .scroll-view.data-v-88bf5328 {
  41. flex: 1;
  42. height: 0;
  43. }
  44. .content-wrapper.data-v-88bf5328 {
  45. padding: 32rpx;
  46. }
  47. .order-card.data-v-88bf5328 {
  48. background: #ffffff;
  49. border-radius: 24rpx;
  50. padding: 32rpx;
  51. box-shadow: 0 8rpx 24rpx rgba(37, 52, 94, 0.08);
  52. }
  53. .loading-state.data-v-88bf5328, .empty-state.data-v-88bf5328 {
  54. display: flex;
  55. flex-direction: column;
  56. align-items: center;
  57. padding: 60rpx 40rpx;
  58. }
  59. .empty-icon.data-v-88bf5328 {
  60. font-size: 80rpx;
  61. margin-bottom: 20rpx;
  62. }
  63. .empty-text.data-v-88bf5328 {
  64. font-size: 28rpx;
  65. font-weight: 600;
  66. color: #333333;
  67. }
  68. .order-list.data-v-88bf5328 {
  69. display: flex;
  70. flex-direction: column;
  71. gap: 16rpx;
  72. }
  73. .order-item.data-v-88bf5328 {
  74. background: #f9f9fb;
  75. border-radius: 12rpx;
  76. padding: 24rpx;
  77. }
  78. .order-header.data-v-88bf5328 {
  79. display: flex;
  80. justify-content: space-between;
  81. align-items: center;
  82. margin-bottom: 16rpx;
  83. }
  84. .order-no.data-v-88bf5328 {
  85. font-size: 22rpx;
  86. color: #999;
  87. font-family: monospace;
  88. }
  89. .order-status.data-v-88bf5328 {
  90. padding: 4rpx 16rpx;
  91. border-radius: 20rpx;
  92. font-size: 22rpx;
  93. }
  94. .order-status.pending.data-v-88bf5328 {
  95. background: #fff3e0;
  96. color: #ff9800;
  97. }
  98. .order-status.paid.data-v-88bf5328 {
  99. background: #e8f5e9;
  100. color: #4caf50;
  101. }
  102. .order-status.cancelled.data-v-88bf5328 {
  103. background: #f5f5f5;
  104. color: #999;
  105. }
  106. .order-status.closed.data-v-88bf5328 {
  107. background: #ffebee;
  108. color: #f44336;
  109. }
  110. .order-body.data-v-88bf5328 {
  111. display: flex;
  112. justify-content: space-between;
  113. align-items: center;
  114. margin-bottom: 12rpx;
  115. }
  116. .order-plan.data-v-88bf5328 {
  117. font-size: 28rpx;
  118. font-weight: 600;
  119. color: #333;
  120. }
  121. .order-amount.data-v-88bf5328 {
  122. font-size: 30rpx;
  123. font-weight: 700;
  124. color: #f16565;
  125. }
  126. .order-footer.data-v-88bf5328 {
  127. display: flex;
  128. justify-content: space-between;
  129. align-items: center;
  130. }
  131. .order-time.data-v-88bf5328 {
  132. font-size: 22rpx;
  133. color: #999;
  134. }
  135. .pay-btn.data-v-88bf5328 {
  136. padding: 10rpx 28rpx;
  137. background: #ff9800;
  138. border-radius: 24rpx;
  139. }
  140. .pay-btn text.data-v-88bf5328 {
  141. font-size: 24rpx;
  142. color: #fff;
  143. font-weight: 500;
  144. }
  145. .bottom-safe-area.data-v-88bf5328 {
  146. height: 80rpx;
  147. }