|  |  |  | 
|---|
|  |  |  | <html lang="en"> | 
|---|
|  |  |  | <head> | 
|---|
|  |  |  | <meta charset="UTF-8"> | 
|---|
|  |  |  | <meta name="viewport" content="width=device-width, target-densitydpi=high-dpi, initial-scale=1.0, user-scalable=no"/> | 
|---|
|  |  |  | <title>系统登录</title> | 
|---|
|  |  |  | <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all"> | 
|---|
|  |  |  | <script type="text/javascript" src="../../static/layui/layui.js"></script> | 
|---|
|  |  |  | 
|---|
|  |  |  | <style> | 
|---|
|  |  |  | html{ | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | body.login-bg { | 
|---|
|  |  |  | color: #777; | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%); | 
|---|
|  |  |  | background-repeat: no-repeat; | 
|---|
|  |  |  | background-size: cover; | 
|---|
|  |  |  | background-position: top center; | 
|---|
|  |  |  | background-image: linear-gradient(to right, #ff9569 0%, #e92758 100%); | 
|---|
|  |  |  | /*background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);*/ | 
|---|
|  |  |  | /*background: -webkit-linear-gradient(red, blue); !* Safari 5.1 - 6.0 *!;*/ | 
|---|
|  |  |  | /*background-image: url("../static/image/login_bg.jpg");*/ | 
|---|
|  |  |  | /*background-repeat: no-repeat;*/ | 
|---|
|  |  |  | /*background-size: cover;*/ | 
|---|
|  |  |  | /*background-position: top center;*/ | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | #login-wrapper { | 
|---|
|  |  |  | box-sizing:border-box; | 
|---|
|  |  |  | background: #fff; | 
|---|
|  |  |  | position: absolute; | 
|---|
|  |  |  | top: 45%; | 
|---|
|  |  |  | left: 50%; | 
|---|
|  |  |  | margin-top: -210px; | 
|---|
|  |  |  | margin-left: -220px; | 
|---|
|  |  |  | width: 440px; | 
|---|
|  |  |  | min-height: 420px; | 
|---|
|  |  |  | padding: 50px; | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | padding: 100px 60px; | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | border-radius: 5px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | transform-origin: 50% 50%; | 
|---|
|  |  |  | animation: loading 1s 0s forwards; | 
|---|
|  |  |  | transform: rotateX(0deg); | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | #login-wrapper h2 { | 
|---|
|  |  |  | font-size: 26px; | 
|---|
|  |  |  | margin-bottom: 30px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .layadmin-user-login-body .layui-form-item { | 
|---|
|  |  |  | #login-wrapper h1 { | 
|---|
|  |  |  | font-weight: bolder; | 
|---|
|  |  |  | margin-bottom: 20px; | 
|---|
|  |  |  | letter-spacing: 5px; | 
|---|
|  |  |  | /*transform:scale(3);*/ | 
|---|
|  |  |  | /*-webkit-transform:scale(3);*/ | 
|---|
|  |  |  | /*-moz-transform:scale(3);*/ | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .layui-form-item { | 
|---|
|  |  |  | margin-bottom: 15px; | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .layadmin-user-login-body .layui-form-item .layui-input { | 
|---|
|  |  |  | height: 42px; | 
|---|
|  |  |  | padding-left: 40px; | 
|---|
|  |  |  | .layui-form-item .layui-input { | 
|---|
|  |  |  | height: 40px; | 
|---|
|  |  |  | padding-left: 20px; | 
|---|
|  |  |  | font-size: 16px; | 
|---|
|  |  |  | border: 1px solid #c8cccf; | 
|---|
|  |  |  | border: 1px solid #767676; | 
|---|
|  |  |  | color: inherit; | 
|---|
|  |  |  | border-radius: 3px; | 
|---|
|  |  |  | transition: 0.3s; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .layui-input:hover, .layui-textarea:hover { | 
|---|
|  |  |  | border-color: #0767aa !important; | 
|---|
|  |  |  | border-width: 1.5px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .login-submit { | 
|---|
|  |  |  | margin-top: 30px; | 
|---|
|  |  |  | margin-top: 20px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .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 { | 
|---|
|  |  |  | #login-button { | 
|---|
|  |  |  | background-color: #0767aa; | 
|---|
|  |  |  | 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%; | 
|---|
|  |  |  | width: 50%; | 
|---|
|  |  |  | font-size: 14px; | 
|---|
|  |  |  | font-weight: bolder; | 
|---|
|  |  |  | border-radius: 5px; | 
|---|
|  |  |  | height: 40px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </style> | 
|---|
|  |  |  | </head> | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <div id="login-wrapper"> | 
|---|
|  |  |  | <header> | 
|---|
|  |  |  | <h2>系统登录</h2> | 
|---|
|  |  |  | <h1>系统登录</h1> | 
|---|
|  |  |  | </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="用户名"> | 
|---|
|  |  |  | <input id="username" class="layui-input" type="text" name="username" lay-verify="username" placeholder="账号" autocomplete="off"> | 
|---|
|  |  |  | </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="密码"> | 
|---|
|  |  |  | <input id="password" class="layui-input" type="password" name="password" lay-verify="password" placeholder="密码" autocomplete="off"> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <!--<div class="layui-form-item">--> | 
|---|
|  |  |  | <!--<input id="rememberPwd" style="vertical-align: middle" type="checkbox" lay-filter="remPwd" lay-skin="switch" lay-text="开启|关闭" title="记住密码" checked="checked">--> | 
|---|
|  |  |  | <!--<span style="vertical-align: middle;font-size: 15px">记住密码</span>--> | 
|---|
|  |  |  | <!--</div>--> | 
|---|
|  |  |  | <!--        <div class="layui-form-item" style="text-align: right;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> | 
|---|
|  |  |  | 
|---|
|  |  |  | <script type="text/javascript" src="../../static/js/tools/md5.js"></script> | 
|---|
|  |  |  | <script type="text/javascript"> | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 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'}); | 
|---|
|  |  |  | var username = $("#username").val(); | 
|---|
|  |  |  | if (username === "") { | 
|---|
|  |  |  | layer.msg("请输入账号", {icon: 2}) | 
|---|
|  |  |  | $("#username").focus(); | 
|---|
|  |  |  | return; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | var password = $("#password").val(); | 
|---|
|  |  |  | if (password === "") { | 
|---|
|  |  |  | layer.msg("请输入密码", {offset: '150px'}); | 
|---|
|  |  |  | layer.msg("请输入密码", {icon: 2}) | 
|---|
|  |  |  | $("#password").focus(); | 
|---|
|  |  |  | return; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | var user = { | 
|---|
|  |  |  | mobile: mobile, | 
|---|
|  |  |  | username: username, | 
|---|
|  |  |  | password: hex_md5(password) | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | debugger | 
|---|
|  |  |  | $.ajax({ | 
|---|
|  |  |  | url: baseUrl+"/login.action", | 
|---|
|  |  |  | data: user, | 
|---|
|  |  |  | method: 'POST', | 
|---|
|  |  |  | success: function (res) { | 
|---|
|  |  |  | if (res.code === 200){ | 
|---|
|  |  |  | layer.msg("登录成功", {icon: 1}) | 
|---|
|  |  |  | localStorage.setItem("token", res.data.token); | 
|---|
|  |  |  | localStorage.setItem("username", res.data.username); | 
|---|
|  |  |  | window.location.href = "index.html"; | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | layer.msg(res.msg, {offset: '150px'}); | 
|---|
|  |  |  | layer.msg(res.msg, {icon: 2}) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | 
|---|
|  |  |  | $('body').keydown(function () { | 
|---|
|  |  |  | if (event.keyCode === 13) { | 
|---|
|  |  |  | $("#login-button").click(); | 
|---|
|  |  |  | } else if (event.keyCode === 115) { | 
|---|
|  |  |  | $("#login-button").click(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|