reader/components/voucher/index.less

.voucherBox {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0px;
  top: 0px;
  background-color: rgba(0, 0, 0, 0.35);
  z-index: 10;

  .voucher {
    margin: 340rpx auto 0px;
    width: 630rpx;
    height: 694rpx;
    padding: 30rpx;
    box-sizing: border-box;
    background-color: #FEF2C7;
    border-radius: 20rpx;

    .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;

      .title {
        font-size: 34rpx;
        font-weight: bold;
        text-align: center;
      }

      .hongbao {
        width: 95rpx;
        height: 114rpx;
      }

      .info {
        margin: 30rpx 0px;
        padding: 10rpx 28rpx;
        box-sizing: border-box;
        width: 100%;
        border-radius: 20rpx;
        background-color: #F2F6FC;

        .row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 30rpx;
          font-weight: bold;

          .oldMoney {
            color: #9E9E9E;
            font-weight: normal;
            text-decoration: line-through;
          }

          .newMoney {
            color: #0DACFF;
          }

          .row-right {
            display: flex;
            align-items: center;

            .hongbao-mini {
              width: 38rpx;
              height: 48rpx;
              margin-right: 10rpx;
            }
          }
        }
      }

      .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;
      }

      .tips {
        margin-top: 20rpx;
        font-size: 22rpx;
      }
    }
  }
}