@import '../../assets/scss/mixins';
@import '../../assets/scss/utils';

.page {
  position: relative;
  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: 40px;
    }

    .content {
      position: relative;

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

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

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

        .cont {
          position: relative;

          .space1 {
            height: 48px;
          }

          // 二维码
          .qrcode {
            width: 400px;
            height: 400px;
            margin: -28px auto -30px;

            image {
              width: 400px;
              height: 400px;
            }

            canvas {
              width: 400px;
              height: 400px;
            }
          }

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

          // 预约按钮
          .reservation-btn {
            @include cb(300px, 80px);
            margin: 74px auto 0;
            font-size: 32px;
          }

          // 预约成功
          .reservation-complete {
            position: relative;
            width: 520px;
            margin: 32px auto 0;

            .tips {
              text-align: center;
              font-size: 24px;
              color: #ba373e;
            }

            .line {
              margin: 24px auto 0;
              width: 100%;
              height: 1px;
              background-color: #f0d6d7;
            }

            .pos {
              margin: 20px auto 0;
              display: flex;
              justify-content: space-between;

              .info {
                @extend .bb;
                padding: 0 0px 0 0px;

                .tit {
                  display: flex;
                  align-items: center;
                  font-size: 24px;
                  color: #333333;

                  .name {
                    max-width: 250px;
                    @include ellipsis(1);
                  }

                  .distance {
                    margin-left: 16px;
                    color: #999999;
                  }
                }

                .address {
                  font-size: 20px;
                  color: #999999;
                  margin-top: 10px;
                  @include ellipsis(2);
                }
              }

              .loc {
                width: 80px;
                text-align: center;
                color: #b83138;
                font-size: 24px;

                .icon {
                  width: 40px;
                  height: 49px;
                }
              }
            }
          }

          .top {
            display: flex;
            margin: 0 auto 0;
            justify-content: center;
            position: relative;
            z-index: 11;
          }

          .display {
            position: relative;
            width: 140px;
            height: 140px;
            border-radius: 70px;
            background-image: radial-gradient(circle at 0 0, #ffffff, #f2e6e6);
            @extend .fcc;

            .prod {
              max-width: 200px;
              max-height: 200px;
              margin-bottom: 10px;
            }

            .close {
              width: 30px;
              height: 30px;
              position: absolute;
              bottom: 0;
              right: 0;
            }
          }


          .info {
            @extend .bb;
            padding-left: 20px;

            .name {
              font-size: 28px;
              color: #333333;
            }

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

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

          // .qrcode {
          //   opacity: $alp;
          // }

          // .info {
          //   opacity: $alp;
          // }

          // .code{
          //   opacity: $alp;
          // }

        }


      }

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

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

  }
}