order.wxss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. page{
  2. height: 100%;
  3. }
  4. image{
  5. width: 100%;
  6. height: 100%;
  7. }
  8. .float-left{
  9. float: left;
  10. }
  11. .float-right{
  12. float: right;
  13. }
  14. .order-container{
  15. width: 100vw;
  16. height: 100vh;
  17. overflow: hidden;
  18. background-color: #f5f5f5;
  19. }
  20. .order-container .order-bar{
  21. height: 10vh;
  22. display: flex;
  23. background-color: #ffffff;
  24. }
  25. .order-bar .order-title{
  26. flex: 1;
  27. }
  28. .order-title .order-title-text{
  29. margin: 0 auto;
  30. width: 80%;
  31. height: 90rpx;
  32. text-align: center;
  33. font-size: 35rpx;
  34. line-height: 100rpx;
  35. /* border: 1rpx solid black; */
  36. }
  37. .order-title .select-bar{
  38. width: 50rpx;
  39. height: 10rpx;
  40. background-color: var(--themeColor);
  41. border-radius: 5rpx;
  42. position: relative;
  43. top: 0;
  44. left: 100rpx;
  45. }
  46. /* 内容 */
  47. .order-list-container{
  48. /* margin: 15rpx 0 0 0; */
  49. height: 90vh;
  50. }
  51. .order-list{
  52. overflow: hidden;
  53. margin: 10rpx 0 10rpx 0;
  54. padding: 15rpx 15rpx;
  55. background-color: #ffffff;
  56. /* height: 100rpx; */
  57. }
  58. .order-list .order-status{
  59. height: 50rpx;
  60. font-size: 30rpx;
  61. color: #888888;
  62. }
  63. .order-list .order-info{
  64. /* height: 300rpx; */
  65. width: 100%;
  66. overflow: hidden;
  67. }
  68. .order-info .order-pic-container{
  69. overflow: hidden;
  70. white-space: nowrap;
  71. }
  72. .order-info .scroll-order-pics{
  73. height: 100rpx;
  74. overflow: hidden;
  75. }
  76. .pics-container{
  77. width: 100%;
  78. height: 100rpx;
  79. overflow: hidden;
  80. }
  81. .scroll-order-pics .order-goods-pic{
  82. width: 100rpx;
  83. height: 100rpx;
  84. margin: 0 8rpx;
  85. display: inline-block;
  86. }
  87. .order-info .order-item{
  88. width: 100%;
  89. margin: 10rpx 0 0 0;
  90. font-size: 25rpx;
  91. color: #888888;
  92. }
  93. .order-info .order-price{
  94. font-size: 40rpx;
  95. color: red;
  96. }
  97. .order-list .order-option{
  98. overflow: hidden;
  99. }
  100. .order-option .order-option-item{
  101. margin: 10rpx 5rpx;
  102. width: 150rpx;
  103. height: 60rpx;
  104. font-size: 30rpx;
  105. text-align: center;
  106. line-height: 56rpx;
  107. border-radius: 30rpx;
  108. }
  109. .order-option .order-pay-now{
  110. border: 1rpx solid #1AAD19;
  111. color: #1AAD19;
  112. }
  113. .order-option .order-delete {
  114. border: 1rpx solid red;
  115. color: red;
  116. }
  117. .order-option .order-close{
  118. border: 1rpx solid orange;
  119. color: orange;
  120. }
  121. .order-option .order-one-comment{
  122. border: 1rpx solid #888888;
  123. color: #888888;
  124. }
  125. .order-option .order-one-more{
  126. border: 1rpx solid var(--themeColor);
  127. color: var(--themeColor);
  128. }
  129. .bottom{
  130. width: auto;
  131. height: 30rpx;
  132. line-height: 30rpx;
  133. font-size: 25rpx;
  134. color: #999999;
  135. text-align: center;
  136. }