peko-h5/view/peko/modules/game/css/register.scss

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

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

html {
    background: #E7F5F8;
}

body {
    display: none;
    font-family: 'pingfang-medium';
    width: 100%;
    height: px2rem(1334);
    background: url('../images/register.png') #E7F5F8 no-repeat 0 0/100% 100%;
    position: relative;
}

.avatar {
    position: absolute;
    top: 5.3rem;
    left: 49.6%;
    transform: translateX(-50%);
    width: 2.2rem;
    height: 2.2rem;

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

.tip {
    position: absolute;
    top: px2rem(754);
    left: 50%;
    transform: translateX(-50%);
    font-size: px2rem(30);
    font-weight: 600;
    color: white;
    width: 100%;
    text-align: center;
    display: none;
}

.form-wrap {
    position: absolute;
    top: 8.933333rem;
    left: 50%;
    transform: translateX(-50%);

    .mobile-number,
    .verify-ipt {
        width: px2rem(621);
        height: px2rem(92);
        outline: none;
        border-radius: px2rem(92);
        padding-left: px2rem(30);
        background: #fff;
        margin-bottom: px2rem(30);
        font-size: px2rem(30);
        color: #141949;
        border: 1px solid #C8C9FF;
        box-sizing: border-box;
        font-weight: bold;

        &::placeholder {
            color: #141949;
            font-weight: bold;
        }
    }

    .verify-wrap {
        position: relative;
        height: px2rem(70);

        .verify-btn {
            position: absolute;
            right: px2rem(24, );
            top: px2rem(19, );
            width: px2rem(140);
            height: px2rem(55);
            background: #FF6BEF;
            border-radius: px2rem(55);
            color: white;
            font-size: px2rem(30);
            text-align: center;
            line-height: px2rem(55);
        }

        .invite-code {
            position: absolute;
            top: 63%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #141949;
            font-size: px2rem(36, );
            font-weight: bold;
        }
    }

    .register-btn {
        display: block;
        width: px2rem(621);
        height: px2rem(92);
        background: linear-gradient(-90deg, #BBFFFF 0%, #A9AAFF 52%, #ECD0FF 100%);
        border-radius: px2rem(92);
        margin: px2rem(60) auto 0;
        color: #141949;
        font-size: px2rem(36);
        font-weight: bold;
        text-align: center;
        line-height: px2rem(92);
    }

    .form-tip {
        color: #999;
        font-size: px2rem(26);
        text-align: center;

        a {
            color: white;
            text-decoration: underline;
        }
    }
}




.bottom {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    width: px2rem(750);
    height: px2rem(126);
    background: linear-gradient(-90deg, #A493FC 0%, #40D3F8 100%);
    display: inline-flex;
    align-items: center;

    img {
        width: px2rem(86);
        height: px2rem(86);
        border-radius: px2rem(16);
        margin-left: px2rem(20);
        margin-right: px2rem(10);
    }

    p {
        flex: 1;
        font-size: px2rem(30);
        color: white;
    }

    a {
        width: px2rem(160);
        height: px2rem(52);
        line-height: px2rem(52);
        border-radius: px2rem(26);
        background: white;
        margin-right: px2rem(20);
        text-align: center;
        font-size: px2rem(28);
        font-weight: bold;
        color: #141949;
    }
}