coupon.wxss 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. .coupon-item2 {
  2. position: relative;
  3. width: 280rpx;
  4. height: 126rpx;
  5. display: flex;
  6. align-items: center;
  7. margin-right: 20rpx;
  8. }
  9. .coupon-item2 .coupon-item2-bg {
  10. position: absolute;
  11. left: 0;
  12. right: 0;
  13. top: 0;
  14. bottom: 0;
  15. width: 280rpx;
  16. height: 100%;
  17. }
  18. .coupon-item2 .coupon-intro {
  19. position: relative;
  20. flex: 1;
  21. padding-left: 20rpx;
  22. }
  23. .coupon-item2 .coupon-btn {
  24. position: relative;
  25. width: 40rpx;
  26. text-align: center;
  27. line-height: 36rpx;
  28. padding: 0 12rpx;
  29. }
  30. .promotion.coupon-style3 {
  31. padding: 16rpx;
  32. margin-left: 20rpx;
  33. margin-right: 20rpx;
  34. background-color: transparent;
  35. background-size: cover;
  36. border-radius: 16rpx;
  37. }
  38. .coupon-item3 {
  39. position: relative;
  40. width: 220rpx;
  41. height: 268rpx;
  42. margin-right: 20rpx;
  43. display: flex;
  44. flex-direction: column;
  45. align-items: center;
  46. }
  47. .coupon-item3 .coupon-item3-bg {
  48. position: absolute;
  49. left: 0;
  50. right: 0;
  51. top: 0;
  52. bottom: 0;
  53. width: 220rpx;
  54. height: 100%;
  55. }
  56. .coupon-item3 .coupon-intro {
  57. position: relative;
  58. }
  59. .coupon-item3 .price {
  60. font-size: 48rpx;
  61. }
  62. .coupon-item3 .coupon-desc {
  63. color: #777777;
  64. }
  65. .coupon-item3 .coupon-btn {
  66. position: absolute;
  67. width: 132rpx;
  68. bottom: 20rpx;
  69. left: 50%;
  70. margin-left: -66rpx;
  71. color: #FFFFFF;
  72. line-height: 56rpx;
  73. background-color: #FF4544;
  74. border-radius: 60rpx;
  75. }