.voucherBox { position: fixed; width: 100vw; height: 100vh; left: 0px; top: 0px; background-color: rgba(0, 0, 0, 0.35); z-index: 999; } .voucherBox .voucher { position: relative; margin: 400rpx auto 0px; width: 630rpx; height: 694rpx; padding: 30rpx; box-sizing: border-box; background-color: #FEF2C7; border-radius: 20rpx; } .voucherBox .voucher .body { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; padding: 20rpx; box-sizing: border-box; border-radius: 20rpx; background-color: white; box-shadow: 0 2rpx 17rpx 0 #E2CA75; } .voucherBox .voucher .body .title { font-size: 34rpx; font-weight: bold; text-align: center; } .voucherBox .voucher .body .hongbao { width: 95rpx; height: 114rpx; } .voucherBox .voucher .body .info { margin: 30rpx 0px; padding: 10rpx 28rpx; box-sizing: border-box; width: 100%; border-radius: 20rpx; background-color: #F2F6FC; } .voucherBox .voucher .body .info .row { display: flex; justify-content: space-between; align-items: center; font-size: 30rpx; font-weight: bold; } .voucherBox .voucher .body .info .row .oldMoney { color: #9E9E9E; font-weight: normal; text-decoration: line-through; } .voucherBox .voucher .body .info .row .newMoney { color: #0DACFF; } .voucherBox .voucher .body .info .row .row-right { display: flex; align-items: center; } .voucherBox .voucher .body .info .row .row-right .hongbao-mini { width: 38rpx; height: 48rpx; margin-right: 10rpx; } .voucherBox .voucher .body .btn { padding: 10rpx 48rpx; background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%); box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46); border-radius: 50rpx; color: white; font-size: 32rpx; } .voucherBox .voucher .body .tips { margin-top: 20rpx; font-size: 22rpx; } .voucherBox .voucher .close { position: absolute; bottom: -90rpx; left: 50%; transform: translateX(-50%); width: 60rpx; height: 60rpx; padding: 20rpx; }