login.html
3.7 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
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="zh">
#@header()
#define res()
<style>
body {
background: url('#(contextPath)/img/login_bg.jpg?ver=#(version)') no-repeat fixed
center center;
background-size: cover;
font-family: Montserrat;
}
.logo {
width: 1036px;
height: 84px;
background: url('#(contextPath)/img/login-logo.png?ver=#(version)') no-repeat;
margin: 20px auto;
margin-top: 130px;
margin-bottom: 35px;
}
.login-block {
width: 360px;
padding: 20px;
background: #fff;
border-radius: 5px;
border-top: 5px solid #a463ce;
margin: 0 auto;
}
.login-block h1 {
text-align: center;
color: #000;
font-size: 18px;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 20px;
}
.login-block input {
width: 100%;
height: 42px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 10px;
font-size: 14px;
font-family: Montserrat;
padding: 0 20px 0 50px;
outline: none;
}
.login-block input#username {
background: #fff url('#(contextPath)/img/username.png') 20px top
no-repeat;
background-size: 16px 80px;
}
.login-block input#username:focus {
background: #fff url('#(contextPath)/img/username.png') 20px bottom
no-repeat;
background-size: 16px 80px;
}
.login-block input#password {
background: #fff url('#(contextPath)/img/password.png') 20px top
no-repeat;
background-size: 16px 80px;
}
.login-block input#password:focus {
background: #fff url('#(contextPath)/img/password.png') 20px bottom
no-repeat;
background-size: 16px 80px;
}
.login-block input:active, .login-block input:focus {
border: 1px solid #621d8e;
}
.login-block button {
width: 100%;
height: 40px;
background: #621d8e;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #a463ce;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
font-family: Montserrat;
outline: none;
cursor: pointer;
}
.login-block button:hover {
background: #a463ce;
}
</style>
#end
<body>
<div class="logo"></div>
<div class="login-block">
<h1>码头管理调度系统</h1>
<input type="text" value="" placeholder="用户名" id="username" />
<input type="password" value="" placeholder="密码" id="password" />
<table>
<tbody>
<tr>
<td>
<input type="text" value="" placeholder="请输入验证码" id="verifyCode" />
</td>
<td>
<img id="codeImage" alt="验证码" src="#(contextPath)/verifyCode" onclick="this.src='#(contextPath)/verifyCode?x='+Math.random()" style="margin-top: -10px;height: 42px;">
</td>
</tr>
</tbody>
</table>
<button type="button" onclick="onLoginAction()">登 录</button>
</div>
<div id="tipDialog" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">温馨提示</h4>
</div>
<div class="modal-body">
<h5 id="tipView"></h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<div id="loadModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true"></div>
<script src="#(contextPath)/res/jquery/jQuery.md5.js" type="text/javascript"></script>
<script src="#(contextPath)/res/common/sha256.js" type="text/javascript"></script>
<script src="#(contextPath)/js/common.js?ver=#(version)" type="text/javascript"></script>
<script src="#(contextPath)/js/login.js?ver=#(version)" type="text/javascript"></script>
</body>
</html>