yfadmin_web/src/views/Login.vue

<style lang="scss">
  @import '../style/_base.scss';
  .login{
    height: 100vh;
    min-height: 450px;
    background: url(../assets/bg.png) 100%;
    background-position: center bottom; 
    // background: #1F315D;
    position: relative;
    .login-div{
      width:520px;
      height:448px;
      background:#FFFFFF;
      box-shadow:0px 12px 24px 0px rgba(0,0,0,0.24);
      border-radius:8px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      padding:48px  75px;
      h1{
        text-align: center;
        margin-bottom: 40px;
        font-size: 28px;
      }
      .input_div{
        position: relative;
        margin-bottom: 12px;
        input{
          padding-left: 80px;
          outline: none;
          background:rgba(242,245,247,1);
          border-radius:8px;
          border:1px solid rgba(238,238,238,1);
          display: block;
          height: 54px;
          width: 100%;
          font-size: 16px;
        }
        label{
          color: #222;
          font-size: 16px;
          position: absolute;
          left: 16px;
          top:16px;
          z-index: 99;
        }
      }
      .code{
        input{
          width: 250px;
        }
        img{
          width: 108px;
          height: 54px;
          float: right;
          background-origin: 1px solid red;
        }
      }
      
      .login-btn{
        background: #066FE6;
        width: 100%;
        height: 54px;
        margin-top: 36px;
        font-size: 18px;
        color: #FFF;
        font-weight: 600;
        border:none;
        border-radius: 8px;
      }
    }
  }
</style>

<template>
  <div class="login">
      <div class="login-div">
        <h1>巴中逸沣安全培训</h1>
        <form>
            <div class="input_div">
              <label>用户名</label>
              <input type="text" v-model="logindata.username" placeholder="请输入用户名">
            </div>
            <div class="input_div">
              <label>密&nbsp;&nbsp;码</label>
              <input type="password" v-model="logindata.password" placeholder="请输入密码">
            </div>
            <div class="input_div code">
              <img @click="getCode" :src="code" alt="">
              <label>图形码</label>
              <input type="text" v-model="logindata.imgcode" placeholder="请输入验证码">  
            </div>
            <el-button @click="login" class="login-btn" type="primary">登  录</el-button>
        </form>
      </div>
  </div>
</template>

<script>
// import { Base64 } from 'js-base64';
export default {
  name: 'login',
  data(){
    return{
      code:'',
      logindata:{
        username:'',
        password:'',
        imgcode_id:'',
        imgcode:''
      }
    }
  },
  methods:{
      login(){
          let parms=this.logindata;   
            this.$api.login(parms).then((res)=>{
                let data=res.data
                  if(res.data.code == 0){
                      window.location.hash='/';
                  }else{
                      this.$message.error(res.data.message);
                  } 
            })
            .catch(err=>{
              this.$message.error(res.data.message);
            })
      },
      getCode(){
        this.$api.getCode().then(res=>{
          this.code=res.data.data.ubase64
          this.logindata.imgcode_id=res.data.data.captcha_id
        })
      }
    },
  created(){
    this.getCode();
  }
}
</script>