登录

/////css代码
<template>
///loading动画
    <div
            class="login-page"
            v-loading="loading"
            element-loading-text=""
            element-loading-spinner="date"
            element-loading-background="rgba(0, 0, 0, 0)"
    >
        <div class="content">
            <div class="content-box left">
                <img class="logo" src="../../assets/images/login/logo.png" />
                <img class="title" src="../../assets/images/login/login-title.png" />
            </div>
            <div class="content-box right">
                <span class="title">登录</span>

                <!--        <el-alert-->
                <!--          class="alert"-->
                <!--          :closable="false"-->
                <!--          title="错误提示的文案"-->
                <!--          type="error"-->
                <!--          show-icon>-->
                <!--        </el-alert>-->

                <el-input
                        placeholder="请输入账号"
                        v-model="fromData.user"
                        class="input-box"
                >
                    <i slot="prefix" class="iconfont icon-zhanghao left-icon"></i>
                </el-input>

                <el-input
                        placeholder="请输入密码"
                        v-model="fromData.password"
                        show-password
                        class="input-box"
                >
                    <i slot="prefix" class="iconfont icon-mima left-icon"></i>
                </el-input>

                <el-input
                        placeholder="请输入图形验证码"
                        v-model="fromData.code"
                        class="input-box"
                        @keyup.enter.native="login()"
                >
/////////////验证码
                    <i slot="prefix" class="iconfont icon-yanzhengma left-icon"></i>
                    <img
                            slot="suffix"
                            class="code-img"
                            :src="codeImg"
                            @click="captchaCode"
                    />
                </el-input>

                <el-button class="login-btn" @click="login">立即登录</el-button>

                <div class="bottom-box">
<!--                    <span @click="$router.push({ path: '/retrievePassword' })">忘记密码</span>-->
                    <span @click="$router.push({ path: '/register' })">新用户注册</span>
                </div>
            </div>
        </div>
    </div>
</template>
js代码
<script>
    export default {
        name: "login",
        data() {
            return {
                loading:true,
                fromData: {
                    // 用户名
                    user: "",
                    // 密码
                    password: "",
                    // 验证码
                    code: ""
                },
                codeImg: "",
                vertifyid: ''
            };
        },
        mounted() {
            this.captchaCode();
        },
        methods: {
            login() {
                let that = this;
                if (this.fromData.user === '' || this.fromData.password === '') {
                    this.$message({
                        type: "error",
                        message: '账号或密码不能为空'
                    });
                }else{
                    that.loading = true;
                    this.$http.post('/v1/api/user/login',{name:this.fromData.user,password:this.fromData.password,verifyId:this.vertifyid,verifyCode:this.fromData.code}).then(res => {
                        that.loading = false;
                        if(res.data.code == 1005){
                            //入驻
                            localStorage.setItem('Authorization', res.data.data);
                            localStorage.setItem('username', this.fromData.user);
                            localStorage.setItem('isSettlement', false);
                            that.$router.push('./');
                        }else if(res.data.code != 200){
                            that.$message({
                                type: 'error',
                                message: res.data.message
                            });
                            this.captchaCode();
                        }else{
                            localStorage.setItem('Authorization', res.data.data);
                            localStorage.setItem('username', this.fromData.user);
                            localStorage.setItem('isSettlement', true);
                            that.$router.push('./');
                        }
                        window.sessionStorage.clear();
                    }, err => {

                    }).catch((error) => {

                    });
                }
            },
///////////////验证码
            captchaCode(){
                this.$http.get('/v1/api/user/image/code').then(res => {
                    if(res.data.code === 200){
                        this.codeImg = res.data.data.imageBase64;
                        this.vertifyid = res.data.data.imageVerityCode;
                        this.loading = false;
                    }
                }, err => {

                }).catch((error) => {

                });
            }
        }
    };
</script>

<style lang="less" scoped>
    .login-page {
        width: 100vw;
        height: 100vh;
        background: url(../../assets/images/login/login-bg.png) no-repeat;
        background-size: 100%;
        width: 100vw;
        height: 100vh;
        box-sizing: border-box;
        background-color: #f5f7fa;

        /deep/.el-loading-spinner {
            background: url("../../assets/images/login/loading.gif") no-repeat;
            background-size: 70px;
            background-position: 50% 40%;
            height: 100px;
        }
        /deep/.el-loading-text {
        }
        .content {
            width: 1200px;
            height: 100%;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: center;

            .content-box {
                display: flex;
                flex-direction: column;

                &.left {
                    width: calc(100% - 366px);

                    .logo {
                        width: 37%;
                        margin-bottom: 35px;
                    }

                    .title {
                        width: 80%;
                        position: relative;
                        left: -9px;
                    }
                }

                &.right {
                    width: 366px;
                    background-color: #fff;
                    border-radius: 4px;
                    padding: 32px 40px 25px;
                    box-sizing: border-box;

                    .title {
                        color: #303133;
                        font-size: 22px;
                        padding-bottom: 10px;
                    }

                    .alert {
                        border: 1px solid #ffa39e;
                        background-color: #fff1f0;
                    }

                    .left-icon {
                        color: #009688;
                        margin-right: 8px;
                    }

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

                    .code-img {
                        width: 86px;
                        height: 38px;
                    }

                    .input-box {
                        margin-top: 15px;
                        font-size: 16px;
                    }

                    .login-btn {
                        background-color: #009688;
                        border-color: #009688;
                        color: #ffffff;
                        margin-top: 32px;
                        font-size: 16px;

                        &:hover {
                            background-color: #0a6980;
                            border-color: #0a6980;
                        }
                    }

                    .bottom-box {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding-top: 14px;

                        span {
                            font-size: 16px;
                            color: #19213d;
                            cursor: pointer;

                            &:last-child {
                                color: #009688;
                            }
                        }
                    }
                }
            }
        }
    }
</style>