#
Junjie
2023-12-22 01eeed2d3567ce3dc1cb387e24693439eb76d470
zy-asrs-wms/src/main/webapp/views/login.html
@@ -1,158 +1,355 @@
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>中扬 │ login of zoneyung wms</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">
    <meta name="description" content="study of Instancing with three.js">
    <meta name="keywords" content="undefined, Yoichi Kobayashi, WebGL, three.js">
    <meta name="theme-color" content="#111111">
    <meta name="msapplication-TileImage" content="/sketch-threejs/img/common/ms_tileimage.png">
    <meta name="msapplication-TileColor" content="#111111">
    <link rel="icon" type="image/x-icon" href="../static/image/favicon.ico" />
    <link rel="stylesheet" href="../static/css/font/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../static/css/main.min.css">
    <link rel="stylesheet" href="../static/css/login.css">
    <style>
      #sidebar{
        /*定位*/
        position: absolute;
        top: 50%;
        right: 1%;
        transform: translateY(-50%);
        width: 20%;
        height: 95%;
        /*特效*/
        background: rgba(255,255,255,0.6);
        border-radius: 5px;
        color: #ffffff;
        z-index: 99;
        box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
      }
<html>
   <head>
      <meta charset="utf-8">
      <title>中扬 │ login of zoneyung wcs</title>
      <style>
         * {
            padding: 0;
            margin: 0;
         }
      .login-contain {
        position: relative;
        width: 100%;
        height: 100%;
      }
      .login-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        text-align: center;
      }
         .container {
            display: flex;
            height: 100vh;
            width: 100%;
         }
    </style>
  </head>
  <body>
    <div class="l-page l-page--white" data-id="instancing">
      <div style="position: fixed;
                    z-index: 100;
                    top: 22px;
                    left: 20px;">
        <img src="../static/image/logo.png" alt="" style="width: 20%">
      </div>
      <div class="p-sketch-outline">
        <h2 class="p-sketch-outline__title">Automatic Storage and Retrieval System</h2>
        <p class="p-sketch-outline__date">posted: 2018.01.01 / update: 2022.03.18
        </p>
        <p class="p-sketch-outline__description">wms made with various simple objects.</p>
      </div>
      <canvas class="p-canvas-webgl" id="canvas-webgl"></canvas>
    </div>
    <!-- 侧边栏 -->
    <div id="sidebar">
      <div class="login-contain">
        <div class="login-box">
          <img src="../static/image/logo.png" alt="" style="width: 80%">
          <span class="login100-form-title p-t-20 p-b-45">中扬立库</span>
          <span class="login100-form-title p-t-20 p-b-45" style="margin: 15px 0;color: #868686;font-size: 24px">WMS</span>
          <div class="wrap-input100 validate-input m-b-10" data-validate="请输入用户名">
            <input id="username" class="input100" type="text" name="username" placeholder="username" autocomplete="off">
            <span class="focus-input100"></span>
            <span class="symbol-input100">
              <i class="fa fa-user"></i>
            </span>
          </div>
          <div class="wrap-input100 validate-input m-b-10" data-validate="请输入密码">
            <input id="password" class="input100" type="password" name="pass" placeholder="password">
            <span class="focus-input100"></span>
            <span class="symbol-input100">
              <i class="fa fa-lock"></i>
            </span>
          </div>
          <div class="container-login100-form-btn p-t-10">
            <button class="login100-form-btn login-btn">Login</button>
          </div>
        </div>
      </div>
    </div>
         .left-box {
            height: 100%;
            width: 70%;
         }
    <script type="text/javascript" src="../static/js/tools/main.min.js"></script>
    <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../static/js/tools/md5.js"></script>
    <script type="text/javascript" src="../static/layer/layer.js"></script>
    <script type="text/javascript" src="../static/js/common.js"></script>
    <script>
      // remember pwd
      $(function () {
        var oldUserName = localStorage.getItem('oldUserName');
        var oldPass = localStorage.getItem('oldPass');
        if(oldUserName){
          $('#username').val(oldUserName);
        }
        if(oldPass){
          $('#password').val(oldPass);
        }
      })
         .login-video {
            height: 100%;
            overflow: hidden;
         }
      window.onload = function(){document.getElementById("username").focus();}
         .form-main {
            width: 300px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: rgba(255, 255, 255, 0.6);
            padding: 50px 30px 50px 30px;
            border-radius: 20px;
            box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.062);
         }
      $(document).on('click','.login-btn', function () {
        let username = $("#username").val();
        if (username === "") {
          layer.tips('请输入登录账号', '#username', {tips: [4, '#ff0000']});
          return;
        }
        let password = $("#password").val();
        if (password === "") {
          layer.tips('请输入密码', '#password', {tips: [4, '#ff0000']});
          return;
        }
        $.ajax({
          url: baseUrl+"/login.action",
          data: {
            username: username,
            password: hex_md5(password),
            wms: true
          },
          method: 'POST',
          success: function (res) {
            if (res.code === 200){
              localStorage.setItem("token", res.data.token);
              localStorage.setItem("username", res.data.username);
              window.location.href = "index.html";
            } else if (res.code === 10001) {
              layer.tips(res.msg, '#username', {tips: [4, '#ff0000']});
            } else if (res.code === 10002) {
              layer.tips(res.msg, '#username', {tips: [4, '#ff0000']});
            } else if (res.code === 10003) {
              layer.tips(res.msg, '#password', {tips: [4, '#ff0000']});
            } else {
              layer.tips(res.msg, '.login-btn', {tips: [3, '#ff0000']});
            }
          }
        });
      });
         .heading {
            font-size: 2.5em;
            color: #2e2e2e;
            font-weight: 700;
            margin: 15px 0 0px 0;
         }
      $('body').keydown(function () {
        if (event.keyCode === 13) {
          $(".login-btn").click();
        }
      });
    </script>
  </body>
         .inputContainer {
            width: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
         }
         .inputIcon {
            position: absolute;
            left: 10px;
         }
         .inputField {
            width: 100%;
            height: 40px;
            background-color: transparent;
            border: none;
            border-bottom: 2px solid rgb(173, 173, 173);
            border-radius: 30px;
            margin: 10px 0;
            color: black;
            font-size: .8em;
            font-weight: 500;
            box-sizing: border-box;
            padding-left: 30px;
         }
         .inputField:focus {
            outline: none;
            border-bottom: 2px solid rgb(199, 114, 255);
         }
         .inputField::placeholder {
            color: rgb(80, 80, 80);
            font-size: 1em;
            font-weight: 500;
         }
         .login-box {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
         }
         .login-button {
            position: relative;
            width: 100%;
            border: 2px solid #8000ff;
            background-color: #8000ff;
            height: 40px;
            color: white;
            font-size: .8em;
            font-weight: 500;
            letter-spacing: 1px;
            border-radius: 30px;
            margin: 10px;
            cursor: pointer;
            overflow: hidden;
         }
         .login-button::after {
            content: "";
            position: absolute;
            background-color: rgba(255, 255, 255, 0.253);
            height: 100%;
            width: 150px;
            top: 0;
            left: -200px;
            border-bottom-right-radius: 100px;
            border-top-left-radius: 100px;
            filter: blur(10px);
            transition-duration: .5s;
         }
         .login-button:hover::after {
            transform: translateX(600px);
            transition-duration: .5s;
         }
         .right-box {
            height: 100%;
            width: 30%;
            background: #f6f6f6;
            position: relative;
         }
         .login-copyright {
            position: absolute;
            bottom: 20px;
            right: 20px;
            font-size: 14px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
         }
         .copyright-text {
            margin-right: 20px;
         }
         .copyright-img {
            width: 40px;
            height: 40px;
            position: relative;
         }
         .copyright-img > img {
            width: 100%;
            height: 100%;
         }
         .copyright-img-large {
            width: 140px;
            height: 140px;
            position: absolute;
            top: -140px;
            left: -50px;
            display: none;
         }
         .copyright-img-large > img {
            width: 100%;
            height: 100%;
         }
      </style>
   </head>
   <body>
      <div class="container">
         <div class="left-box">
            <div class="login-video">
               <video src="../static/image/banner.mp4" height="100%" loop autoplay muted="false"
                  controlslist="nodownload" disablepictureinpicture></video>
            </div>
         </div>
         <div class="right-box">
            <div class="login-box">
               <div class="form-main">
                  <p style="text-align: center;"><img class="loginLogoUrl" src="../static/image/logo.png" alt="" style="width: 80%">
                  </p>
                  <p style="margin-top: -10px;"><span class="login100-form-title p-t-20 p-b-45"
                        style="color: #868686;font-size: 24px">WMS</span></p>
                  <div class="inputContainer">
                     <svg viewBox="0 0 16 16" fill="#2e2e2e" height="16" width="16"
                        xmlns="http://www.w3.org/2000/svg" class="inputIcon">
                        <path
                           d="M13.106 7.222c0-2.967-2.249-5.032-5.482-5.032-3.35 0-5.646 2.318-5.646 5.702 0 3.493 2.235 5.708 5.762 5.708.862 0 1.689-.123 2.304-.335v-.862c-.43.199-1.354.328-2.29.328-2.926 0-4.813-1.88-4.813-4.798 0-2.844 1.921-4.881 4.594-4.881 2.735 0 4.608 1.688 4.608 4.156 0 1.682-.554 2.769-1.416 2.769-.492 0-.772-.28-.772-.76V5.206H8.923v.834h-.11c-.266-.595-.881-.964-1.6-.964-1.4 0-2.378 1.162-2.378 2.823 0 1.737.957 2.906 2.379 2.906.8 0 1.415-.39 1.709-1.087h.11c.081.67.703 1.148 1.503 1.148 1.572 0 2.57-1.415 2.57-3.643zm-7.177.704c0-1.197.54-1.907 1.456-1.907.93 0 1.524.738 1.524 1.907S8.308 9.84 7.371 9.84c-.895 0-1.442-.725-1.442-1.914z">
                        </path>
                     </svg>
                     <input placeholder="请输入用户名" id="username" name="username" class="inputField" type="text">
                  </div>
                  <div class="inputContainer">
                     <svg viewBox="0 0 16 16" fill="#2e2e2e" height="16" width="16"
                        xmlns="http://www.w3.org/2000/svg" class="inputIcon">
                        <path
                           d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z">
                        </path>
                     </svg>
                     <input placeholder="请输入密码" id="password" name="pass" class="inputField" type="password">
                  </div>
                  <input type="button" id="login-button" class="login-button" value="登录">
                  <div style="display: none;margin-top: 5px;width: 100%;" id="updateLicense">
                     <form enctype="multipart/form-data" style="display: none;">
                        <input id="license" type="file" name="file" >
                     </form>
                     <input type="button" id="submitLicense" class="login-button" style="margin: 0;" value="更新许可证">
                  </div>
               </div>
            </div>
            <div class="login-copyright">
               <div class="copyright-text">Copyright ©2023 浙江中扬立库技术有限公司版权所有</div>
               <div id="copyright-img1" class="copyright-img">
                  <img class="copyright-img-url" src="../static/image/weixin_qrcode.jpg" />
                  <div id="copyright-img-large1" class="copyright-img-large"><img class="copyright-img-url" src="../static/image/weixin_qrcode.jpg" /></div>
               </div>
            </div>
         </div>
      </div>
      <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script>
      <script type="text/javascript" src="../static/js/tools/md5.js"></script>
      <script type="text/javascript" src="../static/layer/layer.js"></script>
      <script type="text/javascript" src="../static/js/common.js"></script>
      <script>
          // 获取信息
          // $(function () {
         //    $.ajax({
         //       url: baseUrl+"/loginInformation",
         //       data: {},
         //       method: 'GET',
         //       success: function (res) {
         //          var data = res.data
         //          $(".copyright-text").text(data.loginCopyrightText);
         //          $(".copyright-img-url").attr("src", data.loginCopyrightImg1);
         //          $(".loginLogoUrl").attr("src", data.loginLogo);
         //
         //          if (data.loginCopyrightImg1 == "") {
         //             $(".copyright-img-url").hide()
         //          }
         //       }
         //    });
         //
          //     var oldUserName = localStorage.getItem('oldUserName');
          //     var oldPass = localStorage.getItem('oldPass');
          //     if(oldUserName){
          //         $('#username').val(oldUserName);
          //     }
          //     if(oldPass){
          //         $('#password').val(oldPass);
          //     }
          // })
          window.onload = function(){document.getElementById("username").focus();}
          $(document).on('click','#login-button', function () {
              let username = $("#username").val();
              if (username === "") {
                  layer.tips('请输入登录账号', '#username', {tips: [4, '#ff0000']});
                  return;
              }
              let password = $("#password").val();
              if (password === "") {
                  layer.tips('请输入密码', '#password', {tips: [4, '#ff0000']});
                  return;
              }
              $.ajax({
                  url: baseUrl+"/login.action",
                  data: {
                  username: username,
                      password: hex_md5(password),
                  wms: true
                  },
                  method: 'POST',
                  success: function (res) {
                      if (res.code === 200){
                          localStorage.setItem("token", res.data.token);
                          localStorage.setItem("username", res.data.username);
                          window.location.href = "index.html";
                      } else if (res.code === 10001) {
                          layer.tips(res.msg, '#username', {tips: [4, '#ff0000']});
                      } else if (res.code === 10002) {
                          layer.tips(res.msg, '#username', {tips: [4, '#ff0000']});
                      } else if (res.code === 10003) {
                          layer.tips(res.msg, '#password', {tips: [4, '#ff0000']});
                      } else if (res.code === 20001) {
                     layer.tips(res.msg, '#login-button', {tips: [3, '#ff0000']});
                     $("#updateLicense").show()
                  } else {
                     layer.tips(res.msg, '#login-button', {tips: [3, '#ff0000']});
                  }
                  }
              });
          });
          $(document).keydown(function () {
              if (event.keyCode === 13) {
                  $("#login-button").click();
              }
          });
         $("#copyright-img1").on("mouseover", () => {
            $("#copyright-img-large1").show()
         })
         $("#copyright-img1").on("mouseout", () => {
            $("#copyright-img-large1").hide()
         })
         //更新许可证
         $("#submitLicense").on("click",() => {
            $("#license").click()
         })
         //上传并更新许可证
         $("#license").on("change",(evt) => {
            var files = evt.target.files;
            console.log(files)
            let formData = new FormData();
            formData.append("file", files[0])
            $.ajax({
               url: baseUrl+"/license/updateLicense",
               data: formData,
               method: 'POST',
               cache: false,
               processData: false,
               contentType: false,
               success: function (res) {
                  if (res.code == 200) {
                     layer.msg('更新成功', {time: 1000}, () => {
                        parent.location.reload()
                     });
                  }else{
                     layer.msg(res.msg,{time:2000},() => {
                        parent.location.reload()
                     })
                  }
               }
            })
         })
      </script>
   </body>
</html>