|  |  |  | 
|---|
|  |  |  | <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; | 
|---|
|  |  |  | border: 1px solid #939393; | 
|---|
|  |  |  | height: 40px; | 
|---|
|  |  |  | padding-left: 20px; | 
|---|
|  |  |  | font-size: 16px; | 
|---|
|  |  |  | 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: 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: 4px; | 
|---|
|  |  |  | height: 120px; | 
|---|
|  |  |  | border-radius: 5px; | 
|---|
|  |  |  | height: 40px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </style> | 
|---|
|  |  |  | </head> | 
|---|
|  |  |  | <body> | 
|---|
|  |  |  | <body class="login-bg"> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <div id="login-wrapper"> | 
|---|
|  |  |  | <header> | 
|---|
|  |  |  | 
|---|
|  |  |  | form.on('submit(login)', function (data) { | 
|---|
|  |  |  | var mobile = $("#mobile").val(); | 
|---|
|  |  |  | if (mobile === "") { | 
|---|
|  |  |  | alert("请输入手机号"); | 
|---|
|  |  |  | layer.msg("请输入账号", {icon: 2}) | 
|---|
|  |  |  | $("#mobile").focus(); | 
|---|
|  |  |  | return; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | var password = $("#password").val(); | 
|---|
|  |  |  | if (password === "") { | 
|---|
|  |  |  | alert("请输入密码"); | 
|---|
|  |  |  | layer.msg("请输入密码", {icon: 2}) | 
|---|
|  |  |  | $("#password").focus(); | 
|---|
|  |  |  | return; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | 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(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|