ks/vue/src/views/Login/index.vue

<template>
  <div
    ref="login"
    class="login"
    style="position: relative;"
  >
    <div class="card">
      <el-card shadow="hover">
        <div class="icon">
          <img
            src="@/assets/login/u18.svg"
            alt=""
          >
          <p>人员能力评估系统</p>
        </div>
        <div class="form">
          <el-form
            :model="form"
            :rules="rules"
            ref="form"
            label-width="60px"
          >
            <el-form-item prop="username">
              <i
                slot="label"
                class="iconfont icon-zhanghao"
              ></i>
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <i
                slot="label"
                class="iconfont icon-mima"
              ></i>
              <el-input
                type="password"
                v-model="form.password"
              ></el-input>
            </el-form-item>
            <el-form-item label-width="0">
              <el-button
                type="primary"
                @click="Submit('form')"
              >登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
    <img
      style="position:absolute;bottom:0;height:50px"
      src="@/assets/login/1.png"
      alt=""
      class="logo"
    >
  </div>
</template>
<script>
import Login from '@/api/login'
export default {
  data () {
    return {
      form: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          { required: true, message: "请输入账号名称", trigger: 'blur' }
        ],
        password: [{ required: true, message: "请输入账号密码", trigger: 'blur' }]
      }
    }
  },
  mounted () {
    // 监听键盘事件
    this.$refs["login"].addEventListener("keydown", e => {
      if (e.keyCode == 13) this.Submit('form');
    });
  },
  methods: {
    Submit (data) {
      let that = this;
      this.$refs[data].validate((valid) => {
        if (valid) {
          Login.login(that.form).then(res => {
            try {
              let { data } = res, { token, user_id, username } = data;
              sessionStorage.setItem("token", `JWT ${token}`);
              sessionStorage.setItem("user_id", user_id);
              sessionStorage.setItem("username", username)
              that.$router.push({ path: '/' })
            } catch (err) {
              this.$message.error(`数据处理：${err}`);
            }
          });
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.login {
  height: 100vh;
  width: 100vw;
  background-color: #3867b7;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .card {
    width: 350px;
    height: 420px;
    .el-card {
      height: 100%;
      .icon {
        margin: 20px 0;
        text-align: center;
        p {
          margin: 0;
          font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
          font-weight: 700;
          font-style: normal;
          font-size: 24px;
          color: #3867b7;
          line-height: 28px;
        }
      }
      .form {
        margin-top: 20px;
        .el-form-item {
          position: relative;
          i {
            // position: absolute;
            // z-index: 5;
            display: inline-block;
            border: 1px solid #dcdfe6;
            width: 38px;
            text-align: center;
            line-height: 38px;
            box-sizing: border-box;
            border-radius: 4px;
          }
          .el-button {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>