简易登录静态页面（复制即可使用）

最新推荐文章于 2023-03-10 22:04:46 发布

Y shǔ shǔ

最新推荐文章于 2023-03-10 22:04:46 发布

阅读量581

点赞数

本文链接：https://blog.csdn.net/weixin_46734347/article/details/114954576

版权

vue+elementUI实现的简易静态登录页面

直接上代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .loginContainer {
            border-radius: 15px;
            background-clip: padding-box;
            margin: 180px auto;
            width: 350px;
            padding: 15px 35px 15px 35px;
            background-color: #fff;
            border: 1px solid #eaeaea;
            box-shadow: 0 0 25px #cac6c6;
        }

        .loginTitle {
            margin: 0px auto 40px auto;
            text-align: center;
        }

        .loginRemeber {
            text-align: left;
            margin: 0px 0px 15px 0px;
        }

        .el-form-item__content {
            display: flex;
            align-items: content;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-form v-loading="loading" element-loading-text="正在登录" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)" :rules="loginRules" :model="loginForm"
            class="loginContainer">
            <h3 class="loginTitle">系统登录</h3>
            <el-form-item prop="username">
                <el-input type="text" v-model="loginForm.username" placeholder="请输入用户名" auto-complete="false" prefix-icon="el-icon-user">
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="loginForm.password" placeholder="请输入用密码" auto-complete="false" prefix-icon="el-icon-lock">
                </el-input>
            </el-form-item>
            <el-form-item prop="code">
                <el-input type="text" v-model="loginForm.code" placeholder="请输入验证码" auto-complete="false"
                    style="width: 250px" prefix-icon="el-icon-check">
                </el-input>
                <el-button type="primary" style="width: 40%">点击获取验证码</el-button>
            </el-form-item>
            <el-checkbox v-model="checked" class="loginRemeber">记住我</el-checkbox>
            <el-button type="primary" style="width: 100%">登录</el-button>
        </el-form>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                visible: false,
                loginForm: {
                    username: 'admin',
                    password: '250',
                    code: ''
                },
                loading: false,
                // 记住我
                checked: true,
                loginRules: {
                    username: [{
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    }],
                    password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }],
                    code: [{
                        required: true,
                        message: '请输入验证码',
                        trigger: 'blur'
                    }]
                }
            }
        }
    })
</script>

</html>