coupon-detail.scss 2.19 KB
@import '../../assets/scss/mixins';
@import '../../assets/scss/utils';

.page {
  padding-bottom: $pageBottom;
  font-weight: 300;

  .bgc {
    background-color: #f8eeef;
  }

  .bg {}

  .decoration {
    position: relative;

    .d1 {
      position: absolute;
      width: 92px;
      height: 411px;
      top: 0;
      left: 0;
    }

    .d2 {
      position: fixed;
      width: 240px;
      height: 181px;
      right: 0;
      bottom: 0;
    }

    .d3 {
      position: absolute;
      top: -20px;
      right: -100px;
      width: 553px;
      height: 227px;
    }
  }

  .main {
    .top-space {
      height: 52px;
    }

    .content {
      position: relative;

      // 奖品名
      .tit {
        text-align: center;
        color: #bb3039;
        font-size: 42px;
      }

      // 奖品
      .prize {
        position: relative;
        margin: 32px auto 0;
        width: 480px;
        height: 642px;

        .ebg {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          margin: 0 auto;
          width: 480px;
          height: 642px;
        }

        .cont {
          position: relative;

          .space1 {
            height: 48px;
          }

          // 二维码
          .qrcode {
            width: 340px;
            height: 340px;
            background-color: wheat;
            margin: 0 auto;
          }

          .code {
            margin: 24px auto 0;
            border-radius: 30px;
            background-color: rgba($color: #f2f2f2, $alpha: 1);
            @include btc(280px, 60px);
            color: #666666;
            font-size: 38px;
          }

          .info {
            margin-top: 22px;
            @extend .bb;
            padding-left: 120px;

            .c1 {
              font-size: 22px;
              color: #666666;
            }
          }
        }

        // 已使用
        .used {
          $alp: 0.3;

          .qrcode {
            opacity: $alp;
          }

          .info {
            opacity: $alp;
          }
        }


      }

      // 使用说明
      .use-notice {
        margin-top: 28px;
      }

      .store-btn {
        margin: 34px auto 0;
        @include cb();
      }
    }

  }
}