login-template.php
4.12 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
<?php
use yii\helpers\Url;
$baseUrl = Url::base(true);
?>
<style>
body,div,p,span,input{padding: 0;margin: 0}
input{-webkit-appearance: none;}
#login{}
#login:after{content:'';bottom:0;height:7rem;width: 7rem;display:block;position: absolute;
z-index: -1;background-image: url('<?=$baseUrl?>/i/login-corner.png');background-repeat: no-repeat;background-size: 100% auto }
#login .head-wrapper{display:block;padding: 0;box-sizing: border-box;}
#login .input-box-wrapper{background:#fff;width:100%;border-radius: 0.5rem;padding: 1rem 0 2rem 0;box-shadow: 0 2px 6px rgba(208, 203, 203, 0.3215686274509804)}
#login .input-list{padding:1rem 1rem;box-sizing: border-box;background: #fff;}
#login .input-row-cls{width:100%;margin:0.65rem 0; }
#login .input-row-cls:after{content:''; width:100%;height:1px;background:#DDDDDD;display: block; }
#login .input-list .input-div{line-height: 1.25rem;font-size: 1rem;padding-bottom:0.65rem;}
#login .input-list .input-cls{width:100%;line-height: inherit;font-size: inherit;border:0;padding:0.3rem;box-sizing: border-box}
#login .input-list .validation-code{display:flex;align-items: center}
#login .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;}
#login .count-down-cls{font-size:0.7rem;color:#999}
#login .login-btn-cls{width:80%;border-radius: 2rem; padding:0.85rem 1rem;text-align:center;box-sizing: border-box;color:#fff;background:#FF8728;margin: 0 auto;font-size:1.13rem;}
#login .register-btn-cls{width:80%;padding:0.85rem 1rem;margin: 0 auto;font-size:1.13rem;margin-top: 1rem; box-sizing: border-box;text-align: center;color:#FF8728;border:1px solid #FF8728;border-radius: 2rem;}
#login .action-btn-box{padding:1rem;box-sizing:border-box;padding-top:4rem;border-bottom-left-radius: 0.5rem;border-bottom-right-radius: 0.5rem;}
#login input::-webkit-input-placeholder{
color:#BCBCBC
}
#login input::input-placeholder{
color:#BCBCBC
}
</style>
<script id="login-template" type="text/template">
<div class="pages">
<div class="page" id="login" style="background: #fff">
<div class="page-content">
<div class="head-wrapper" style="background-image:url('<?=$baseUrl?>/i/login-bg.png');background-repeat: no-repeat;background-size: 100% auto;">
<img style="width:100%;opacity: 0" src="<?=$baseUrl?>/i/login-bg.png"/>
</div>
<div style="margin-top:-10rem;padding:0 1rem;box-sizing: border-box">
<div class="input-box-wrapper">
<div style="padding:1rem;box-sizing: border-box;margin-bottom: 3.2rem;">
<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 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>
<div class="action-btn-box">
<div class="login-btn-cls login-btn">登录</div>
<div class="register-btn register-btn-cls">注册</div>
</div>
</div>
</div>
</div>
</div>
</div>
</script>