_register.css 8.18 KB
.register-page {
    color: #b9b9b9;
    font-size: 14px;

    li {
        position: relative;
        margin-bottom: 25px;
        width: 270px;

        &.w330 {
            width: 330px;
        }

        input,
        select {
            outline: none;
        }

        .input {
            padding: 0;
            width: 268px;
            height: 43px;
            border: 1px solid #dbdbdb;
            color: #9a9a9a;
            text-indent: 10px;
            font-size: 16px;
            line-height: 43px;

            &.error {
                border: 1px solid red;
            }

            &.phone-num {
                position: absolute;
                top: 0;
                right: 0;
                display: block;
                width: 209px;
            }

            &.captcha,
            &.msg-captcha {
                float: left;
                width: 160px;
            }

            &.agree-terms {
                vertical-align: middle;
            }
        }

        .send-captcha {
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            background: #ff1901;
            text-indent: 0;
            letter-spacing: 0;
            font-size: 12px;

            &.disable {
                background: #555;
            }
        }

        .link {
            color: #ff1901;
            text-decoration: underline;
        }

        .btn {
            padding: 0;
            height: 45px;
            border: none;
            color: #fff;
            text-align: center;
            font-family: '黑体';
            line-height: 45px;
        }

        /* 区域下拉选择框 */
        .region {
            padding: 4px 0;
            width: 132px;
            height: 30px;
            border-color: #c1c1c1;
            color: #9a9a9a;
            font-size: 16px;
            font-family: '黑体';
        }

        /* 手机号 */
        .country-code {
            display: block;
            float: left;
            width: 58px;
            height: 43px;
            border: 1px solid #dbdbdb;
            border-right: 0;
            text-align: center;
            white-space: nowrap;
            font-size: 16px;
            line-height: 43px;
        }

        /* 验证码 */
        .captcha-img {
            margin-top: 4px;
            margin-left: 10px;
            width: 90px;
            height: 37px;
            outline: none;
            border: 0;
            vertical-align: middle;

            /* float: left; */
        }

        .change-captcha {
            float: left;
            margin-left: 10px;
            height: 43px;
            line-height: 43px;
            cursor: pointer;
        }

        /* 密码强度 */
        .pwd-intensity-container {
            overflow: hidden;
            margin-top: 5px;
            width: 270px;
            height: auto;
            text-align: right;

            .pwd-intensity {
                padding: 1px 10px;
                height: 15px;
                background-color: #e8e8e8;
                text-align: center;
                font-size: 12px;
            }

            &.red {
                color: red;

                .color {
                    background: red;
                    color: #fff;
                }
            }

            &.yellow .color {
                background: #ff0;
                color: #fff;
            }

            &.green .color {
                background: #3ee392;
                color: #fff;
            }
        }

        /* 服务条款 */
        &.items-container {
            text-align: right;
            white-space: nowrap;
            font-size: 13px;
        }

        /* 立即注册 */
        .register-btn {
            width: 270px;
            background: #ff1901;
            font-weight: bold;
            font-size: 20px;
            float: left;

            &.disable {
                background: #555;
            }
        }

        /* 立即登录 */
        &.quick-login-container {
            width: 270px;
            text-align: right;
            white-space: nowrap;
            font-size: 13px;
        }

        &.skip-user-info {
            text-align: center;
            font-size: 18px;

            a {
                color: #ff1901;
                text-decoration: underline;
            }
        }
    }

    .msg-tip {
        position: absolute;
        top: 17px;
        left: 285px;
        white-space: nowrap;

        &:before {
            display: inline-block;
            margin-right: 5px;
            width: 12px;
            height: 12px;
            background: url(/passport/tip/succ-info.png) no-repeat;
            content: '';
        }
    }

    .err-tip {
        position: absolute;
        z-index: 1000;
        padding: 0 10px;
        height: 30px;
        border: 1px solid #ffbdbe;
        background-color: #ffebeb;
        color: red;
        line-height: 30px;

        b {
            position: absolute;
            top: 30px;
            left: 20px;
            display: block;
            width: 17px;
            height: 9px;
            background: url(/passport/tip/angle.png) no-repeat;
        }
    }

    /* 注册成功 */
    .success-box {
        margin-top: 130px;
        color: #b9b9b9;
        font-size: 14px;

        .success-text {
            padding-left: 46px;
            color: #000;
            font-size: 16px;
            line-height: 29px;

            span {
                font-size: 22px;
            }

            &:before {
                position: relative;
                top: 6px;
                display: inline-block;
                margin-right: 5px;
                width: 29px;
                height: 29px;
                background: url(/passport/tip/success-icon.png) no-repeat;
                content: '';
            }

            #count-down {
                color: #ff1901;
            }
        }

        .success-btn {
            display: block;
            margin: 46px auto 0;
            width: 270px;
            height: 45px;
            background: #ff1901;
            color: #fff;
            text-align: center;
            letter-spacing: 2px;
            line-height: 45px;
        }
    }

    .qrcode-hover-reg {
        float: left;
        margin-left: 10px;
        position: relative;
        width: 55px;

        &:hover {
            .download-app-box {
                display: block;
            }
        }

        .qrcode-reg {
            width: 45px;
            height: 45px;
            border: 1px solid #b0b0b0;
            box-sizing: border-box;
            text-align: center;
            display: inline-block;
        }

        .qrcode-icon {
            width: 28px;
            height: 28px;
            background: url("/passport/qrcode.png") no-repeat;
            display: inline-block;
            margin-top: 7px;
        }

        .download-app-box {
            position: absolute;
            bottom: 0;
            left: 55px;
            width: 231px;
            height: 290px;
            background-color: #f8f8f8;
            z-index: 1000;
            display: none;
            border: 1px solid #b0b0b0;

            &:before {
                content: "";
                position: absolute;
                left: -8px;
                bottom: 14px;
                display: inline-block;
                width: 8px;
                height: 16px;
                background: url("/passport/arrow-left.jpg") no-repeat;
            }

            .qr-img {
                position: relative;
                background-image: resolve('layout/qr.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin: 32px auto 15px;
                width: 143px;
                height: 147px;
            }

            .qr-words {
                height: 25px;
                line-height: 25px;
                font-size: 16px;
                text-align: center;
                color: #000;
            }

            .qr-more {
                margin-top: 6px;
                line-height: 25px;
                font-size: 14px;
                text-align: center;
            }
        }
    }

    .reg-btn-area {
        width: 340px;
    }
}