develop
/
local-face-app


			
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>管理页面</title>
  <style>
    body{
      margin: 0;
    }
    li {
      list-style-type: none;
    }
    @media screen and (orientation: portrait) {
    .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;
      border-radius: 50%;
    }
    .pass_nopass {
      display: flex;
    }
    .pass {
      background-color: rgb(92, 186, 45);
      width: 12vw;
      height: 6vw;
      border-radius: 1vw;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
    }
    .no_pass, .del_pass {
      background-color: rgb(187, 44, 45);
      width: 12vw;
      height: 6vw;
      border-radius: 1vw;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 3vw;
      color: white;
    }
    .goTop_img {
      width: 6vw;
      height: 6vw;
    }

      .pass_info{
        width: 25vw;
      }

      .no_pass_info{
        line-height: 3vh;
      }
  }
@media screen and (orientation: landscape) {
  input:focus {
      border: 0.1vw solid #000;
      outline: none; /* 可选，用于去除默认的外边框样式 */
  }
    .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;
      border-radius: 50%;
    }
    .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;
      color: white;
      cursor: pointer;
    }
    .no_pass, .del_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;
      color: white;
      cursor: pointer;
    }
    .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%;
    }

    .pass_info{
      color: green;
    }

    .no_pass_info{
      color: red;
    }
  </style>

</head>
<body>

  <!-- 管理员页面 -->
  <div class="approval_page" style="display: none;">
    <div id="scroll_box" class="approval_box">
      <input  id="search" class="search_people" value="{{.key}}" type="text" placeholder="🔍 搜索">
      <ul  class="list_box">
        {{ range $i, $v := .users }}
        <li class="every_info" itemid="{{$v.ID}}">
          <img class="people_img" src="{{$v.Avatar}}" alt="">
          <div class="name">{{$v.Name}}</div>
          <div class="people_code">{{$v.Phone}}</div>
          <div class="pass_nopass">
            {{ if eq $v.Status 1 }}
            <div class="pass_info">通过</div>
            {{ else if eq $v.Status 2 }}
            <div class="no_pass_info">不通过</div>
            <div class="del_pass">删除X</div>
            {{ else }}
            <div class="pass">通过</div>
            <div class="no_pass">不通过</div>
            {{ end }}
          </div>
        </li>
        {{ end }}

      </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 src="/static/js/msg-box.js"></script>
  <script>
    var token= sessionStorage.getItem('token');
    console.log(token)
    if (!token){
      $.MsgBox.AlertWithCallback("提示", "此页面需要先进行登录", function (){
        window.location.href = "/?type=mgr";
      });
    } else {
      $(".approval_page").css("display","block");
    }


    $(function(){

      var t=$("#search").val();
      $("#search").val("").focus().val(t);
      $('.pass').on("click",function(){
        var id = $(this).parent().parent().attr('itemid');
        $.ajax({
          url: "/pass",
          type: "post",
          data: {
            handle: 1,
            id: id
          },
          success: function (data) {
            $.MsgBox.AlertWithCallback("提示", data.Message, function (){
              location.reload();
            });
          },
          error: function (error) {
            console.log(error);
            $.MsgBox.Alert("提示", error.responseJSON.Message);
          }
        })
      })

      $('.no_pass').on("click",function(){
        var id = $(this).parent().parent().attr('itemid');
        $.MsgBox.Confirm("提示", "确定要否决这条注册吗？", function () {
          $.ajax({
            url: "/pass",
            type: "post",
            data: {
              handle: 2,
              id: id
            },
            success: function (data) {
                location.reload();
            },
            error: function (error) {
              console.log(error);
              $.MsgBox.Alert("提示", error.responseJSON.Message);
            }
          })
        })
      })

      $('.del_pass').on("click",function(){
        var id = $(this).parent().parent().attr('itemid');
        $.MsgBox.Confirm("提示", "确定要删除这条注册吗？", function (){
          $.ajax({
            url: "/pass",
            type: "post",
            data: {
              handle: 4,
              id: id
            },
            success: function (data) {
                location.reload();
            },
            error: function (error) {
              console.log(error);
              $.MsgBox.Alert("提示", error.responseJSON.Message);
            }
          })
        })

      })

      $("#search").on('change',function(e){
        window.location.href = "/mgr?key="+$(this).val()
      });
    })

      // 点击回到顶部
      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>