$deviceWidth: 750;

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

@mixin red-packet-content {
  width: 100vw;
  height: 100vh;
  // background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // position: fixed;
  // top: 0;
  // left: 0;
  z-index: 11;

  .card {
    background-size: 100% 100%;
    position: relative;

    .background-image {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 0;
      border-radius: vmin(26.25);
      overflow: hidden;
    }

    .border-radius{
      border-radius: vmin(26.25);
      overflow: hidden;
    }

    .content {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 1;
    }



    .content-close{
      position: absolute;
      top: vmin(24);
      right: vmin(26);
      width: vmin(32);
      height: vmin(32);
      z-index: 2;
    }

    .content-back {
      position: absolute;
      top: vmin(24);
      left: vmin(26);
      width: vmin(32);
      height: vmin(32);
      z-index: 2;
    }

    .content-back-ver{
      width: vmin(40);
      height: vmin(40);
      top: vmin(36);
      left: vmin(24);
    }

  }

  .top-close {
    width: vmin(64);
    height: vmin(64);
    z-index: 2;
    margin-top: vmin(48);
  }

  .horizontal{
    width: vmin(436);
    height: vmin(590);
    font-size: vmin(7.5);
  }

  .vertical{
    width: vmin(580);
    height: vmin(782);
    font-size: vmin(10);
  }


}

.red-packet-content{
  @include red-packet-content
}

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

  .red-packet-content{
    @include red-packet-content
  }

}


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

  .red-packet-content{
    @include red-packet-content
  }

}

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

  .red-packet-content{
    @include red-packet-content
  }

}