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

@mixin reward-item {
    display: flex;
    box-sizing: border-box;
    margin-bottom: vmin(20);
    padding: vmin(16);
    border-radius: vmin(16);
    background: #fff;
    height: vmin(200);
    .left-box {
        position: relative;
        box-sizing: border-box;
        width: vmin(224);
        height: vmin(168);
        .label {
            position: absolute;
            right: vmin(16);
            bottom: vmin(16);
            padding: 0 vmin(10);
            border-radius: vmin(4);
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            font-size: vmin(22);
        }
        .prize-pic {
            width: 100%;
            height: 100%;
            border-radius: vmin(10);
        }
    }
    .right-box {
        position: relative;
        box-sizing: border-box;
        padding-left: vmin(20);
        width: calc(100% - #{vmin(200)});
        .receive-btn {
            position: absolute;
            right: 0;
            bottom: 0;
            width: vmin(112);
            height: vmin(40);
            font-size: vmin(20);
            display: flex;
            align-items: center;
            &.info-btn {
                border: 1px solid #1472FF !important;
                background-color: #1472FF !important;
            }
            &.default-btn {
                border: 1px solid #1472FF !important;
                color: #1472FF !important;
                background-color: #fff;
            }
        }
        .name {
            height: vmin(80);
            font-weight: 500;
            font-size: vmin(28);
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .desc {
            color: #666;
            font-size: vmin(24);
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .winning-time {
            position: absolute;
            bottom: 0;
            color: #666;
            font-size: vmin(20);
        }
    }
}

.reward-item {
    @include reward-item;
}

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

    .reward-item {
        @include reward-item;
    }
}

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

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

    .reward-item {
        @include reward-item;
    }
}