index.wxss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. .voucherBox {
  2. position: fixed;
  3. width: 100vw;
  4. height: 100vh;
  5. left: 0px;
  6. top: 0px;
  7. background-color: rgba(0, 0, 0, 0.35);
  8. z-index: 999;
  9. }
  10. .voucherBox .voucher {
  11. position: relative;
  12. margin: 400rpx auto 0px;
  13. width: 630rpx;
  14. height: 694rpx;
  15. padding: 30rpx;
  16. box-sizing: border-box;
  17. background-color: #FEF2C7;
  18. border-radius: 20rpx;
  19. }
  20. .voucherBox .voucher .body {
  21. display: flex;
  22. flex-direction: column;
  23. align-items: center;
  24. width: 100%;
  25. height: 100%;
  26. padding: 20rpx;
  27. box-sizing: border-box;
  28. border-radius: 20rpx;
  29. background-color: white;
  30. box-shadow: 0 2rpx 17rpx 0 #E2CA75;
  31. }
  32. .voucherBox .voucher .body .title {
  33. font-size: 34rpx;
  34. font-weight: bold;
  35. text-align: center;
  36. }
  37. .voucherBox .voucher .body .hongbao {
  38. width: 95rpx;
  39. height: 114rpx;
  40. }
  41. .voucherBox .voucher .body .info {
  42. margin: 30rpx 0px;
  43. padding: 10rpx 28rpx;
  44. box-sizing: border-box;
  45. width: 100%;
  46. border-radius: 20rpx;
  47. background-color: #F2F6FC;
  48. }
  49. .voucherBox .voucher .body .info .row {
  50. display: flex;
  51. justify-content: space-between;
  52. align-items: center;
  53. font-size: 30rpx;
  54. font-weight: bold;
  55. }
  56. .voucherBox .voucher .body .info .row .oldMoney {
  57. color: #9E9E9E;
  58. font-weight: normal;
  59. text-decoration: line-through;
  60. }
  61. .voucherBox .voucher .body .info .row .newMoney {
  62. color: #0DACFF;
  63. }
  64. .voucherBox .voucher .body .info .row .row-right {
  65. display: flex;
  66. align-items: center;
  67. }
  68. .voucherBox .voucher .body .info .row .row-right .hongbao-mini {
  69. width: 38rpx;
  70. height: 48rpx;
  71. margin-right: 10rpx;
  72. }
  73. .voucherBox .voucher .body .btn {
  74. padding: 10rpx 48rpx;
  75. background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
  76. box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
  77. border-radius: 50rpx;
  78. color: white;
  79. font-size: 32rpx;
  80. }
  81. .voucherBox .voucher .body .tips {
  82. margin-top: 20rpx;
  83. font-size: 22rpx;
  84. }
  85. .voucherBox .voucher .close {
  86. position: absolute;
  87. bottom: -90rpx;
  88. left: 50%;
  89. transform: translateX(-50%);
  90. width: 60rpx;
  91. height: 60rpx;
  92. padding: 20rpx;
  93. }