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;

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

            .page1 {
                width: 100%;
                height: 100%;
                background: url(../images/h51.png) no-repeat center;
                background-size: 100% px2rem(1624);
                
            }
        }
    }
}