Vue实战分享：如何打造优美的管理员系统登录页面

最近一段时间在学习Vue，刚好今天在开始学习写管理系统了，写了一个登录页面，个人觉得还挺好看的，分享给大家，希望大家有什么学习建议能分享分享。

Vue实现代码

<template>
    <div class="login">
        <div class="left-right">
            <!-- 左边 -->
            <div class="login-left">
                <!-- 上面 -->
                <div class="left-title">
                    <img src="../../assets/images/welcome.png" alt="图片已损坏" />
                    <h2>六思逸后台管理系统</h2>
                </div>
                <!-- 下边 -->
                <div class="left-bottom">
                    <p>2014-2023 © v1.0.5 六思逸出品</p>
                </div>
            </div>
            <!-- 右边 -->
            <div class="login-right">
                <el-form ref="form" :model="form">
                    <el-form-item>
                        <el-input
                            v-model="form.username"
                            size="small"
                            prefix-icon="el-icon-user-solid"
                            placeholder="管理员账号"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input
                            v-model="form.password"
                            size="small"
                            prefix-icon="el-icon-lock"
                            show-password
                            placeholder="管理员密码"
                        ></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" size="small" @click="submit"
                            >登录</el-button
                        >
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                username: "",
                password: "",
            },
        };
    },
    methods: {
        // 登录事件
        submit() {
            this.$router.push("/index");
        },
    },
};
</script>

<style lang="less" scoped>
.login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: url(../../assets/images/logobj.jpg) no-repeat center center;
    background-size: cover;
    // 外部盒子大小
    .left-right {
        display: flex;
        background: #fff;
        width: 640px;
        height: 320px;
        box-shadow: 0px 10px 30px rgba(8, 70, 116, 0.3);
        // 左边
        .login-left {
            display: flex;
            flex-direction: column;
            background: url(../../assets/images/bg2.jpg) no-repeat center center;
            background-size: cover;
            width: 1px;
            flex-grow: 1;
            // 上边
            .left-title {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 1px;
                flex-grow: 3;
                color: #fff;
            }
            // 下边
            .left-bottom {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 1px;
                flex-grow: 1;
                color: #fff;
            }
        }
        // 右边
        .login-right {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 1px;
            flex-grow: 1;
            // 输入框样式
            .el-form {
                width: 280px;
                // 按钮
                .el-button {
                    width: 100%;
                }
                // 输入框
                :deep(.el-input) {
                    i {
                        color: #666;
                        font-size: 14px;
                    }
                }
                :deep(.el-input__inner) {
                    border: 0;
                    border-bottom: 1px solid #dcdfe6;
                    border-radius: 0;
                }
            }
        }
    }
}
</style>