coupon.wxss 3.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. .container, page {
  2. background: #fff; }
  3. .coupon-list {
  4. padding: 20rpx; }
  5. .coupon-list .coupon-item {
  6. position: relative;
  7. overflow: hidden;
  8. margin-bottom: 22rpx; }
  9. .coupon-list .coupon-item .item-wrapper {
  10. width: 100%;
  11. display: flex;
  12. background: #fff;
  13. border-radius: 8rpx;
  14. color: #fff;
  15. height: 180rpx; }
  16. .coupon-list .coupon-item .item-wrapper .coupon-type {
  17. position: absolute;
  18. top: 0;
  19. right: 0;
  20. z-index: 10;
  21. width: 128rpx;
  22. padding: 3px 0;
  23. background: #a771ff;
  24. font-size: 20rpx;
  25. text-align: center;
  26. color: #ffffff;
  27. transform: rotate(45deg);
  28. transform-origin: 64rpx 64rpx; }
  29. .coupon-list .coupon-item .item-wrapper.color__blue {
  30. background: linear-gradient(-125deg, #57bdbf, #2f9de2); }
  31. .coupon-list .coupon-item .item-wrapper.color__red {
  32. background: linear-gradient(-128deg, #ff6d6d, #ff3636); }
  33. .coupon-list .coupon-item .item-wrapper.color__violet {
  34. background: linear-gradient(-113deg, #ef86ff, #b66ff5); }
  35. .coupon-list .coupon-item .item-wrapper.color__violet .coupon-type {
  36. background: #55b5ff; }
  37. .coupon-list .coupon-item .item-wrapper.color__yellow {
  38. background: linear-gradient(-141deg, #f7d059, #fdb054); }
  39. .coupon-list .coupon-item .item-wrapper.color__gray {
  40. background: linear-gradient(-113deg, #bdbdbd, #a2a1a2); }
  41. .coupon-list .coupon-item .item-wrapper.color__gray .coupon-type {
  42. background: #9e9e9e; }
  43. .coupon-list .coupon-item .item-wrapper .content {
  44. flex: 1;
  45. padding: 30rpx 20rpx;
  46. border-radius: 8px 0 0 8px; }
  47. .coupon-list .coupon-item .item-wrapper .content .title {
  48. font-size: 38rpx; }
  49. .coupon-list .coupon-item .item-wrapper .content .bottom .time {
  50. font-size: 24rpx; }
  51. .coupon-list .coupon-item .item-wrapper .content .bottom .receive {
  52. height: 46rpx;
  53. width: 122rpx;
  54. line-height: 46rpx;
  55. text-align: center;
  56. border: 1px solid #fff;
  57. border-radius: 30rpx;
  58. color: #fff;
  59. font-size: 24rpx; }
  60. .coupon-list .coupon-item .item-wrapper .content .bottom .receive.state {
  61. border: none; }
  62. .coupon-list .coupon-item .item-wrapper .tip {
  63. position: relative;
  64. flex: 0 0 32%;
  65. text-align: center;
  66. border-radius: 0 8px 8px 0; }
  67. .coupon-list .coupon-item .item-wrapper .tip .money {
  68. font-weight: bold;
  69. font-size: 52rpx; }
  70. .coupon-list .coupon-item .item-wrapper .tip .pay-line {
  71. font-size: 22rpx; }
  72. .coupon-list .coupon-item .item-wrapper .split-line {
  73. position: relative;
  74. flex: 0 0 0;
  75. border-left: 4rpx solid #fff;
  76. margin: 0 5px 0 3px;
  77. background: #fff; }
  78. .coupon-list .coupon-item .item-wrapper .split-line:before, .coupon-list .coupon-item .item-wrapper .split-line:after {
  79. content: '';
  80. position: absolute;
  81. width: 12px;
  82. height: 6px;
  83. background: #f7f7f7;
  84. left: -7px;
  85. z-index: 1; }
  86. .coupon-list .coupon-item .item-wrapper .split-line:before {
  87. border-radius: 0 0 8px 8px;
  88. top: 0; }
  89. .coupon-list .coupon-item .item-wrapper .split-line:after {
  90. border-radius: 8px 8px 0 0;
  91. bottom: 0; }
  92. /*# sourceMappingURL=coupon.wxss.map */