<template>
  <div class="login">
    <div class="tab">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="账号登陆" name="first">
          <div class="input-div">
            <img src="./img/phone.png" alt="" class="phone-img">
            <el-input class="phone" v-model="input" placeholder="请输入手机号/邮箱"></el-input>
          </div>
          <div class="input-div">
            <img src="./img/password.png" alt="" class="password-img">
            <el-input v-model="password" class="password" placeholder="请输入登陆密码"></el-input>
          </div>
          <el-checkbox v-model="checked">记住密码</el-checkbox>
        </el-tab-pane>
        <el-tab-pane label="人脸识别" name="second">
          <div class="code">
            人脸扫描
          </div>
        </el-tab-pane>
      </el-tabs>
      <div v-if="activeName === 'first'">
        <el-button type="primary">登陆</el-button>
        <el-button>取消</el-button>
      </div>
      <a href="" class="left">下载浏览器</a>
      <a href="" class="right">立即注册</a>
    </div>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      activeName: 'first',
      input: '',
      password: '',
      checked: false
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>

<style scoped lang="less">
.login {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: url("./img/login.png") no-repeat;
  background-size: cover;
}

/deep/ .el-tabs__item {
  font-size: 30px !important;
  padding-bottom: 10px;
  height: 50px;
}

.tab {
  width: 500px;
  height: 603px;
  position: absolute;
  top: 284px;
  left: 12%;

  .phone {
    display: inline;
    margin-bottom: 30px;
  }

  .phone-img {
    position: absolute;
    width: 22px;
    height: 28px;
    top: 69px;
  }

  .password-img {
    width: 21px;
    height: 21px;
    position: absolute;
    top: 191px;
  }


}

.input-div {
}

.code {
  width: 100px;
  height: 100px;
  background-color: #fff;
}

.left, .right {
  position: absolute;
  color: #fff;
  bottom: 15px;
  font-size: 20px;
}

.left {
  left: -10px;
}

.right {
  right: -10px;
}


/deep/ .el-input__inner {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-bottom: 3px solid #fff;
  border-radius: 0;
  height: 48px;
  padding-bottom: 28px;
  margin-top: 72px;
  padding-left: 70px !important;
  font-size: 19px;
  font-weight: 1000;
  color: #fff;
  padding-left: 22px;
}

/deep/ .el-tabs__content {
  text-align: left;
}

/deep/ .el-checkbox {
  margin-top: 33px;
  font-size: 20px;
}

/deep/ .el-checkbox__label {
  font-size: 20px;
  font-weight: 1000;
  color: white;
}

/deep/ .el-checkbox__inner {
  width: 25px;
  height: 25px;
  font-size: 20px;
}

/deep/ .el-button {
  height: 50px;
  width: 188px;
  font-weight: bold;
  font-size: 23px;
  margin-top: 71px;

}

/deep/ .el-button--default {
  margin-left: 93px;
}

/deep/ .el-button--primary {
  margin-left: 18px;
}

</style>
