register-template.php
8.31 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<?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>