$deviceWidth: 750;

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

@mixin share-reward-bg {
    height: vmin(990);
    background: url('https://wechatapppro-1252524126.cdn.xiaoeknow.com/app1lkpevip1011/image/b_u_5b2225aa46488_oGKN7IvA/kwvm6fsu0w8i.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: vmin(24) vmin(24) 0 0;
    overflow: visible !important;
}

.content-noSelecte {
    -webkit-user-drag: none;
    user-select: none;
}

@mixin reward-activity-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: space-around;
    // overflow-y: scroll;
    // overflow-x: hidden;
    .basic-title {
        display: flex;
        justify-content: center;
        align-items: center;
        height: vmin(73);
        position: relative;
        margin: vmin(18.27) 0 vmin(-20) 0;
    }
    .title {
        .target-num {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: "PingFangSC-Medium";
            font-weight: bolder;
            .num {
                font-size: vmin(60);
                color: white;
                position: absolute;
                z-index: 2;
            }
            .num-bg {
                font-size: vmin(65);
                -webkit-text-stroke: #ff8d36 vmin(20);
                margin: 0 vmin(-5);
                z-index: 1;
            }
        }
        image {
            object-fit: contain;
            z-index: 2;
            &:nth-of-type(1) {
                width: vmin(90.58);
                height: vmin(103.02);
                position: absolute;
                top: vmin(-12.74);
                left: vmin(-57.36);
                z-index: 1;
            }
            &:nth-of-type(2) {
                width: vmin(72);
                height: 100%;
            }
            &:nth-of-type(3) {
                width: vmin(414);
                height: 100%;
            }
            &:nth-of-type(4) {
                width: vmin(97.98);
                height: vmin(98.96);
                position: absolute;
                top: vmin(-2.86);
                right: vmin(-63.84);
                z-index: 1;
            }
        }
    }
    .winner-title {
        image {
            &:nth-of-type(1){
                width: vmin(91);
                height: vmin(103.02);
                position: absolute;
                top: vmin(-12.74);
                left: vmin(-57.36);
                z-index: 1;
            }
            &:nth-of-type(2){
                // width: 2.56rem;
                width: vmin(407);
                height: vmin(72);
                object-fit: contain;
                z-index: 2;
            }
            &:nth-of-type(3) {
                width: vmin(97.98);
                height: vmin(98.96);
                position: absolute;
                top: vmin(-2.86);
                right: vmin(-63.84);
                z-index: 1;
            }
        }
    }
    .win-tips {
        color: rgba(255,255,255,1);
        font-size: vmin(24);
        font-weight: 500;
        font-family: "PingFang SC";
        margin: vmin(40) 0 vmin(20) 0;
    }
    .prizeList {
        // test style 这里要改一下的
        max-height: vmin(600);
        overflow-y: scroll;
        .prizeListItem {
            width: vmin(686);
            height: vmin(200);
            border-radius: vmin(16);
            background: #FFFFFF;
            margin-bottom: vmin(24);
            display: flex;
            align-items: center;
            padding: 0 vmin(16);
            position: relative;
            .reward-img {
                position: relative;
                width: vmin(224);
                height: vmin(168);
                image {
                    width: vmin(224);
                    height: vmin(168);
                    border-radius: vmin(8);
                    object-fit: contain;
                }
                .type {
                    height: vmin(32);
                    padding: 0 vmin(8);
                    border-radius: vmin(4);
                    background: rgba(0,0,0,0.5);
                    position: absolute;
                    bottom: vmin(8);
                    right: vmin(8);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text{
                        font-size: vmin(20);
                        color: #FFFFFF;
                        font-family: "PingFang SC";
                    }
                }
            }
            .reward-content {
                display: flex;
                flex-direction: column;
                margin: 0 vmin(24);
                height: vmin(168);
                .reward-title {
                    font-size: vmin(28);
                    font-weight: 500;
                    font-family: "PingFang SC";
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    -webkit-box-orient: vertical;
                }
                .time {
                    font-size: vmin(20);
                    color: rgba(102,102,102,1);
                    font-family: "PingFang SC";
                    margin-top: vmin(8);
                }
                .btn {
                    width: vmin(80);
                    border-radius: vmin(80);
                    width: vmin(144);
                    height: vmin(56);
                    font-size: vmin(24);
                    font-weight: 500;
                    font-family: "PingFang SC";
                    background: rgba(253,230,107,1);
                    color: rgba(128,63,63,1);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                    position: absolute;
                    bottom: vmin(16);
                    right: vmin(16);
                    &.is-received {
                        opacity: 0.4;
                    }
                }
            }
        }
    }
    .close-icon {
        z-index: 3;
        image {
            height: vmin(48);
            width: vmin(48);
            position: absolute;
            right: vmin(16);
            top: vmin(16);
        }
    }
    .activity-time {
        color: rgba(255,255,255,1);
        font-size: vmin(24);
        font-family: "PingFang SC";
        flex: 1;
        .activity {
            display: flex;
            align-items: center;
            justify-content: center;
            .time {
                display: flex;
                align-items: center;
                justify-content: center;
                view {
                    width: vmin(36);
                    height: vmin(36);
                    margin: 0 vmin(5);
                    background: #FD6524;
                    border-radius: vmin(4);
                    padding: vmin(4);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }
    .my-reward-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .reward-content-bg {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: vmin(718);
        height: vmin(484);
        border-radius: vmin(20);
        margin: 0 auto;
        background: url('https://wechatapppro-1252524126.cdn.xiaoeknow.com/app1lkpevip1011/image/b_u_5b2225aa46488_oGKN7IvA/kwuiemwh0h2e.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        // padding: vmin(30) 0 vmin(20) 0;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .reward-content-body {
            width: vmin(678);
            height: vmin(448);
            display: flex;
            align-items: center;
            overflow: hidden;
        }
        .reward-content-swiper {
            width: vmin(678);
            height: vmin(448);
            // margin-top: vmin(-20);
            // padding-bottom: vmin(20);
            box-sizing: border-box;
        }
        .reward-content {
            border-radius: vmin(16);
            box-shadow: 0 vmin(12) vmin(16) 0 rgba(255,194.35,146.62,1);
            padding: vmin(8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .reward-pic {
                width: vmin(368);
                height: vmin(276);
                border: vmin(1) solid #EBEBEB;
                border-radius: vmin(8);
            }
            image {
                width: vmin(368);
                height: vmin(276);
                object-fit: contain;
                border-radius: vmin(8);
                opacity: 1;
            }
            .reward-title {
                font-size: vmin(28);
                font-weight: 700;
                font-family: "PingFang SC";
                text-align: center;
            }
        }
        .reward-rules {
            background: url('https://wechatapppro-1252524126.cdn.xiaoeknow.com/app1lkpevip1011/image/b_u_5b2225aa46488_oGKN7IvA/kwvheber0v8n.png');
            background-size: vmin(72) vmin(48);
            padding: vmin(7);
            color: #FF8D36;
            font-size: vmin(24);
            font-weight: 400;
            font-family: "PingFang SC";
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: vmin(30);
            right: vmin(20);
            padding-left: vmin(15);
            z-index: 2;
       }
    }
    .invite-friends-tips {
        font-size: vmin(24);
        color: rgba(255,255,255,1);
        font-weight: 500;
        font-family: "PingFang SC";
        // flex: 1;
        margin-top: vmin(12);
        display: flex;
        align-items: center;
        .num {
            font-size: vmin(32);
            font-weight: 500;
            font-family: "PingFang SC";
            margin: vmin(-5) 0vmin(10) 0 0vmin(10);
        }
        image {
            width: vmin(80);
            height: vmin(2);
            object-fit: contain;
            margin: vmin(24);
        }
    }
    .invite-friends {
        display: flex;
        width: 100%;
        justify-content: space-around;
        align-items: center;
        background: url('https://wechatapppro-1252524126.cdn.xiaoeknow.com/app1lkpevip1011/image/b_u_5b2225aa46488_oGKN7IvA/kwswyygj0kdp.png');
        width: vmin(686);
        height: vmin(132);
        padding: vmin(12) 0 vmin(8) 0;
        box-sizing: border-box;
        border-radius: vmin(24);
        background-size: 100%;
        background-repeat: no-repeat;
        .info {
            display: flex;
            flex-direction: column;
            align-items: center;
            .invite-bg {
                width: vmin(84);
                height: vmin(84);
                border-radius: 50%;
                opacity: 1;
                background: linear-gradient(180deg, rgba(255,212.84,189.13,1) 0%, rgba(255,177.94,134.94,1) 100%);
                display: flex;
                align-items: center;
                justify-content: center;
            }
           
            .invite-content {
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                width: vmin(72);
                height: vmin(72);
                background: rgba(255,255,255,1);
                .icon {
                    width: vmin(40);
                    height: vmin(40);
                }
                &.activity-over {
                    width: vmin(84);
                    height: vmin(84);
                    box-sizing: border-box;
                    border: vmin(8) solid #CCCCCC;
                }
                &.invited {
                    image {
                        border-radius: 50%;
                        width: vmin(72);
                        height: vmin(72);
                    }   
                }
            }
            .tips {
                color: rgba(255,255,255,1);
                font-size: vmin(24);
                font-family: "PingFang SC";
                width: vmin(100);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                text-align: center;
            }
        }
      
    }
    .basic-btn {
         &.invite-btn {
            background: url('https://wechatapppro-1252524126.cdn.xiaoeknow.com/app1lkpevip1011/image/b_u_5b2225aa46488_oGKN7IvA/kwswyxip0uob.png');
            color: rgba(127.5,63.22,63.22,1);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            &:active {
                background: url('https://wechatapppro-1252524126.cdn.xiaoeknow.com/app1lkpevip1011/image/b_u_5b2225aa46488_oGKN7IvA/kxbbhsdq0co2.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }
        }
        &.invite-over-btn {
            background: url('https://wechatapppro-1252524126.cdn.xiaoeknow.com/app1lkpevip1011/image/b_u_5b2225aa46488_oGKN7IvA/kwt6hp9g07kj.png');
            color: #666666;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        width: vmin(496);
        min-height: vmin(96);
        margin: vmin(16) 0 vmin(14) 0;
        padding: vmin(20) 0 vmin(36) 0;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: vmin(32);
        font-weight: 500;
        font-family: "PingFang SC";
        // text {
        //     margin-top: vmin(-15);
        // }
    }
    .show-more-invite-info {
        width: vmin(600);
        max-height: vmin(800);
        overflow-y: scroll;
        .invite-friends {
            flex-wrap: wrap;
    
        }
    }
    .only-reward-btn {
        width: vmin(496);
        height: vmin(96);
        border-radius: vmin(80);
        font-size: vmin(32);
        font-weight: 500;
        font-family: "PingFang SC";
        background: url('https://wechatapppro-1252524126.cdn.xiaoeknow.com/app1lkpevip1011/image/b_u_5b2225aa46488_oGKN7IvA/kwswyxip0uob.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        color: rgba(128,63,63,1);
        position: absolute;
        bottom: vmin(80);
        display: flex;
        align-items: center;
        justify-content: center;
        .btn-text {
            margin-top: vmin(-20);
        }
        .is-received {
            opacity: 0.4;
        }
    }
}

.reward-activity-detail {
    @include reward-activity-detail;
}
.share-reward-bg {
    @include share-reward-bg;
}

// 竖屏pad
@media screen and (min-width: 768px) and (orientation: portrait) {
    $deviceWidth: 1536 !global;
    .reward-activity-detail {
        @include reward-activity-detail;
    }
    .share-reward-bg {
        @include share-reward-bg;
    }
}
// 横屏pad
@media screen and (min-height: 768px) and (orientation: landscape) {
    $deviceWidth: 1536 !global;
    .reward-activity-detail {
        @include reward-activity-detail;
    }
    .share-reward-bg {
        @include share-reward-bg;
    }
}