截图
屏幕快照 2019-12-18 下午9.46.46.png
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>login</title>
<link rel="stylesheet" href="//www.greatytc.com/static/layui/css/layui.css">
<style>
body{
background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576686661155&di=979f715560fa7ad316c42b4b15e8d702&imgtype=0&src=http%3A%2F%2F00.minipic.eastday.com%2F20171011%2F20171011134244_ba2764b9a42cd878ce93ab37fd08e3e5_2.jpeg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.loginForm{
width: 350px;
height: 300px;
background-color: white;
padding: 30px 20px;
margin-top: 50%;
border-radius: 5px;
box-shadow: 0 0 5px black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md4 layui-col-md-offset4">
<div class="loginForm">
<h2 align="center">xx管理后台</h2>
<form class="layui-form">
<div class="layui-form-item">
<label>用户名:</label>
<div class="layui-form-block">
<input type="text" name="username" required lay-verify="required"
placeholder="请输入用户名" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label>密码:</label>
<div class="layui-form-block">
<input type="password" name="password" required lay-verify="required"
placeholder="请输入密码" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-block">
<button class="layui-btn" lay-submit lay-filter="loginForm">登录</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="/static/layui/layui.all.js"></script>
<script>
layui.use(['layer', 'form'], function () {
var layer = layui.layer;
var form = layui.form;
form.on('submit(loginForm)', function (data) {
// submit login data
$.post("/login", {username: data.field.username, password: data.field.password}, res=>{
switch (res.code) {
case 200:
layer.alert(res.msg, {icon:1});
break;
case 501:
layer.alert(res.msg, {icon:2});
break;
}
});
return false;
})
})
</script>
</body>
</html>
