peko-h5/view/peko/modules/statistic/css/login.scss

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

html,
body {
    width: 100%;
}

.back {
    position: fixed;
    z-index: 9;
    width: px2rem(56, );
    height: px2rem(56, );
    left: px2rem(40, );
    top: px2rem(50, );
    display: none;
}

.header {
    width: 100%;
    height: px2rem(666, );
    background: url(../images/login/bg.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    margin: 0 auto -2rem;

    .logo {
        position: absolute;
        width: px2rem(428, );
        height: px2rem(428, );
        left: 50%;
        top: px2rem(182, );
        transform: translateX(-50%);

    }
}

.box {
    width: px2rem(750, );
    height: px2rem(1096, );
    border-radius: px2rem(50, ) px2rem(50, ) 0px 0px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    background: #fff;
    overflow: hidden;

    input {
        background: transparent;
        border: none;
        outline: none;
        box-sizing: border-box;
        padding: 0 px2rem(48, );

        &::placeholder {
            font-size: px2rem(28, );
            color: #8A8CAB;
        }
    }

    .idLogin {
        .id {
            width: px2rem(606, );
            height: px2rem(104, );
            background: #F3F5FA;
            border-radius: px2rem(104, );
            margin: px2rem(96, ) auto px2rem(40, );
            display: block;
        }

        .password {
            width: px2rem(606, );
            height: px2rem(104, );
            background: #F3F5FA;
            border-radius: px2rem(104, );
            margin: px2rem(0, ) auto px2rem(80, );
            display: block;
        }
    }

    .phone {
        display: none;

        .phoneNumberBox {
            width: px2rem(606, );
            height: px2rem(104, );
            background: #F3F5FA;
            border-radius: px2rem(104, );
            margin: px2rem(96, ) auto px2rem(40, );
            box-sizing: border-box;
            padding-left: px2rem(48, );

            .prefix {
                float: left;
                font-size: px2rem(32, );
                color: #1F1B4F;
                font-weight: bold;
                height: 100%;
                line-height: px2rem(104, );

                b {
                    font-size: px2rem(32, );
                    color: #1F1B4F;
                    font-weight: bold;
                    margin-right: px2rem(8, );
                }

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

            .phoneNumber {
                float: right;
                height: 100%;
                padding: 0;
                width: 5.5rem;
            }
        }

        .codeBox {
            width: px2rem(606, );
            height: px2rem(104, );
            background: #F3F5FA;
            border-radius: px2rem(104, );
            margin: px2rem(0, ) auto px2rem(80, );

            .code {
                float: left;
                width: 5rem;
                height: 100%;
            }

            .codeBut {
                text-align: center;
                color: #FFFFFF;
                font-size: px2rem(28, );
                border-radius: px2rem(76, );
                width: px2rem(204, );
                height: px2rem(76, );
                line-height: px2rem(76, );
                float: right;
                margin-top: px2rem(14, );
                margin-right: px2rem(16, );
                background: #9168FA;
            }

            .codeButTime {
                background: #DED1FD;
            }
        }
    }



    .but {
        width: px2rem(606, );
        height: px2rem(96, );
        border-radius: px2rem(96, );
        line-height: px2rem(96, );
        text-align: center;
        color: #FFFFFF;
        font-size: px2rem(32, );
        margin: 0 auto px2rem(40, );
        background: linear-gradient(90deg, #EEDCFF 0%, #DEE4FF 50%, #CCF8F9 100%);
    }

    .butok {
        background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
    }

    .hone {
        width: px2rem(606, );
        height: px2rem(96, );
        border-radius: px2rem(96, );
        line-height: px2rem(96, );
        text-align: center;
        color: #9168FA;
        font-size: px2rem(32, );
        margin: 0 auto px2rem(40, );
        background: linear-gradient(270deg, #FAEDFF 0%, #E6FDFF 100%);
        border: 1px solid #D480FF;
    }
}

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

    .box {
        width: 100%;
        height: px2rem(666, );
        border-radius: px2rem(56, ) px2rem(56, ) 0 0;
        background: #fff;
        position: absolute;
        bottom: 0;
        left: 0;

        p {
            width: 100%;
            text-align: center;
            height: px2rem(136, );
            line-height: px2rem(136, );
            border-bottom: px2rem(1, ) solid #EBEEF5;
            font-size: px2rem(36, );
            font-weight: bold;
            color: #1F1B4F;
        }

        .list {
            position: absolute;
            left: 0;
            top: px2rem(136, );
            overflow-y: scroll;
            width: 100%;
            height: 7rem;

            span {
                display: block;
                width: 100%;
                height: px2rem(102, );
                line-height: px2rem(102, );
                font-size: px2rem(32, );
                border-bottom: px2rem(1, ) solid #EBEEF5;
                text-align: center;
                color: #1F1B4F;
            }

            .active {
                background: #F3F5FA;
            }
        }
    }
}