399 lines
12 KiB
HTML
Raw Normal View History

2020-12-07 22:17:42 +08:00
<!DOCTYPE html>
<html>
2020-12-22 23:29:01 +08:00
2020-12-07 22:17:42 +08:00
<head>
<meta charset="UTF-8">
2020-12-16 22:46:47 +08:00
<title>ProManager</title>
2020-12-07 22:17:42 +08:00
<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="stylesheet" href="../lib/layui-v2.5.5/css/layui.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]-->
<style>
2020-12-22 23:29:01 +08:00
.main-body {
top: 50%;
left: 50%;
position: absolute;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow: hidden;
}
.login-main .login-bottom .center .item input {
display: inline-block;
width: 227px;
height: 22px;
padding: 0;
position: absolute;
border: 0;
outline: 0;
font-size: 14px;
letter-spacing: 0;
}
.login-main .login-bottom .center .item .icon-1 {
background: url(../images/icon-login.png) no-repeat 1px 0;
}
.login-main .login-bottom .center .item .icon-2 {
background: url(../images/icon-login.png) no-repeat -54px 0;
}
.login-main .login-bottom .center .item .icon-3 {
background: url(../images/icon-login.png) no-repeat -106px 0;
}
.login-main .login-bottom .center .item .icon-4 {
background: url(../images/icon-login.png) no-repeat 0 -43px;
position: absolute;
right: -10px;
cursor: pointer;
}
.login-main .login-bottom .center .item .icon-5 {
background: url(../images/icon-login.png) no-repeat -55px -43px;
}
.login-main .login-bottom .center .item .icon-6 {
background: url(../images/icon-login.png) no-repeat 0 -93px;
position: absolute;
right: -10px;
margin-top: 8px;
cursor: pointer;
}
.login-main .login-bottom .tip .icon-nocheck {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 2px;
border: solid 1px #9abcda;
position: relative;
top: 2px;
margin: 1px 8px 1px 1px;
cursor: pointer;
}
.login-main .login-bottom .tip .icon-check {
margin: 0 7px 0 0;
width: 14px;
height: 14px;
border: none;
background: url(../images/icon-login.png) no-repeat -111px -48px;
}
.login-main .login-bottom .center .item .icon {
display: inline-block;
width: 33px;
height: 22px;
}
.login-main .login-bottom .center .item {
width: 288px;
height: 35px;
border-bottom: 1px solid #dae1e6;
margin-bottom: 35px;
}
.login-main {
width: 428px;
position: relative;
float: left;
}
.login-main .login-top {
height: 117px;
background-color: #148be4;
border-radius: 12px 12px 0 0;
font-family: SourceHanSansCN-Regular;
font-size: 30px;
font-weight: 400;
font-stretch: normal;
letter-spacing: 0;
color: #fff;
line-height: 117px;
text-align: center;
overflow: hidden;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
.login-main .login-top .bg1 {
display: inline-block;
width: 74px;
height: 74px;
background: #fff;
opacity: .1;
border-radius: 0 74px 0 0;
position: absolute;
left: 0;
top: 43px;
}
.login-main .login-top .bg2 {
display: inline-block;
width: 94px;
height: 94px;
background: #fff;
opacity: .1;
border-radius: 50%;
position: absolute;
right: -16px;
top: -16px;
}
.login-main .login-bottom {
width: 428px;
background: #fff;
border-radius: 0 0 12px 12px;
padding-bottom: 53px;
}
.login-main .login-bottom .center {
width: 288px;
margin: 0 auto;
padding-top: 40px;
padding-bottom: 15px;
position: relative;
}
.login-main .login-bottom .tip {
clear: both;
height: 16px;
line-height: 16px;
width: 288px;
margin: 0 auto;
}
body {
background: url(../images/loginbg.png) 0% 0% / cover no-repeat;
position: static;
font-size: 12px;
}
input::-webkit-input-placeholder {
color: #a6aebf;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #a6aebf;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #a6aebf;
}
input:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #a6aebf;
}
input:-webkit-autofill {
/* 取消Chrome记住密码的背景颜色 */
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
html {
height: 100%;
}
.login-main .login-bottom .tip {
clear: both;
height: 16px;
line-height: 16px;
width: 288px;
margin: 0 auto;
}
.login-main .login-bottom .tip .login-tip {
font-family: MicrosoftYaHei;
font-size: 12px;
font-weight: 400;
font-stretch: normal;
letter-spacing: 0;
color: #9abcda;
cursor: pointer;
}
.login-main .login-bottom .tip .forget-password {
font-stretch: normal;
letter-spacing: 0;
color: #1391ff;
text-decoration: none;
position: absolute;
right: 62px;
}
.login-main .login-bottom .login-btn {
width: 288px;
height: 40px;
background-color: #1E9FFF;
border-radius: 16px;
margin: 24px auto 0;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 14px;
letter-spacing: 0;
cursor: pointer;
border: none;
}
.login-main .login-bottom .center .item .validateImg {
position: absolute;
right: 1px;
cursor: pointer;
height: 36px;
border: 1px solid #e6e6e6;
}
.footer {
left: 0;
bottom: 0;
color: #fff;
width: 100%;
position: absolute;
text-align: center;
line-height: 30px;
padding-bottom: 10px;
text-shadow: #000 0.1em 0.1em 0.1em;
font-size: 14px;
}
.padding-5 {
padding: 5px !important;
}
.footer a,
.footer span {
color: #fff;
}
@media screen and (max-width:428px) {
.login-main {
width: 360px !important;
}
.login-main .login-top {
width: 360px !important;
}
.login-main .login-bottom {
width: 360px !important;
}
2020-12-07 22:17:42 +08:00
}
</style>
</head>
2020-12-22 23:29:01 +08:00
2020-12-07 22:17:42 +08:00
<body>
2020-12-22 23:29:01 +08:00
<div class="main-body">
<div class="login-main">
<div class="login-top">
<span>ProManager登录</span>
<span class="bg1"></span>
<span class="bg2"></span>
</div>
<form class="layui-form login-bottom">
<div class="center">
<div class="item">
<span class="icon icon-2"></span>
<input type="text" name="username" lay-verify="required" placeholder="请输入登录账号" maxlength="24" />
</div>
2020-12-07 22:17:42 +08:00
2020-12-22 23:29:01 +08:00
<div class="item">
<span class="icon icon-3"></span>
<input type="password" name="password" lay-verify="required" placeholder="请输入密码" maxlength="20">
<span class="bind-password icon icon-4"></span>
</div>
2020-12-07 22:17:42 +08:00
2020-12-22 23:29:01 +08:00
</div>
<div class="layui-form-item" style="text-align:center; width:100%;height:100%;margin:0px;">
<button class="login-btn" lay-submit="" lay-filter="login">立即登录</button>
</div>
</form>
</div>
2020-12-07 22:17:42 +08:00
</div>
2020-12-22 23:29:01 +08:00
<div class="footer">
© 矿洞科技工作室
</div>
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
2020-12-23 14:04:35 +08:00
<script src="../js/md5/md5.js" charset="utf-8"></script>
2020-12-22 23:29:01 +08:00
<script>
layui.use(['form', 'jquery'], function () {
var $ = layui.jquery,
form = layui.form,
layer = layui.layer;
2020-12-07 22:17:42 +08:00
2020-12-22 23:29:01 +08:00
// 登录过期的时候跳出ifram框架
if (top.location != self.location) top.location = self.location;
$('.bind-password').on('click', function () {
if ($(this).hasClass('icon-5')) {
$(this).removeClass('icon-5');
$("input[name='password']").attr('type', 'password');
} else {
$(this).addClass('icon-5');
$("input[name='password']").attr('type', 'text');
}
});
// 进行登录操作
form.on('submit(login)', function (data) {
data = data.field;
if (data.username == '') {
layer.msg('用户名不能为空');
return false;
}
if (data.password == '') {
layer.msg('密码不能为空');
return false;
}
2020-12-23 14:04:35 +08:00
var password=b64_md5(data.password);
2020-12-22 23:29:01 +08:00
var apiUrl = 'http://localhost:21021/api/services/app/UserInfo/GetLoginUser';
$.ajax({
url: apiUrl, //请求的url地址
dataType: "json", //返回格式为json
//async: false,//请求是否异步默认为异步这也是ajax重要特性
2020-12-23 14:04:35 +08:00
data: { "Account": data.username, "PassWord": password }, //参数值
2020-12-22 23:29:01 +08:00
type: "GET", //请求方式
success: function (req) {
//请求成功时处理
alert(22)
},
error: function (xhr, textStatus, errorThrown) {
/*错误信息处理*/
alert("进入error---");
alert("状态码:" + xhr.status);
alert("状态:" + xhr.readyState);//当前状态,0-未初始化1-正在载入2-已经载入3-数据进行交互4-完成。
alert("错误信息:" + xhr.statusText);
alert("返回响应信息:" + xhr.responseText);//这里是详细的信息
alert("请求状态:" + textStatus); alert(errorThrown); alert("请求失败");
}
});
// layer.msg('登录成功', function () {
// window.location = '../index.html';
// });
2020-12-07 22:17:42 +08:00
return false;
});
});
2020-12-22 23:29:01 +08:00
</script>
2020-12-07 22:17:42 +08:00
</body>
2020-12-22 23:29:01 +08:00
2020-12-07 22:17:42 +08:00
</html>