<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      margin: 0;
    }
    li {
      list-style-type: none;
    }
    @media screen and (orientation: portrait) {
    .login {
      width: 100vw;
      height: 100vh;
      background-image: url("/static/img/phoneBgc.jpg");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .register {
      background-image: url("/static/img/registerBgc.jpg") !important;
      padding-top: 15vh;
    }
    .logo {
      width: 15vw;
      margin: 4vw 0 0 4vw;
    }
    .login_title {
      width: 100vw;
      font-size: 8vw;
      text-align: center;
      margin-top: 15vh;
    }
    .register_loginTitle {
      width: 100vw;
      font-size: 8vw;
      text-align: center;
    }
    .input_box {
      width: 100vw;
      height: 25vw;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 5vh;
      position: relative;
    }
    .register_inputBox {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 5vh;
      position: relative;
    }
    .phone_input{
      width: 50vw;
      height: 11vw;
      border-radius: 2vw;
      background-color: transparent;
      font-size: 3vw;
      padding-left: 2vw;
      border: 1px solid #000;
      position: absolute;
      top: 0vw;
    }
    .register_phoneInput {
      width: 50vw;
      height: 5vh;
      border-radius: 2vw;
      background-color: transparent;
      font-size: 3vw;
      padding-left: 2vw;
      border: 1px solid #000;
      margin-bottom: 2vh;
    }
    .code_input {
      width: 50vw;
      height: 11vw;
      margin-top: 2vh;
      border-radius: 2vw;
      padding-left: 2vw;
      font-size: 3vw;
      background-color: transparent;
      border: 1px solid #000;
      position: absolute;
      top: 10vw;
    }
    .register_codeInput {
      width: 50vw;
      height: 5vh;
      border-radius: 2vw;
      background-color: transparent;
      font-size: 3vw;
      padding-left: 2vw;
      border: 1px solid #000;
    }
    .login_button {
      width: 40vw;
      height: 5vh;
      background-color: rgb(101, 161, 255);
      border-radius: 10vw;
      display: flex;
      justify-content: center;
      align-items: center;
      color:#fff;
      font-size: 4vw;
      margin: 2vh 0  0 30vw;
    }
    .register_loginButton {
      width: 40vw;
      height: 5vh;
      background-color: rgb(101, 161, 255);
      border-radius: 10vw;
      display: flex;
      justify-content: center;
      align-items: center;
      color:#fff;
      font-size: 4vw;
      margin: 2vh 0  0 30vw;
    }
    .send_code {
      position: absolute;
      font-size: 2.5vw;
      top: 18.5vw;
      right: 30vw;
      border-left: 2px solid;
      padding-left: 2vw;
    }
    .employee {
      display: flex;
      align-items: center;
    }
    .administrator {
      display: flex;
      align-items: center;
      margin-left: 5vw;
    }
    .choose_employee {
      width: 2vw;
      height: 2vw;
      border-radius: 50%;
      border: 2px solid #000;
      margin-right: 1vw;
    }
    .choose_administrator {
      width: 2vw;
      height: 2vw;
      border-radius: 50%;
      border: 2px solid #000;
      margin-right: 1vw;
    }
    .login_style {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2.5vw;
      margin-top: 2vh;
    }
    .hidden {
      display: none;
    }
    .active {
      display: flex;
    }
    .background {
      background-color: #000;
    }
    .password-container {
      position: relative;
    }
    .password_toggle {
      position: absolute;
      width: 5vw;
      top: 18vw;
      right: 26vw;
    }
    .approval_page {
      width: 100vw;
      height: 100vh;
      background-image: url("/static/img/registerBgc.jpg");
      background-size: 100% 100%;
      overflow: auto;
    }
    .approval_box {
      max-width: 100vw;
      min-height: 100vh;
      background-color:rgba(237,237,237,0.8);
    }
    .search_people {
      width: 80vw;
      height: 5vh;
      border-radius: 1vw;
      margin: 5vh 0 0 10vw;
      border: 0 solid #fff;
      font-size: 3vw;
      text-align: center;
    }
    .every_info {
      height: 7vh;
      margin-top: 3vh;
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 3vw;
    }
    #scroll-to-top-btn {
      display: none;
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 7vw;
      height: 10vh;
      color: #fff;
      border: none;
      border-radius: 5px;
      font-size: 3vw;
      cursor: pointer;
    }
    .people_img {
      width: 6vh;
      height: 6vh;
    }
    .pass_nopass {
      display: flex;
    }
    .pass {
      background-color: rgb(92, 186, 45);
    width: 10vw;
    height: 5vw;
    border-radius: 1vw;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    .no_pass {
      background-color: rgb(187, 44, 45);
    width: 10vw;
    height: 5vw;
    border-radius: 1vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 2vw;
    }
    .goTop_img {
      width: 6vw;
      height: 6vw;
    }
  }
@media screen and (orientation: landscape) {
  input:focus {
      border: 0.1vw solid #000;
      outline: none; /* 可选，用于去除默认的外边框样式 */
  }
  .login {
      width: 100vw;
      height: 100vh;
      background-image: url("/static/img/phoneBgc_pc.jpg");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: relative;
    }
    .PC_img {
      width: 52.6vw;
      height: 64.44vh;
      background-image: url("/static/img/loginBox.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: absolute;
      top: 18.88vh;
      left: 23.7vw;
    }
    .register {
      background-image: url("/static/img/registerBgc_pc.jpg") !important;
    }
    .logo {
      width: 15vh;
      margin: 4vh 0 0 4vh;
    }
    .login_title {
      /* width: 100vw; */
      font-size: 4vh;
      text-align: center;
      position: absolute;
      z-index: 10;
      top: 28vh;
      margin-left: 58vw;
      /* margin-top: 15vh;*/
    }
    .register_loginTitle {
      width: 100vw;
      display: flex;
      justify-content: center;
      font-size: 4vh;
      text-align: center;
      position: absolute;
      z-index: 10;
      top: 10vh;
    }
    .uploadImg {
      width: 15vw;
    }
    .input_box {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 15vh;
      position: relative;
    }
    .register_inputBox {
      width: 100vw;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      padding-top: 42vh;
    }
    .phone_input{
      width: 15vw;
      height: 6.66vh;
      border-radius: 2vh;
      background-color: transparent;
      font-size: 2vw;
      padding-left: 2vh;
      padding-right: 5vw;
      border: 0.1vw solid #000;
      margin-left: 25vw;
    }
    .register_phoneInput {
      width: 37vh;
      height: 6vh;
      border-radius: 2vh;
      background-color: transparent;
      font-size: 3vh;
      border: 0.1vw solid #000;
      margin-bottom: 5vh;
      padding-left:1vw ;
    }
    .register_codeInput {
      width: 37vh;
      height: 6vh;
      border-radius: 2vh;
      background-color: transparent;
      font-size: 3vh;
      border: 0.1vw solid #000;
      padding-left: 1vw ;
    }
    .code_input {
      width: 15vw;
      height: 6.66vh;
      margin-top: 2vw;
      border-radius: 2vh;
      padding-left: 2vh;
      font-size: 1.5vw;
      padding-right: 5vw;
      background-color: transparent;
      border: 0.1vw solid #000;
      margin-left: 25vw;
    }
    .login_button {
      width: 16vw;
      height: 3vw;
      background-color: rgb(101, 161, 255);
      border-radius: 10vh;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 2vw;
      /* margin: 2vh 0 0 30vh; */
      position: absolute;
      left: 55vw;
      top: 65vh;
    }
    .register_loginButton {
      width: 30vh;
      height: 3vw;
      background-color: rgb(101, 161, 255);
      border-radius: 1vw;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 3vh;
      position: absolute;
      left: 42.5vw;
      top: 65vh;
    }
    .send_code {
      position: absolute;
      font-size: 1.5vh;
      top: 11.5vh;
      right: 27.3vw;
      border-left: 0.1vw solid;
      padding-left: 1vh;
      display: flex;
    align-items: center;
    height: 3vw;
    }
    .employee {
      display: flex;
      align-items: center;
    }
    .administrator {
      display: flex;
      align-items: center;
      margin-left: 3vw;
    }
    .hand:hover{
       cursor: pointer;
    }
    .choose_employee {
      width: 2vh;
      height: 2vh;
      border-radius: 50%;
      border: 0.1vw solid #000;
      margin-right: 1vh;
    }
    .choose_administrator {
      width: 2vh;
      height: 2vh;
      border-radius: 50%;
      border: 0.1vw solid #000;
      margin-right: 1vh;
    }
    .login_style {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1vw;
      margin-top: 2vw;
      position: absolute;
      left: 54.8vw;
    }
    .hidden {
      display: none;
    }
    .active {
      display: flex;
    }
    .background {
      background-color: #000;
    }
    .password-container {
      position: relative;
    }
    .password_toggle {
      width: 3vw;
      position: absolute;
      font-size: 1.5vh;
      top: 11.5vh;
      right: 28.5vw;
      padding-left: 0.5vh;
    }
    .approval_page {
      width: 100vw;
      height: 100vh;
      background-image: url("/static/img/registerBgc.jpg");
      background-size: 100% 100%;
      overflow: auto;
    }
    .approval_box {
      max-width: 100vw;
      min-height: 100vh;
      background-color:rgba(237,237,237,0.8);
    }
    .search_people {
      width: 60vw;
      height: 6vh;
      border-radius: 1vh;
      margin: 5vh 0 0 20vw;
      border: 0 solid #fff;
      font-size: 3vh;
      text-align: center;
    }
    .every_info {
      height: 7vw;
      margin-top: 3vw;
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 3vh;
    }
    #scroll-to-top-btn {
      display: none;
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 7vh;
      height: 10vw;
      color: #fff;
      border: none;
      border-radius: 5px;
      font-size: 3vh;
      cursor: pointer;
    }
    .people_img {
      width: 6vw;
      height: 6vw;
    }
    .pass_nopass {
      display: flex;
    }
    .pass {
      background-color: rgb(92, 186, 45);
      width: 10vh;
      height: 5vh;
      border-radius: 1vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .no_pass {
      background-color: rgb(187, 44, 45);
      width: 10vh;
      height: 5vh;
      border-radius: 1vh;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 2vh;
    }
    .goTop_img {
      width: 6vh;
      height: 6vh;
    }
  }

    .list_box{
      padding-inline-start: 0px;
    }

    .uploadImg{
      width: 48% !important;
      transform: translate(0%, 0%) !important;
    }

    .upload-img-box {
      position: relative;
    }

    .upload-img-box .input-box {
      display: inline-block;
      width: 144px;
      height: 144px;
      /*border: solid black 1px;*/
    }

    .upload-img-box .befor-img {
      display: flex;
      /*width: 300px;*/
      /*height: 90px;*/
      /*border: solid black 1px;*/
      position: absolute;
      top: 0px;
      left: 0px;
      /*background: #ffffff;*/
      z-index: 30;
      align-items: center;
      justify-content: center;
    }

    .upload-img-box .befor-img.hasImg {
      display: none;
    }

    .upload-img-box .after-img {
      display: inline-block;
      width: 144px;
      height: 144px;
      border: none;
      /*position: absolute;*/
      top: 0px;
      left: 0px;
      /*background: #ffffff;*/
      z-index: 20;
    }

    .after-img img, .uploadImg {
      /*position: absolute;*/
      width: 100%;
      height: 100%;
      object-fit: cover; /*根据父容器的尺寸裁剪和缩放图片，以填充整个容器，并保持长宽比例不变。*/
      object-position: center; /*指定对象的位置，如果不设置，则默认是center*/
      background-size: cover; /*背景图片的大小，如果不设置，则默认是auto*/
      background-position: center;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 0%);/*将元素移动到中心*/
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <!-- 登录页面 -->
  <div  class="login">
    <img class="logo" src="/static/img/logo.png" alt="">
    <div class="PC_img"></div>
    <div class="login_title">请 登 录</div>
    <div id="employeeForm" class="input_box hidden active">
      <input class="phone_input" type="text" placeholder="请输入手机号">
      <input class="code_input" type="text" placeholder="请输入验证码">
      <div class="send_code hand">发送验证码</div>
    </div>
    <div id="adminForm" class="input_box hidden password-container">
      <input class="phone_input" type="text" placeholder="请输入账号">
      <input id="password-input" class="code_input" type="password" placeholder="请输入密码">
      <img id="password_toggle" class="password_toggle hand" src="/static/img/close.png" alt="">
    </div>
    <div class="login_style">
      <div id="employeeBtn" class="employee hand">
        <div id="choose_employee" class="choose_employee background"></div>
        <div>员工登录</div>
      </div>
      <div id="adminBtn" class="administrator hand">
        <div id="choose_administrator" class="choose_administrator"></div>
        <div>管理员登录</div>
      </div>
    </div>
    <div class="login_button hand">登 录</div>
  </div>
  <!-- 注册页面 -->
  <div style="display: none;" class="register login">
    <div class="register_loginTitle ">
      <div class="upload-img-box">
        <div class="input-box">
          <input type="file" id="img-file" hidden="hidden" name="选择图片">
        </div>
        <div class="befor-img">
          <img class="uploadImg hand" src="/static/img/upload.png" alt="">
        </div>
        <div class="after-img">
          <img id="img-box" src="" width="30%" height="auto">
        </div>
      </div>

    </div>
    <div class="register_inputBox">
      <input class="register_phoneInput" type="text" placeholder="员工编号">
      <input class="register_codeInput" type="text" placeholder="员工姓名">
    </div>
    <div class="register_loginButton hand">注册人脸</div>
  </div>
  <!-- 管理员页面 -->
  <div style="display: none;" class="approval_page">
    <div id="scroll_box" class="approval_box">
      <input  id="search" class="search_people" type="text" placeholder="🔍 搜索">
      <ul  class="list_box">
        <li class="every_info">
          <img class="people_img" src="/static/img/logo.png" alt="">
          <div class="name">张三</div>
          <div class="people_code">001</div>
          <div class="pass_nopass">
            <div class="pass">通过</div>
            <div class="no_pass">不通过</div>
          </div>
        </li>
        <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">
          <div class="name">张三</div>
          <div class="people_code">001</div>
          <div class="pass_nopass">
            <div class="pass">通过</div>
            <div class="no_pass">不通过</div>
          </div></li>
        <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">
          <div class="name">张三</div>
          <div class="people_code">001</div>
          <div class="pass_nopass">
            <div class="pass">通过</div>
            <div class="no_pass">不通过</div>
          </div></li>
        <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">
          <div class="name">张三</div>
          <div class="people_code">001</div>
          <div class="pass_nopass">
            <div class="pass">通过</div>
            <div class="no_pass">不通过</div>
          </div></li>
        <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">
          <div class="name">张三</div>
          <div class="people_code">001</div>
          <div class="pass_nopass">
            <div class="pass">通过</div>
            <div class="no_pass">不通过</div>
          </div></li>
        <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">
          <div class="name">张三</div>
          <div class="people_code">001</div>
          <div class="pass_nopass">
            <div class="pass">通过</div>
            <div class="no_pass">不通过</div>
          </div></li>
        <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">
          <div class="name">张三</div>
          <div class="people_code">001</div>
          <div class="pass_nopass">
            <div class="pass">通过</div>
            <div class="no_pass">不通过</div>
          </div></li>
        <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">
          <div class="name">张三</div>
          <div class="people_code">001</div>
          <div class="pass_nopass">
            <div class="pass">通过</div>
            <div class="no_pass">不通过</div>
          </div></li>
        <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">
          <div class="name">张三</div>
          <div class="people_code">001</div>
          <div class="pass_nopass">
            <div class="pass">通过</div>
            <div class="no_pass">不通过</div>
          </div></li>
        <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">
          <div class="name">张三</div>
          <div class="people_code">001</div>
          <div class="pass_nopass">
            <div class="pass">通过</div>
            <div class="no_pass">不通过</div>
          </div></li>
        <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">
          <div class="name">张三</div>
          <div class="people_code">001</div>
          <div class="pass_nopass">
            <div class="pass">通过</div>
            <div class="no_pass">不通过</div>
          </div></li>
        <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">
          <div class="name">张三</div>
          <div class="people_code">001</div>
          <div class="pass_nopass">
            <div class="pass">通过</div>
            <div class="no_pass">不通过</div>
          </div></li>
        <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">
          <div class="name">张三</div>
          <div class="people_code">001</div>
          <div class="pass_nopass">
            <div class="pass">通过</div>
            <div class="no_pass">不通过</div>
          </div></li>
        <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">
          <div class="name">张三</div>
          <div class="people_code">001</div>
          <div class="pass_nopass">
            <div class="pass">通过</div>
            <div class="no_pass">不通过</div>
          </div></li>
        <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">
          <div class="name">张三</div>
          <div class="people_code">001</div>
          <div class="pass_nopass">
            <div class="pass">通过</div>
            <div class="no_pass">不通过</div>
          </div></li>
        <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">
          <div class="name">张三</div>
          <div class="people_code">001</div>
          <div class="pass_nopass">
            <div class="pass">通过</div>
            <div class="no_pass">不通过</div>
          </div></li>
      </ul>
    </div>
    <a id="scroll-to-top-btn" href="">
      <img class="goTop_img" src="/static/img/goTop.png" alt="">
    </a>
  </div>
  <script src="/static/js/jquery.min.js"></script>
  <script>
    $(function(){
      $(".login_button").on("click",function(){
        console.log("click");
        $(".login").css("display","none");
        // $(".approval_page").css("display","block");
        $(".register").css("display","block");
      })


      $(document).on("click", ".upload-img-box .befor-img,.upload-img-box .after-img", function (e) {
        $(".input-box input").trigger("click");
      })
      // 使用input 的change事件，监听当文件上传的值进行改变的时候，才触发事件。
      $(document).on("change", ".upload-img-box #img-file", function () {
        var file = $("#img-file")[0].files[0];
        console.log(file);
        // file 内容包括： lastModified , lastModifiedDate , name , size , type
        var formdata = new FormData();
        formdata.append('file', file);

        if (window.FileReader) {
          var fr = new FileReader();
          fr.onloadend = function (e) {
            //                console.log(this.result);
            // document.getElementById("portrait").src = e.target.result;
            $("#img-box").attr("src",e.target.result)
            $(".upload-img-box .befor-img").addClass("hasImg")
          };
          //给FileReader对象一个读取完成的方法,
          //使用readAsDataURL会返回一个url
          //这个值就保存在事件对象的result里
          //img通过加载这个地址,完成图片的加载
          fr.readAsDataURL(file);
        }

        //判断图片大小
        if (file.size > 3 * 1024 * 1024) {
          alert("上传图片不能大于3M");
        }

        //判断图片数据类型
        if (!/.(gif|jpg|jpeg|png|GIF|JPG|bmp)$/.test(file.name)) {

          alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
        }
      })
    })
    // 切换登陆页面
      document.getElementById("employeeBtn").addEventListener("click", function() {
            document.getElementById("employeeForm").classList.add("active");
            document.getElementById("adminForm").classList.remove("active");
            document.getElementById("choose_administrator").classList.remove("background");
            document.getElementById("choose_employee").classList.add("background");
        });
      document.getElementById("adminBtn").addEventListener("click", function() {
            document.getElementById("employeeForm").classList.remove("active");
            document.getElementById("adminForm").classList.add("active");
            document.getElementById("choose_employee").classList.remove("background");
            document.getElementById("choose_administrator").classList.add("background");
        });
      document.getElementById("password_toggle").addEventListener("click", function() {
            let passwordInput =   document.getElementById("password-input")
            if (passwordInput.type === 'password') {
                passwordInput.type ='text';
                document.getElementById("password_toggle").src = "/static/img/open.png"
            } else {
                passwordInput.type = "password";
                document.getElementById("password_toggle").src = "/static/img/close.png"
            }
        });
      // 点击回到顶部
      var element = document.getElementById('search');

      var observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
          var scrollToTopBtn = document.getElementById('scroll-to-top-btn');
          if (entry.isIntersecting) {
            // 元素进入视口，执行代码
            scrollToTopBtn.style.display = 'none';
          } else {
            scrollToTopBtn.style.display = 'block';
          }
        });
      });

      observer.observe(element);

      document.getElementById('scroll-to-top-btn').addEventListener('click', function() {
        document.getElementById("scroll_box").scrollTop = 0
      });



  </script>
</body>
</html>