<?php

use yii\helpers\Url;

$baseUrl = Url::base(true);
?>
<style>
    body,div,p,span,input{padding: 0;margin: 0}
    input{-webkit-appearance: none;}
    #register{}

    #register .head-wrapper{display:block;padding: 2.5rem 2rem;box-sizing: border-box;padding-bottom: 1.25rem; }
    #register .input-list{padding:1rem 2rem;box-sizing: border-box}
    #register .input-row-cls{width:100%;margin:0.65rem 0; }
    #register .input-row-cls:after{content:''; width:100%;height:1px;background:#DDDDDD;display: block; }
    #register .input-list .input-div{line-height: 1.25rem;font-size: 1rem;padding-bottom:0.65rem;}
    #register .input-list .input-cls{width:100%;line-height: inherit;font-size: inherit;border:0;padding:0.3rem;box-sizing: border-box}

    #register .input-list .validation-code{display:flex;align-items: center}

    #register .input-list .get-code-cls{width: 10rem;font-size: 1rem;display: flex;align-items: center;justify-content:center;color:#FF8728;padding:0.302rem  0.3rem;box-sizing: border-box;border-left:0;}

    #register .upload-box{padding:0 2rem 1rem 2rem;box-sizing: border-box;overflow: hidden}

    #register .upload-box .upload-section{width:50%;margin-bottom:0.5rem;float:left;display: flex;justify-content: center;flex-direction: column;align-items: center}

    #register .upload-box .upload-title{line-height: 1.5rem;color:#BCBCBC;margin-bottom:0;}
    #register .upload-box .upload-img-box{display: block;width: 50%;}

    #register .upload-box .upload-item{width:100%;height:0;padding-bottom: 100%;overflow:hidden;
        background-position: center center;
        background-repeat: no-repeat;
        -webkit-background-size:cover;
        -moz-background-size:cover;background-size:cover;position: relative}

    #register .upload-box .upload-item{background-image:url('<?=$baseUrl?>/i/user/upload-convert.png');background-repeat: no-repeat;background-position: 0 0}

    #register .upload-box .upload-input-cls{width: 100%;display: block;background: rgba(0,0,0,0);opacity: 0;height: 0;padding-bottom: 100%;}

    #register .action-box{padding:1rem;box-sizing:border-box;}

    #register .register-btn-cls{width:80%;border-radius: 2rem; padding:0.8rem 1rem;text-align:center;box-sizing: border-box;color:#fff;background:#FF8728;margin: 0 auto;font-size:1.13rem}
    #register .count-down-cls{font-size:0.7rem;color:#999}
    #register .login-btn-cls{color:#4C4C4C;font-size:1rem;margin-top: 1rem; text-align: center}
    #register input::-webkit-input-placeholder{
        color:#BCBCBC
    }
    #register input::input-placeholder{
        color:#BCBCBC
    }

    #register .legal-agreement{padding:0.2rem 2rem;width: 100%;box-sizing: border-box;display:flex;align-items: center;justify-content: center}

    #register .check-agreement{width:1rem;height: 1rem;display: block;border:1px solid #ccc;border-radius: 1rem;}
    #register .legal-agreement .checked-active{border:1px solid #FF8728;background: #FF8728;position: relative}
    #register .legal-agreement .checked-active:after{content: '';position: absolute;top: 4px;left: 3px;width: 0.50rem;height: 0.2rem;border-top: 0.125rem solid #fff;border-right: 0.125rem solid #fff;transform: rotate(135deg);}
    #register .agreement-cls,
    #register .agreement-cls:hover,
    #register .agreement-cls:active,
    #register .agreement-cls:visited{color:#FF8728;font-size:0.8rem;}

    #register #agreement-wrapper{position: absolute;top: 0;bottom: 0;width: 100%;z-index: 2;padding:3rem 1rem;box-sizing: border-box;background: rgba(0,0,0,0.3);}

    #register #agreement-wrapper .agreement-list-div{width:100%;height:calc(100% - 50px);overflow-y: scroll}
    #register #agreement-wrapper .agree-btn{display:block}

</style>
<script id="register-template" type="text/template">
    <div class="pages">
        <div class="page" id="register" style="background: #fff">
            <div class="page-content">

                <div class="head-wrapper">
                    <h2 style="color:#2E2E2E;margin-bottom: 0.3rem;">注册</h2>
                    <p style="font-size: 0.65rem;color:#2E2E2E">欢迎来到GK车管家，请先注册</p>
                </div>

                <div class="input-list">

                        <div class="input-row-cls"><label class="input-label-cls"></label>

                            <div class="input-div"><input class="input-cls name" type="text" placeholder="输入维修厂名" /></div>
                        </div>

                        <div class="input-row-cls">
                            <label class="input-label-cls"></label><div class="input-div"><input class="input-cls mobile" type="number" placeholder="输入手机号码" /></div>
                        </div>

                        <div class="input-row-cls">

                            <label class="input-label-cls"></label>

                            <div class="input-div validation-code">

                                <input class="input-cls code" type="text" placeholder="输入验证码" style="border-right: 0;"/>

                                <div class="get-code-cls">获取验证码</div>
                            </div>
                        </div>

                        <div class="input-row-cls">
                            <label class="input-label-cls"></label><div class="input-div"><input class="input-cls emergency_person" type="text" placeholder="紧急联系人" /></div>
                        </div>
                        <div class="input-row-cls">
                            <label class="input-label-cls"></label><div class="input-div"><input class="input-cls emergency_contact" type="number" placeholder="紧急联系电话" /></div>
                        </div>

                    <div class="input-row-cls">
                        <label class="input-label-cls"></label><div class="input-div"><input class="input-cls address" type="text" placeholder="维修厂地址" /></div>
                    </div>

                </div>

                <div class="upload-box">

                    <div class="upload-section">
                        <div class="upload-title">上传营业执照</div>
                        <div class="upload-img-box">

                            <div class="upload-item upload-btn-cls licensePic">

                                <input type="file" id="upload-btn" class="upload-input-cls" name="file" accept="image/*"/>
                            </div>
                        </div>
                     </div>

                    <div class="upload-section">
                        <div class="upload-title">维修厂门头照</div>
                        <div class="upload-img-box">
                            <div class="upload-item upload-btn-cls headPic">
                                <input type="file" id="upload-head-btn" class="upload-input-cls" name="file" accept="image/*"/>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="upload-box">

                    <div class="upload-section">

                        <div class="upload-title">维修技术负责人证书</div>

                        <div class="upload-img-box">

                            <div class="upload-item upload-btn-cls techChargePic">
                                <input type="file" id="upload-charge-btn" class="upload-input-cls" name="file" accept="image/*"/>

                            </div>

                        </div>
                    </div>

                    <div class="upload-section">
                        <div class="upload-title">质检负责人证书</div>
                        <div class="upload-img-box">
                            <div class="upload-item upload-btn-cls QAChargePic">
                                <input type="file" id="upload-qa-btn" class="upload-input-cls" name="file" accept="image/*"/>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="legal-agreement">

                    <span class="check-agreement"></span> <a href="javascript:void(0)" class="agreement-cls">《GK车管家服务条款》</a>

                </div>

                <div class="action-box">

                    <div class="register-btn-cls register-btn">注册</div>

                    <div class="login-btn login-btn-cls">登录</div>

                </div>

            </div>
        </div>
    </div>
</script>