| | |
|---|
| | | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="en"> |
|---|
| | | <head> |
|---|
| | | <meta charset="UTF-8"> |
|---|
| | | <title>WMS管理系统 - 登录</title> |
|---|
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|---|
| | | <meta http-equiv="Access-Control-Allow-Origin" content="*"> |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
|---|
| | | <meta name="apple-mobile-web-app-status-bar-style" content="black"> |
|---|
| | | <meta name="apple-mobile-web-app-capable" content="yes"> |
|---|
| | | <meta name="format-detection" content="telephone=no"> |
|---|
| | | <link rel="icon" type="image/x-icon" href="../static/image/logo1.png" /> |
|---|
| | | <link rel="stylesheet" href="../static/layui/css/layui.css" media="all"> |
|---|
| | | <link rel="stylesheet" href="../static/css/admin.css?v=318"> |
|---|
| | | <link rel="stylesheet" href="../static/css/loader.css" media="all"> |
|---|
| | | <!--[if lt IE 9]> |
|---|
| | | <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> |
|---|
| | | <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> |
|---|
| | | <![endif]--> |
|---|
| | | <html lang="ja"> |
|---|
| | | <head> |
|---|
| | | <meta charset="utf-8"> |
|---|
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|---|
| | | <title>easy glitch │ sketch of three.js</title> |
|---|
| | | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"> |
|---|
| | | <meta name="description" content="It attaches a simple glitch effect with only using a noise image and adjusting texCoord."> |
|---|
| | | <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="shortcut icon" href="../static/image/icon.ico"> |
|---|
| | | <link rel="stylesheet" href="../static/css/main.min.css"> |
|---|
| | | <link rel="stylesheet" href="../static/css/login.css"> |
|---|
| | | <style> |
|---|
| | | html, body {width: 100%;height: 100%;overflow: hidden} |
|---|
| | | body {background: #1E9FFF;} |
|---|
| | | body:after {content:'';background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;} |
|---|
| | | .layui-container {width: 100%;height: 100%;overflow: hidden} |
|---|
| | | .admin-login-background {width:360px;height:300px;position:absolute;left:50%;top:40%;margin-left:-180px;margin-top:-100px;} |
|---|
| | | .logo-title {text-align:center;letter-spacing:2px;padding:14px 0;} |
|---|
| | | .logo-title h1 {color:#1E9FFF;font-size:25px;font-weight:bold;} |
|---|
| | | .login-form {background-color:#fff;border:1px solid #fff;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;} |
|---|
| | | .login-form .layui-form-item {position:relative;} |
|---|
| | | .login-form .layui-form-item label {position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2;} |
|---|
| | | .login-form .layui-form-item input {padding-left:36px;} |
|---|
| | | .captcha {width:60%;display:inline-block;} |
|---|
| | | .captcha-img {display:inline-block;width:34%;float:right;} |
|---|
| | | .captcha-img img {height:34px;border:1px solid #e6e6e6;height:34px;width:100%;} |
|---|
| | | |
|---|
| | | |
|---|
| | | .layui-container { |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | width: 78%; |
|---|
| | | } |
|---|
| | | .side { |
|---|
| | | position: relative; |
|---|
| | | float: left; |
|---|
| | | width: 22%; |
|---|
| | | height: 100%; |
|---|
| | | background-color: #f8f8f8; |
|---|
| | | box-shadow: 0 0 3px #eeeeee; |
|---|
| | | } |
|---|
| | | .banner { |
|---|
| | | position: absolute; |
|---|
| | | top: 40%; |
|---|
| | | width: 100%; |
|---|
| | | height: 350px; |
|---|
| | | transform:translateY(-50%); |
|---|
| | | -webkit-transform:translateY(-50%); /*兼容-webkit-引擎浏览器*/ |
|---|
| | | -moz-transform:translateY(-50%); /*兼容-moz-引擎浏览器*/ |
|---|
| | | } |
|---|
| | | #item-img { |
|---|
| | | background-size: 100% 100%; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | transition: 0.5s; |
|---|
| | | } |
|---|
| | | .img-1 { |
|---|
| | | background-image: url(../static/image/loginSide1.png); |
|---|
| | | } |
|---|
| | | .img-2 { |
|---|
| | | background-image: url(../static/image/loginSide2.png); |
|---|
| | | } |
|---|
| | | .desc p { |
|---|
| | | padding: 0 35px; |
|---|
| | | font-size: 20px; |
|---|
| | | color: rgba(59, 73, 156, 0.95); |
|---|
| | | font-family: 'Bahnschrift',serif !important; |
|---|
| | | } |
|---|
| | | .loginbm { |
|---|
| | | color: #0b3a58; |
|---|
| | | font: 12px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif; |
|---|
| | | height: 32px; |
|---|
| | | line-height: 32px; |
|---|
| | | text-align: center; |
|---|
| | | background: url(../static/image/loginbg2.png) repeat-x; |
|---|
| | | position: absolute; |
|---|
| | | bottom: 0; |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | #pda-content { |
|---|
| | | z-index: 1; |
|---|
| | | position: absolute; |
|---|
| | | bottom: 40px; |
|---|
| | | width: 100%; |
|---|
| | | padding: 0 20px; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | .qrcode-desc { |
|---|
| | | font-weight: bold; |
|---|
| | | margin-left: 10px; |
|---|
| | | display: inline-block; |
|---|
| | | font-family: 'Bahnschrift',serif; |
|---|
| | | font-size: 14px; |
|---|
| | | vertical-align: middle; |
|---|
| | | color: #515a6e; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .layui-form-checked[lay-skin=primary] i { |
|---|
| | | border-color: #1e9fff!important; |
|---|
| | | background-color: #1e9fff; |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | .layui-form-checkbox[lay-skin=primary]:hover i { |
|---|
| | | border-color: #1e9fff; |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | .p-utility-menu { |
|---|
| | | top: 50%; |
|---|
| | | transform:translateY(-50%); |
|---|
| | | right: 60px; |
|---|
| | | } |
|---|
| | | .cool-form-block { |
|---|
| | | margin-bottom: 30px; |
|---|
| | | } |
|---|
| | | .cool-form-input { |
|---|
| | | margin-left: 8px; |
|---|
| | | background: none; |
|---|
| | | border: none; |
|---|
| | | box-shadow: none; |
|---|
| | | letter-spacing: 2px; |
|---|
| | | border-bottom: #ffffff solid 2px; |
|---|
| | | } |
|---|
| | | .cool-form-input:focus { |
|---|
| | | outline: none; |
|---|
| | | } |
|---|
| | | .l-page--white a { |
|---|
| | | cursor: pointer; |
|---|
| | | width: 58%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div class="side"> |
|---|
| | | <div class="banner"> |
|---|
| | | <div id="item-img" class="img-1"></div> |
|---|
| | | <div class="desc"> |
|---|
| | | <p> |
|---|
| | | Warehouse Management System、通过对仓库的分区管理、采用货架、货位的应用、让仓库管理更规范、人员拣货效率更高。 |
|---|
| | | </p> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div class="l-page l-page--white" data-id="easy_glitch"> |
|---|
| | | <div class="p-preloader"> |
|---|
| | | <div class="p-preloader__box p-preloader__box--white p-preloader__box--01"></div> |
|---|
| | | <div class="p-preloader__box p-preloader__box--white p-preloader__box--02"></div> |
|---|
| | | <div class="p-preloader__box p-preloader__box--white p-preloader__box--03"></div> |
|---|
| | | </div> |
|---|
| | | <div class="p-sketch-outline"> |
|---|
| | | <h2 class="p-sketch-outline__title">Customer Relationship Management</h2> |
|---|
| | | <p class="p-sketch-outline__date">posted: 2018.01.01 / update: 2022.03.18 |
|---|
| | | </p> |
|---|
| | | <p class="p-sketch-outline__description">wcs made with various simple objects.</p> |
|---|
| | | </div> |
|---|
| | | <canvas class="p-canvas-webgl" id="canvas-webgl"></canvas> |
|---|
| | | |
|---|
| | | <div class="p-utility-menu"> |
|---|
| | | <div class="cool-form-block"> |
|---|
| | | <label> |
|---|
| | | username |
|---|
| | | </label> |
|---|
| | | <input id="username" class="cool-form-input" type="text" autocomplete="off"> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div id="pda-content"> |
|---|
| | | <img id="pda-link" src="" width="50px"> |
|---|
| | | <div class="qrcode-desc"> |
|---|
| | | <div>PDA端</div> |
|---|
| | | <div>扫码登录</div> |
|---|
| | | <div class="cool-form-block"> |
|---|
| | | <label> |
|---|
| | | password |
|---|
| | | </label> |
|---|
| | | <input id="password" class="cool-form-input" type="password"> |
|---|
| | | </div> |
|---|
| | | <a class="c-button c-button--white login-btn"> |
|---|
| | | <span class="c-button__icon c-button__icon--back c-button__icon--white"></span> |
|---|
| | | <span class="c-button__label"> |
|---|
| | | <span class="js-split-str">l</span> |
|---|
| | | <span class="js-split-str">o</span> |
|---|
| | | <span class="js-split-str">g</span> |
|---|
| | | <span class="js-split-str">i</span> |
|---|
| | | <span class="js-split-str">n</span> |
|---|
| | | </span> |
|---|
| | | </a> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="layui-container"> |
|---|
| | | <div class="admin-login-background"> |
|---|
| | | <div class="layui-form login-form"> |
|---|
| | | <form class="layui-form" action=""> |
|---|
| | | <div class="layui-form-item logo-title"> |
|---|
| | | <h1>WMS系统登录</h1> |
|---|
| | | </div> |
|---|
| | | <div class="layui-form-item"> |
|---|
| | | <label class="layui-icon layui-icon-username"></label> |
|---|
| | | <input type="text" id="username" name="username" placeholder="登录账号" autocomplete="off" class="layui-input"> |
|---|
| | | </div> |
|---|
| | | <div class="layui-form-item"> |
|---|
| | | <label class="layui-icon layui-icon-password"></label> |
|---|
| | | <input type="password" id="password" name="password" placeholder="请输入登录密码" autocomplete="off" class="layui-input"> |
|---|
| | | </div> |
|---|
| | | <div id="code-box" class="layui-form-item"> |
|---|
| | | <label class="layui-icon layui-icon-vercode"></label> |
|---|
| | | <input type="text" id="code" name="code" placeholder="图形验证码" autocomplete="off" class="layui-input verification captcha"> |
|---|
| | | <div class="captcha-img" style="margin-right: 5px"> |
|---|
| | | <img id="codeImg" title="看不清？点击换一张。"> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="layui-form-item"> |
|---|
| | | <input type="checkbox" id="rememberPwd" value="true" lay-skin="primary" title="记住密码"> |
|---|
| | | </div> |
|---|
| | | <div class="layui-form-item"> |
|---|
| | | <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit="" lay-filter="login">登 入</button> |
|---|
| | | </div> |
|---|
| | | </form> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="loginbm">技术支持： 绍兴孚惠科技有限公司 CopyRight@ 2021 </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!--初始化加载层--> |
|---|
| | | <div class="layuimini-loader"> |
|---|
| | | <div class="layuimini-loader-inner"></div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/jquery/jquery.particleground.min.js" charset="utf-8"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/tools/md5.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/layui/layui.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/common.js"></script> |
|---|
| | | |
|---|
| | | <script type="text/javascript"> |
|---|
| | | console.log('%c WMS %c 1.0.0','background-color:rgb(53,73,94);color: #fff;border-radius:2px 0 0 2px;padding:2px 4px;','background-color:rgb(25,190,107);color: #fff;border-radius:0 2px 2px 0;padding:2px 4px;font: 9pt "Apercu Regular", Georgia, "Times New Roman", Times, serif;'); |
|---|
| | | $('#pda-link').attr("src", baseUrl+"/qrcode.do?param=http://" + window.location.host+baseUrl+"/pda"); |
|---|
| | | var codeSwitch = 'Y'; |
|---|
| | | var oldUserName = localStorage.getItem('oldUserName'); |
|---|
| | | var oldPass = localStorage.getItem('oldPass'); |
|---|
| | | var rememberSwitch = localStorage.getItem('rememberSwitch'); |
|---|
| | | var loop = true; |
|---|
| | | setInterval(function () { |
|---|
| | | if (loop) { |
|---|
| | | $('#item-img').attr("class", "img-1"); |
|---|
| | | loop = false; |
|---|
| | | } else { |
|---|
| | | $('#item-img').attr("class", "img-2"); |
|---|
| | | loop = true; |
|---|
| | | } |
|---|
| | | }, 3000); |
|---|
| | | // 加载动画 |
|---|
| | | setTimeout(function () { |
|---|
| | | $('.layuimini-loader').fadeOut(); |
|---|
| | | }, 500) |
|---|
| | | $(document).ready(function(){ |
|---|
| | | // 验证码开关 |
|---|
| | | $.ajax({ |
|---|
| | | url: baseUrl+"/code/switch.action", |
|---|
| | | async: false, |
|---|
| | | success: function (res) { |
|---|
| | | if (res.data === 'N'){ |
|---|
| | | codeSwitch = res.data; |
|---|
| | | $('#code-box').css("display", "none"); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | // 验证码 |
|---|
| | | initCode(); |
|---|
| | | // 粒子线条背景 |
|---|
| | | $('.layui-container').particleground({ |
|---|
| | | dotColor:'#7ec7fd', |
|---|
| | | lineColor:'#7ec7fd' |
|---|
| | | }); |
|---|
| | | if(oldUserName){ |
|---|
| | | $('#username').val(oldUserName); |
|---|
| | | } |
|---|
| | | if(oldPass){ |
|---|
| | | $('#password').val(oldPass); |
|---|
| | | } |
|---|
| | | if (rememberSwitch === 'true') { |
|---|
| | | $('#rememberPwd').attr("checked", true); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | |
|---|
| | | layui.config({ |
|---|
| | | base: baseUrl + "/static/layui/lay/modules/" |
|---|
| | | }).extend({ |
|---|
| | | notice: 'notice/notice', |
|---|
| | | }).use(['form','layer', 'notice'],function () { |
|---|
| | | var form = layui.form; |
|---|
| | | var layer = layui.layer; |
|---|
| | | var notice = layui.notice; |
|---|
| | | |
|---|
| | | // 进行登录操作 |
|---|
| | | form.on('submit(login)', function (data) { |
|---|
| | | data = data.field; |
|---|
| | | if (data.username === '') { |
|---|
| | | $("#username").focus(); |
|---|
| | | notice.msg('登录账号不能为空', {icon: 2}); |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | if (data.password === '') { |
|---|
| | | $("#password").focus(); |
|---|
| | | notice.msg('密码不能为空', {icon: 2}); |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | if (data.code === '' && codeSwitch === 'Y') { |
|---|
| | | $("#code").focus(); |
|---|
| | | notice.msg('验证码不能为空', {icon: 2}); |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | if (sessionStorage.getItem("code").toUpperCase() !== data.code.toUpperCase() && codeSwitch==='Y'){ |
|---|
| | | $("#code").focus(); |
|---|
| | | notice.msg('验证码错误', {icon: 2}); |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | var user = { |
|---|
| | | username: data.username, |
|---|
| | | password: hex_md5(data.password) |
|---|
| | | }; |
|---|
| | | $.ajax({ |
|---|
| | | url: baseUrl+"/login.action", |
|---|
| | | data: user, |
|---|
| | | method: 'POST', |
|---|
| | | success: function (res) { |
|---|
| | | if (res.code === 200){ |
|---|
| | | // 记住密码 |
|---|
| | | if($('#rememberPwd').is(':checked')){ |
|---|
| | | localStorage.setItem('oldUserName', user.username); |
|---|
| | | localStorage.setItem('oldPass', data.password); |
|---|
| | | localStorage.setItem('rememberSwitch', true); |
|---|
| | | } else { |
|---|
| | | localStorage.removeItem('oldUserName'); |
|---|
| | | localStorage.removeItem('oldPass'); |
|---|
| | | localStorage.setItem('rememberSwitch', false); |
|---|
| | | } |
|---|
| | | localStorage.setItem("token", res.data.token); |
|---|
| | | localStorage.setItem("nickname", res.data.nickname); |
|---|
| | | window.location.href = "index.html"; |
|---|
| | | } else { |
|---|
| | | notice.msg(res.msg, {icon: 2}); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return false; |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | |
|---|
| | | // 初始化验证码 |
|---|
| | | $('#codeImg').click(function () { |
|---|
| | | initCode(); |
|---|
| | | }); |
|---|
| | | function initCode() { |
|---|
| | | var random = Math.random(); |
|---|
| | | $('#codeImg').attr("src", baseUrl+"/code.action?sd="+random); |
|---|
| | | setTimeout(function () { |
|---|
| | | $.ajax({ |
|---|
| | | url: baseUrl+"/code.do", |
|---|
| | | data: {sd: random}, |
|---|
| | | method: 'POST', |
|---|
| | | async: false, |
|---|
| | | success: function (code) { |
|---|
| | | sessionStorage.setItem("code", code); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, 100); |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | </body> |
|---|
| | | <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> |
|---|
| | | </script> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
