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

@mixin vertical-screen {
    &.common-popup {
        .close-icon {
            position: absolute;
            right: vmin(24);
            z-index: 1;
            box-sizing: border-box;
            padding: vmin(10);
            width: vmin(52);
            height: vmin(52);
        }
        .bg {
            position: absolute;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }
        &.red {
            // 红色背景的抽奖弹窗顶部超出一部分，高度特殊计算
            overflow: hidden;
            height: calc(100% - #{vmin(320)});
            background: transparent !important;
        .close-icon {
            top: vmin(150);
        }
        .bg {
            top: 0;
            left: 0;
        }
        // 底部背景拼接，防止屏幕过大时背景展示不全
        .bottom-bg {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: vmin(160);
            background: linear-gradient(to right, #FE8758, #FE9656);
        }
        }
        &.orange {
            height: calc(100% - #{vmin(422)});
            background: transparent !important;
        .close-icon {
            top: vmin(24);
        }
        .bg {
            bottom: 0;
            left: 0;
        }
        }
        &.white {
            height: calc(100% - #{vmin(422)});
            background: #fff;
            .close-icon {
                top: vmin(24);
            }
            .bg {
                top: 0;
                height: vmin(240);
            }
        }
        // custom-classes
        &.address-collection-popup {
            height: calc(100% - #{vmin(422)});
            background: #f5f5f5;
            -webkit-overflow-scrolling:auto;
            overflow:auto;
        }
    }
}

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

    .vertical-screen {
        @include vertical-screen;
    }
}
// PC 放大适配
@media screen and (min-height: 630px) and (orientation: landscape) {
    $deviceWidth: 1260 !global;
  
    .vertical-screen {
        @include vertical-screen;
    }
}
// 横屏pad
@media screen and (min-height: 768px) and (orientation: landscape) {
    $deviceWidth: 1536 !global;

    .vertical-screen {
        @include vertical-screen;
    }
}