index.less 2.1 KB

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