coupon-buy.wxss 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429
  1. @font-face {
  2. font-family: "ysbth";
  3. src: url(data:font/ttf;base64,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) format('truetype');
  4. }
  5. ax-body.data-v-6415fde6 {
  6. display: block;
  7. height: 100%;
  8. background: #F6FAFF;
  9. }
  10. .body.data-v-6415fde6 {
  11. position: relative;
  12. z-index: 1;
  13. background: linear-gradient( 180deg, #6DEEED 0%, #C4FFFF 8%, #FFFFFF 37%, #F5F7FB 100%);
  14. padding: 0 20rpx 0 20rpx;
  15. }
  16. /* 页面背景 */
  17. .page-background.data-v-6415fde6 {
  18. position: fixed;
  19. top: 0;
  20. left: 0;
  21. right: 0;
  22. z-index: 0;
  23. }
  24. .page-background image.data-v-6415fde6 {
  25. display: block;
  26. width: 100%;
  27. /* transform: scaleY(-100%); */
  28. }
  29. /* 统计卡 */
  30. .sta-card.data-v-6415fde6 {
  31. flex: 1;
  32. display: flex;
  33. align-items: center;
  34. justify-content: center;
  35. flex-direction: column;
  36. height: 78px;
  37. border-radius: 8px;
  38. background: #FFFFFF;
  39. position: relative;
  40. overflow: hidden;
  41. }
  42. .sta-card.data-v-6415fde6::before {
  43. content: '';
  44. display: block;
  45. position: absolute;
  46. top: 0;
  47. left: 0;
  48. right: 0;
  49. bottom: 0;
  50. box-shadow: 0 8px 8px #fff inset;
  51. background-color: transparent !important;
  52. }
  53. .sta-card+.sta-card.data-v-6415fde6 {
  54. margin-left: 10px;
  55. }
  56. .sta-card .value.data-v-6415fde6 {
  57. font-size: 24px;
  58. font-weight: bold;
  59. position: relative;
  60. z-index: 3;
  61. }
  62. .sta-card .name.data-v-6415fde6 {
  63. font-size: 12px;
  64. color: #aaa;
  65. position: relative;
  66. z-index: 3;
  67. }
  68. .sta-card .bg.data-v-6415fde6 {
  69. position: absolute;
  70. top: 0;
  71. right: 0;
  72. height: 100%;
  73. z-index: 2;
  74. }
  75. .overflow-payment.data-v-6415fde6 {
  76. position: absolute;
  77. width: 176rpx;
  78. height: 40rpx;
  79. background: #FF4D3A;
  80. border-radius: 8rpx;
  81. font-size: 24rpx;
  82. color: #FFFFFF;
  83. text-align: center;
  84. top: 0;
  85. right: 0;
  86. z-index: 9999;
  87. }
  88. /* 卡片 */
  89. .card.data-v-6415fde6 {
  90. border-radius: 16px;
  91. padding: 15px 0;
  92. margin-top: 10px;
  93. }
  94. .card .title.data-v-6415fde6 {
  95. /* display: flex;
  96. align-items: flex-end;
  97. justify-content: space-between; */
  98. margin-bottom: 20px;
  99. font-weight: bold;
  100. }
  101. .title-text.data-v-6415fde6 {
  102. font-weight: normal;
  103. font-size: 26rpx;
  104. color: #666;
  105. }
  106. .card .title .more.data-v-6415fde6 {
  107. display: flex;
  108. align-items: center;
  109. justify-content: center;
  110. font-weight: normal;
  111. font-size: 14px;
  112. color: #aaa;
  113. }
  114. .card .title .more .icon.data-v-6415fde6 {
  115. margin-left: 5px;
  116. }
  117. /* 温馨提示 */
  118. .tips .li.data-v-6415fde6 {
  119. font-size: 14px;
  120. color: #666;
  121. }
  122. .tips .li+.li.data-v-6415fde6 {
  123. margin-top: 7px;
  124. }
  125. /* 优惠券 */
  126. .coupons.data-v-6415fde6 {
  127. display: grid;
  128. grid-template-columns: 1fr 1fr 1fr;
  129. gap: 10px;
  130. }
  131. .coupons .item.data-v-6415fde6 {
  132. --item-bg: #3eb6f8;
  133. --item-bg-active: #0093e4;
  134. --coupon-bg: #fff;
  135. --coupon-bg-active: #3ab8ff;
  136. --font-color: #3eb6f8;
  137. --font-color-active: #fff;
  138. padding: 5px;
  139. height: 150px;
  140. border-radius: 10px;
  141. background-color: var(--item-bg);
  142. color: var(--font-color);
  143. }
  144. .coupons .item .coupon.data-v-6415fde6 {
  145. display: flex;
  146. flex-direction: column;
  147. width: 100%;
  148. height: 100%;
  149. overflow: hidden;
  150. border-radius: 10px;
  151. -webkit-filter: drop-shadow(0 1px 6px rgba(102, 102, 102, 0.3));
  152. filter: drop-shadow(0 1px 6px rgba(102, 102, 102, 0.3));
  153. }
  154. .coupons .item .coupon .top.data-v-6415fde6 {
  155. flex: 1;
  156. display: flex;
  157. align-items: center;
  158. justify-content: center;
  159. flex-direction: column;
  160. background-color: var(--coupon-bg);
  161. }
  162. .coupons .item .coupon .top .value.data-v-6415fde6 {
  163. font-size: 36px;
  164. font-weight: bold;
  165. }
  166. .coupons .item .coupon .top .unit.data-v-6415fde6 {
  167. font-size: 14px;
  168. }
  169. .coupons .item .coupon .bottom.data-v-6415fde6 {
  170. text-align: center;
  171. font-size: 14px;
  172. background-color: var(--coupon-bg);
  173. padding: 10px;
  174. }
  175. .coupons .item .coupon .middle.data-v-6415fde6 {
  176. display: flex;
  177. align-items: center;
  178. justify-content: space-between;
  179. height: 10px;
  180. position: relative;
  181. overflow: hidden;
  182. }
  183. .coupons .item .coupon .middle.data-v-6415fde6::before {
  184. content: '';
  185. display: block;
  186. width: 50%;
  187. height: 10px;
  188. background: radial-gradient(circle 10px at left, transparent 5px, var(--coupon-bg) 50%);
  189. }
  190. .coupons .item .coupon .middle.data-v-6415fde6::after {
  191. content: '';
  192. display: block;
  193. width: 50%;
  194. height: 10px;
  195. background: radial-gradient(circle 10px at right, transparent 5px, var(--coupon-bg) 50%);
  196. }
  197. .coupons .item .coupon .middle .line.data-v-6415fde6 {
  198. position: absolute;
  199. top: 50%;
  200. left: 10px;
  201. right: 10px;
  202. border-top: 1px dashed var(--font-color);
  203. }
  204. .coupons .item.active.data-v-6415fde6 {
  205. background-color: var(--item-bg-active);
  206. color: var(--font-color-active);
  207. }
  208. .coupons .item.active .coupon .middle .line.data-v-6415fde6 {
  209. border-color: var(--font-color-active);
  210. }
  211. .coupons .item.active .coupon .top.data-v-6415fde6,
  212. .coupons .item.active .coupon .bottom.data-v-6415fde6 {
  213. background-color: var(--coupon-bg-active);
  214. }
  215. .coupons .item.active .coupon .middle.data-v-6415fde6::before {
  216. background: radial-gradient(circle 10px at left, transparent 5px, var(--coupon-bg-active) 50%);
  217. }
  218. .coupons .item.active .coupon .middle.data-v-6415fde6::after {
  219. background: radial-gradient(circle 10px at right, transparent 5px, var(--coupon-bg-active) 50%);
  220. }
  221. .new-coupons-box.data-v-6415fde6{
  222. display: grid;
  223. grid-template-columns: 1fr 1fr 1fr;
  224. gap: 10px;
  225. }
  226. .new-coupons.data-v-6415fde6 {
  227. background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAABECAYAAABgbACrAAAE9ElEQVR4Aeyc7UsjRxzHZydgNJagFqMiMRCvvlArKCHYItVLxUPFF4caim+K0MNea23f9NX9D4W22OK1nOibaNRSqKLEh6O+U0tCvChEiGd8aDW2WMQ8FZp0ZnvJJZssnLdndpb7CePuzOxkvnw+zO7mxQQjwZ/NZjMtLS1963Q6t91ud9Dj8cSh5J4BZU8cuBcXF7+ZmppqEmhCSXFjY2OahYWFH8xm81ZHR8dwY2Pj2w0NDZq6ujoEJfcMKHvioIG4+MxkMv02Pz//3fj4eH5CIC+ONtTU1MxbLJaPjEYj4jgu0Q9HmQlgjFF1dTVH3NzX6/U/2+32PBqJF6fT6b5vbm5uy89PCqV9UBgiUFBQgIijO+T4FY2FiUFzfX39h0QaLDNKhOFSWFiIamtr78/OztZhrVY7RJYgSGNYWGo0g8GA1Wr1PVxaWvo+x4G3VDgsn6tUKkQebbepPT3LQSFbJgHynKumLye0ZPZCC7MEyJtmoczSmGXDfDAQx7yi7AFBXHYuzLeCOOYVZQ8I4rJzYb4VxDGvKHtAEJedC/OtII55RdkDgrjsXJhvfb3FMa9HPCCIE2fDdA+IY1qPeDgQJ86G6R4Qx7Qe8XAgTpwN0z0gjmk94uFAnDgbpntAHNN6xMOBOHE2N94jZQIQJ4WejGNBnIzwpUwN4qTQk3EsiJMRvpSp8dHRkc3lcvnOz8+lfA6MzQGBQCCAiKun1Bnu7OwcaGpqurWystLhdruPYrFYDiLAFNchQJ04nU7/+vr6HeLKSJ0lb5UDAwPLPp/vXY/H8/t1PhSuvXkC29vbhwcHB+/09/c7ErMlxdGG3t7eY6/X++Xl5WWc1qHIT+Di4iK+t7f3OXHzR2qaNHG04/T0dO7k5CRCz6HIT+D4+PhvjuN+ESbJEDcyMhINBoO+1Av9fj/a2dlB5KHIN6fXEYL6q+XDQ372LxwO+6xW67/PqslDhjjaQwzz+4zpOS0Gg4HfwK/X/78jC+o3y4MyTxSVSvVG4jz1mCHObrdXFhUV3Uq9CM7lI6DVat+anJzUCRNgYYNGo3lAVlZGu/A6qOeGQFVVlYospAfC2dIEzc3NfUK+J3ycl5d2pxSOgXoOCajVakScDM/MzAymTosnJibenJ6evk2+gP/U0tIyWlFRARvCUwkxcF5ZWYmJm0cOh8NGXL1HHmcl2Gg0/tnW1rZmsVju6nQZt1IGYkMESqC8vBy1t7d/0Nra+is5/wsXFxfTXfzwa0KUDuOFvO2jsrIyVFJS8vy3vBjPDPEEBNJeTgR9yqi+pilBnELFgzgQp1ACCo0NKw7EKZSAQmPDigNxCiWg0Niw4kCcQglIjC3XcFhxcpGXOC+IkwhQruEgTi7yEucFcRIByjUcx+PxqFyTw7wvTSCCo9HowUsPh4GyEIhEIk/x2dnZY7qpQJYEMOm1CVBXgUBgFYfD4YeHh4ewV+DaCOUZ4Pf7Y1dXVw9xX1+fa3d39xFZfiBPHhcvPGswGETE1ZjVan3Cv1VyHPfpxsbGYyLvhT8ELswtAXJnRJubm0uhUOgLOjMvrqurK+r1envW1tZ+3N/fR+RNk/ZBYYAAfab5fL7Y6urqKLlN3iWr7R8aixdHT4aGhkLd3d33tra2zA6HY9Tlcj0hfyG6SwfKDr9bKZccCPsgceBeXl7+mjgx9fT0DA8ODia3v/0HAAD//zXV5KwAAAAGSURBVAMAbTp7Ae0etF0AAAAASUVORK5CYII=);
  228. width: 220rpx;
  229. height: 136rpx;
  230. background-size: cover; /* 确保图片覆盖整个元素 */
  231. background-position: center;
  232. text-align: center;
  233. }
  234. .newCouponsActive.data-v-6415fde6{
  235. background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAABECAYAAABgbACrAAAFf0lEQVR4Aeycb2hVdRjHP79jztL5By2njrD5J3XmCl02U0InbWYJiWIxAxESs5ZGob3Q6H1RoGGShZEgg+XGwGy1qatFL8rpmtLMcDltLClNG2pb4f31/I6bbHe+Ge3unh/3ebjP/d1z7+453/v9PM95zn1xFxAXj++3uUVV9r0t39sT247Za2/WW6s58B4477d8ZxueqbQ78svs7DhM3AI354AdurLSflgwg6PPPUxx/v3MWjCZofOyQHPgPXDe508jZ00eLy+ZTt2Kz+37Cz+2d3YBDMG5Jx5K57OiOTyfkwmDDMhNE5LugWPxYCZG2GzImkhFdqlNQyIElzGOXU/NZGF6GkkXqgVzewbDh8CT2RRmD+NdJIL8Ujt3/iTWCDSjphHpwh0pJ8q8LDYs2m9nBhkjWT8jA2OEmqaAi7gPs8YTjL6LdcHEUSwOnFhAFk2ItAd3yHC7bzSLgqFDuFeBRRtWPB8Za5MDY3ENF+kqixee6tvSdcMCR8yIE8lJqXQ9Nn31HvFMuw2cD96lggPvoCERSHonXM4UKa9ZO04q17dCEMmEHefouQGpK/jggys0x4rwAegKYSUbT9YQmBOriRdeIHGr4xQaXkDr4hQ4te68npIpLvj4uR0z7ThwPniXARJSeN4JT2XNggztOHHBxyLQjvMQnEju7DgpOR+HdMpqFnLacWKC1K1XM14kd3acPPJNfKrr1Y7zsGhFsnSclG7Kzookf/b/47t2nJSv8NMZ55sJvurVL+C+dpzo9uo04WuH9LfuoP4CJeWnaPrlMnKloulOQVHNpj+hrJGz9a2UBHsLTNHWOWbK9m8pKG/k15hFOxAi5UEsBp/+yLntRynclmsm7V1iisKrSiSqVpnq2mYePfgzrUa2NYkMvIrTnP/mHPOql5sqOuMWOLdducK0VDez+cJVrIIjEuDOt2FrzrHpyxXmN7pFD3Du+abzlP1wgfYQnNzJjfCLoryoKwy0H8LiStW/HCAueoE7s9F0XGmnqTuko61w8AwcF+bu+Z7boNv960/34mgTFqwyN+K40Quc+wO5qkoL3ywbbn1kAiybCrnjCStOtxPrh/O8KwcPIp3bRC9w+aU2M3MEU7reqCthsSbLh/HpTC0ot2OJi17gxo1gq3SUNB1JFZwso6J23LxMBo0awlbioge4ZRX2xdUzeWHYYHCzTDP5PgxPg9WzKF5aYdfSLYLF5XZMYZldtP6wLd80l505Y0NmRK3yUlnP7AyCjbnsWXfIlhSU2ccKS+3oYPZYLr4+jyPb5rN8+hgUGETSgwfugTcW8OzmPL7OmcClIGskTBsDbqgZiKRo1XWTi/svQ9l3g2MWhHMMFBh44wES4cVJCE/K2ss1RXUH8rm9qTTVSsgKibDj3J0zRVdCY6LuQ8jK3bmMuljV17uo0Nkmpkj1+uIDEjrjxARhhm/pzkDeifbN5P7WK7UWfu9WcOJEf5ub6P0FjlqiD6L7x9ncb4nEzRknzvoymKOmM1l6AoHXb5Ug/HVfYmiifZBD6IxLtMmJ2r92nJRvosxN1H5FcmfHyRGSda7W40KfPQCCmKXDyANN8MWDGLQHbR00+yJYdRIW11/tnA1O/EGN1R96hIb4UBjuByANlzgctFxld22L/lbAB2hOY00Lsdbr7A4OrTT1JafZc6VD4MkrfR6U+h4GyrOLf0PpaT449LQ5GX4d+P0GL71dR42cOxEOmhA5Dy4LtLfq+KKujVeQCMFVLjUdNadY9lotH1U3y7My89wLmpBsD6xcQlY2E3u1lp0NZ1neuMr8I4RCXW7l2Hpzfe8Ss+6deuYW17Bz90lOftLI9X0/gebAeyDeX9t1goYNR9i+4zi5+54wxV+tNe0hLOA/AAAA///O0igMAAAABklEQVQDAEGInOeZdqzDAAAAAElFTkSuQmCC);
  236. width: 220rpx;
  237. height: 136rpx;
  238. background-size: cover; /* 确保图片覆盖整个元素 */
  239. background-position: center;
  240. text-align: center;
  241. }
  242. .new-coupons-price.data-v-6415fde6{
  243. font-weight: bold;
  244. font-size: 24rpx;
  245. color: #2B303A;
  246. height: 74rpx;
  247. line-height: 74rpx;
  248. }
  249. .new-coupons-unit.data-v-6415fde6{
  250. font-size: 22rpx;
  251. font-weight: normal;
  252. }
  253. .new-coupons-text.data-v-6415fde6{
  254. font-weight: 400;
  255. font-size: 28rpx;
  256. color: #2B303A;
  257. font-family: 'ysbth';
  258. height: 56rpx;
  259. line-height: 56rpx;
  260. }
  261. .pay-type.data-v-6415fde6 {
  262. display: flex;
  263. align-items: center;
  264. justify-content: space-between;
  265. }
  266. .pay-type .icon.data-v-6415fde6 {
  267. display: flex;
  268. align-items: center;
  269. justify-content: center;
  270. width: 20px;
  271. height: 20px;
  272. font-size: 14px;
  273. margin-right: 5px;
  274. border-radius: 100pc;
  275. background-color: #04BE02;
  276. color: #fff;
  277. }
  278. .footer.data-v-6415fde6 {
  279. position: fixed;
  280. left: 10px;
  281. right: 10px;
  282. bottom: 0;
  283. }
  284. .pay.data-v-6415fde6 {
  285. display: flex;
  286. align-items: center;
  287. justify-content: center;
  288. height: 50px;
  289. font-size: 14px;
  290. margin-top: 20px;
  291. border-radius: 8px;
  292. color: #2B303A;
  293. background: linear-gradient(to right, #8FF8FB, #47AEFF);
  294. }
  295. .pay.data-v-6415fde6::after {
  296. content: unset;
  297. display: none;
  298. }
  299. .pay[disabled].data-v-6415fde6 {
  300. text-shadow: unset;
  301. background: #ddd;
  302. }
  303. .coupon-item.data-v-6415fde6 {
  304. --item-color: #D6F3FF;
  305. font-family: 'ysbth';
  306. color: #2B303A;
  307. background-color: var(--item-color);
  308. border-radius: 8px;
  309. text-align: center;
  310. padding: 0 8px;
  311. position: relative;
  312. margin-bottom: 10px;
  313. }
  314. .coupon-item .ticket.data-v-6415fde6 {
  315. background-color: #F2F8FF;
  316. border-radius: 8px;
  317. margin-top: -10px;
  318. box-shadow: 0 -1px 6px rgba(122, 168, 222, 0.1);
  319. }
  320. .coupon-item .ticket .value.data-v-6415fde6 {
  321. display: flex;
  322. align-items: flex-end;
  323. justify-content: center;
  324. padding-top: 10px;
  325. color: #2B303A;
  326. }
  327. .coupon-item .ticket .value .val.data-v-6415fde6 {
  328. display: inline-block;
  329. font-size: 18px;
  330. font-weight: bold;
  331. -webkit-transform: translateY(2px);
  332. transform: translateY(2px);
  333. margin-right: 2px;
  334. }
  335. .coupon-item .ticket .value .unit.data-v-6415fde6 {
  336. font-size: 12px;
  337. }
  338. .coupon-item .ticket .line-wrap.data-v-6415fde6 {
  339. display: flex;
  340. align-items: center;
  341. position: relative;
  342. height: 16px;
  343. }
  344. .coupon-item .ticket .line-wrap .line.data-v-6415fde6 {
  345. flex: 1;
  346. height: 1px;
  347. border-top: 1px dashed #aaa;
  348. }
  349. .coupon-item .ticket .line-wrap .circle.data-v-6415fde6 {
  350. width: 16px;
  351. height: 16px;
  352. border-radius: 100%;
  353. background-color: var(--item-color);
  354. }
  355. .coupon-item .ticket .line-wrap view.data-v-6415fde6:first-child {
  356. -webkit-transform: translateX(-50%);
  357. transform: translateX(-50%);
  358. }
  359. .coupon-item .ticket .line-wrap view.data-v-6415fde6:last-child {
  360. -webkit-transform: translateX(50%);
  361. transform: translateX(50%);
  362. }
  363. .coupon-item .ticket .margin.data-v-6415fde6 {
  364. height: 15px;
  365. }
  366. .coupon-item .trapezium.data-v-6415fde6 {
  367. width: 100%;
  368. height: 10px;
  369. position: relative;
  370. overflow: hidden;
  371. margin-top: -10px;
  372. }
  373. .coupon-item .trapezium.data-v-6415fde6::after {
  374. content: '';
  375. display: block;
  376. width: 50%;
  377. height: 10px;
  378. position: absolute;
  379. left: 0;
  380. bottom: 0;
  381. -webkit-transform: skewX(-15deg) translateX(0.3em);
  382. transform: skewX(-15deg) translateX(0.3em);
  383. border-radius: 10px 0 0 0;
  384. background-color: var(--item-color);
  385. }
  386. .coupon-item .trapezium.data-v-6415fde6::before {
  387. content: '';
  388. display: block;
  389. width: 50%;
  390. height: 10px;
  391. position: absolute;
  392. right: 0;
  393. bottom: 0;
  394. -webkit-transform: skewX(15deg) translateX(-0.3em);
  395. transform: skewX(15deg) translateX(-0.3em);
  396. border-radius: 0 10px 0 0;
  397. background-color: var(--item-color);
  398. }
  399. .coupon-item .text.data-v-6415fde6 {
  400. margin-top: -8px;
  401. position: relative;
  402. z-index: 3;
  403. }
  404. .coupon-item.active.data-v-6415fde6 {
  405. --item-color: #47AEFF !important;
  406. }
  407. .coupon-item.active .ticket .value.data-v-6415fde6 {
  408. color: #47AEFF;
  409. }
  410. .coupon-item.active .text.data-v-6415fde6 {
  411. color: #fff;
  412. }
  413. .payment-tips.data-v-6415fde6 {
  414. width: 702rpx;
  415. height: 72rpx;
  416. background: #FFF6E8;
  417. border-radius: 16rpx;
  418. font-size: 24rpx;
  419. color: #FAB04D;
  420. line-height: 72rpx;
  421. text-align: center;
  422. }