templateel-container class=container el-header style=height 20vh; img class=logoimg alt=logo src=imglogopng el-header el-main el-card class=box-card shadow=hover v-loading=loading el-fo

<template>
<el-container class="container">
  <el-header style="height: 20vh;">
    <img class="logoimg" alt="logo" src="../img/logo.png">
  </el-header>
  <el-main>
    <el-card class="box-card" shadow="hover"  v-loading="loading">
      <el-form class="input" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
          <div>
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
          </div>
          <h3>LoGin IN</h3>
          <el-form-item  label="账号：" prop="loginname">
            <el-input 
            placeholder="请输入账号"
            prefix-icon="el-icon-user"
            v-model="ruleForm.loginname"  clearable >
          </el-input>
          </el-form-item>
        <div class="input-password">
          <el-form-item label="密码：" prop="pass">
            <el-input
              placeholder="请输入密码"
              v-model="ruleForm.pass" show-password >
              <i slot="prefix" class="el-input__icon el-icon-s-management"></i>
            </el-input>
          </el-form-item>
        </div>
        <div class="button">
          <el-button type="danger" @click="forgetPassword" plain style="float: left;" >忘记密码</el-button>
          <el-button type="success"  @click="submit('ruleForm')"  plain style="float: right;">登 录</el-button>
        </div>
      </el-form>
    </el-card>
  </el-main>
  <!-- <el-footer>Footer</el-footer> -->
</el-container>
</template>
<script>
// import RegisterView from './RegisterView';
export default {
  data() {
    return {
      ruleForm: {
          name: '',
          loginname: '',
          pass: '',
        },
      rules: {
          name: [
              { required: true, message: '请输入活动名称', trigger: 'blur' },
              { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          loginname: [
            { required: true, message: '请输入账号', trigger: 'blur' }
          ],
          pass: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 8, message: '长度至少为8', trigger: 'blur' }
          ],
      },
      loading: false
    };
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true;
            setTimeout(() => {
              this.loading = false;
              this.$message({
              message: '登录成功',
              type: 'success'
            });
            }, 2000);
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    forgetPassword() {
      this.$router.push('/forgetPassword');
    },
  },
}
</script>
<style lang="less" scoped>
.logoimg{
  max-width: 200px;
  float: left;
  padding: 30px;
}
.box-card {
    width: 520px;
    height: 380px;
    margin: 0 auto;
  }
.span{
  font-size: 14px;
  color: #2453b1;
}
.el-input{
  width: 300px;
  float: left;
}
.input-login{
  margin-bottom: 20px;
}
.input-password{
  margin-bottom: 20px;
}
.button{
  text-align: center;
  padding: 0 80px;
  padding-top: 20px;
  height: 60px;
}

</style>