order-detail.wxss 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. ax-body.data-v-d80893f4{
  2. display: block;
  3. height: 100%;
  4. background: #F6FAFF;
  5. }
  6. .body.data-v-d80893f4{
  7. position: relative;
  8. z-index: 1;
  9. }
  10. /* 页面背景 */
  11. .page-background.data-v-d80893f4{
  12. position: fixed;
  13. top: 0;
  14. left: 0;
  15. right: 0;
  16. z-index: 0;
  17. }
  18. .page-background image.data-v-d80893f4{
  19. display: block;
  20. width: 100%;
  21. }
  22. /* 基础信息 */
  23. .base-info.data-v-d80893f4{
  24. font-size: 14px;
  25. position: relative;
  26. color: #fff;
  27. -webkit-transform: translateY(5px);
  28. transform: translateY(5px);
  29. }
  30. .base-info .content.data-v-d80893f4{
  31. padding: 10px;
  32. position: relative;
  33. z-index: 2;
  34. }
  35. .base-info .val.data-v-d80893f4{
  36. margin-top: 10px;
  37. }
  38. .base-info .value.data-v-d80893f4{
  39. display: inline-block;
  40. font-weight: bold;
  41. font-size: 30px;
  42. margin-right: 5px;
  43. -webkit-transform: translateY(2px);
  44. transform: translateY(2px);
  45. }
  46. .base-info .name.data-v-d80893f4{
  47. display: flex;
  48. align-items: center;
  49. }
  50. .base-info .name .icon.data-v-d80893f4{
  51. width: 24px;
  52. margin-right: 10px;
  53. }
  54. .base-info .bg.data-v-d80893f4{
  55. width: 100%;
  56. position: absolute;
  57. top: 0;
  58. left: 0;
  59. }
  60. /* 卡片 */
  61. .card.data-v-d80893f4{
  62. display: flex;
  63. align-items: center;
  64. padding: 10px;
  65. margin-top: 20px;
  66. background-color: #fff;
  67. border-radius: 8px;
  68. }
  69. .card .item.data-v-d80893f4{
  70. flex: 1;
  71. display: flex;
  72. align-items: center;
  73. justify-content: center;
  74. flex-direction: column;
  75. }
  76. .card .item .icon.data-v-d80893f4{
  77. display: flex;
  78. align-items: center;
  79. justify-content: center;
  80. width: 30px;
  81. height: 30px;
  82. color: #fff;
  83. background-color: #aaa;
  84. border-radius: 4px;
  85. }
  86. .card .item .icon.green.data-v-d80893f4{
  87. background-color: #4EDC86;
  88. }
  89. .card .item .icon.red.data-v-d80893f4{
  90. background-color: #F44033;
  91. }
  92. .card .item .date.data-v-d80893f4{
  93. font-size: 12px;
  94. color: #aaa;
  95. text-align: center;
  96. }
  97. .card .item .time.data-v-d80893f4{
  98. font-weight: bold;
  99. }
  100. .card .item .arrow.data-v-d80893f4{
  101. width: 8em;
  102. }
  103. .card .item.middle.data-v-d80893f4{
  104. margin: 0 10px;
  105. font-size: 14px;
  106. }
  107. /* 单元格 */
  108. .cell-group.data-v-d80893f4{
  109. background-color: #fff;
  110. border-radius: 8px;
  111. padding: 10px;
  112. margin-top: 10px;
  113. }
  114. .cell-group .cell.data-v-d80893f4{
  115. display: flex;
  116. align-items: center;
  117. justify-content: space-between;
  118. height: 32px;
  119. font-size: 14px;
  120. }
  121. .cell-group .cell .contet.data-v-d80893f4{
  122. color: #aaa;
  123. }
  124. .cell-group .summarize.data-v-d80893f4{
  125. display: flex;
  126. align-items: center;
  127. justify-content: space-between;
  128. font-size: 14px;
  129. height: 46px;
  130. }
  131. .cell-group .sum.data-v-d80893f4{
  132. font-size: 16px;
  133. color: #F44033 !important;
  134. }
  135. .cell-group.multi-line.data-v-d80893f4{
  136. position: relative;
  137. z-index: 2;
  138. }
  139. .cell-group.multi-line .cell.data-v-d80893f4{
  140. display: block;
  141. height: auto;
  142. }
  143. .cell-group.multi-line .cell .lable.data-v-d80893f4{
  144. height: 28px;
  145. color: #AAA;
  146. }
  147. .cell-group.multi-line .cell .contet.data-v-d80893f4{
  148. height: 32px;
  149. color: #2B303A;
  150. font-size: 16px;
  151. font-weight: bold;
  152. }
  153. .load-payment.data-v-d80893f4{
  154. font-weight: bold;
  155. font-size: 32rpx;
  156. color: #2B303A;
  157. }
  158. .load-payment-btn.data-v-d80893f4{
  159. width: 160rpx;
  160. height: 48rpx;
  161. background: #3EB6F8;
  162. border-radius: 24rpx;
  163. font-size: 24rpx;
  164. color: #FFFFFF;
  165. line-height: 48rpx;
  166. text-align: center;
  167. }
  168. .flow-money.data-v-d80893f4{
  169. font-weight: 800;
  170. font-size: 32rpx;
  171. color: #FF4D3A;
  172. }
  173. .finish-payment.data-v-d80893f4{
  174. font-weight: bold;
  175. font-size: 32rpx;
  176. color: #2B303A;
  177. }
  178. /* 提示 */
  179. .tips.data-v-d80893f4{
  180. display: flex;
  181. align-items: center;
  182. justify-content: center;
  183. height: 24px;
  184. font-size: 12px;
  185. border-radius: 4px;
  186. background-color: #E2FDFE;
  187. margin-top: 10px;
  188. }
  189. .tips .icon.data-v-d80893f4{
  190. display: block;
  191. width: 14px;
  192. height: 14px;
  193. margin-right: 10px;
  194. }
  195. .hr.data-v-d80893f4{
  196. border-top: 1px solid #f0f0f0;
  197. }