| | |
|---|
| | | <html lang="en"> |
|---|
| | | <head> |
|---|
| | | <meta charset="UTF-8"> |
|---|
| | | <meta name="viewport" content="user-scalable=0"> |
|---|
| | | <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> |
|---|
| | |
|---|
| | | height: 100%; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | body.login-bg { |
|---|
| | | color: #777; |
|---|
| | | height: 100%; |
|---|
| | | 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; |
|---|
| | | height: 100%; |
|---|
| | | padding: 300px 100px; |
|---|
| | | padding: 100px 60px; |
|---|
| | | text-align: center; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #login-wrapper h1 { |
|---|
| | | font-size: xx-large; |
|---|
| | | font-weight: bolder; |
|---|
| | | margin-bottom: 100px; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | letter-spacing: 5px; |
|---|
| | | transform:scale(3); |
|---|
| | | -webkit-transform:scale(3); |
|---|
| | | -moz-transform:scale(3); |
|---|
| | | /*transform:scale(3);*/ |
|---|
| | | /*-webkit-transform:scale(3);*/ |
|---|
| | | /*-moz-transform:scale(3);*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .layui-form-item { |
|---|
| | | margin-bottom: 50px; |
|---|
| | | margin-bottom: 15px; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | .layui-form-item .layui-input { |
|---|
| | | height: 120px; |
|---|
| | | padding-left: 40px; |
|---|
| | | font-size: xx-large; |
|---|
| | | height: 40px; |
|---|
| | | padding-left: 20px; |
|---|
| | | font-size: 16px; |
|---|
| | | border: 1px solid #767676; |
|---|
| | | color: inherit; |
|---|
| | | border-radius: 15px; |
|---|
| | | border-radius: 3px; |
|---|
| | | transition: 0.3s; |
|---|
| | | } |
|---|
| | | .layui-input:hover, .layui-textarea:hover { |
|---|
| | |
|---|
| | | border-width: 1.5px; |
|---|
| | | } |
|---|
| | | .login-submit { |
|---|
| | | margin-top: 80px; |
|---|
| | | margin-top: 20px; |
|---|
| | | } |
|---|
| | | #login-button { |
|---|
| | | background-color: #0767aa; |
|---|
| | | /*width: 80%;*/ |
|---|
| | | font-size: xx-large; |
|---|
| | | width: 50%; |
|---|
| | | font-size: 14px; |
|---|
| | | font-weight: bolder; |
|---|
| | | border-radius: 10px; |
|---|
| | | height: 120px; |
|---|
| | | border-radius: 5px; |
|---|
| | | height: 40px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <body class="login-bg"> |
|---|
| | | |
|---|
| | | <div id="login-wrapper"> |
|---|
| | | <header> |
|---|
| | |
|---|
| | | </header> |
|---|
| | | <div class="layui-form layadmin-user-login-body"> |
|---|
| | | <div class="layui-form-item"> |
|---|
| | | <input id="mobile" class="layui-input" type="text" name="mobile" lay-verify="mobile" placeholder="账号" autocomplete="off"> |
|---|
| | | <input id="username" class="layui-input" type="text" name="username" lay-verify="username" placeholder="账号" autocomplete="off"> |
|---|
| | | </div> |
|---|
| | | <div class="layui-form-item"> |
|---|
| | | <input id="password" class="layui-input" type="password" name="password" lay-verify="password" placeholder="密码" autocomplete="off"> |
|---|
| | |
|---|
| | | $ = layui.jquery; |
|---|
| | | |
|---|
| | | form.on('submit(login)', function (data) { |
|---|
| | | var mobile = $("#mobile").val(); |
|---|
| | | if (mobile === "") { |
|---|
| | | alert("请输入手机号"); |
|---|
| | | var username = $("#username").val(); |
|---|
| | | if (username === "") { |
|---|
| | | layer.msg("请输入账号", {icon: 2}) |
|---|
| | | $("#username").focus(); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var password = $("#password").val(); |
|---|
| | | if (password === "") { |
|---|
| | | alert("请输入密码"); |
|---|
| | | 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 { |
|---|
| | | alert(res.msg); |
|---|
| | | layer.msg(res.msg, {icon: 2}) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | |
|---|
| | | $('body').keydown(function () { |
|---|
| | | if (event.keyCode === 13) { |
|---|
| | | $("#login-button").click(); |
|---|
| | | } else if (event.keyCode === 115) { |
|---|
| | | $("#login-button").click(); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | |
|---|
