<template>
<div class="login">
  <div class="infos">
    <div class="top">
      <img src="../static/img/logo.jpg" class="logo">
      <h1>高考志愿填报</h1>
    </div>
    <a-form
        name="custom-validation"
        ref="formRef"
        :model="formState"
        v-bind="layout"
        @finish="handleFinish"
        @finishFailed="handleFinishFailed"
    >
      <a-form-item has-feedback  name="pass">
        <a-input type="password" autocomplete="off" placeholder="请输入用户名" class="shuru"/>
      </a-form-item>
      <a-form-item has-feedback  name="checkPass">
        <a-input  type="password" autocomplete="off" placeholder="请输入密码" class="shuru"/>
      </a-form-item>
      <a-button type="primary" class="shuru">登录</a-button>

    </a-form>

  </div>

</div>
</template>

<script>
export default {
  name: "login"
}
</script>

<style scoped lang="scss">
.login{
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
.top{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 70px;
  margin-bottom: 30px;
  .logo{
    width:140px;
    height: 140px;
    margin-right: 20px;
  }
}
  .infos{
    margin: 0 auto;
    .shuru{
      width: 400px;
    }
  }
}
</style>