
<template>
  <div class="login">
    <div class="tab">
        <div style="width: 100%;text-align: center">
          <div class="tab-wrapper">
            <img alt="" style="display: inline-block;position: absolute;top:50px;" :class="flag1? 'active1':'active2'" src="./img/img_2.png">
            <div @click="handleChange" class="tab1" :class="flag1? 'active':''">账号登陆</div>
            <img alt="" style="display: inline-block;position: absolute;top:-12px;" src="./img/split.png">
            <div @click="handleChange" class="tab2" :class="flag2? 'active':''">人脸识别</div>
          </div>
          <div v-if="flag1">
            <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>
            <div style="text-align: left">
            <el-checkbox v-model="checked">记住密码</el-checkbox>
            </div>
          </div>
          <div v-if="flag2">
            <div class="code">
              人脸扫描
            </div>
          </div>
        </div>
      <div v-if="activeName === 'first'" class="button-div">
        <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,
      flag1: true,
      flag2: false
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleChange() {
      this.flag1 = !this.flag1
      this.flag2 = !this.flag2
    }
  }
}
</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__nav {
  float: none;
}


/deep/ .el-tabs__active-bar {
  display: none;
}

/deep/ .el-tabs__item {

}

.tab-wrapper {
  width: 500px;
  text-align: center;

  .tab2 {
    margin-left: 33px;
  }
  .tab1 {
    margin-right: 33px;
  }

  .tab1,.tab2 {
    width: 104px;
    font-size: 24px !important;
    font-weight: 1000;
    height: 50px;
    color: white;
    display: inline;


    &:hover {
      cursor: pointer
    }
  }

  .active {

  }
  .active1{
    left: 147px;
  }

  .active2{
    left: 310px;
  }




  .line {
    width: 2px;
    height: 20px;
    background-color: #000;
  }
}

.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: 100px;
  }

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


}

.button-div {
  text-align: left;
}

.input-div {
}

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

.left, .right {
  position: absolute;
  color: #fff;
  bottom: 15px;
  font-size: 20px;
  color: rgb(0, 255, 231);
}

.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;
  border-radius: 5px;
  background-image: url("./img/img2.png")
}

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

}

/deep/ .el-button--default {
  margin-left: 46px !important;
  border: 3px solid rgb(23, 73, 146);
  background-color: rgb(8, 38, 88);
}

/deep/ .el-button--primary {
  margin-left: 18px;
  background-image: url("./img/img.png")
}

</style>
