Tailwind CSS制作简洁的登录页面

2022-05-09 本文已影响0人 ohityes

这是使用 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制作简洁的移动端登录界面