peko-h5/view/peko/activity/act-ocean/css/index.scss

@function px2rem($px, $rem: 75) {
    @return $px / $rem+rem;
}

// @function prefixurl() {
//     @return 'https://img.pekolive.com/'
// }

@font-face {
    font-family: 'pingfang-bold';
    src: url('../../../common/fonts/PingFang\ Bold.ttf');
    src: url('../../../common/fonts/PingFang\ Bold.ttf') format('woff'),
        url('../../../common/fonts/PingFang\ Bold.ttf') format('truetype'),
        url('../../../common/fonts/PingFang\ Bold.ttf') format('svg');
}

@font-face {
    font-family: 'din-medium';
    src: url('../../../common/fonts/DINCond-Medium.ttf');
    src: url('../../../common/fonts/DINCond-Medium.ttf') format('woff'),
        url('../../../common/fonts/DINCond-Medium.ttf') format('truetype'),
        url('../../../common/fonts/DINCond-Medium.ttf') format('svg');
}

html,
body {
    font-family: 'din-medium';
    background: #C8864C;
    // 海浪svga过长
    overflow-x: hidden;
    // height: 19rem;
}

.wrap {
    width: 100%;
    height: 100vh;
    // background: url('../images/index-bg.png') no-repeat center/cover;
    position: relative;

    .banner {
        width: 100%;
        position: relative;

        .subtitle {
            position: absolute;
            top: px2rem(9, );
            right: px2rem(84, );
            width: px2rem(140, );
            height: px2rem(84, );
        }
    }

    .rule,
    .record {
        position: fixed;
        top: px2rem(160);
        // bottom: px2rem(1100);
        left: 0;
        z-index: 99;
        width: px2rem(118);
        height: px2rem(40);

        img {
            width: 100%;
        }
    }

    .record {
        top: px2rem(214);
        // bottom: px2rem(1040);
    }

    // 往轮结果
    .previous_Round_Result {
        width: px2rem(707, );
        height: px2rem(114, );
        position: absolute;
        top: 16.1rem;
        left: 50%;
        transform: translateX(-50%);
        background: url(../images/previous_Round_Result.png) no-repeat;
        background-size: 100% 100%;
        z-index: 9;

        span {
            color: #fff;
            position: absolute;
            font-weight: bold;
            margin-left: px2rem(27);
            text-shadow: 1px 1px 0px#fc8321,
                -1px -1px 0px#fc8321,
                1px 1px 0px#fc8321,
                -1px -1px 0px#fc8321,
                1px 1px 0px#fc8321,
                -1px -1px 0px#fc8321;
            font-size: px2rem(36, );
            left: px2rem(0, );
            bottom: 1.65rem;
            background: url(../images/wljg.png) no-repeat;
            background-size: 100% 100%;
            width: px2rem(128, );
            height: px2rem(38, );
            position: absolute;
        }

        .box {
            width: px2rem(707, );
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            box-sizing: border-box;
            padding: px2rem(19, ) px2rem(10, ) 0 px2rem(10, );
            overflow-x: scroll;

            &::-webkit-scrollbar {
                // width: 0;
                height: 2px;
                display: none;
            }

            ul {
                width: 35rem;
                height: 100%;

                li {
                    float: left;
                    width: px2rem(122, );
                    height: px2rem(73, );
                    background: url(../images/previous_Round_Result_Li.png) no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    justify-content: space-around;
                    flex-wrap: wrap;
                    box-sizing: border-box;
                    align-items: center;
                    margin-right: px2rem(8, );
                    // padding: 0 px2rem(4, );

                    p {
                        display: block;
                        width: px2rem(25, );
                        height: px2rem(25, );
                        background: url(../images/record_bubble.png) no-repeat;
                        background-size: 100% 100%;
                        position: relative;
                        margin: 0 px2rem(2, );

                        img {
                            display: block;
                            width: 80%;
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            transform: translate(-50%, -50%);
                        }
                    }
                }
            }
        }
    }

    // .previous-result {
    //     position: absolute;
    //     // bottom: px2rem(200);
    //     top: px2rem(1120);
    //     left: 50%;
    //     transform: translateX(-50%);
    //     width: px2rem(710);
    //     height: px2rem(68);
    //     font-family: 'pingfang-bold';
    //     font-size: px2rem(30);
    //     font-weight: bold;
    //     color: white;
    //     display: flex;
    //     align-items: center;
    //     background: url('../images/previous-result-bg.png') no-repeat 0 0/100% 100%;
    //     z-index: 9;

    //     span {
    //         font-weight: bold;
    //         margin-left: px2rem(27);
    //         text-shadow: 1px 1px 0px#fc8321,
    //             -1px -1px 0px#fc8321,
    //             1px 1px 0px#fc8321,
    //             -1px -1px 0px#fc8321,
    //             1px 1px 0px#fc8321,
    //             -1px -1px 0px#fc8321;
    //     }

    //     .result-list {
    //         display: flex;

    //         p {
    //             width: px2rem(40);
    //             height: px2rem(40);
    //             margin-left: px2rem(8);
    //             background: url('../images/little-bubble.png') 0 0/100% 100%;

    //             // &:nth-child(11){
    //             //     width: px2rem(40, );
    //             //     height: px2rem(42, );
    //             //     margin-left: 0.25rem;
    //             //     background: url('../images/btn_result.png') 0 0/100% 100%;
    //             // }
    //             img {
    //                 width: 100%;
    //             }
    //         }

    //     }

    //     .more-result {
    //         width: px2rem(42);
    //         height: px2rem(44);
    //         margin-left: 0.2rem;

    //         img {
    //             width: 100%;
    //         }
    //     }
    // }

    .mall {
        position: absolute;
        top: px2rem(184);
        // bottom: px2rem(1020);
        right: 0;
        z-index: 99;
        width: px2rem(142);
        height: px2rem(134);

        img {
            width: 100%;
        }
    }

    .game-area {
        position: absolute;
        top: px2rem(274);
        z-index: 9;
        width: 100%;
        height: px2rem(1054);
        background: url('../images/game-area.png') no-repeat 0 0/100% 100%;

        .roundId {
            font-size: px2rem(20, );
            color: #701800;
            position: absolute;
            top: px2rem(12, );
            left: px2rem(35, );
        }

        // 等待倒计时30s
        .select-time {
            display: none;

            .count-down,
            .current-tip {
                font-family: 'pingfang-bold';
                position: absolute;
                top: px2rem(-40);
                left: 50%;
                transform: translateX(-50%);
                // width: px2rem(322);
                width: 5.45rem;
                height: px2rem(72);
                line-height: px2rem(62);
                background: url('../images/count-down.png') no-repeat 0 0/100% 100%;
                text-align: center;
                font-size: px2rem(24);
                font-weight: bold;
                color: #B82F1A;
            }

            .current-tip {
                top: px2rem(50);
                width: px2rem(368);
                height: px2rem(68);
                line-height: px2rem(68);
                background: url('../images/tip.png') no-repeat 0 0/100% 100%;
                font-size: px2rem(22);
                color: #F0C799;
            }

            // 海鲜列表
            ul {
                display: flex;
                flex-wrap: wrap;
                // justify-content: space-between;
                padding-left: px2rem(47);

                li {
                    position: relative;
                    z-index: 99;
                    width: px2rem(138);
                    height: px2rem(148);
                    margin-top: px2rem(130);
                    margin-right: px2rem(32);
                    background: url('../images/bubble-bg.png') no-repeat 0 0/100% 100%;

                    &:nth-child(-n+4) {
                        margin-top: px2rem(80);
                    }

                    img {
                        width: px2rem(120);
                        height: px2rem(120);
                        transform: translate(px2rem(8), px2rem(-26));
                    }

                    .multiple {
                        position: absolute;
                        bottom: px2rem(20);
                        left: px2rem(-10);
                        width: px2rem(64);
                        height: px2rem(28);
                        line-height: px2rem(28);
                        text-align: center;
                        background: url('../images/multiple-bg.png') no-repeat 0 0/100% 100%;
                        font-size: px2rem(20);
                        font-weight: bold;
                        color: white;
                    }

                    .name {
                        position: absolute;
                        bottom: px2rem(-40);
                        left: 50%;
                        transform: translateX(-50%);
                        min-width: px2rem(160);
                        padding: px2rem(8);
                        box-sizing: border-box;
                        width: px2rem(136);
                        height: px2rem(58);
                        background: url('../images/name-bg.png') no-repeat 0 0/100% 100%;
                        text-align: center;
                        font-size: px2rem(25);
                        font-weight: bold;
                        color: white;
                        line-height: 0.6rem;

                        &.general {
                            height: px2rem(46);
                            line-height: px2rem(30);
                            background: url('../images/name-general-bg.png') no-repeat 0 0/100% 100%;
                        }

                        .gift-price {
                            font-size: px2rem(18);
                            padding-top: px2rem(4);
                        }
                    }

                    .bubble-2s {
                        display: none;
                        // width: px2rem(92);
                        // height: px2rem(56);
                        width: px2rem(132);
                        height: px2rem(74);
                        position: absolute;
                        top: px2rem(-72);
                        left: px2rem(-28);
                        background: url('../images/qipao-2s.png') no-repeat 0 0/100% 100%;
                        transform: rotate(343deg);
                        text-indent: px2rem(16);

                        p {
                            font-size: px2rem(18);
                            color: white;
                            font-weight: bold;
                            text-align: center;
                            margin-left: px2rem(-20);

                            &.first-line {
                                padding-top: px2rem(10);
                            }

                            &.second-line {
                                padding-top: px2rem(4);
                            }
                        }
                    }

                    .select-num {
                        // display: none;
                        position: absolute;
                        top: px2rem(-6);
                        right: px2rem(-4);
                        font-size: px2rem(24);
                        font-weight: bold;
                        color: #fff;
                        // text-shadow: 1px 1px #FF5C7F, -1px -1px #FF5C7F ;
                        text-shadow: 1px 1px 0px#ff622b,
                            -1px -1px 0px#ff622b,
                            1px 1px 0px#ff622b,
                            -1px -1px 0px#ff622b,
                            1px 1px 0px#ff622b,
                            -1px -1px 0px#ff622b;
                    }
                }
            }

            // 碎片按钮
            .btn-wrap {
                display: flex;
                // justify-content: space-between;
                align-items: center;
                width: px2rem(710);
                height: px2rem(126);
                margin: px2rem(140) auto 0;
                background: url('../images/btn-wrap-bg.png') no-repeat 0 0/100% 100%;

                div {
                    display: flex;
                    justify-content: center;
                    width: px2rem(190);
                    height: px2rem(80);
                    background: url('../images/fragment-btn.png') no-repeat 0 0/100% 100%;
                    line-height: px2rem(80);
                    font-size: px2rem(30);
                    color: #975B25;

                    &.active {
                        background-image: url('../images/fragment-btn-active.png');
                        color: #B33E17;
                    }

                    &:first-child {
                        margin-left: px2rem(60);
                    }

                    &:last-child {
                        margin-left: 0;
                    }

                    &:nth-child(2) {
                        margin: 0 px2rem(12);
                    }
                }
            }

            // 架子
            .shelf {
                width: px2rem(710);
                height: px2rem(100);
                position: absolute;
                top: px2rem(440);
                left: 50%;
                transform: translateX(-50%);

                &:last-child {
                    top: px2rem(720);
                }
            }
        }

        // 等待结果5s
        .wait-time {
            display: none;
            width: px2rem(750);
            height: px2rem(600);
            margin: auto;
            position: relative;

            .count-down,
            .current-tip {
                font-family: 'pingfang-bold';
                position: absolute;
                top: px2rem(-40);
                left: 50%;
                transform: translateX(-50%);
                width: px2rem(322);
                height: px2rem(72);
                line-height: px2rem(62);
                background: url('../images/count-down.png') no-repeat 0 0/100% 100%;
                text-align: center;
                color: #B82F1A;
                font-size: px2rem(24);
                font-weight: bold;
            }

            .current-tip {
                top: px2rem(50);
                width: px2rem(368);
                height: px2rem(68);
                line-height: px2rem(68);
                background: url('../images/tip.png') no-repeat 0 0/100% 100%;
                text-align: center;
                font-size: px2rem(22);
                color: #FFF0C799;
                font-weight: bold;
            }

        }

        // 开奖时间
        .draw-time {
            display: none;
            // width: px2rem(750);
            // height: px2rem(600);
            // width: px2rem(210, );
            width: 55%;
            height: px2rem(213, );
            margin: 1.8rem auto 0.2rem;
            // background: url('../images/drawBg.png');
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: row wrap;
            box-sizing: border-box;

            .count-down,
            .current-tip {
                font-family: 'pingfang-bold';
                position: absolute;
                top: px2rem(-40);
                left: 50%;
                transform: translateX(-50%);
                width: px2rem(322);
                height: px2rem(72);
                line-height: px2rem(62);
                background: url('../images/count-down.png') no-repeat 0 0/100% 100%;
                text-align: center;
                font-size: px2rem(24);
                color: #B82F1A;
                font-weight: bold;
            }

            .current-tip {
                top: px2rem(50);
                width: px2rem(368);
                height: px2rem(68);
                line-height: px2rem(68);
                background: url('../images/tip.png') no-repeat 0 0/100% 100%;
                font-size: px2rem(22);
                color: #F0C799;
            }

            .top-three {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 2.3rem;
                width: 100%;
                height: 4rem;

                .top-three-title {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-family: 'pingfang-bold';
                    font-size: px2rem(24);
                    font-weight: bold;
                    color: white;
                    margin-bottom: px2rem(18);

                    .line {
                        width: px2rem(50);
                        border: px2rem(1) solid white;
                    }
                }

                .top-three-list {
                    // display: flex;
                    // justify-content: space-between;
                    // width: px2rem(340);
                    // margin: auto;
                    position: relative;

                    .no1 {
                        width: px2rem(188);
                        height: px2rem(168);
                        background: linear-gradient(0deg, #FFD871 0%, #FFA352 81%);
                        border-radius: px2rem(18, );
                        position: relative;
                        top: 1.3rem;
                        left: 50%;
                        transform: translateX(-50%);

                        .tx {
                            width: px2rem(130, );
                            height: px2rem(130, );
                            border-radius: 50%;
                            position: absolute;
                            top: -0.9rem;
                            left: 50%;
                            transform: translateX(-50%);

                        }

                        .txBox {
                            width: px2rem(131, );
                            height: px2rem(170, );
                            position: absolute;
                            top: -1.41rem;
                            left: 50%;
                            transform: translateX(-50%);
                        }

                        .nick {
                            width: 100%;
                            font-size: px2rem(22, );
                            color: #fff;
                            text-align: center;
                            position: absolute;
                            top: px2rem(88, );
                            left: 50%;
                            transform: translateX(-50%);
                        }

                        .num {
                            width: 100%;
                            height: 0.4rem;
                            position: absolute;
                            bottom: 0.15rem;
                            // display: flex;
                            // align-items: center;
                            // justify-content: center;
                            line-height: 0.35rem;
                            text-align: center;

                            .diamond {
                                width: px2rem(25, );
                                height: px2rem(25, );
                            }

                            span {
                                font-size: px2rem(22, );
                                color: #fff;
                            }
                        }
                    }

                    .no2 {
                        width: px2rem(162, );
                        height: px2rem(142, );
                        background: linear-gradient(0deg, #7DD5FF 0%, #5A8FFF 100%);
                        border-radius: px2rem(18, );
                        position: relative;
                        top: -0.55rem;
                        left: 1.15rem;

                        .tx {
                            width: px2rem(130, );
                            height: px2rem(130, );
                            border-radius: 50%;
                            position: absolute;
                            top: -0.9rem;
                            left: 50%;
                            transform: translateX(-50%);

                        }

                        .txBox {
                            width: px2rem(131, );
                            height: px2rem(170, );
                            position: absolute;
                            top: -1.4rem;
                            left: 50%;
                            transform: translateX(-50%);
                        }

                        .nick {
                            width: 100%;
                            font-size: px2rem(22, );
                            color: #fff;
                            text-align: center;
                            position: absolute;
                            top: px2rem(76, );
                            left: 50%;
                            transform: translateX(-50%);
                        }

                        .num {
                            width: 100%;
                            height: px2rem(25, );
                            position: absolute;
                            bottom: 0.14rem;
                            text-align: center;
                            line-height: px2rem(25, );

                            .diamond {
                                width: px2rem(25, );
                                height: px2rem(25, );
                            }

                            span {
                                font-size: px2rem(22, );
                                color: #fff;
                            }
                        }
                    }

                    .no3 {
                        width: px2rem(162, );
                        height: px2rem(142, );
                        background: linear-gradient(0deg, #FFAE88 0%, #FC6CCF 81%);
                        border-radius: px2rem(18, );
                        position: relative;
                        position: relative;
                        top: -2.45rem;
                        left: 6.7rem;

                        .tx {
                            width: px2rem(130, );
                            height: px2rem(130, );
                            border-radius: 50%;
                            position: absolute;
                            top: -0.9rem;
                            left: 50%;
                            transform: translateX(-50%);

                        }

                        .txBox {
                            width: px2rem(131, );
                            height: px2rem(170, );
                            position: absolute;
                            top: -1.44rem;
                            left: 50%;
                            transform: translateX(-50%);
                        }

                        .nick {
                            width: 100%;
                            font-size: px2rem(22, );
                            color: #fff;
                            text-align: center;
                            position: absolute;
                            top: px2rem(76, );
                            left: 50%;
                            transform: translateX(-50%);
                        }

                        .num {
                            width: 100%;
                            height: px2rem(25, );
                            position: absolute;
                            bottom: 0.14rem;
                            text-align: center;
                            line-height: px2rem(25, );

                            .diamond {
                                width: px2rem(25, );
                                height: px2rem(25, );
                            }

                            span {
                                font-size: px2rem(22, );
                                color: #fff;
                            }
                        }
                    }
                }
            }

            .draw-pic {
                z-index: 1;
                width: px2rem(101, );
                // width: 25%; 
                height: px2rem(101, );
                margin: 0 auto 0;
                background: url('../images/drawBg.png') no-repeat;
                background-size: 100% 100%;
                position: relative;

                img {
                    width: px2rem(60, );
                    // margin: -0.3rem 0 0 1.18rem;
                    position: absolute;
                    left: 50%;
                    top: 45%;
                    transform: translate(-50%, -50%);
                }
            }

            // .draw-pic {
            //     position: absolute;
            //     left: 50%;
            //     transform: translateX(-50%);
            //     top: 1.65rem;
            //     z-index: 1;
            //     width: px2rem(100);
            //     background: url('../images/drawBg.png');
            //     // height: px2rem(91);

            //     img {
            //         width: 100%;
            //         // height: 100%;
            //         // margin: -0.3rem 0 0 1.18rem;
            //     }
            // }

            .award-info {
                width: px2rem(600, );
                // height: px2rem(183, );
                box-sizing: border-box;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: 7.2rem;
                display: flex;

                .desc {
                    color: #fff;
                    font-size: px2rem(28, );
                    font-weight: 600;
                }

                .diamond {
                    width: 0.35rem;
                    height: 0.35rem;
                    margin-left: 0.5rem;
                    margin-right: 0.1rem;
                }

                .award-wrap {
                    color: #FEEF60;
                    font-weight: 600;
                    font-size: px2rem(28, );
                    // .award-total {
                    //     color: #FEEF60;
                    // }
                }
            }

            .put-wrap {
                width: px2rem(600, );
                height: px2rem(183, );
                // line-height: px2rem(183, );
                box-sizing: border-box;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                // top: 3.8rem;
                top: 4.5rem;
                display: flex;

                .put {
                    font-size: px2rem(28, );
                    color: #FFFFFF;
                    font-weight: 600;
                    margin-right: 0.4rem;
                    margin-top: 0.3rem;
                }

                .list {
                    width: px2rem(504, );
                    height: px2rem(208, );
                    display: flex;
                    flex-wrap: wrap;

                    .item {
                        width: px2rem(74, );
                        height: px2rem(90, );
                        margin-right: 0.92rem;
                        // position: relative;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        align-items: center;

                        &:nth-child(4n) {
                            margin-right: 0;
                        }

                        p {
                            width: px2rem(62, );
                            height: px2rem(62, );
                            background: url('../images/record_bubble.png') no-repeat;
                            background-size: 100% 100%;

                            .gift {
                                width: 75%;
                                margin-top: 0.1rem;
                                margin-left: 0.1rem;
                            }
                        }

                        div {
                            width: 100%;
                            height: px2rem(25, );
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            .diamond {
                                width: 0.33rem;
                                height: 0.33rem;
                            }

                            .in {
                                font-size: px2rem(20, );
                                color: #FFFFFF;
                                font-weight: 600;
                                white-space: nowrap;
                            }
                        }
                    }
                }
            }

        }
    }

    // 底部信息
    .info-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 99;
        width: 100%;
        height: px2rem(130);
        background: url('../images/index-bottom.png') no-repeat 0 0/100% 100%;
        display: flex;
        // justify-content: space-evenly;
        align-items: center;

        .info-wrap {
            margin-top: px2rem(14);

            .diamond-num,
            .fragment-num {
                // width: px2rem(250);
                width: 4rem;
                height: px2rem(42);
                background-color: #BD7F38;
                border-radius: px2rem(20);
                line-height: px2rem(42);
                font-size: px2rem(26);
                font-weight: bold;
                color: white;
                text-indent: px2rem(10);
                margin-bottom: px2rem(10);
                white-space: nowrap;
            }
        }

        .avatar {
            width: px2rem(100);
            height: px2rem(100);
            margin-left: px2rem(42);
            margin-right: px2rem(20);

            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }

        .add {
            width: px2rem(41);
            height: px2rem(41);
            margin-top: px2rem(-48);
            margin-left: px2rem(12);
        }

        .rank {
            width: px2rem(170);
            height: px2rem(54);
            margin-left: px2rem(44);
        }
    }

    // 规则弹窗
    .shade-mask {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100vw;
        height: 100vh;
        background-color: rgba($color: #000000, $alpha: 0.4);

        .shade-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: px2rem(576);
            height: px2rem(666);
            background: url('../images/rule-bg.png') no-repeat 0 0/100% 100%;
            // padding: px2rem(56) px2rem(54) px2rem(42) px2rem(40);
            // box-sizing: border-box;
            font-size: px2rem(26);
            color: #B58147;
            font-weight: 600;
            overflow: hidden;

            main {
                position: absolute;
                top: px2rem(60);
                width: 100%;
                height: 85%;
                padding: 0 px2rem(42);
                box-sizing: border-box;
                overflow: auto;

                div {
                    line-height: 1.2;
                    margin-top: 0.2rem;

                    .title {
                        width: px2rem(252);
                        height: px2rem(46);
                        line-height: px2rem(46);
                        background: url('../images/title-bg.png') no-repeat 0 0/100% 100%;
                        margin: 0 auto px2rem(22);
                        text-align: center;
                    }

                    .jietu {
                        width: px2rem(490);
                        height: px2rem(275);
                        margin-top: px2rem(12);
                        margin-bottom: px2rem(32);

                        &.t2 {
                            height: px2rem(299);
                        }

                        &.t3 {
                            // height: px2rem(301);
                            height: 4.2rem;
                        }
                    }
                }
            }
        }
    }

    // 今日排名弹窗
    .shade-mask-rank {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100vw;
        height: 100vh;
        background-color: rgba($color: #000000, $alpha: 0.6);

        .shade-content-rank {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: px2rem(660);
            height: px2rem(980);
            background: white;
            background: url(../images/myBoxBg.png) no-repeat;
            background-size: 100% 100%;

            .rank-top {
                height: px2rem(340);
                // background-image: linear-gradient(#F49C35, #FFDD81);
                overflow: hidden;

                .tab-wrap {
                    font-family: 'pingfang-regular';
                    width: px2rem(460);
                    height: px2rem(70);
                    background-color: rgba($color: #fff, $alpha: .3);
                    border-radius: px2rem(36);
                    margin: px2rem(20) auto px2rem(6);

                    span {
                        display: inline-block;
                        width: px2rem(210);
                        height: px2rem(60);
                        line-height: px2rem(60);
                        text-align: center;
                        font-size: px2rem(30);
                        color: white;
                        margin-top: px2rem(5);

                        &:first-child {
                            margin-left: px2rem(14);
                        }
                    }

                    .active {
                        background-color: white;
                        color: #F5A03A;
                        border-radius: px2rem(30);
                    }
                }

                .topthree-wrap {
                    position: relative;

                    .info-wrap {
                        position: absolute;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        width: 100%;

                        &:first-child {
                            width: px2rem(132);
                            // height: px2rem(175);
                            // margin-top: px2rem(86);
                            left: 50%;
                            transform: translateX(-50%);

                            .diamond-num {
                                display: none;
                            }
                        }

                        .avatar {
                            width: px2rem(194);
                            height: px2rem(188);
                            margin-bottom: px2rem(20);

                            p {
                                position: relative;
                                z-index: 99;
                                width: 100%;
                                height: 100%;
                                background: url('../images/first.png') no-repeat 0 0/100% 100%;
                            }

                            img {
                                position: relative;
                                z-index: 9;
                                top: px2rem(-160);
                                // left: px2rem(2);
                                left: 50%;
                                transform: translateX(-50%);
                                width: px2rem(128);
                                height: px2rem(128);
                                border-radius: 50%;
                            }
                        }

                        .nick,
                        .diamond-num {
                            width: px2rem(360);
                            text-align: center;
                            font-size: px2rem(30);
                            font-weight: bold;
                            color: white;
                        }

                        .diamond-num {
                            font-family: 'din-medium';
                            margin: 0;
                            margin-top: px2rem(-20);
                            margin-bottom: px2rem(4);
                            color: #FF5110;
                            font-size: px2rem(24);
                        }
                    }
                }
            }

            .other-rank {
                overflow: auto;
                position: absolute;
                width: 100%;
                height: px2rem(540);
                // background-color: white;
                padding: px2rem(30) px2rem(20) 0;
                box-sizing: border-box;

                li {
                    width: 90%;
                    display: flex;
                    align-items: center;
                    // margin-bottom: px2rem(40);
                    margin: 0 auto px2rem(40, );

                    &:last-child {
                        // margin-bottom: px2rem(140);
                    }

                    .index {
                        display: inline-block;
                        width: px2rem(30);
                        font-size: px2rem(30);
                        font-weight: bold;
                        color: #fff;
                        text-align: center;
                    }

                    .others-info {
                        flex: 1;
                        display: flex;
                        align-items: center;
                        margin-left: px2rem(20);

                        img {
                            width: px2rem(100);
                            height: px2rem(100);
                            border-radius: 50%;
                            margin-right: px2rem(20);
                        }

                        .others-nick {
                            font-size: px2rem(28);
                            font-weight: bold;
                            color: #fff;
                        }
                    }

                    .others-diamond-num {
                        font-size: px2rem(26);
                        font-weight: bold;
                        color: #fff;

                        b {
                            color: #FF5110;
                            font-weight: bold;
                        }
                    }
                }
            }

            .mine {
                position: fixed;
                left: 0;
                bottom: 0;
                z-index: 999;
                width: 100%;
                height: px2rem(100);
                // background-color: rgba($color: #000000, $alpha: .8);
                background: url(../images/mineBg.png) no-repeat;
                background-size: 100% 100%;
                padding: 0 px2rem(15);
                box-sizing: border-box;
                display: flex;
                align-items: center;

                .mine-rank {
                    font-size: px2rem(26);
                    font-weight: bold;
                    color: white;
                }

                .mine-info {
                    flex: 1;
                    display: flex;
                    align-items: center;

                    img {
                        width: px2rem(80);
                        height: px2rem(80);
                        border-radius: 50%;
                        margin-left: px2rem(30);
                        margin-right: px2rem(40);
                    }

                    .mine-nick {
                        font-size: px2rem(28);
                        font-weight: bold;
                        color: white;
                    }
                }

                .mine-diamond-num {
                    font-size: px2rem(26);
                    font-weight: bold;
                    color: #fff;

                    b {
                        color: #FF5110;
                        font-weight: bold;
                    }
                }
            }
        }
    }

    // 碎片不足弹窗
    .shade-mask-fragmentNum {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100vw;
        height: 100vh;
        background-color: rgba($color: #000000, $alpha: 0.6);

        .shade-content-fragmentNum {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: px2rem(600);
            height: px2rem(600);
            background: white;
            border-radius: px2rem(24);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;

            .fragmentNum-title {
                font-size: px2rem(36);
                font-weight: bold;
                color: #333333;
                margin-top: px2rem(38);
            }

            img {
                width: px2rem(120);
                width: px2rem(120);
                margin-top: px2rem(108);
            }

            p {
                font-size: px2rem(30);
                font-weight: 600;
                color: #333333;
                margin-top: px2rem(50);
            }

            .fragmentNum-btn-wrap {
                display: flex;
                justify-content: space-between;
                width: px2rem(512);
                height: px2rem(76);
                margin-top: px2rem(90);

                .cancel-btn,
                .confirm-btn {
                    width: px2rem(240);
                    height: px2rem(76);
                    line-height: px2rem(76);
                    text-align: center;
                    border-radius: px2rem(38);
                    font-size: px2rem(28);
                    font-weight: 600;
                    background-color: #EAE5FC;
                    color: #7154EE;
                }

                .confirm-btn {
                    background-color: #735FFE;
                    color: #fff;
                }
            }
        }
    }
}

.no-in-app {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    background-color: white;
}


.bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: px2rem(130);
    background: url('../images/bottom.png') no-repeat 0 0/100% 100%;
    display: flex;
    align-items: center;

    &.mb-long {
        margin-bottom: px2rem(68);
    }

    .avatar {
        width: px2rem(100);
        height: px2rem(100);
        margin-left: px2rem(42);
        margin-right: px2rem(20);

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }

    .info-wrap {
        flex: 1;
        margin-top: px2rem(14);

        .fragment-num,
        .diamond-num {
            width: px2rem(250);
            height: px2rem(42);
            background-color: #BD7F38;
            border-radius: px2rem(20);
            line-height: px2rem(42);
            font-size: px2rem(26);
            font-weight: bold;
            color: white;
            text-indent: px2rem(10);
            margin-bottom: px2rem(10);
        }
    }

    .add {
        width: px2rem(41);
        height: px2rem(41);
        margin-top: px2rem(-48);
        margin-right: px2rem(70);
    }

    .recharge {
        width: px2rem(144);
        height: px2rem(62);
        margin-right: px2rem(74);

        img {
            width: 100%;
        }
    }
}