develop
/
local-face-app
12
0
複製 0
程式碼 問題管理 0 合併請求 0 版本發佈 0 Wiki Activity
go语言写的人脸本地化程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 Commit
1 分支
2.1 MiB
 
 
 
 
 
目錄樹: e3f606175a
分支列表 標籤列表
${ item.name }
Create branch ${ searchTerm }
from 'e3f606175a'
${ noResults }
local-face-app/templates/login-bak.html

871 line
24 KiB
原始文件 Blame 文件歷史 

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4.   <meta charset="UTF-8">

  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">

  6.   <title>Document</title>

  7.   <style>

  8.     body{

  9.       margin: 0;

  10.     }

  11.     li {

  12.       list-style-type: none;

  13.     }

  14.     @media screen and (orientation: portrait) {

  15.     .login {

  16.       width: 100vw;

  17.       height: 100vh;

  18.       background-image: url("/static/img/phoneBgc.jpg");

  19.       background-size: 100% 100%;

  20.       background-repeat: no-repeat;

  21.     }

  22.     .register {

  23.       background-image: url("/static/img/registerBgc.jpg") !important;

  24.       padding-top: 15vh;

  25.     }

  26.     .logo {

  27.       width: 15vw;

  28.       margin: 4vw 0 0 4vw;

  29.     }

  30.     .login_title {

  31.       width: 100vw;

  32.       font-size: 8vw;

  33.       text-align: center;

  34.       margin-top: 15vh;

  35.     }

  36.     .register_loginTitle {

  37.       width: 100vw;

  38.       font-size: 8vw;

  39.       text-align: center;

  40.     }

  41.     .input_box {

  42.       width: 100vw;

  43.       height: 25vw;

  44.       display: flex;

  45.       flex-direction: column;

  46.       justify-content: center;

  47.       align-items: center;

  48.       margin-top: 5vh;

  49.       position: relative;

  50.     }

  51.     .register_inputBox {

  52.       display: flex;

  53.       flex-direction: column;

  54.       justify-content: center;

  55.       align-items: center;

  56.       margin-top: 5vh;

  57.       position: relative;

  58.     }

  59.     .phone_input{

  60.       width: 50vw;

  61.       height: 11vw;

  62.       border-radius: 2vw;

  63.       background-color: transparent;

  64.       font-size: 3vw;

  65.       padding-left: 2vw;

  66.       border: 1px solid #000;

  67.       position: absolute;

  68.       top: 0vw;

  69.     }

  70.     .register_phoneInput {

  71.       width: 50vw;

  72.       height: 5vh;

  73.       border-radius: 2vw;

  74.       background-color: transparent;

  75.       font-size: 3vw;

  76.       padding-left: 2vw;

  77.       border: 1px solid #000;

  78.       margin-bottom: 2vh;

  79.     }

  80.     .code_input {

  81.       width: 50vw;

  82.       height: 11vw;

  83.       margin-top: 2vh;

  84.       border-radius: 2vw;

  85.       padding-left: 2vw;

  86.       font-size: 3vw;

  87.       background-color: transparent;

  88.       border: 1px solid #000;

  89.       position: absolute;

  90.       top: 10vw;

  91.     }

  92.     .register_codeInput {

  93.       width: 50vw;

  94.       height: 5vh;

  95.       border-radius: 2vw;

  96.       background-color: transparent;

  97.       font-size: 3vw;

  98.       padding-left: 2vw;

  99.       border: 1px solid #000;

  100.     }

  101.     .login_button {

  102.       width: 40vw;

  103.       height: 5vh;

  104.       background-color: rgb(101, 161, 255);

  105.       border-radius: 10vw;

  106.       display: flex;

  107.       justify-content: center;

  108.       align-items: center;

  109.       color:#fff;

  110.       font-size: 4vw;

  111.       margin: 2vh 0  0 30vw;

  112.     }

  113.     .register_loginButton {

  114.       width: 40vw;

  115.       height: 5vh;

  116.       background-color: rgb(101, 161, 255);

  117.       border-radius: 10vw;

  118.       display: flex;

  119.       justify-content: center;

  120.       align-items: center;

  121.       color:#fff;

  122.       font-size: 4vw;

  123.       margin: 2vh 0  0 30vw;

  124.     }

  125.     .send_code {

  126.       position: absolute;

  127.       font-size: 2.5vw;

  128.       top: 18.5vw;

  129.       right: 30vw;

  130.       border-left: 2px solid;

  131.       padding-left: 2vw;

  132.     }

  133.     .employee {

  134.       display: flex;

  135.       align-items: center;

  136.     }

  137.     .administrator {

  138.       display: flex;

  139.       align-items: center;

  140.       margin-left: 5vw;

  141.     }

  142.     .choose_employee {

  143.       width: 2vw;

  144.       height: 2vw;

  145.       border-radius: 50%;

  146.       border: 2px solid #000;

  147.       margin-right: 1vw;

  148.     }

  149.     .choose_administrator {

  150.       width: 2vw;

  151.       height: 2vw;

  152.       border-radius: 50%;

  153.       border: 2px solid #000;

  154.       margin-right: 1vw;

  155.     }

  156.     .login_style {

  157.       display: flex;

  158.       justify-content: center;

  159.       align-items: center;

  160.       font-size: 2.5vw;

  161.       margin-top: 2vh;

  162.     }

  163.     .hidden {

  164.       display: none;

  165.     }

  166.     .active {

  167.       display: flex;

  168.     }

  169.     .background {

  170.       background-color: #000;

  171.     }

  172.     .password-container {

  173.       position: relative;

  174.     }

  175.     .password_toggle {

  176.       position: absolute;

  177.       width: 5vw;

  178.       top: 18vw;

  179.       right: 26vw;

  180.     }

  181.     .approval_page {

  182.       width: 100vw;

  183.       height: 100vh;

  184.       background-image: url("/static/img/registerBgc.jpg");

  185.       background-size: 100% 100%;

  186.       overflow: auto;

  187.     }

  188.     .approval_box {

  189.       max-width: 100vw;

  190.       min-height: 100vh;

  191.       background-color:rgba(237,237,237,0.8);

  192.     }

  193.     .search_people {

  194.       width: 80vw;

  195.       height: 5vh;

  196.       border-radius: 1vw;

  197.       margin: 5vh 0 0 10vw;

  198.       border: 0 solid #fff;

  199.       font-size: 3vw;

  200.       text-align: center;

  201.     }

  202.     .every_info {

  203.       height: 7vh;

  204.       margin-top: 3vh;

  205.       display: flex;

  206.       align-items: center;

  207.       justify-content: space-around;

  208.       font-size: 3vw;

  209.     }

  210.     #scroll-to-top-btn {

  211.       display: none;

  212.       position: fixed;

  213.       right: 20px;

  214.       bottom: 20px;

  215.       width: 7vw;

  216.       height: 10vh;

  217.       color: #fff;

  218.       border: none;

  219.       border-radius: 5px;

  220.       font-size: 3vw;

  221.       cursor: pointer;

  222.     }

  223.     .people_img {

  224.       width: 6vh;

  225.       height: 6vh;

  226.     }

  227.     .pass_nopass {

  228.       display: flex;

  229.     }

  230.     .pass {

  231.       background-color: rgb(92, 186, 45);

  232.     width: 10vw;

  233.     height: 5vw;

  234.     border-radius: 1vw;

  235.     display: flex;

  236.     justify-content: center;

  237.     align-items: center;

  238.     }

  239.     .no_pass {

  240.       background-color: rgb(187, 44, 45);

  241.     width: 10vw;

  242.     height: 5vw;

  243.     border-radius: 1vw;

  244.     display: flex;

  245.     justify-content: center;

  246.     align-items: center;

  247.     margin-left: 2vw;

  248.     }

  249.     .goTop_img {

  250.       width: 6vw;

  251.       height: 6vw;

  252.     }

  253.   }

  254. @media screen and (orientation: landscape) {

  255.   input:focus {

  256.       border: 0.1vw solid #000;

  257.       outline: none; /* 可选，用于去除默认的外边框样式 */

  258.   }

  259.   .login {

  260.       width: 100vw;

  261.       height: 100vh;

  262.       background-image: url("/static/img/phoneBgc_pc.jpg");

  263.       background-size: 100% 100%;

  264.       background-repeat: no-repeat;

  265.       position: relative;

  266.     }

  267.     .PC_img {

  268.       width: 52.6vw;

  269.       height: 64.44vh;

  270.       background-image: url("/static/img/loginBox.png");

  271.       background-size: 100% 100%;

  272.       background-repeat: no-repeat;

  273.       position: absolute;

  274.       top: 18.88vh;

  275.       left: 23.7vw;

  276.     }

  277.     .register {

  278.       background-image: url("/static/img/registerBgc_pc.jpg") !important;

  279.     }

  280.     .logo {

  281.       width: 15vh;

  282.       margin: 4vh 0 0 4vh;

  283.     }

  284.     .login_title {

  285.       /* width: 100vw; */

  286.       font-size: 4vh;

  287.       text-align: center;

  288.       position: absolute;

  289.       z-index: 10;

  290.       top: 28vh;

  291.       margin-left: 58vw;

  292.       /* margin-top: 15vh;*/

  293.     }

  294.     .register_loginTitle {

  295.       width: 100vw;

  296.       display: flex;

  297.       justify-content: center;

  298.       font-size: 4vh;

  299.       text-align: center;

  300.       position: absolute;

  301.       z-index: 10;

  302.       top: 10vh;

  303.     }

  304.     .uploadImg {

  305.       width: 15vw;

  306.     }

  307.     .input_box {

  308.       flex-direction: column;

  309.       justify-content: center;

  310.       align-items: center;

  311.       margin-top: 15vh;

  312.       position: relative;

  313.     }

  314.     .register_inputBox {

  315.       width: 100vw;

  316.       display: flex;

  317.       flex-direction: column;

  318.       justify-content: center;

  319.       align-items: center;

  320.       position: relative;

  321.       padding-top: 42vh;

  322.     }

  323.     .phone_input{

  324.       width: 15vw;

  325.       height: 6.66vh;

  326.       border-radius: 2vh;

  327.       background-color: transparent;

  328.       font-size: 2vw;

  329.       padding-left: 2vh;

  330.       padding-right: 5vw;

  331.       border: 0.1vw solid #000;

  332.       margin-left: 25vw;

  333.     }

  334.     .register_phoneInput {

  335.       width: 37vh;

  336.       height: 6vh;

  337.       border-radius: 2vh;

  338.       background-color: transparent;

  339.       font-size: 3vh;

  340.       border: 0.1vw solid #000;

  341.       margin-bottom: 5vh;

  342.       padding-left:1vw ;

  343.     }

  344.     .register_codeInput {

  345.       width: 37vh;

  346.       height: 6vh;

  347.       border-radius: 2vh;

  348.       background-color: transparent;

  349.       font-size: 3vh;

  350.       border: 0.1vw solid #000;

  351.       padding-left: 1vw ;

  352.     }

  353.     .code_input {

  354.       width: 15vw;

  355.       height: 6.66vh;

  356.       margin-top: 2vw;

  357.       border-radius: 2vh;

  358.       padding-left: 2vh;

  359.       font-size: 1.5vw;

  360.       padding-right: 5vw;

  361.       background-color: transparent;

  362.       border: 0.1vw solid #000;

  363.       margin-left: 25vw;

  364.     }

  365.     .login_button {

  366.       width: 16vw;

  367.       height: 3vw;

  368.       background-color: rgb(101, 161, 255);

  369.       border-radius: 10vh;

  370.       display: flex;

  371.       justify-content: center;

  372.       align-items: center;

  373.       color: #fff;

  374.       font-size: 2vw;

  375.       /* margin: 2vh 0 0 30vh; */

  376.       position: absolute;

  377.       left: 55vw;

  378.       top: 65vh;

  379.     }

  380.     .register_loginButton {

  381.       width: 30vh;

  382.       height: 3vw;

  383.       background-color: rgb(101, 161, 255);

  384.       border-radius: 1vw;

  385.       display: flex;

  386.       justify-content: center;

  387.       align-items: center;

  388.       color: #fff;

  389.       font-size: 3vh;

  390.       position: absolute;

  391.       left: 42.5vw;

  392.       top: 65vh;

  393.     }

  394.     .send_code {

  395.       position: absolute;

  396.       font-size: 1.5vh;

  397.       top: 11.5vh;

  398.       right: 27.3vw;

  399.       border-left: 0.1vw solid;

  400.       padding-left: 1vh;

  401.       display: flex;

  402.     align-items: center;

  403.     height: 3vw;

  404.     }

  405.     .employee {

  406.       display: flex;

  407.       align-items: center;

  408.     }

  409.     .administrator {

  410.       display: flex;

  411.       align-items: center;

  412.       margin-left: 3vw;

  413.     }

  414.     .hand:hover{

  415.        cursor: pointer;

  416.     }

  417.     .choose_employee {

  418.       width: 2vh;

  419.       height: 2vh;

  420.       border-radius: 50%;

  421.       border: 0.1vw solid #000;

  422.       margin-right: 1vh;

  423.     }

  424.     .choose_administrator {

  425.       width: 2vh;

  426.       height: 2vh;

  427.       border-radius: 50%;

  428.       border: 0.1vw solid #000;

  429.       margin-right: 1vh;

  430.     }

  431.     .login_style {

  432.       display: flex;

  433.       justify-content: center;

  434.       align-items: center;

  435.       font-size: 1vw;

  436.       margin-top: 2vw;

  437.       position: absolute;

  438.       left: 54.8vw;

  439.     }

  440.     .hidden {

  441.       display: none;

  442.     }

  443.     .active {

  444.       display: flex;

  445.     }

  446.     .background {

  447.       background-color: #000;

  448.     }

  449.     .password-container {

  450.       position: relative;

  451.     }

  452.     .password_toggle {

  453.       width: 3vw;

  454.       position: absolute;

  455.       font-size: 1.5vh;

  456.       top: 11.5vh;

  457.       right: 28.5vw;

  458.       padding-left: 0.5vh;

  459.     }

  460.     .approval_page {

  461.       width: 100vw;

  462.       height: 100vh;

  463.       background-image: url("/static/img/registerBgc.jpg");

  464.       background-size: 100% 100%;

  465.       overflow: auto;

  466.     }

  467.     .approval_box {

  468.       max-width: 100vw;

  469.       min-height: 100vh;

  470.       background-color:rgba(237,237,237,0.8);

  471.     }

  472.     .search_people {

  473.       width: 60vw;

  474.       height: 6vh;

  475.       border-radius: 1vh;

  476.       margin: 5vh 0 0 20vw;

  477.       border: 0 solid #fff;

  478.       font-size: 3vh;

  479.       text-align: center;

  480.     }

  481.     .every_info {

  482.       height: 7vw;

  483.       margin-top: 3vw;

  484.       display: flex;

  485.       align-items: center;

  486.       justify-content: space-around;

  487.       font-size: 3vh;

  488.     }

  489.     #scroll-to-top-btn {

  490.       display: none;

  491.       position: fixed;

  492.       right: 20px;

  493.       bottom: 20px;

  494.       width: 7vh;

  495.       height: 10vw;

  496.       color: #fff;

  497.       border: none;

  498.       border-radius: 5px;

  499.       font-size: 3vh;

  500.       cursor: pointer;

  501.     }

  502.     .people_img {

  503.       width: 6vw;

  504.       height: 6vw;

  505.     }

  506.     .pass_nopass {

  507.       display: flex;

  508.     }

  509.     .pass {

  510.       background-color: rgb(92, 186, 45);

  511.       width: 10vh;

  512.       height: 5vh;

  513.       border-radius: 1vh;

  514.       display: flex;

  515.       justify-content: center;

  516.       align-items: center;

  517.     }

  518.     .no_pass {

  519.       background-color: rgb(187, 44, 45);

  520.       width: 10vh;

  521.       height: 5vh;

  522.       border-radius: 1vh;

  523.       display: flex;

  524.       justify-content: center;

  525.       align-items: center;

  526.       margin-left: 2vh;

  527.     }

  528.     .goTop_img {

  529.       width: 6vh;

  530.       height: 6vh;

  531.     }

  532.   }

  533. 

  534.     .list_box{

  535.       padding-inline-start: 0px;

  536.     }

  537. 

  538.     .uploadImg{

  539.       width: 48% !important;

  540.       transform: translate(0%, 0%) !important;

  541.     }

  542. 

  543.     .upload-img-box {

  544.       position: relative;

  545.     }

  546. 

  547.     .upload-img-box .input-box {

  548.       display: inline-block;

  549.       width: 144px;

  550.       height: 144px;

  551.       /*border: solid black 1px;*/

  552.     }

  553. 

  554.     .upload-img-box .befor-img {

  555.       display: flex;

  556.       /*width: 300px;*/

  557.       /*height: 90px;*/

  558.       /*border: solid black 1px;*/

  559.       position: absolute;

  560.       top: 0px;

  561.       left: 0px;

  562.       /*background: #ffffff;*/

  563.       z-index: 30;

  564.       align-items: center;

  565.       justify-content: center;

  566.     }

  567. 

  568.     .upload-img-box .befor-img.hasImg {

  569.       display: none;

  570.     }

  571. 

  572.     .upload-img-box .after-img {

  573.       display: inline-block;

  574.       width: 144px;

  575.       height: 144px;

  576.       border: none;

  577.       /*position: absolute;*/

  578.       top: 0px;

  579.       left: 0px;

  580.       /*background: #ffffff;*/

  581.       z-index: 20;

  582.     }

  583. 

  584.     .after-img img, .uploadImg {

  585.       /*position: absolute;*/

  586.       width: 100%;

  587.       height: 100%;

  588.       object-fit: cover; /*根据父容器的尺寸裁剪和缩放图片，以填充整个容器，并保持长宽比例不变。*/

  589.       object-position: center; /*指定对象的位置，如果不设置，则默认是center*/

  590.       background-size: cover; /*背景图片的大小，如果不设置，则默认是auto*/

  591.       background-position: center;

  592.       top: 50%;

  593.       left: 50%;

  594.       transform: translate(-50%, 0%);/*将元素移动到中心*/

  595.       border-radius: 50%;

  596.     }

  597.   </style>

  598. </head>

  599. <body>

  600.   <!-- 登录页面 -->

  601.   <div  class="login">

  602.     <img class="logo" src="/static/img/logo.png" alt="">

  603.     <div class="PC_img"></div>

  604.     <div class="login_title">请 登 录</div>

  605.     <div id="employeeForm" class="input_box hidden active">

  606.       <input class="phone_input" type="text" placeholder="请输入手机号">

  607.       <input class="code_input" type="text" placeholder="请输入验证码">

  608.       <div class="send_code hand">发送验证码</div>

  609.     </div>

  610.     <div id="adminForm" class="input_box hidden password-container">

  611.       <input class="phone_input" type="text" placeholder="请输入账号">

  612.       <input id="password-input" class="code_input" type="password" placeholder="请输入密码">

  613.       <img id="password_toggle" class="password_toggle hand" src="/static/img/close.png" alt="">

  614.     </div>

  615.     <div class="login_style">

  616.       <div id="employeeBtn" class="employee hand">

  617.         <div id="choose_employee" class="choose_employee background"></div>

  618.         <div>员工登录</div>

  619.       </div>

  620.       <div id="adminBtn" class="administrator hand">

  621.         <div id="choose_administrator" class="choose_administrator"></div>

  622.         <div>管理员登录</div>

  623.       </div>

  624.     </div>

  625.     <div class="login_button hand">登 录</div>

  626.   </div>

  627.   <!-- 注册页面 -->

  628.   <div style="display: none;" class="register login">

  629.     <div class="register_loginTitle ">

  630.       <div class="upload-img-box">

  631.         <div class="input-box">

  632.           <input type="file" id="img-file" hidden="hidden" name="选择图片">

  633.         </div>

  634.         <div class="befor-img">

  635.           <img class="uploadImg hand" src="/static/img/upload.png" alt="">

  636.         </div>

  637.         <div class="after-img">

  638.           <img id="img-box" src="" width="30%" height="auto">

  639.         </div>

  640.       </div>

  641. 

  642.     </div>

  643.     <div class="register_inputBox">

  644.       <input class="register_phoneInput" type="text" placeholder="员工编号">

  645.       <input class="register_codeInput" type="text" placeholder="员工姓名">

  646.     </div>

  647.     <div class="register_loginButton hand">注册人脸</div>

  648.   </div>

  649.   <!-- 管理员页面 -->

  650.   <div style="display: none;" class="approval_page">

  651.     <div id="scroll_box" class="approval_box">

  652.       <input  id="search" class="search_people" type="text" placeholder="🔍 搜索">

  653.       <ul  class="list_box">

  654.         <li class="every_info">

  655.           <img class="people_img" src="/static/img/logo.png" alt="">

  656.           <div class="name">张三</div>

  657.           <div class="people_code">001</div>

  658.           <div class="pass_nopass">

  659.             <div class="pass">通过</div>

  660.             <div class="no_pass">不通过</div>

  661.           </div>

  662.         </li>

  663.         <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">

  664.           <div class="name">张三</div>

  665.           <div class="people_code">001</div>

  666.           <div class="pass_nopass">

  667.             <div class="pass">通过</div>

  668.             <div class="no_pass">不通过</div>

  669.           </div></li>

  670.         <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">

  671.           <div class="name">张三</div>

  672.           <div class="people_code">001</div>

  673.           <div class="pass_nopass">

  674.             <div class="pass">通过</div>

  675.             <div class="no_pass">不通过</div>

  676.           </div></li>

  677.         <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">

  678.           <div class="name">张三</div>

  679.           <div class="people_code">001</div>

  680.           <div class="pass_nopass">

  681.             <div class="pass">通过</div>

  682.             <div class="no_pass">不通过</div>

  683.           </div></li>

  684.         <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">

  685.           <div class="name">张三</div>

  686.           <div class="people_code">001</div>

  687.           <div class="pass_nopass">

  688.             <div class="pass">通过</div>

  689.             <div class="no_pass">不通过</div>

  690.           </div></li>

  691.         <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">

  692.           <div class="name">张三</div>

  693.           <div class="people_code">001</div>

  694.           <div class="pass_nopass">

  695.             <div class="pass">通过</div>

  696.             <div class="no_pass">不通过</div>

  697.           </div></li>

  698.         <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">

  699.           <div class="name">张三</div>

  700.           <div class="people_code">001</div>

  701.           <div class="pass_nopass">

  702.             <div class="pass">通过</div>

  703.             <div class="no_pass">不通过</div>

  704.           </div></li>

  705.         <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">

  706.           <div class="name">张三</div>

  707.           <div class="people_code">001</div>

  708.           <div class="pass_nopass">

  709.             <div class="pass">通过</div>

  710.             <div class="no_pass">不通过</div>

  711.           </div></li>

  712.         <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">

  713.           <div class="name">张三</div>

  714.           <div class="people_code">001</div>

  715.           <div class="pass_nopass">

  716.             <div class="pass">通过</div>

  717.             <div class="no_pass">不通过</div>

  718.           </div></li>

  719.         <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">

  720.           <div class="name">张三</div>

  721.           <div class="people_code">001</div>

  722.           <div class="pass_nopass">

  723.             <div class="pass">通过</div>

  724.             <div class="no_pass">不通过</div>

  725.           </div></li>

  726.         <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">

  727.           <div class="name">张三</div>

  728.           <div class="people_code">001</div>

  729.           <div class="pass_nopass">

  730.             <div class="pass">通过</div>

  731.             <div class="no_pass">不通过</div>

  732.           </div></li>

  733.         <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">

  734.           <div class="name">张三</div>

  735.           <div class="people_code">001</div>

  736.           <div class="pass_nopass">

  737.             <div class="pass">通过</div>

  738.             <div class="no_pass">不通过</div>

  739.           </div></li>

  740.         <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">

  741.           <div class="name">张三</div>

  742.           <div class="people_code">001</div>

  743.           <div class="pass_nopass">

  744.             <div class="pass">通过</div>

  745.             <div class="no_pass">不通过</div>

  746.           </div></li>

  747.         <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">

  748.           <div class="name">张三</div>

  749.           <div class="people_code">001</div>

  750.           <div class="pass_nopass">

  751.             <div class="pass">通过</div>

  752.             <div class="no_pass">不通过</div>

  753.           </div></li>

  754.         <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">

  755.           <div class="name">张三</div>

  756.           <div class="people_code">001</div>

  757.           <div class="pass_nopass">

  758.             <div class="pass">通过</div>

  759.             <div class="no_pass">不通过</div>

  760.           </div></li>

  761.         <li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt="">

  762.           <div class="name">张三</div>

  763.           <div class="people_code">001</div>

  764.           <div class="pass_nopass">

  765.             <div class="pass">通过</div>

  766.             <div class="no_pass">不通过</div>

  767.           </div></li>

  768.       </ul>

  769.     </div>

  770.     <a id="scroll-to-top-btn" href="">

  771.       <img class="goTop_img" src="/static/img/goTop.png" alt="">

  772.     </a>

  773.   </div>

  774.   <script src="/static/js/jquery.min.js"></script>

  775.   <script>

  776.     $(function(){

  777.       $(".login_button").on("click",function(){

  778.         console.log("click");

  779.         $(".login").css("display","none");

  780.         // $(".approval_page").css("display","block");

  781.         $(".register").css("display","block");

  782.       })

  783. 

  784. 

  785.       $(document).on("click", ".upload-img-box .befor-img,.upload-img-box .after-img", function (e) {

  786.         $(".input-box input").trigger("click");

  787.       })

  788.       // 使用input 的change事件，监听当文件上传的值进行改变的时候，才触发事件。

  789.       $(document).on("change", ".upload-img-box #img-file", function () {

  790.         var file = $("#img-file")[0].files[0];

  791.         console.log(file);

  792.         // file 内容包括： lastModified , lastModifiedDate , name , size , type

  793.         var formdata = new FormData();

  794.         formdata.append('file', file);

  795. 

  796.         if (window.FileReader) {

  797.           var fr = new FileReader();

  798.           fr.onloadend = function (e) {

  799.             //                console.log(this.result);

  800.             // document.getElementById("portrait").src = e.target.result;

  801.             $("#img-box").attr("src",e.target.result)

  802.             $(".upload-img-box .befor-img").addClass("hasImg")

  803.           };

  804.           //给FileReader对象一个读取完成的方法,

  805.           //使用readAsDataURL会返回一个url

  806.           //这个值就保存在事件对象的result里

  807.           //img通过加载这个地址,完成图片的加载

  808.           fr.readAsDataURL(file);

  809.         }

  810. 

  811.         //判断图片大小

  812.         if (file.size > 3 * 1024 * 1024) {

  813.           alert("上传图片不能大于3M");

  814.         }

  815. 

  816.         //判断图片数据类型

  817.         if (!/.(gif|jpg|jpeg|png|GIF|JPG|bmp)$/.test(file.name)) {

  818. 

  819.           alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");

  820.         }

  821.       })

  822.     })

  823.     // 切换登陆页面

  824.       document.getElementById("employeeBtn").addEventListener("click", function() {

  825.             document.getElementById("employeeForm").classList.add("active");

  826.             document.getElementById("adminForm").classList.remove("active");

  827.             document.getElementById("choose_administrator").classList.remove("background");

  828.             document.getElementById("choose_employee").classList.add("background");

  829.         });

  830.       document.getElementById("adminBtn").addEventListener("click", function() {

  831.             document.getElementById("employeeForm").classList.remove("active");

  832.             document.getElementById("adminForm").classList.add("active");

  833.             document.getElementById("choose_employee").classList.remove("background");

  834.             document.getElementById("choose_administrator").classList.add("background");

  835.         });

  836.       document.getElementById("password_toggle").addEventListener("click", function() {

  837.             let passwordInput =   document.getElementById("password-input")

  838.             if (passwordInput.type === 'password') {

  839.                 passwordInput.type ='text';

  840.                 document.getElementById("password_toggle").src = "/static/img/open.png"

  841.             } else {

  842.                 passwordInput.type = "password";

  843.                 document.getElementById("password_toggle").src = "/static/img/close.png"

  844.             }

  845.         });

  846.       // 点击回到顶部

  847.       var element = document.getElementById('search');

  848. 

  849.       var observer = new IntersectionObserver(function(entries) {

  850.         entries.forEach(function(entry) {

  851.           var scrollToTopBtn = document.getElementById('scroll-to-top-btn');

  852.           if (entry.isIntersecting) {

  853.             // 元素进入视口，执行代码

  854.             scrollToTopBtn.style.display = 'none';

  855.           } else {

  856.             scrollToTopBtn.style.display = 'block';

  857.           }

  858.         });

  859.       });

  860. 

  861.       observer.observe(element);

  862. 

  863.       document.getElementById('scroll-to-top-btn').addEventListener('click', function() {

  864.         document.getElementById("scroll_box").scrollTop = 0

  865.       });

  866. 

  867. 

  868. 

  869.   </script>

  870. </body>

  871. </html>