| | |
| | | <!DOCTYPE html> |
| | | <html lang="en"> |
| | | <html lang="zh-CN"> |
| | | |
| | | <head> |
| | | <meta charset="UTF-8"> |
| | | <title>系统登录</title> |
| | | <meta charset="utf-8"> |
| | | <title>自动仓储 - 管理系统</title> |
| | | <link rel="icon" type="image/x-icon" href="../static/image/log.png" /> |
| | | <link rel="stylesheet" href="../static/layui/css/layui.css" media="all"> |
| | | <script type="text/javascript" src="../static/layui/layui.js"></script> |
| | | <script type="text/javascript" src="../static/js/common.js"></script> |
| | | <style> |
| | | html{ |
| | | height: 100%; |
| | | } |
| | | body.login-bg { |
| | | color: #777; |
| | | height: 100%; |
| | | /*background-image: url("../static/image/bg-imgage.jpg");*/ |
| | | background-image: url("../static/image/login_bg.jpg"); |
| | | background-repeat: no-repeat; |
| | | background-size: cover; |
| | | background-position: top center; |
| | | } |
| | | |
| | | #login-wrapper { |
| | | /*color: #fff;*/ |
| | | box-sizing:border-box; |
| | | /*background: #576669;*/ |
| | | background: #fff; |
| | | position: absolute; |
| | | top: 45%; |
| | | left: 50%; |
| | | margin-top: -210px; |
| | | margin-left: -220px; |
| | | width: 440px; |
| | | min-height: 420px; |
| | | padding: 50px; |
| | | text-align: center; |
| | | border-radius: 5px; |
| | | |
| | | transform-origin: 50% 50%; |
| | | animation: loading 1s 0s forwards; |
| | | transform: rotateX(0deg); |
| | | } |
| | | |
| | | #login-wrapper h2 { |
| | | font-size: 26px; |
| | | margin-bottom: 30px; |
| | | } |
| | | |
| | | .layadmin-user-login-body .layui-form-item { |
| | | margin-bottom: 20px; |
| | | position: relative; |
| | | } |
| | | .layadmin-user-login-body .layui-form-item .layui-input { |
| | | height: 42px; |
| | | padding-left: 40px; |
| | | font-size: 16px; |
| | | border: 1px solid #c8cccf; |
| | | color: inherit; |
| | | } |
| | | .login-submit { |
| | | margin-top: 30px; |
| | | } |
| | | .layadmin-user-login-icon { |
| | | position: absolute; |
| | | left: 1px; |
| | | top: 1px; |
| | | width: 38px; |
| | | line-height: 40px; |
| | | text-align: center; |
| | | color: #B2B2B2; |
| | | font-size: 18px; |
| | | } |
| | | .layui-btn-normal { |
| | | background-color: #5FB878; |
| | | font-size: 20px; |
| | | border-radius: 4px; |
| | | height: 52px; |
| | | } |
| | | #code-box { |
| | | position: relative; |
| | | height: 42px; |
| | | } |
| | | #code-label { |
| | | z-index: 999; |
| | | } |
| | | #code { |
| | | position: absolute; |
| | | left: 0; |
| | | top: 0; |
| | | display: inline-block; |
| | | width: 60%; |
| | | } |
| | | #codeImg { |
| | | border: 1px solid rgba(0,0,0,0.1); |
| | | position: absolute; |
| | | right: 5%; |
| | | top: 0; |
| | | width: 30%; |
| | | height: 90%; |
| | | } |
| | | </style> |
| | | <link rel="stylesheet" href="../static/css/login0.css"> |
| | | </head> |
| | | <body class="login-bg"> |
| | | |
| | | <div id="login-wrapper"> |
| | | <header> |
| | | <h2>系统登录</h2> |
| | | </header> |
| | | <div class="layui-form layadmin-user-login-body"> |
| | | <div class="layui-form-item"> |
| | | <label class="layui-icon layui-icon-cellphone layadmin-user-login-icon"></label> |
| | | <input id="mobile" class="layui-input" type="text" name="mobile" lay-verify="mobile" placeholder="用户名"> |
| | | <body> |
| | | <div class="dowebok"> |
| | | <div class="container"> |
| | | <div class="left"> |
| | | <div class="login">登录</div> |
| | | <div class="eula">欢迎光临,请输入您的电子邮箱和密码以登录!</div> |
| | | </div> |
| | | <div class="layui-form-item"> |
| | | <label class="layui-icon layui-icon-password layadmin-user-login-icon"></label> |
| | | <input id="password" class="layui-input" type="password" name="password" lay-verify="password" placeholder="密码"> |
| | | <div class="right"> |
| | | <svg viewBox="0 0 320 300"> |
| | | <defs> |
| | | <linearGradient inkscape:collect="always" id="linearGradient" x1="13" y1="193.49992" x2="307" |
| | | y2="193.49992" gradientUnits="userSpaceOnUse"> |
| | | <stop style="stop-color:#ff00ff;" offset="0" id="stop876" /> |
| | | <stop style="stop-color:#ff0000;" offset="1" id="stop878" /> |
| | | </linearGradient> |
| | | </defs> |
| | | <path d="m 40,120.00016 239.99984,-3.2e-4 c 0,0 24.99263,0.79932 25.00016,35.00016 0.008,34.20084 -25.00016,35 -25.00016,35 h -239.99984 c 0,-0.0205 -25,4.01348 -25,38.5 0,34.48652 25,38.5 25,38.5 h 215 c 0,0 20,-0.99604 20,-25 0,-24.00396 -20,-25 -20,-25 h -190 c 0,0 -20,1.71033 -20,25 0,24.00396 20,25 20,25 h 168.57143" /> |
| | | </svg> |
| | | <div class="form"> |
| | | <!-- <input type="password" style="position: absolute; z-index: -1">--> |
| | | <label for="username">电子邮件</label> |
| | | <input type="text" id="username"> |
| | | <label for="password">密码</label> |
| | | <input type="password" id="password"> |
| | | <input type="submit" id="submit" onclick="login()" value="登陆"> |
| | | </div> |
| | | </div> |
| | | <div id="code-box" class="layui-form-item" style=""> |
| | | <label id="code-label" class="layui-icon layui-icon-vercode layadmin-user-login-icon"></label> |
| | | <input id="code" class="layui-input" type="text" name="password" lay-verify="code" placeholder="验证码"> |
| | | <img id="codeImg" title="看不清?点击换一张。"> |
| | | </div> |
| | | <div class="layui-form-item" style="text-align: left;padding-left: 3px;"> |
| | | <input id="rememberPwd" style="vertical-align: middle" type="checkbox" lay-skin='primary' lay-filter="remPwd" title="记住密码" checked="checked"> |
| | | </div> |
| | | </div> |
| | | <div class="layui-form-item login-submit"> |
| | | <button id="login-button" class="layui-btn layui-btn-fluid layui-btn-normal" lay-submit="" lay-filter="login">登 录</button> |
| | | </div> |
| | | </div> |
| | | |
| | | </body> |
| | | <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script> |
| | | <script type="text/javascript" src="../static/js/tools/anime.min.js"></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"> |
| | | |
| | | $(function () { |
| | |
| | | }, 100); |
| | | } |
| | | |
| | | function login() { |
| | | var username = $("#username").val(); |
| | | if (username === "") { |
| | | layer.msg("请输入账号", {offset: '150px'}); |
| | | return; |
| | | } |
| | | var password = $("#password").val(); |
| | | if (password === "") { |
| | | layer.msg("请输入密码", {offset: '150px'}); |
| | | return; |
| | | } |
| | | var user = { |
| | | username: username, |
| | | password: hex_md5(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',password); |
| | | } else { |
| | | localStorage.removeItem('oldUserName'); |
| | | localStorage.removeItem('oldPass'); |
| | | } |
| | | localStorage.setItem("token", res.data.token); |
| | | localStorage.setItem("username", res.data.nickname); |
| | | window.location.href = "index.html"; |
| | | } else { |
| | | layer.msg(res.msg, {offset: '150px'}); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | |
| | | layui.use(['form','layer'],function () { |
| | | var form = layui.form, |
| | | layer = layui.layer, |
| | | $ = layui.jquery; |
| | | |
| | | form.on('submit(login)', function (data) { |
| | | var mobile = $("#mobile").val(); |
| | | if (mobile === "") { |
| | | layer.msg("请输入手机号", {offset: '150px'}); |
| | | return; |
| | | } |
| | | var password = $("#password").val(); |
| | | if (password === "") { |
| | | layer.msg("请输入密码", {offset: '150px'}); |
| | | return; |
| | | } |
| | | var code = $("#code").val(); |
| | | if (code === "" && codeSwitch === 'Y') { |
| | | layer.msg("请输入验证码", {offset: '150px'}); |
| | | return; |
| | | } |
| | | if (sessionStorage.getItem("code").toUpperCase() !== code.toUpperCase()&&codeSwitch==='Y'){ |
| | | layer.msg("验证码错误", {offset: '150px'}); |
| | | return; |
| | | } |
| | | |
| | | var user = { |
| | | mobile: mobile, |
| | | password: hex_md5(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.mobile); |
| | | localStorage.setItem('oldPass',user.password); |
| | | } |
| | | localStorage.setItem("token", res.data.token); |
| | | localStorage.setItem("username", res.data.username); |
| | | window.location.href = "index.html"; |
| | | } else { |
| | | layer.msg(res.msg, {offset: '150px'}); |
| | | } |
| | | } |
| | | }); |
| | | return false; |
| | | }); |
| | | |
| | |
| | | |
| | | }); |
| | | </script> |
| | | </html> |
| | | <script> |
| | | var current = null; |
| | | document.querySelector('#username').addEventListener('focus', function(e) { |
| | | if (current) current.pause(); |
| | | current = anime({ |
| | | targets: 'path', |
| | | strokeDashoffset: { |
| | | value: 0, |
| | | duration: 700, |
| | | easing: 'easeOutQuart' |
| | | }, |
| | | strokeDasharray: { |
| | | value: '240 1386', |
| | | duration: 700, |
| | | easing: 'easeOutQuart' |
| | | } |
| | | }); |
| | | }); |
| | | document.querySelector('#password').addEventListener('focus', function(e) { |
| | | if (current) current.pause(); |
| | | current = anime({ |
| | | targets: 'path', |
| | | strokeDashoffset: { |
| | | value: -336, |
| | | duration: 700, |
| | | easing: 'easeOutQuart' |
| | | }, |
| | | strokeDasharray: { |
| | | value: '240 1386', |
| | | duration: 700, |
| | | easing: 'easeOutQuart' |
| | | } |
| | | }); |
| | | }); |
| | | document.querySelector('#submit').addEventListener('focus', function(e) { |
| | | if (current) current.pause(); |
| | | current = anime({ |
| | | targets: 'path', |
| | | strokeDashoffset: { |
| | | value: -730, |
| | | duration: 700, |
| | | easing: 'easeOutQuart' |
| | | }, |
| | | strokeDasharray: { |
| | | value: '530 1386', |
| | | duration: 700, |
| | | easing: 'easeOutQuart' |
| | | } |
| | | }); |
| | | }); |
| | | |
| | | </script> |
| | | </body> |
| | | |
| | | </html> |