-
Notifications
You must be signed in to change notification settings - Fork 1
/
login.html
131 lines (128 loc) · 3.58 KB
/
login.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>美居精选</title>
<link rel="stylesheet" href="./lib/layui/css/layui.css" />
<style>
body {
background: #f9f8f7;
}
.dib {
display: inline-block;
}
.header {
padding: 0 100px;
display: flex;
align-items: center;
height: 70px;
background-color: #fff;
}
.header img{
width: 164px;
height: 30px;
}
.login-box {
margin: 100px auto;
width: 860px;
height: 530px;
border: 1px solid #ccc;
background-color: #fff;
font-size: 0;
}
.login-box > div {
width: 50%;
height: 100%;
font-size: 16px;
box-sizing: border-box;
}
.login-box .pic {
padding: 10px;
}
.login-box .form-container {
padding: 20px;
vertical-align: bottom;
}
.login-box form {
width: 100%;
padding-top: 20px;
}
.login-box form .title-item {
height: 80px;
line-height: 80px;
}
.login-box form .title {
color: #FF5722;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.login-box form .layui-form-item {
margin-bottom: 30px;
}
.login-box form .layui-input-block {
margin: 0;
padding: 0 50px;
}
.login-box form input,
.login-box form .layui-btn {
width: 100%;
}
.login-box form .layui-btn {
background-color: #FF5722!important;
}
.login-box .pic img {
width: 100%;
height: 100%;
}
</style>
</head>
<body class="layui-layout-body">
<div class="header">
<div class="logo"><img src="./images/logo@2x.png" alt="" /></div>
<span>欢迎登陆</span>
</div>
<div class="login-box">
<div class="pic dib"><img src="./images/bg.png" alt="" /></div>
<div class="form-container dib">
<form class="layui-form" action="">
<div class="layui-form-item title-item">
<p class="title">用户名密码登录</p>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="请输入用户名" autocomplete="off"
class="layui-input" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off"
class="layui-input" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="submit">
立即提交
</button>
</div>
</div>
</form>
</div>
</div>
<script src="./lib/layui/layui.js"></script>
<script>
layui.use(["form", "element"], function () {
var form = layui.form;
var element = layui.element;
form.on("submit(submit)", function (data) {
console.log(data.elem); //被执行事件的元素DOM对象，一般为button对象
console.log(data.form); //被执行提交的form对象，一般在存在form标签时才会返回
console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
});
</script>
</body>
</html>