prepayOrderItemInfo.wxss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. .orderItemInfoContainer{
  2. display: flex;
  3. flex-direction: column;
  4. align-items: center;
  5. justify-content: center;
  6. width: 100%;
  7. border-radius: 15rpx;
  8. background-color: #FFFFFF;
  9. box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  10. }
  11. .orderInfoBox{
  12. display: flex;
  13. flex-direction: column;
  14. align-items: center;
  15. width: 90%;
  16. }
  17. .nozzleAndStatus{
  18. display: flex;
  19. justify-content: center;
  20. width: 100%;
  21. }
  22. .nozzle{
  23. font-weight: 600;
  24. margin-top: 3%;
  25. }
  26. .status{
  27. position: absolute;
  28. font-weight: 600;
  29. margin-left: 70%;
  30. margin-top: 3%;
  31. }
  32. .orderInfo{
  33. width: 100%;
  34. overflow: hidden;
  35. transition: height 0.3s ease-in-out; /* 添加过渡效果 */
  36. }
  37. .mainInfo{
  38. display: flex;
  39. justify-content: space-between;
  40. align-items: center;
  41. width: 100%;
  42. }
  43. .mainInfo image{
  44. width: 150rpx;
  45. height: 150rpx;
  46. flex-grow: 1;
  47. }
  48. .oilInfo{
  49. display: flex;
  50. flex-direction: column;
  51. flex-grow: 3;
  52. }
  53. .oil{
  54. color: #d92610;
  55. font-size: large;
  56. font-weight: 550;
  57. margin-bottom: 3%;
  58. }
  59. .volume{
  60. color: #878787;
  61. font-size: small;
  62. }
  63. .amountBox{
  64. display: flex;
  65. flex-direction: column;
  66. align-items: flex-end;
  67. flex-grow: 3;
  68. }
  69. .mainAmount{
  70. font-size: larger;
  71. font-weight: 600;
  72. margin-bottom: 3%;
  73. }
  74. .amountBox image {
  75. width: 40rpx;
  76. height: 40rpx;
  77. margin-top: 3%;
  78. transition: transform 0.3s ease-in-out;
  79. }
  80. .line{
  81. background-color: #e5e5e5;
  82. height: 1rpx;
  83. width: 105%;
  84. margin: 3% 0%;
  85. }
  86. .orderDetailInfo{
  87. display: flex;
  88. flex-direction: column;
  89. width: 100%;
  90. margin-bottom: 3%;
  91. }
  92. .orderDetailInfo view{
  93. display: flex;
  94. justify-content: space-between;
  95. }
  96. .orderDetailInfo text{
  97. color: #838383;
  98. font-size: small;
  99. margin: 1% 0%;
  100. }
  101. .buttonBox{
  102. width: 100%;
  103. height: 8vh;
  104. display: flex;
  105. align-items: center;
  106. justify-content: space-around;
  107. border-radius: 0 0 15rpx 15rpx ;
  108. }
  109. .button1All{
  110. width: 100%;
  111. height: 100%;
  112. display: flex;
  113. justify-content: center;
  114. align-items: center;
  115. background-color: #d81e07;
  116. border-radius: 0 0 15rpx 15rpx ;
  117. color: #FFFFFF;
  118. }
  119. .button1{
  120. width: 38%;
  121. height: 75%;
  122. display: flex;
  123. justify-content: center;
  124. align-items: center;
  125. border: #b2b2b2 solid 5rpx;
  126. border-radius: 15rpx ;
  127. }
  128. .button2{
  129. width: 38%;
  130. height: 75%;
  131. display: flex;
  132. justify-content: center;
  133. align-items: center;
  134. background-color: #d81e07;
  135. border-radius: 15rpx ;
  136. color: #FFFFFF;
  137. }