写一个用layui搭建的动态登录界面
时间: 2024-05-06 14:16:28 浏览: 8
以下是一个使用 layui 搭建的动态登录界面的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态登录界面 - layui</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<style>
body {
background-color: #F2F2F2;
}
.login-box {
background-color: #FFFFFF;
width: 400px;
margin: 100px auto;
padding: 20px;
box-shadow: 0px 0px 10px #BDBDBD;
}
.login-title {
font-size: 24px;
text-align: center;
margin: 20px 0px;
}
.login-input {
width: 100%;
height: 40px;
margin-bottom: 20px;
border: none;
border-bottom: 2px solid #BDBDBD;
outline: none;
box-sizing: border-box;
font-size: 16px;
padding: 5px;
transition: border-color 0.2s ease-in-out;
}
.login-input:focus {
border-color: #1E9FFF;
}
.login-btn {
width: 100%;
height: 40px;
border: none;
background-color: #1E9FFF;
color: #FFFFFF;
font-size: 18px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
.login-btn:hover {
background-color: #009688;
}
.login-footer {
font-size: 14px;
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="login-box">
<div class="login-title">动态登录界面</div>
<form class="layui-form">
<div class="layui-form-item">
<input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="login-input">
</div>
<div class="layui-form-item">
<input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="login-input">
</div>
<div class="layui-form-item">
<button class="login-btn" lay-submit lay-filter="login">登录</button>
</div>
</form>
<div class="login-footer">© 2021 layui</div>
</div>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script>
layui.use(['form'], function() {
var form = layui.form;
// 监听表单提交事件
form.on('submit(login)', function(data) {
// TODO: 处理登录逻辑
console.log(data.field);
return false;
});
});
</script>
</body>
</html>
```
在这个示例代码中,我们使用了 layui 提供的表单元素和样式,以及一些自定义的 CSS 样式,实现了一个简单的登录界面。其中,表单提交事件被监听到后,将触发一个回调函数,可以在这个函数中处理登录逻辑。