scd_project/src/views/login/Login.vue

<template>
    <div>
        <div class="pageBox">
            <div class="loginBox">
                <div class="loginTitle">
                    <p class="loginTitleP">请登录您的账号</p>
                </div>
                <el-form ref="form" :model="form">
                    <el-form-item class="loginItem">
                        <p class="loginItemP">账号</p>
                        <input class="loginInput" v-model="form.username" @blur="userRule" placeholder="请输入账号">
                        <p class="blurP" v-if="userBlur">账号不能为空</p>
                    </el-form-item>
                    <el-form-item class="loginItem">
                        <p class="loginItemP">密码</p>
                        <input class="loginInput" v-model="form.password" @blur="passRule" placeholder="请输入密码" :type="inputType">
                        <img class="imgEyes" src="../../assets/font/fluent：eye-20-regular.png" alt="" @click="changeType">
                        <p class="blurP" v-if="passBlur">密码不能为空</p>
                    </el-form-item>
                    <el-form-item class="loginItem">
                        <el-checkbox v-model="rememberUser" @change="rememberNow">记住账号</el-checkbox><br>
                        <el-button class="loginButton" @click="loginNow">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                username: "",
                password: ""
            },//账号密码表单
            rememberUser: false,//是否记住账号
            userBlur: false,//用户名验证
            passBlur: false,//密码验证
            inputType:"password",//密码输入框性质
        }
    },
    methods: {
        // 用户验证
        userRule(e) {
            if (e.target._value) {
                this.userBlur = false
            } else {
                this.userBlur = true
            }
        },
        // 密码验证
        passRule(e) {
            if (e.target._value) {
                this.passBlur = false
            } else {
                this.passBlur = true
            }
        },
        // 登录按钮
        loginNow() {
            // console.log(this.form.username, this.form.password, 'login');
            if (this.form.username != '' && this.form.password != "") {
                if (!this.userBlur && !this.passBlur) {
                    this.$router.push("/")
                } else {
                    this.$message({
                        message: '账号或密码不能为空',
                        type: 'error'
                    });
                }
            } else {
                this.$message({
                    message: '账号或密码不能为空',
                    type: 'error'
                });
            }
        },
        // 记住账号
        rememberNow(e) {
            this.rememberUser = e
            if (this.rememberUser) {
                localStorage.setItem('username', JSON.stringify(this.form.username))
            } else {
                localStorage.removeItem('username')
            }
        },
        // 拿到已经保存的用户名
        getSaveUser() {
            let user = localStorage.getItem("username")
            if (user) {
                user = JSON.parse(user)
                this.form.username = user
            }
        },
        // ，密码框小眼睛
        changeType(){
            if(this.inputType === 'password'){
                this.inputType = 'text'
            }else{
                this.inputType = 'password'
            }
        }
    },
    created() {
        // 通过本地使用户名显示
        this.getSaveUser()
    },
}
</script>

<style scoped>
/* 整个大盒子css */
.pageBox {
    width: 100vw;
    height: 100vh;
    background-image: url("../../assets/loginBackground.png");
    background-repeat: no-repeat;
    background-size: 88%;
    background-color: #14093E;
    position: relative;
    overflow: hidden;
}

/* 登录盒子css */
.loginBox {
    width: 640px;
    height: 650px;
    position: absolute;
    top: 200px;
    right: 0px;
}

.loginItem {
    width: 432px;
}

/* 表单内输入框css */
.loginInput {
    width: 432px;
    height: 44px;
    border-radius: 5px 5px 5px 5px;
    opacity: 1;
    border: 1px solid #dbdbdb;
    background-color: transparent;
    color: white;
    position: relative;
}
/* 密码框小眼睛css */
.imgEyes{
    position: absolute;
    top: 50px;
    right: 0px;
}
/* 表单内标题p标签css */
.loginTitleP {
    width: 210px;
    height: 42px;
    font-size: 30px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 35px;
    margin-left: 100px;
    margin-bottom: 52px;
}

/* 表单内p标签css */
.loginItemP {
    width: 40px;
    height: 28px;
    font-size: 20px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 23px;
    margin-bottom: 12px;
}

/* 登录按钮css */
.loginButton {
    width: 434px;
    height: 44px;
    background: #6D58AA;
    border-radius: 5px 5px 5px 5px;
    opacity: 1;
    border: none;
    color: white;
}

/* 表单验证p标签css */
.blurP {
    width: 84px;
    height: 20px;
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #FF0000;
    line-height: 16px;
}
</style>