coupon.wxss 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. page.data-v-47287ee1 {
  2. background-color: #f5f5f5;
  3. }
  4. .container.data-v-47287ee1 {
  5. padding-bottom: env(safe-area-inset-bottom);
  6. }
  7. .top-fixed.data-v-47287ee1 {
  8. width: 100%;
  9. position: fixed;
  10. top: 0;
  11. left: 0;
  12. z-index: 99999;
  13. }
  14. .top-fixed .cate-list.data-v-47287ee1 {
  15. box-sizing: border-box;
  16. background: #fff;
  17. padding: 10rpx 27rpx;
  18. height: 100rpx;
  19. }
  20. .top-fixed .cate-list .inner.data-v-47287ee1 {
  21. display: flex;
  22. }
  23. .top-fixed .cate-list .item.data-v-47287ee1 {
  24. flex-shrink: 0;
  25. padding: 0 24rpx;
  26. height: 64rpx;
  27. line-height: 64rpx;
  28. font-size: 28rpx;
  29. font-family: PingFang SC;
  30. font-weight: 500;
  31. color: #2BC7B9;
  32. background: #F5FFFE;
  33. border: 1px solid #8AD5CE;
  34. border-radius: 32rpx;
  35. margin: 0 20rpx 20rpx 0;
  36. }
  37. .top-fixed .cate-list .item.active.data-v-47287ee1 {
  38. color: #FFFFFF;
  39. background: #2BC7B9;
  40. border: 1px solid #2BC7B9;
  41. }
  42. .tui-coupon-list.data-v-47287ee1 {
  43. margin-top: 120rpx;
  44. width: 100%;
  45. padding: 0 25rpx;
  46. box-sizing: border-box;
  47. }
  48. .tui-coupon-banner.data-v-47287ee1 {
  49. width: 100%;
  50. }
  51. .tui-coupon-item.data-v-47287ee1 {
  52. width: 100%;
  53. height: 210rpx;
  54. position: relative;
  55. display: flex;
  56. align-items: center;
  57. padding-right: 30rpx;
  58. box-sizing: border-box;
  59. overflow: hidden;
  60. }
  61. .tui-coupon-bg.data-v-47287ee1 {
  62. width: 100%;
  63. height: 210rpx;
  64. position: absolute;
  65. left: 0;
  66. top: 0;
  67. z-index: 1;
  68. }
  69. .tui-coupon-sign.data-v-47287ee1 {
  70. height: 110rpx;
  71. width: 110rpx;
  72. position: absolute;
  73. z-index: 9;
  74. top: -30rpx;
  75. right: 40rpx;
  76. }
  77. .tui-coupon-item-left.data-v-47287ee1 {
  78. width: 218rpx;
  79. height: 210rpx;
  80. position: relative;
  81. z-index: 2;
  82. display: flex;
  83. align-items: center;
  84. justify-content: center;
  85. flex-direction: column;
  86. flex-shrink: 0;
  87. }
  88. .tui-coupon-price-box.data-v-47287ee1 {
  89. display: flex;
  90. color: #e41f19;
  91. align-items: flex-end;
  92. }
  93. .tui-coupon-price-sign.data-v-47287ee1 {
  94. font-size: 30rpx;
  95. }
  96. .tui-coupon-price.data-v-47287ee1 {
  97. font-size: 32rpx;
  98. line-height: 68rpx;
  99. font-weight: bold;
  100. }
  101. .tui-price-small.data-v-47287ee1 {
  102. font-size: 58rpx !important;
  103. line-height: 56rpx !important;
  104. }
  105. .tui-coupon-intro.data-v-47287ee1 {
  106. background: #f7f7f7;
  107. padding: 8rpx 10rpx;
  108. font-size: 26rpx;
  109. line-height: 26rpx;
  110. font-weight: 400;
  111. color: #666;
  112. margin-top: 18rpx;
  113. }
  114. .tui-coupon-item-right.data-v-47287ee1 {
  115. flex: 1;
  116. height: 210rpx;
  117. position: relative;
  118. z-index: 2;
  119. display: flex;
  120. align-items: center;
  121. justify-content: space-between;
  122. padding-left: 24rpx;
  123. box-sizing: border-box;
  124. overflow: hidden;
  125. }
  126. .tui-coupon-content.data-v-47287ee1 {
  127. width: 82%;
  128. display: flex;
  129. flex-direction: column;
  130. justify-content: center;
  131. }
  132. .tui-coupon-title-box.data-v-47287ee1 {
  133. display: flex;
  134. align-items: center;
  135. }
  136. .tui-coupon-btn.data-v-47287ee1 {
  137. padding: 6rpx;
  138. background: #ffebeb;
  139. color: #e41f19;
  140. font-size: 25rpx;
  141. line-height: 25rpx;
  142. display: flex;
  143. align-items: center;
  144. justify-content: center;
  145. -webkit-transform: scale(0.9);
  146. transform: scale(0.9);
  147. -webkit-transform-origin: 0 center;
  148. transform-origin: 0 center;
  149. border-radius: 4rpx;
  150. flex-shrink: 0;
  151. }
  152. .tui-color-grey.data-v-47287ee1 {
  153. color: #888 !important;
  154. }
  155. .tui-bg-grey.data-v-47287ee1 {
  156. background: #f0f0f0 !important;
  157. color: #888 !important;
  158. }
  159. .tui-coupon-title.data-v-47287ee1 {
  160. width: 100%;
  161. font-size: 26rpx;
  162. color: #333;
  163. white-space: nowrap;
  164. overflow: hidden;
  165. text-overflow: ellipsis;
  166. }
  167. .tui-coupon-rule.data-v-47287ee1 {
  168. padding-top: 52rpx;
  169. }
  170. .tui-rule-box.data-v-47287ee1 {
  171. display: flex;
  172. align-items: center;
  173. -webkit-transform: scale(0.8);
  174. transform: scale(0.8);
  175. -webkit-transform-origin: 0 100%;
  176. transform-origin: 0 100%;
  177. }
  178. .tui-padding-btm.data-v-47287ee1 {
  179. padding-bottom: 6rpx;
  180. }
  181. .tui-coupon-circle.data-v-47287ee1 {
  182. width: 8rpx;
  183. height: 8rpx;
  184. background: #a0a0a0;
  185. border-radius: 50%;
  186. }
  187. .tui-coupon-text.data-v-47287ee1 {
  188. font-size: 28rpx;
  189. line-height: 28rpx;
  190. font-weight: 400;
  191. color: #666;
  192. padding-left: 8rpx;
  193. white-space: nowrap;
  194. }
  195. .tui-top20.data-v-47287ee1 {
  196. margin-top: 20rpx;
  197. }
  198. .tui-coupon-title.data-v-47287ee1 {
  199. font-size: 28rpx;
  200. line-height: 28rpx;
  201. }
  202. .tui-coupon-radio.data-v-47287ee1 {
  203. -webkit-transform: scale(0.7);
  204. transform: scale(0.7);
  205. -webkit-transform-origin: 100% center;
  206. transform-origin: 100% center;
  207. }
  208. .tui-btn-box.data-v-47287ee1 {
  209. position: absolute;
  210. right: 20rpx;
  211. bottom: 40rpx;
  212. z-index: 10;
  213. }
  214. .tui-btn-box .btn.data-v-47287ee1 {
  215. width: 155rpx;
  216. height: 64rpx;
  217. line-height: 64rpx;
  218. font-size: 26rpx;
  219. font-family: PingFang SC;
  220. font-weight: 500;
  221. text-align: center;
  222. border-radius: 32rpx;
  223. margin-left: 15rpx;
  224. }
  225. .tui-btn-box .btn.cancel.data-v-47287ee1 {
  226. border: 1px solid red;
  227. color: red;
  228. }
  229. .tui-btn-box .btn.receive.data-v-47287ee1 {
  230. background: red;
  231. color: #FFFFFF;
  232. }