$deviceWidth: 750;

@function vmin($rpx) {
    @return #{$rpx * 100 / $deviceWidth}vmin;
}

@mixin opened {
  background-image: url(https://wechatapppro-1252524126.cdn.xiaoeknow.com/appAKLWLitn7978/image/b_u_5b2225aa46488_oGKN7IvA/kvumkn130brv.png);
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: vmin(2) 0 0;

  .opened-title {
    width: vmin(440);
    height:vmin(90);
    margin: auto;
    margin-top: vmin(53);
    position: relative;

    .title{
      margin: auto;
    }

    .get {
      width: 100%;
      height:100%;
    }

  }

  .price-content {
    margin-top:  vmin(162);
    &.price-content-points{
      margin-top: vmin(134);
    }

    .price {
      text-align: center;
      font-weight: 700;
      color: #FF4953;

      .unit {
        font-size: vmin(64);
      }

      .number {
        font-size: vmin(85);
      }

      .points{
        margin-left: vmin(4);
      }

    }

    .no-count-tips {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      z-index: 1;
      justify-content: center;

      .no-count {
        font-size: vmin(38);
      }

    }

    .tips {
      color: #999;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;

      view {
        font-family: "PingFang SC";
        font-size: vmin(24);
        font-style: normal;
        font-weight: 400;
        line-height: vmin(32);
      }
      
      .tips-first{
        margin-bottom: vmin(8);
        display: flex;
        flex-direction: row;
        .special-tips {
          color: #1472FF;
          margin-left: vmin(8);
          font-family: "PingFang SC";
          font-size: vmin(24);
          font-style: normal;
          font-weight: 400;
          line-height: vmin(32);
          background: none;
          padding: 0;
        }
        .special-tips::after {
          border: none;
        }
      } 



      .pay-icon {
        width: vmin(32);
        height: vmin(32);
        margin-right: vmin(7);
      }

    }

  }

  .footer-link {
    position: absolute;
    bottom: vmin(70);
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
    color: #E6AE5B;
    text-align: center;

    .text {
      font-size: vmin(26);
      display: flex;
      align-items: center;
      justify-content: center;
    }

  }

}

@mixin horizontal {
  .opened-title {
    width: vmin(336);
    height:vmin(50);
    margin: auto;
    margin-top: vmin(48);
    position: relative;

    .title{
      margin: 0 auto;
    }

    .get {
      width: 100%;
      height:100%;
    }

  }

  .price-content {
    margin-top:  vmin(162);
    &.price-content-points{
      margin-top: vmin(134);
    }

    .price {
      text-align: center;
      font-weight: 700;
      color: #FF4953;
      line-height: vmin(80);

      .unit {
        font-size: vmin(48);
      }

      .number {
        font-size: vmin(64);
      }

      .points{
        margin-left: vmin(4);
      }

    }

    .no-count-tips {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      z-index: 1;
      justify-content: center;
      line-height: vmin(40);

      .no-count {
        font-size: vmin(28);
      }

    }

    .tips {
      color: #999;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;

      view {
        font-family: "PingFang SC";
        font-size: vmin(20);
        font-style: normal;
        font-weight: 400;
        line-height: vmin(24);
      }
      
      .tips-first{
        margin-bottom: vmin(8);
        display: flex;
        flex-direction: row;
        .special-tips {
          color: #1472FF;
          margin-left: vmin(8);
          font-family: "PingFang SC";
          font-size: vmin(20);
          font-style: normal;
          font-weight: 400;
          line-height: vmin(24);
          background: none;
          padding: 0;
        }
        .special-tips::after {
          border: none;
        }
      } 



      .pay-icon {
        width: vmin(32);
        height: vmin(32);
        margin-right: vmin(7);
      }

    }

  }

  .footer-link {
    position: absolute;
    bottom: vmin(70);
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
    color: #E6AE5B;
    text-align: center;
    line-height: vmin(24);

    .text {
      font-size: vmin(20);
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: vmin(24);
        height: vmin(24);
      }
    }

  }
}

.opened{
  @include opened
}

.horizontal{
  @include horizontal
}

// 竖屏pad
@media screen and (min-width: 768px) and (orientation: portrait) {
  $deviceWidth: 1536 !global;

  .opened{
    @include opened
  }

  .horizontal{
    @include horizontal
  }

}


// PC 放大适配
@media screen and (min-height: 630px) and (orientation: landscape) {
  $deviceWidth: 1260 !global; 

  .opened{
    @include opened
  }

  .horizontal{
    @include horizontal
  }

}

// 横屏pad
@media screen and (min-height: 768px) and (orientation: landscape) {
  $deviceWidth: 1536 !global;

  .opened{
    @include opened
  }
  .horizontal{
    @include horizontal
  }

}