<template>
  <div class="LoginItem">
    <LoginForID v-if="navStatus == 1"  @update-nav-status="handleNavStatusUpdate"/>
    <LoginForEmail v-else-if="navStatus == 2"  @update-nav-status="handleNavStatusUpdate"/>
    <FindPassWord v-else  @update-nav-status="handleNavStatusUpdate"/>
  </div>
</template>
<script>
import LoginForEmail from './LoginForEmail.vue';
import LoginForID from './LoginForID.vue';
import FindPassWord from './FindPassWord.vue';
export default {
  name: "LoginItem",
  components: {
    LoginForEmail,
    LoginForID,
    FindPassWord
  },
  data(){
    return{
      navStatus:1, // 1:账号登录 2：邮箱登录 3:找回密码
    }
  },
  mounted(){
    
  },
  methods: {
    handleNavStatusUpdate(newStatus) {
      this.navStatus = newStatus;
    }
  }
}
</script>
<style lang="scss" scoped>
.LoginItem {
  width: 414px;
  height: 563px;
  padding: 29px 29px 0;
  text-align: center;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10px;
  margin-right: 14.5%;
  margin-top: -62px;
}
</style>