couponDetails.css 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. body[data-v-66a98d6c] {
  2. background-color: #f5f5f5;
  3. }
  4. .container[data-v-66a98d6c] {
  5. height: 100%;
  6. display: flex;
  7. flex-direction: column;
  8. }
  9. .tui-coupon-list[data-v-66a98d6c] {
  10. width: 100%;
  11. padding: 0 0.78125rem;
  12. box-sizing: border-box;
  13. }
  14. .tui-coupon-banner[data-v-66a98d6c] {
  15. width: 100%;
  16. }
  17. .tui-coupon-item[data-v-66a98d6c] {
  18. width: 100%;
  19. height: 6.5625rem;
  20. position: relative;
  21. display: flex;
  22. align-items: center;
  23. padding-right: 0.9375rem;
  24. box-sizing: border-box;
  25. overflow: hidden;
  26. }
  27. .tui-coupon-bg[data-v-66a98d6c] {
  28. width: 100%;
  29. height: 6.5625rem;
  30. position: absolute;
  31. left: 0;
  32. top: 0;
  33. z-index: 1;
  34. }
  35. .tui-coupon-sign[data-v-66a98d6c] {
  36. height: 3.4375rem;
  37. width: 3.4375rem;
  38. position: absolute;
  39. z-index: 9;
  40. top: -0.9375rem;
  41. right: 1.25rem;
  42. }
  43. .tui-coupon-item-left[data-v-66a98d6c] {
  44. width: 6.8125rem;
  45. height: 6.5625rem;
  46. position: relative;
  47. z-index: 2;
  48. display: flex;
  49. align-items: center;
  50. justify-content: center;
  51. flex-direction: column;
  52. flex-shrink: 0;
  53. }
  54. .tui-coupon-price-box[data-v-66a98d6c] {
  55. display: flex;
  56. color: #e41f19;
  57. align-items: flex-end;
  58. }
  59. .tui-coupon-price-sign[data-v-66a98d6c] {
  60. font-size: 0.9375rem;
  61. }
  62. .tui-coupon-price[data-v-66a98d6c] {
  63. font-size: 1rem;
  64. line-height: 2.125rem;
  65. font-weight: bold;
  66. }
  67. .tui-price-small[data-v-66a98d6c] {
  68. font-size: 1.8125rem !important;
  69. line-height: 1.75rem !important;
  70. }
  71. .tui-coupon-intro[data-v-66a98d6c] {
  72. background: #f7f7f7;
  73. padding: 0.25rem 0.3125rem;
  74. font-size: 0.8125rem;
  75. line-height: 0.8125rem;
  76. font-weight: 400;
  77. color: #666;
  78. margin-top: 0.5625rem;
  79. }
  80. .tui-coupon-item-right[data-v-66a98d6c] {
  81. flex: 1;
  82. height: 6.5625rem;
  83. position: relative;
  84. z-index: 2;
  85. display: flex;
  86. align-items: center;
  87. justify-content: space-between;
  88. padding-left: 0.75rem;
  89. box-sizing: border-box;
  90. overflow: hidden;
  91. }
  92. .tui-coupon-content[data-v-66a98d6c] {
  93. width: 82%;
  94. display: flex;
  95. flex-direction: column;
  96. justify-content: center;
  97. }
  98. .tui-coupon-title-box[data-v-66a98d6c] {
  99. display: flex;
  100. align-items: center;
  101. }
  102. .tui-coupon-btn[data-v-66a98d6c] {
  103. padding: 0.1875rem;
  104. background: #ffebeb;
  105. color: #C39A58;
  106. font-size: 0.78125rem;
  107. line-height: 0.78125rem;
  108. display: flex;
  109. align-items: center;
  110. justify-content: center;
  111. transform: scale(0.9);
  112. transform-origin: 0 center;
  113. border-radius: 0.125rem;
  114. flex-shrink: 0;
  115. }
  116. .tui-color-grey[data-v-66a98d6c] {
  117. color: #888 !important;
  118. }
  119. .tui-bg-grey[data-v-66a98d6c] {
  120. background: #f0f0f0 !important;
  121. color: #888 !important;
  122. }
  123. .tui-coupon-title[data-v-66a98d6c] {
  124. width: 100%;
  125. font-size: 0.8125rem;
  126. color: #333;
  127. white-space: nowrap;
  128. overflow: hidden;
  129. text-overflow: ellipsis;
  130. }
  131. .tui-coupon-rule[data-v-66a98d6c] {
  132. padding-top: 1.625rem;
  133. }
  134. .tui-rule-box[data-v-66a98d6c] {
  135. display: flex;
  136. align-items: center;
  137. transform: scale(0.8);
  138. transform-origin: 0 100%;
  139. }
  140. .tui-padding-btm[data-v-66a98d6c] {
  141. padding-bottom: 0.1875rem;
  142. }
  143. .tui-coupon-circle[data-v-66a98d6c] {
  144. width: 0.25rem;
  145. height: 0.25rem;
  146. background: #a0a0a0;
  147. border-radius: 50%;
  148. }
  149. .tui-coupon-text[data-v-66a98d6c] {
  150. font-size: 0.875rem;
  151. line-height: 0.875rem;
  152. font-weight: 400;
  153. color: #666;
  154. padding-left: 0.25rem;
  155. white-space: nowrap;
  156. }
  157. .tui-top20[data-v-66a98d6c] {
  158. margin-top: 0.625rem;
  159. }
  160. .tui-coupon-title[data-v-66a98d6c] {
  161. font-size: 0.875rem;
  162. line-height: 0.875rem;
  163. }
  164. .tui-coupon-radio[data-v-66a98d6c] {
  165. transform: scale(0.7);
  166. transform-origin: 100% center;
  167. }
  168. .tui-btn-box[data-v-66a98d6c] {
  169. position: absolute;
  170. right: 0.625rem;
  171. bottom: 1.25rem;
  172. z-index: 10;
  173. }
  174. .tui-btn-box .btn[data-v-66a98d6c] {
  175. width: 4.84375rem;
  176. height: 2rem;
  177. line-height: 2rem;
  178. font-size: 0.8125rem;
  179. font-family: PingFang SC;
  180. font-weight: 500;
  181. text-align: center;
  182. border-radius: 1rem;
  183. margin-left: 0.46875rem;
  184. }
  185. .tui-btn-box .btn.cancel[data-v-66a98d6c] {
  186. border: 1px solid #C39A58;
  187. color: #C39A58;
  188. }
  189. .tui-btn-box .btn.receive[data-v-66a98d6c] {
  190. background: #C39A58;
  191. color: #FFFFFF;
  192. }