$deviceWidth: 750;

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

@mixin chose-red-packet-wrapper {
  width: vmin(750);
  padding-top: vmin(400);
  background: #fff;
  border-radius: vmin(24) vmin(24) 0 0;
  .chose-red-packet{
    position: absolute;
    top: 0;
    height: vmin(400);
    width: 100%;
    background-image: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/ltcqninu0d9m.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .chose-red-packet-top{
      width: 100%;
      height: vmin(96);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 vmin(32);
      box-sizing: border-box;
      .close_icon{
        height: vmin(32);
        width: vmin(32);
      }
    }
    .chose-red-packet-content{
      width: 100%;
      height: calc(100% - #{vmin(96*2)});
      display: flex;
      justify-content: center;
      align-items: center;
      .chose-red-packet-item{
        &:first-child{
          margin-right: vmin(176);
        }
        .red-packet-icon{
          height: vmin(160);
          width: vmin(160);
        }
        .chose-red-packet-text{
          width: 100%;
          text-align: center;
          font-size: vmin(28);
          font-weight: 500;
          color: #B85151;
        }
      }
    }
  }
  &.horizontal{
    height: vmin(750);
    border-radius: 0;
    .chose-red-packet{
      height: 100%;
      background-image: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/ltnu6n990ti8.png');
    }
  }
}

@mixin verTiHeight {
  height: calc(100% - #{vmin(422)});
}

@mixin normal-height-ver {
  width: 100%;
  height: calc(100% - #{vmin(96)});
}

.chose-red-packet-wrapper{
  @include chose-red-packet-wrapper;
}

.verTiHeight{
  @include verTiHeight;
}

.normal-height-ver {
  @include normal-height-ver
}

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

  .chose-red-packet-wrapper{
    @include chose-red-packet-wrapper;
  }

  .verTiHeight{
    @include verTiHeight;
  }

  .normal-height-ver {
    @include normal-height-ver
  }

}

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

  .chose-red-packet-wrapper{
    @include chose-red-packet-wrapper;
  }

  .verTiHeight{
    @include verTiHeight;
  }

  .normal-height-ver {
    @include normal-height-ver
  }

}

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

  .chose-red-packet-wrapper{
    @include chose-red-packet-wrapper;
  }

  .verTiHeight{
    @include verTiHeight;
  }

  .normal-height-ver {
    @include normal-height-ver
  }

}