<template>
  <div class="login"></div>
  <div class="body">
    <Login @on-submit="handleSubmit">
      <UserName name="username" />
      <Password name="password" />
      <Submit />
    </Login>
  </div>
</template>

<script>
export default {
  data() {
    return {
      autoLogin: true,
    };
  },
  methods: {
    handleSubmit(valid, { username, password }) {
      if (!valid) return;
      this.$Message.success('登录成功'+'username: ' + username + ' | password: ' + password);
      this.$router.push('/home/personnelMatters')
    },
  },
};
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  background-image: url(../../assets/img/loginbg.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: blur(5px);
}

.body {
  position: fixed;
  z-index: 1;
  width: 30em;
  background-color: #ffffff99;
  top: 50%;
  left: 50%;
  border-radius: 15px;
  padding: 15px;
  transform: translate(-50%, -50%);
}
</style>
