BusinessBenchmark/src/views/Login.vue

<template>
  <div class="loginPic">
        <!-- <div class="login_left">
            <p>Welcome!</p>
            <p class="title">光耀集中式风电功率预测系统</p>
        </div> -->
        <div class="login_right">
            <img class="titleIcon" src="../assets/loginImage/logo.png" alt="">
            <div class="loginCom" style="margin-bottom: 30px">
                <img class="userIcon" src="../assets/loginImage/userIcon.png" alt="">
                <el-input v-model="inputUser" placeholder="请输入用户名" />
            </div>
            <div class="loginCom" style="margin-bottom: 16px">
                <img class="passwordIcon" src="../assets/loginImage/passwordIcon.png" alt="">
                <el-input type="password" v-model="inputMima" placeholder="请输入密码" />
            </div>
            <div class="remeber">
                    <el-checkbox v-model="ememberMe" disabled>记住密码</el-checkbox>
            </div>
            <div class="loginBtn" @click="handleLogin">
                <span class="loginSpan">登录</span>
            </div>
        </div>
        <!--  底部  -->
            <!-- <div class="loginFooter">
                <span>Copyright © 2021-2022 GuangYaoDianLi All Rights Reserved.</span>
            </div> -->
  </div>
</template>

<script>
import { setToken } from '@/api/auth'
import { ElMessage } from "element-plus";
import { loginApi, apiGetCodeByToken } from '../api/api'
export default {
    data() {
        return {
            inputUser:'testdbkp',
            inputMima:'Gddl!#%135',
            codeUrl:'',
            ememberMe:false,
            loading:false,
            loginText: ''
        }
    },
    created() {
    },
    methods:{
        handleLogin() {
            if (this.inputUser !== '' && this.inputMima !== '') {
                this.getLogin(this.inputUser, this.inputMima)
            } else {
                ElMessage.error('请输入账号或密码');
            }
        },
        //登录接口
        getLogin(userName, password) {
            // setToken('userMsg', params)
            let that = this
            loginApi(userName, password).then(datas=>{
                if (datas) {
                    setToken('token', datas.data.access_token)
                    that.getTokenCode(datas.data.access_token)
                } else {
                    ElMessage.error(datas.data.msg);
                }
            }).catch(e =>{
                that.loading = false
            })
            // this.$router.push({ path: "/home"})
        },
        // 根据token获取code
        getTokenCode(val) {
            let that = this
            apiGetCodeByToken(val).then(datas =>{
                if (datas && datas.data) {
                    setToken('code', datas.data)
                    that.$router.push({ path: "/home"})
                }
            })
        }
    }
}
</script>


<style lang="scss">
@media screen and (max-width: 1200px) {
    .loginPic{
        .login_left {
            display: none;
        }
    }
}
.loginPic{
    position: relative;
    width: 100%;
    height:1080px;
    background-image: url('../assets/loginImage/loginBak.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    display: flex;
    .login_left{
        position: fixed;
        left: 15%;
        top: 35%;
        p{
            margin-bottom: 0px;
            font-size: 32px;
            color: #fff;
            margin-top: 10px;
        }
        .title{
            letter-spacing: 5px;
        }
    }
    .login_right{
        width: 470px;
        height:680px;
        background: rgba(0,0,0,0.4);
        position: fixed;
        right: 15%;
        top: 15%;
        .titleIcon{
            margin: 100px 0px 43px 95px;
        }
        .loginCom{
            margin: 0 30px 0px 43px;
            width: 384px;
            height: 56px;
            background: #1B1A1F;
            border-radius: 5px;
            display: flex;     
            .userIcon {
                width: 24px;
                height: 24px;
                margin: 16px;
            }   
            .passwordIcon {
                width: 24px;
                height: 24px;
                margin: 16px;
            }
            .el-input{
                border: 0 solid transparent;
                .el-input__wrapper{
                    background: transparent;
                    box-shadow: none;
                    .el-input__inner, .el-input__inner:focus{
                        background: none;
                        border: none !important;
                        color: #fff;
                        height: 30px;
                        width: 100%;
                        font-size: 14px;
                    }
                }
            }
        }
        .remeber{
            margin: 0 0 0 50px;
            .el-checkbox{
                .el-checkbox__label{
                    color: #fff;
                    font-size: 12px;
                    padding-left:6px;
                }
            }
        }
        .loginBtn{
            margin: 48px 0 0 43px;
            width: 384px;
            height: 56px;
            background-image: url('../assets/loginImage/loginBtn.png');
            cursor: pointer;
            .loginSpan{
                position: relative;
                top: 27%;
                left: 45%;
                font-size: 18px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #FFFFFF;
            }
        }
        input::-webkit-input-placeholder{ /*WebKit browsers*/
            color: #fff;
        }
        input::-moz-input-placeholder{ /*Mozilla Firefox*/
            color: #fff;
        }
        input::-ms-input-placeholder{ /*Internet Explorer*/
            color: #fff;
        }
    }
    .loginFooter{
        height: 40px;
        line-height: 40px;
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: #fff;
        font-family: Arial;
        font-size: 12px;
        letter-spacing: 1px;
    }
}
</style>