这是使用 Tailwind CSS 制作的简洁的移动端登录界面，上方是 Logo（或者头像），下方是电子邮箱和密码两个表单，非常的简单，没有过多花里胡哨的东西。使用 Vue.js 做了表单验证，在验证通过后的代码后，可加入您的登录处理逻辑。该登录界面除了可以用于移动端，PC 端也同样适配。
简洁的登录页面
查看效果：Tailwind CSS制作简洁的登录页面演示
制作过程
1、HTML
1.1、基本机构
除了使用 Tailwind CSS，我们还会用到字体图标 ，和 Vue.js，所以先搭建基本机构为：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="css/tailwind.min.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
</head>
<body>
<script src="https://cdn.dowebok.com/vue/2.6.14/vue.min.js"></script>
</body>
</html>
1.2、登录表单
使用了 Tailwind CSS，编写登录表单就很简单了，按照效果图把代码一一写上：
<div class="flex h-screen items-center justify-center" id="dowebok">
<div class="w-4/5 sm:w-96 text-sm">
<div class="w-32 h-32 mx-auto rounded-full shadow-md overflow-hidden">
<img class="w-full" src="https://img.dowebok.com/8390.jpg" alt="" />
</div>
<div class="mt-20 p-4 rounded-2xl bg-white shadow-md">
<label for="username" class="text-gray-500">电子邮箱</label>
<div class="flex items-center mt-4">
<i class="fa fa-fw fa-envelope-o text-gray-500"></i>
<input
type="text"
id="username"
class="flex-1 mx-3 outline-none bg-transparent"
placeholder="请输入电子邮箱"
/>
</div>
</div>
<div class="mt-7 p-4 rounded-2xl bg-white shadow-md">
<label for="password">密码</label>
<div class="flex items-center mt-4">
<i class="fa fa-fw fa-lock text-gray-500"></i>
<input
type="password"
id="password"
class="flex-1 mx-3 outline-none bg-transparent"
placeholder="请输入密码"
/>
<i class="fa fa-fw fa-eye text-gray-500"></i>
</div>
</div>
<div class="login mt-7 shadow-md rounded-full overflow-hidden">
<button class="w-full p-3 rounded-full text-white hover:opacity-90"
>登 录</button
>
</div>
<div class="flex justify-between mt-7 text-xs">
<a href="javascript:" class="text-gray-500">注册</a>
<a href="javascript:" class="text-gray-500">忘记密码？</a>
</div>
</div>
</div>
2、CSS
虽然使用了 Tailwind CSS，但它不能完全匹配设计效果，我们额外再添加一点 CSS：
* {
margin: 0;
padding: 0;
}
input[type="password"]::-ms-reveal {
display: none;
}
body {
background-color: #f3f8fe;
}
.login button {
background-color: #3e4685;
}
a:hover {
color: #3e4685;
}
3、Javascript
最后，我们使用 Vue.js 给表单添加表单验证：
var app = new Vue({
el: '#dowebok',
data() {
return {
username: '',
password: '',
showPassword: false,
usernameError: false,
usernameErrorText: '',
passwordError: false,
passwordErrorText: ''
}
},
methods: {
checkUsername: function (e) {
const reg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/
if (!this.username) {
this.usernameError = true
this.usernameErrorText = '请输入电子邮箱'
} else if (!reg.test(this.username)) {
this.usernameError = true
this.usernameErrorText = '电子邮箱格式不正确'
} else {
this.usernameError = false
}
},
checkPassword: function () {
if (!this.password) {
this.passwordError = true
this.passwordErrorText = '请输入密码'
} else {
this.passwordError = false
}
},
login: function () {
this.checkUsername()
this.checkPassword()
if (this.usernameError || this.passwordError) {
return
} else {
console.log('ok')
}
}
}
})
到这里就制作完了，如需下载代码，请点击：Tailwind CSS制作简洁的移动端登录界面
网友评论