peko-h5/view/peko/home/css/index.scss

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

// body,
// html {
//     width: 100%;
//     height: 100%;
//     font-family: "Heiti SC", "Microsoft Sans Serif";
// }

// pc端
@media screen and (min-width:769px) {

    .h5 {
        display: none;
    }

    body,
    html {
        width: 100%;
        height: 100%;
        background: #0E0B24;
        font-family: Avenir, Avenir;
        cursor: pointer;

        .pc {
            width: px2rem(1920);
            height: 100%;
            background: url(../images/pcBg.png) no-repeat center;
            background-size: px2rem(1920) px2rem(1080);
            position: relative;
            margin: 0 auto 0;
            display: block;

            .header {
                width: 100%;
                height: px2rem(108);
                position: absolute;
                left: 0;
                top: 0;

                .logo {
                    width: px2rem(54);
                    height: px2rem(54);
                    position: absolute;
                    top: px2rem(27);
                    left: px2rem(360);
                }

                .name {
                    height: 100%;
                    line-height: px2rem(108);
                    font-size: px2rem(40);
                    color: #FFFFFF;
                    font-weight: 800;
                    position: absolute;
                    top: 0;
                    left: px2rem(430);
                }

                .index {
                    height: 100%;
                    line-height: px2rem(108);
                    font-family: PingFangSC, PingFang SC;
                    color: fff;
                    font-weight: 500;
                    position: absolute;
                    top: 0;
                    left: px2rem(657);
                    font-size: px2rem(28);
                    color: #fff;

                    span {
                        width: px2rem(28);
                        height: px2rem(6);
                        background: #9168FA;
                        border-radius: px2rem(6);
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        top: px2rem(76);
                    }
                }

                .diamound {
                    width: px2rem(118);
                    height: px2rem(48);
                    line-height: px2rem(48);
                    color: #FFFFFF;
                    font-size: px2rem(24);
                    text-align: center;
                    background: rgba(255, 255, 255, 0.2);
                    border-radius: px2rem(48);
                    box-sizing: border-box;
                    border: 1px solid #fff;
                    position: absolute;
                    right: px2rem(380);
                    top: px2rem(30);
                    vertical-align: middle;

                    img {
                        display: inline-block;
                        width: px2rem(30);
                        height: px2rem(30);
                        vertical-align: middle;
                    }
                }
            }

            .pcMarket1 {
                width: px2rem(699);
                height: px2rem(683);
                position: absolute;
                left: px2rem(346);
                top: px2rem(208);
            }

            .pcText {
                width: px2rem(398);
                height: px2rem(120);
                position: absolute;
                left: px2rem(1092);
                top: px2rem(404);
            }

            .pcIos {
                width: px2rem(254);
                height: px2rem(58);
                position: absolute;
                left: px2rem(1091);
                top: px2rem(610);
            }

            .pcAnd {
                width: px2rem(254);
                height: px2rem(58);
                position: absolute;
                left: px2rem(1091);
                top: px2rem(698);
            }

            .code {
                width: px2rem(160);
                height: px2rem(166);
                position: absolute;
                left: px2rem(1373);
                top: px2rem(600);
            }

            .bottom {
                text-align: center;
                color: #B7B6BE;
                font-size: px2rem(16);
                width: 100%;
                padding: px2rem(29) 0;
                position: fixed;
                left: 0;
                bottom: 0;
                background: #0E0B24;
                min-height: 1rem;

                p {
                    margin-bottom: px2rem(16);
                }
            }
        }
    }
}

// 移动端
@media screen and (max-width:768px) {
    .pc {
        display: none;
    }

    body,
    html {
        width: 100%;
        height: 100%;
        background: #0E0B24;

        .header {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: px2rem(90);
            box-sizing: border-box;
            padding: 0 px2rem(40);
            margin: px2rem(20) auto 0;
            z-index: 3;

            .line {
                width: 90%;
                height: px2rem(2);
                background: #fff;
                opacity: .3;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 0;
            }

            .logo {
                display: block;
                width: px2rem(64);
                height: px2rem(64);
                margin-right: px2rem(16);
                float: left;
            }

            .name {
                font-size: 0.53333rem;
                color: #FFFFFF;
                font-weight: 800;
                float: left;
                margin-top: px2rem(6);
            }

            .diamound {
                width: px2rem(140);
                height: px2rem(56);
                line-height: px2rem(56);
                box-sizing: border-box;
                border: 1px solid #fff;
                vertical-align: middle;
                color: #fff;
                font-size: px2rem(24);
                float: right;
                margin-top: px2rem(4);
                margin-right: px2rem(80);
                text-align: center;
                border-radius: px2rem(56);

                img {
                    vertical-align: middle;
                    width: px2rem(38);
                    height: px2rem(32);
                    display: inline-block;
                }
            }

            .more {
                float: right;
                width: px2rem(40);
                height: px2rem(40);
                display: block;
                margin-top: px2rem(12);
            }
        }

        .h5 {
            display: block;
            width: 100%;
            height: 100%;
            overflow: hidden;

            .pagesBox {
                width: 100%;
                height: 100%;
                // overflow: hidden;
                transition: all .4s;
                transform: translateY(-0%);

                .page1 {
                    width: 100%;
                    height: 100%;
                    background: url(../images/h51.png) no-repeat ;
                    background-size: 100% px2rem(1334);
                    position: relative;
                    overflow: hidden;

                    .pageTxte1 {
                        width: px2rem(482);
                        height: px2rem(228);
                        position: relative;
                        top: px2rem(394);
                        margin: 0 auto;
                        display: block;
                    }

                    .downioad {
                        width: px2rem(494);
                        height: px2rem(104);
                        position: relative;
                        margin: 9rem auto 0;
                        display: block;
                    }

                    .down {
                        width: px2rem(64);
                        height: px2rem(48);
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        top: px2rem(1214);
                    }

                }

                .page2 {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    overflow: hidden;
                    // display: none;

                    .pageText2 {
                        width: px2rem(446);
                        height: px2rem(114);
                        position: relative;
                        top: px2rem(210);
                        margin: 0 auto;
                        display: block;
                    }

                    .page2_in {
                        width: px2rem(750);
                        height: px2rem(804);
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        top: px2rem(336);
                    }

                    .pagetx1 {
                        width: px2rem(302);
                        height: px2rem(308);
                        position: absolute;
                        left: px2rem(448);
                        top: px2rem(406);
                    }

                    .pagetx2 {
                        width: px2rem(452);
                        height: px2rem(264);
                        position: absolute;
                        left: px2rem(40);
                        top: px2rem(770);
                    }

                    .downioad {
                        width: px2rem(494);
                        height: px2rem(104);
                        position: relative;
                        display: block;
                        margin: 0 auto;
                        top: px2rem(970);
                    }

                    .down {
                        width: px2rem(64);
                        height: px2rem(48);
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        top: px2rem(1214);
                    }
                }

                .page3 {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    overflow: hidden;
                    // display: none;

                    .pageText3 {
                        width: px2rem(512);
                        height: px2rem(114);
                        position: relative;
                        // left: 50%;
                        // transform: translateX(-50%);
                        display: block;
                        margin: 0 auto;
                        top: px2rem(210);
                    }

                    .page3_in {
                        width: px2rem(750);
                        height: px2rem(804);
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        top: px2rem(336);
                    }

                    .page3Icon1 {
                        width: px2rem(324);
                        height: px2rem(230);
                        position: absolute;
                        left: px2rem(426);
                        top: px2rem(456);
                    }

                    .page3Icon2 {
                        width: px2rem(154);
                        height: px2rem(154);
                        position: absolute;
                        left: px2rem(114);
                        top: px2rem(442);
                    }

                    .page3Icon3 {
                        width: px2rem(218);
                        height: px2rem(142);
                        position: absolute;
                        left: px2rem(440);
                        top: px2rem(816);
                    }

                    .page3Icon4 {
                        width: px2rem(298);
                        height: px2rem(176);
                        position: absolute;
                        left: px2rem(20);
                        top: px2rem(874);
                    }

                    .downioad {
                        width: px2rem(494);
                        height: px2rem(104);
                        position: relative;
                        // left: 50%;
                        // transform: translateX(-50%);
                        display: block;
                        margin: 0 auto;
                        top: px2rem(970);
                    }

                    .down {
                        width: px2rem(64);
                        height: px2rem(48);
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        top: px2rem(1214);
                    }
                }

                .page4 {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    overflow: hidden;
                    // display: none;

                    .pageText4 {
                        width: px2rem(480);
                        height: px2rem(114);
                        position: relative;
                        top: px2rem(210);
                        display: block;
                        margin: 0 auto;
                    }

                    .page4_in {
                        width: px2rem(750);
                        height: px2rem(802);
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        top: px2rem(338);
                    }

                    .page4Icon1 {
                        width: px2rem(496);
                        height: px2rem(460);
                        position: absolute;
                        left: px2rem(6);
                        top: px2rem(428);
                    }

                    .page4Icon2 {
                        width: px2rem(496);
                        height: px2rem(460);
                        position: absolute;
                        left: px2rem(246);
                        top: px2rem(650);
                    }

                    .downioad {
                        width: px2rem(494);
                        height: px2rem(104);
                        position: relative;
                        top: px2rem(970);
                        display: block;
                        margin: 0 auto;
                    }

                    .down {
                        width: px2rem(64);
                        height: px2rem(48);
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        top: px2rem(1214);
                    }
                }

                .page5 {
                    width: 100%;
                    height: 100%;
                    background: url(../images/h55.png) no-repeat center;
                    background-size: 100% px2rem(1344);
                    position: relative;
                    overflow: hidden;
                    // display: none;

                    .pageTxte5 {
                        width: px2rem(496);
                        height: px2rem(380);
                        position: relative;
                        top: px2rem(280);
                        display: block;
                        margin: 0 auto;
                    }

                    .contactUs {
                        width: px2rem(272);
                        height: px2rem(92);
                        position: relative;
                        display: block;
                        margin: 0 auto;
                        top: 5rem;
                    }

                    .bootom {
                        width: 100%;
                        height: 1.5rem;
                        position: absolute;
                        bottom: px2rem(84);
                        left: 0;
                        text-align: center;
                        color: #B4B4BA;
                        font-size: px2rem(24);

                        p {
                            margin-bottom: px2rem(8);
                        }
                    }

                    .downioad {
                        width: px2rem(494);
                        height: px2rem(104);
                        position: relative;
                        top: 6rem;
                        display: block;
                        margin: 0 auto;
                    }

                    .down {
                        width: px2rem(64);
                        height: px2rem(48);
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        top: px2rem(1468);
                    }
                }
            }

            // 菜单
            .menu {
                width: 100%;
                height: 0%;
                background: #0E0B24;
                position: fixed;
                // z-index: 4;
                transition: all .2s;
                // display: none;
                left: 0;
                top: 0;
                overflow: hidden;

                .top {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: px2rem(90);
                    box-sizing: border-box;
                    padding: 0 px2rem(40);
                    margin: px2rem(20) auto 0;
                    z-index: 3;
                    top: 0;
                    left: 50%;
                    transform: translateX(-50%);

                    .line {
                        width: 90%;
                        height: px2rem(2);
                        background: #fff;
                        opacity: .3;
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: 0;
                    }

                    .logo {
                        display: block;
                        width: px2rem(64);
                        height: px2rem(64);
                        margin-right: px2rem(16);
                        float: left;
                    }

                    .name {
                        font-size: 0.53333rem;
                        color: #FFFFFF;
                        font-weight: 800;
                        float: left;
                        margin-top: px2rem(6);
                    }

                    .diamound {
                        width: px2rem(140);
                        height: px2rem(56);
                        line-height: px2rem(56);
                        box-sizing: border-box;
                        border: 1px solid #fff;
                        vertical-align: middle;
                        color: #fff;
                        font-size: px2rem(24);
                        float: right;
                        margin-top: px2rem(4);
                        margin-right: px2rem(80);
                        text-align: center;
                        border-radius: px2rem(56);

                        img {
                            vertical-align: middle;
                            width: px2rem(38);
                            height: px2rem(32);
                            display: inline-block;
                        }
                    }

                    .close {
                        float: right;
                        width: px2rem(40);
                        height: px2rem(40);
                        display: block;
                        margin-top: px2rem(12);
                    }
                }

                ul {
                    width: 100%;
                    height: px2rem(90);
                    box-sizing: border-box;
                    padding: 0 px2rem(40);
                    margin: 1.6rem auto 0;

                    li {
                        width: 100%;
                        height: px2rem(116);
                        line-height: px2rem(116);
                        border-bottom: 1px solid rgba(255, 255, 255, .3);
                        display: flex;
                        justify-content: space-between;

                        span {
                            color: #FFFFFF;
                            font-size: px2rem(32);
                        }

                        img {
                            width: px2rem(32);
                            height: px2rem(32);
                            display: block;
                            margin-top: px2rem(44);
                        }
                    }
                }
            }
        }

        .contactUs_pub {
            position: fixed;
            z-index: 99;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, .6);
            display: none;

            .contactUs_pub_in {
                width: px2rem(534);
                height: px2rem(480);
                left: 50%;
                top: 50%;
                position: relative;
                transform: translate(-50%, -50%);
                background: #fff;
                border-radius: px2rem(32);
                overflow: hidden;

                .sClose {
                    width: px2rem(32);
                    height: px2rem(32);
                    position: absolute;
                    right: px2rem(32);
                    top: px2rem(26);
                }

                .title {
                    text-align: center;
                    width: 100%;
                    margin-top: px2rem(36);
                    margin-bottom: px2rem(16);
                    color: #1F1B4F;
                    font-size: px2rem(32);
                    font-weight: 600;
                }

                ul {
                    width: 6rem;
                    margin: 0 auto 0;

                    li {
                        width: 100%;
                        height: px2rem(112);
                        line-height: px2rem(112);
                        border-bottom: px2rem(2) solid #EBECF0;

                        img {
                            display: block;
                            width: px2rem(48);
                            height: px2rem(48);
                            float: left;
                            margin-top: px2rem(32);
                            margin-right: px2rem(44);
                        }

                        span {
                            display: block;
                            float: left;
                            height: 100%;
                            color: #1F1B4F;
                            font-size: px2rem(28);
                            font-weight: 500;

                            b {
                                color: #1F1B4F;
                                font-weight: bold;
                            }
                        }
                    }
                }
            }
        }

    }
}