supermarkpp/src/views/Login.vue

<style lang="scss">
  @import '../style/_base.scss';
  .login{
    height: 100vh;
    min-height: 450px;
    background: url(../assets/bg.png) no-repeat;
    background-size: 100%;
    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:#F2F5F7;
          border-radius:8px;
          border:1px solid #EEEEEE;
          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;
          border:1px solid #EEEEEE;
        }
        img{
          width: 108px;
          height: 54px;
          float: right;
          background-origin: 1px solid red;
        }
      }
      
      .login-btn{
        background: #FF5151;
        width: 100%;
        height: 54px;
        margin-top: 36px;
        font-size: 18px;
        color: #FFF;
        font-weight: 600;
        border:none;
        border-radius: 8px;
      }
    }
    .footer{
      position: fixed;
      width: 100%;
      bottom: 30px;
      left:0;
      z-index: 9;
      text-align: center;
      color:#000;
      font-size: 14px;
      font-weight: bold;
    }
  }
</style>

<template>
  <div class="login">
      <div class="login-div">
        <h1><img width="345" src="../assets/title.png" alt=""></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" @keyup.enter="login" class="login-btn" type="primary">登  录</el-button>
        </form>
      </div>
      <p class="footer">Copyright © {{copyrightdate}} 湖南顽主杯 版权所有&nbsp;&nbsp;<a style="text-decoration:none;color:#000;font-weight:bold;" href="https://beian.miit.gov.cn">湘ICP备2021013011号-1</a></p>
  </div>
</template>

<script>
export default {
  name: 'login',
  data(){
    return{
      tp:'xt',
      code:'',
      logindata:{
        username:'',
        password:'',
        imgcode_id:'',
        imgcode:'',
        utype:2
      },
      copyrightdate:new Date().getFullYear()
    }
  },
  methods:{
      keyupEnter(){
          document.onkeydown = e =>{
              if (e.keyCode === 13) {
                  console.log('enter')
                  this.login()
              }
          }
      },
      login(){
          let parms=this.logindata;
            console.log(parms)
            this.$api.login(parms).then((res)=>{
                let data=res.data
                  if(res.data.code == 0){
                      window.location.hash='/data';
                  }else{
                      this.$message.error(res.data.message);
                  } 
            })
      },
      getCode(){
        this.$api.getCode().then(res=>{
          this.code=res.data.data.imgcode
          this.logindata.imgcode_id=res.data.data.imgcode_id
        })
      }

    },
  created(){
    this.getCode()
  }
}
</script>