index.wxss 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. /*screen*/
  2. .tui-header-screen {
  3. width: 100%;
  4. box-sizing: border-box;
  5. background: #fff;
  6. position: fixed;
  7. z-index: 1000;
  8. }
  9. .tui-search-model {
  10. width: 100%;
  11. position: absolute;
  12. background: #fff;
  13. border-bottom-left-radius: 24rpx;
  14. border-bottom-right-radius: 24rpx;
  15. overflow: hidden;
  16. box-sizing: border-box;
  17. padding-top: 10rpx;
  18. padding-bottom: 26rpx;
  19. left: 0;
  20. top: 88rpx;
  21. visibility: hidden;
  22. transition: all 0.2s ease-in-out;
  23. z-index: 999;
  24. }
  25. .tui-search-model-show {
  26. visibility: visible;
  27. }
  28. .tui-search-model-mask {
  29. position: fixed;
  30. top: 0;
  31. left: 0;
  32. right: 0;
  33. bottom: 0;
  34. background: rgba(0, 0, 0, 0.6);
  35. z-index: -1;
  36. transition: all 0.2s ease-in-out;
  37. opacity: 0;
  38. visibility: hidden;
  39. }
  40. .tui-mask-show {
  41. opacity: 1;
  42. visibility: visible;
  43. }
  44. .tui-search-model-item {
  45. color: #333;
  46. font-size: 28rpx;
  47. box-sizing: border-box;
  48. align-items: center;
  49. justify-content: space-between;
  50. }
  51. .tui-attr-btnbox {
  52. width: 100%;
  53. box-sizing: border-box;
  54. padding: 0 30rpx;
  55. background: #fff;
  56. }
  57. .tui-attr-safearea {
  58. height: 100rpx;
  59. display: flex;
  60. align-items: center;
  61. justify-content: space-between;
  62. }
  63. .tui-safearea-bottom {
  64. width: 100%;
  65. }
  66. .tui-attr-btnbox::before {
  67. content: '';
  68. position: absolute;
  69. top: 0;
  70. right: 0;
  71. left: 0;
  72. border-top: 1rpx solid #eaeef1;
  73. -webkit-transform: scaleY(0.5);
  74. transform: scaleY(0.5);
  75. }
  76. .tui-drawer-btn {
  77. width: 47%;
  78. text-align: center;
  79. height: 60rpx;
  80. border-radius: 30rpx;
  81. flex-shrink: 0;
  82. display: flex;
  83. align-items: center;
  84. justify-content: center;
  85. box-sizing: border-box;
  86. }
  87. .tui-drawerbtn-black {
  88. border: 1rpx solid #555;
  89. }
  90. .tui-drawerbtn-primary {
  91. background: #e41f19;
  92. color: #fff;
  93. }
  94. .tui-line-cell {
  95. width: 100%;
  96. box-sizing: border-box;
  97. display: flex;
  98. align-items: center;
  99. }
  100. .tui-title {
  101. font-size: 24rpx;
  102. line-height: 24rpx;
  103. flex-shrink: 0;
  104. }
  105. .tui-input {
  106. font-size: 24rpx;
  107. color: #333;
  108. padding-left: 20rpx;
  109. flex: 1;
  110. }
  111. .phcolor{
  112. font-size: 24rpx;
  113. }
  114. .tui-top-item {
  115. height: 28rpx;
  116. line-height: 28rpx;
  117. flex: 1;
  118. display: flex;
  119. align-items: center;
  120. justify-content: center;
  121. margin-left: 16rpx;
  122. }
  123. /*列表*/
  124. .tui-order-list {
  125. margin-top: 80rpx;
  126. }
  127. .tui-order-item {
  128. margin-top: 20rpx;
  129. border-radius: 10rpx;
  130. overflow: hidden;
  131. }
  132. .tui-goods-title {
  133. width: 100%;
  134. font-size: 28rpx;
  135. display: flex;
  136. align-items: center;
  137. justify-content: space-between;
  138. }
  139. .tui-order-status {
  140. color: #888;
  141. font-size: 26rpx;
  142. }
  143. .tui-goods-item {
  144. width: 100%;
  145. padding: 20rpx 30rpx;
  146. box-sizing: border-box;
  147. display: flex;
  148. justify-content: space-between;
  149. }
  150. .tui-goods-img {
  151. width: 180rpx;
  152. height: 180rpx;
  153. display: block;
  154. flex-shrink: 0;
  155. }
  156. .tui-goods-left-bolck {
  157. width: 50rpx;
  158. height: 100rpx;
  159. display: block;
  160. flex-shrink: 0;
  161. }
  162. .tui-goods-center {
  163. flex: 1;
  164. padding: 20rpx 8rpx;
  165. box-sizing: border-box;
  166. }
  167. .tui-goods-name {
  168. max-width: 420rpx;
  169. word-break: break-all;
  170. overflow: hidden;
  171. text-overflow: ellipsis;
  172. display: -webkit-box;
  173. -webkit-box-orient: vertical;
  174. -webkit-line-clamp: 2;
  175. font-size: 26rpx;
  176. line-height: 32rpx;
  177. }
  178. .tui-goods-attr {
  179. font-size: 22rpx;
  180. color: #888888;
  181. line-height: 32rpx;
  182. padding-top: 20rpx;
  183. word-break: break-all;
  184. overflow: hidden;
  185. text-overflow: ellipsis;
  186. display: -webkit-box;
  187. -webkit-box-orient: vertical;
  188. -webkit-line-clamp: 2;
  189. }
  190. .tui-price-right {
  191. text-align: right;
  192. font-size: 24rpx;
  193. color: #888888;
  194. line-height: 30rpx;
  195. padding-top: 20rpx;
  196. }
  197. .tui-color-red {
  198. color: #E41F19;
  199. padding-right: 30rpx;
  200. }
  201. .tui-goods-price {
  202. width: 100%;
  203. display: flex;
  204. align-items: flex-end;
  205. justify-content: flex-end;
  206. font-size: 24rpx;
  207. }
  208. .tui-size-24 {
  209. font-size: 24rpx;
  210. line-height: 24rpx;
  211. }
  212. .tui-price-large {
  213. font-size: 32rpx;
  214. line-height: 30rpx;
  215. font-weight: 500;
  216. }
  217. .tui-order-btn {
  218. width: 100%;
  219. display: flex;
  220. align-items: center;
  221. justify-content: flex-end;
  222. background: #fff;
  223. padding: 10rpx 30rpx 20rpx;
  224. box-sizing: border-box;
  225. }
  226. .tui-btn-ml {
  227. margin-left: 20rpx;
  228. }