| | |
| | | <!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> |