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

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

@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;
}

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

    .banner {
        width: 100%;

    }

    .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-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%;

        // 等待倒计时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);
                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(20);
                        font-weight: bold;
                        color: white;

                        &.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: 6rem;
            // height: 6rem;
            margin: auto;
            // margin-top: px2rem(80);
            .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: px2rem(240);
                width: 100%;

                .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;

                    p {
                        width: px2rem(74);
                        height: px2rem(74);

                        img {
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                            border: px2rem(2) solid #FEEF60;
                        }
                    }
                }
            }

            .draw-pic {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: px2rem(144);
                z-index: 1;
                width: px2rem(280);
                height: px2rem(280);

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

            .award-info {
                position: absolute;
                top: px2rem(600);
                width: 100%;
                font-family: 'pingfang-bold';
                text-align: center;
                font-size: px2rem(24);
                font-weight: bold;

                .desc {
                    color: #FEEF60;
                    margin-bottom: px2rem(12);
                }

                .award-wrap {
                    color: white;

                    .award-total {
                        color: #FEEF60;
                    }
                }
            }
        }
    }

    // 底部信息
    .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);
                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);
            }
        }

        .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;

                    .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);
                        }
                    }
                }
            }
        }
    }

    // 今日排名弹窗
    .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;

            .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(132);
                            height: px2rem(175);
                            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(-136);
                                left: px2rem(2);
                                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: #ED7B50;
                            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 {
                    display: flex;
                    align-items: center;
                    margin-bottom: px2rem(40);

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

                    .index {
                        display: inline-block;
                        width: px2rem(30);
                        font-size: px2rem(30);
                        font-weight: bold;
                        color: #333333;
                        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: #333333;
                        }
                    }

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

            .mine {
                position: fixed;
                left: 0;
                bottom: 0;
                z-index: 999;
                width: 100%;
                height: px2rem(100);
                background-color: rgba($color: #000000, $alpha: .8);
                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: #ED7B50;
                }
            }
        }
    }

    // 碎片不足弹窗
    .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/mall/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%;
        }
    }
}