index.less 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. page {
  2. background: #f6f6f6;
  3. padding-bottom: 100rpx;
  4. }
  5. .order {
  6. display: flex;
  7. margin: 30rpx;
  8. background: #ffffff;
  9. padding: 20rpx;
  10. border-radius: 20rpx;
  11. .order-image {
  12. width: 240rpx;
  13. height: 180rpx;
  14. }
  15. .order-box {
  16. margin-left: 20rpx;
  17. .order-name {
  18. font-size: 30rpx;
  19. color: #222222;
  20. }
  21. .order-price {
  22. margin-top: 20rpx;
  23. font-size: 36rpx;
  24. color: #F01740;
  25. }
  26. .order-portion {
  27. display: flex;
  28. justify-content: space-between;
  29. margin-top: 20rpx;
  30. .order-time {
  31. font-size: 24rpx;
  32. color: #666666;
  33. margin: 10rpx 30rpx 0 0;
  34. }
  35. }
  36. }
  37. }
  38. .box {
  39. background: #ffffff;
  40. margin: 30rpx;
  41. padding: 30rpx;
  42. border-radius: 30rpx;
  43. position: relative;
  44. .code {
  45. width: 100%;
  46. text-align: center;
  47. margin: 30rpx 0;
  48. .code-img {
  49. width: 300rpx;
  50. height: 300rpx;
  51. }
  52. }
  53. .order-details {
  54. font-size: 30rpx;
  55. margin-top: 20rpx;
  56. color: #666666;
  57. display: flex;
  58. .number {
  59. color: black;
  60. }
  61. }
  62. .voucher {
  63. margin-top: 20rpx;
  64. font-size: 26rpx;
  65. }
  66. .taxi {
  67. display: flex;
  68. margin: 0rpx 0 0 10rpx;
  69. position: absolute;
  70. bottom: 50rpx;
  71. right: 30rpx;
  72. .taxi-box {
  73. margin-right: 40rpx;
  74. .taxi-name {
  75. text-align: center;
  76. }
  77. .taxi-phone {
  78. text-align: center;
  79. }
  80. }
  81. .taxi-boxs {
  82. margin-right: 0rpx;
  83. .taxi-name {
  84. text-align: center;
  85. }
  86. .taxi-phone {
  87. text-align: center;
  88. }
  89. }
  90. }
  91. .name {
  92. font-size: 30rpx;
  93. margin-bottom: 20rpx;
  94. }
  95. .time {
  96. font-size: 24rpx;
  97. margin-top: 20rpx;
  98. }
  99. .order-number {
  100. display: flex;
  101. justify-content: space-between;
  102. .number {
  103. font-size: 30rpx;
  104. }
  105. .state {
  106. font-size: 30rpx;
  107. }
  108. }
  109. .order-txt {
  110. display: flex;
  111. margin: 20rpx 0rpx 0 0;
  112. .order-image {
  113. width: 240rpx;
  114. height: 180rpx;
  115. margin-right: 20rpx;
  116. }
  117. .order-name {
  118. margin-top: 25rpx;
  119. .order-price {
  120. color: red;
  121. margin-top: 50rpx;
  122. }
  123. }
  124. }
  125. }
  126. .bommon {
  127. width: 750rpx;
  128. height: 98rpx;
  129. background: #FFFFFF;
  130. box-shadow: 0rpx -2rpx 0rpx 0rpx rgba(34, 34, 34, 0.05);
  131. position: fixed;
  132. bottom: 0;
  133. display: flex;
  134. justify-content: space-between;
  135. .bommon-price {
  136. font-size: 24rpx;
  137. color: #F01740;
  138. margin: auto 30rpx;
  139. }
  140. .bommon-submit {
  141. width: 240rpx;
  142. height: 64rpx;
  143. background: #46a9a4;
  144. color: #ffffff;
  145. border-radius: 32rpx;
  146. margin: auto 30rpx;
  147. text-align: center;
  148. padding-top: 10rpx;
  149. }
  150. }