oa-system/src/components/Login.vue

<template>
    <div class="login-all">
        <div class="login-haed">
            <div class="img-logo">
                <div class="logos">
                    <img src="../assets/logo2.png" />
                </div>
                <div class="names">PAN-AMEPICAN INTERNATIONAL</div>
            </div>
            <div class="help-box">
                <div class="help-title">没有企业账户？</div>
                <div class="help-btn">去注册</div>
            </div>
        </div>
        <div class="login-dominant">
            <div class="login-box">
                <div class="login-title">泛美国际 - AI智能办公系统</div>
                <div class="login-input">
                    <el-input class="accounts" placeholder="请输入您的账户" v-model="usernum">
                        <i slot="prefix" class="el-input__icon icon-zhanghu"></i>
                    </el-input>
                    <el-input class="passwords" placeholder="请输入您的密码" show-password v-model="password">
                        <i slot="prefix" class="el-input__icon icon-mima"></i>
                    </el-input>
                    <div class="el-input remembers">
                        <div class="el-input-box">
                            <input id="ckxjz" :checked="msgs" type="checkbox">
                            <span class="two" @click="ckxclick"></span>
                            <label for="ckxjz">记住账户</label>
                        </div>
                        <div class="fotger-pass">
                            忘记密码？
                        </div>
                    </div>
                    <div class="loginbtn-box">
                        <el-button @keyup.enter.native="Login()" @click="Login()" class="loginbtn" v-loading.fullscreen.lock="fullscreenLoading" round>登 录</el-button>
                    </div>
                </div>
                <div></div>
            </div>
        </div>
        <div class="fout-box">
            PAN AMEPICAN INTERNATIONAL OA AI SYSTEM<br>
            © 2023 PAN AMEPICAN INTERNATIONAL CORPOPATION.ALL Rights Reserved.
        </div>
    </div>
</template>

<script>
import Vuex from 'vuex';
import { mapMutations, mapActions } from 'vuex'

export default {
    ...mapMutations(['setphone']),//引入保存phone数据方法
    data() {
        return {
            usernum: '',
            password: '',
            msgs: false,
            fullscreenLoading:false
        }
    },
    methods: {
        ...mapActions(['vlogin']),
        //记住账户click
        ckxclick() {
            if (document.getElementById("ckxjz").checked == true) {
                document.getElementById("ckxjz").checked = false;
            } else {
                document.getElementById("ckxjz").checked = true;
            }
        },
        //登录
        Login() {
            if(this.usernum==""||this.password==""){
                this.$message({
                    message: "请填写账号密码！",
                    type: 'warning'
                });
                return false;
            }
            this.fullscreenLoading=true;
            var url="/api/login"
            var that=this
            this.$axios({
                method: 'post',
                url:url,
                data:{
                    number: this.usernum,
                    password: this.password
                }
            }).then(function(res){
                console.log(res)
                if(res.data.code==200){
                    localStorage.setItem('userinif', JSON.stringify(res.data.data));
                    that.fullscreenLoading=false;
                    that.$router.push('/home/index')
                }else{
                    that.fullscreenLoading=false;
                    that.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                }
            })
        }
    },
    mounted() {
        document.querySelector(".login-all").style.height = window.innerHeight + "px";
        let that = this
        document.onkeydown = function (e) {
            e = window.event || e
            console.log(e.code)
            //保证是在登录页面发出的enter事件
            if (e.code === 'Enter' || e.code === 'enter'|| e.code === 'NumpadEnter') {
                //调用登录函数
                that.Login();
            }
        }
    }
}
</script>
<style scoped>
.fout-box {
    width: 100%;
    text-align: center;
    background-color: #0008;
    padding: 20px;
    color: #fff;
    line-height: 34px;
    position: fixed;
    bottom: 0;
    font-size: 14px;
}

#ckxjz {
    cursor: pointer;
    opacity: 0;
}

#ckxjz[type=checkbox]+span {
    display: inline-block;
    border-radius: 2px;
    width: 15px;
    height: 15px;
    border: 1px solid #FFF;
    background-color: transparent;
    position: absolute;
    left: 0px;
    top: 3px;
    cursor: pointer;
}

#ckxjz[type=checkbox]:checked+span::after {
    content: '\2714';
    color: #fff;
    position: absolute;
    font-size: 20px;
    left: 2px;
    bottom: -2px;
}

.login-all {
    background-image: url("../assets/back.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.login-haed {
    padding: 50px 100px;
    display: flex;
    justify-content: space-between;
}

.img-logo {
    display: flex;
    align-items: center;
}

.logos {
    color: #fff;
    font-size: 48px;
    font-weight: 600;
    font-family: fangsong;
    width: 80px;
    height: 80px;
}

.logos img {
    width: 100%;
}

.names {
    color: #fff;
    margin-left: 20px;
    font-size: 24px;
    font-weight: 600;
    font-family: fangsong;
}

.help-box {
    display: flex;
    align-items: center;
}

.help-title {
    color: #fff;
}

.help-btn {
    margin-left: 20px;
    color: #1DA3D8;
}

.login-box {
    width: 400px;
    height: 300px;
    background-color: rgba(26, 30, 42, 0.7);
    /*background-color: rgba(42,53,88);*/
    margin: 0 auto;
    border-radius: 20px;
    padding: 20px 50px;
    margin-top: 120px;
}

.login-title {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
}

.icon-mima {
    font-weight: 600;

}

.icon-zhanghu {
    color: #1DA3D8;
}

.icon-mima {
    color: #1DA3D8;

}

.remembers {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.fotger-pass {
    color: #1DA3D8;
}

.loginbtn {
    background-color: transparent;
    color: #1DA3D8;
    border: 1px solid #1DA3D8;
}

.loginbtn-box {
    text-align: center;
    padding: 25px;
}
</style>
<style >
body {
    margin: 0;
    padding: 0;

}

.login-input .el-input input {
    border-radius: 20px;
    background-color: transparent;
    color: #fff;
}

.loginbtn-box .el-button.is-round {
    border-radius: 25px;
    padding: 12px 50px;
    font-size: 20px;
}

.login-input .el-input {
    margin-top: 20px;
}

.el-input label {
    color: #fff;
}

.el-input__prefix {
    width: 40px;
}

.el-input--prefix .el-input__inner {
    padding-left: 50px;
}

/*.accounts{
        position: relative;
    }
    .accounts::after{
        content: "请输入您的账户";
        display: inline-block;
        position: absolute;
        color: #fff;
        left: 50px;
        top: -10px;
        background-color: rgba(42,53,88);
        /*background-image: url("../assets/zhedang.png");
    }
    .passwords{
        position: relative;
    }
    .passwords::after{
        content: "请输入您的密码";
        display: inline-block;
        position: absolute;
        color: #fff;
        left: 50px;
        top: -10px;
        background-color: rgba(42,53,88);
        /*background-image: url("../assets/zhedang.png");
    }*/</style>