|
|
@@ -5,55 +5,165 @@
|
|
|
<title>登录</title>
|
|
|
<meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
|
|
|
<meta name="author" content="Vincent Garreau" />
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
+ <meta name="viewport"
|
|
|
+ content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
<link rel="stylesheet" media="screen" href="sa-frame/login/style.css">
|
|
|
<link rel="stylesheet" href="static/sa.css">
|
|
|
<style type="text/css">
|
|
|
/* 背景图片 */
|
|
|
- #particles-js{
|
|
|
+ body {
|
|
|
background-image: url(sa-frame/login/bg.jpg);
|
|
|
+ background-size: cover;
|
|
|
}
|
|
|
|
|
|
/* 样式调整 */
|
|
|
- .login-box{display: flex; justify-content: center; align-items: center; position: fixed; width: inherit; height: 100%; pointer-events: none;}
|
|
|
- .login{height: auto; padding: 50px 50px; position: static; margin: 0 auto !important; pointer-events: all; border-radius: 0px;}
|
|
|
- .login-top{margin-top: 0px; margin-bottom: 30px;}
|
|
|
- .logo-img{width: 50px; height: 50px; vertical-align: middle; position: relative; top: -3px; border-radius: 50%; margin-left: -10px; margin-right: 10px;}
|
|
|
- .logo-img{display: none;}
|
|
|
- .login-button{width: 270px; border-radius: 0px; transition: all 0.2s;}
|
|
|
- .login-button:hover{background-color: #0E80eF;}
|
|
|
+ .login-box {
|
|
|
+ width: 370px;
|
|
|
+ padding: 10px 30px 48px 30px;
|
|
|
+ background-color: white;
|
|
|
+ box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 10px;
|
|
|
+ position: absolute;
|
|
|
+ top: 20%;
|
|
|
+ left: 65%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .clear {
|
|
|
+ clear: both;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form {
|
|
|
+ padding: 0px 25px 10px 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bag {}
|
|
|
+
|
|
|
+ .bage {
|
|
|
+ width: 10%;
|
|
|
+ height: 3px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: #0E80eF;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lg {
|
|
|
+ background: #F2F4F9;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 15px;
|
|
|
+ margin-bottom: 17px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ float: left;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-right: 20px;
|
|
|
+ margin-top: -3px;
|
|
|
+ border-right: 1px solid #D8DDED;
|
|
|
+ padding-right: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ input {
|
|
|
+ border: 0px;
|
|
|
+ background-color: #F2F4F9;
|
|
|
+ font-size: 15px;
|
|
|
+ float: left;
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login {
|
|
|
+ width: 400px;
|
|
|
+ top: 10px;
|
|
|
+ height: auto;
|
|
|
+ padding: 50px 50px;
|
|
|
+ position: static;
|
|
|
+ border-radius: 15px;
|
|
|
+ pointer-events: all;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-top {
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo-img {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ vertical-align: middle;
|
|
|
+ position: relative;
|
|
|
+ top: -3px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-left: -10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo-img {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-button {
|
|
|
+ border-radius: 6px;
|
|
|
+ transition: all 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-button:hover {
|
|
|
+ background-color: #0E80eF;
|
|
|
+ }
|
|
|
+
|
|
|
/* .page-title{line-height: 50px;} */
|
|
|
- .sk-rotating-plane{}
|
|
|
+ .sk-rotating-plane {}
|
|
|
+
|
|
|
/* 动画相关 */
|
|
|
/* .login{background-color: rgba(0,0,0,0); } */
|
|
|
- .login{opacity: 0;}
|
|
|
+ .login {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-title {
|
|
|
+ text-align: center;
|
|
|
+ box-shadow: 0px 13px 35px 0px rgba(0, 129, 255, 0.03);
|
|
|
+ }
|
|
|
|
|
|
+ #captcha {
|
|
|
+ position: absolute;
|
|
|
+ height: 35px;
|
|
|
+ top: 6px;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
- <div id="particles-js">
|
|
|
+ <div>
|
|
|
<div class="login-box">
|
|
|
- <div class="login">
|
|
|
+ <div class="bg">
|
|
|
<div class="login-top">
|
|
|
- <img src="" class="logo-img" alt="">
|
|
|
<span class="page-title">登录</span>
|
|
|
+ <div class="bag">
|
|
|
+ <div class="bage"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="login-center clearfix">
|
|
|
- <div class="login-center-img"><img src="sa-frame/login/name.png" /></div>
|
|
|
- <div class="login-center-input">
|
|
|
+ <div class="form">
|
|
|
+ <div class="lg">
|
|
|
+ <img src="sa-frame/login/name.png" class="icon" />
|
|
|
<input type="text" name="key" value="" placeholder="请输入账号" />
|
|
|
- <div class="login-center-input-text">账号</div>
|
|
|
+ <div class="clear"></div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="login-center clearfix">
|
|
|
- <div class="login-center-img"><img src="sa-frame/login/password.png" /></div>
|
|
|
- <div class="login-center-input">
|
|
|
+ <div class="lg">
|
|
|
+ <img src="sa-frame/login/password.png" class="icon" />
|
|
|
<input type="password" name="password" value="" placeholder="请输入密码" />
|
|
|
- <div class="login-center-input-text">密码</div>
|
|
|
+ <div class="clear"></div>
|
|
|
</div>
|
|
|
+ <div class="lg">
|
|
|
+ <img src="sa-frame/login/code.png" class="icon" />
|
|
|
+ <input type="number" name="verCode" value="" placeholder="请输入验证码" />
|
|
|
+ <img id="captcha" />
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ <div class="login-button">登录</div>
|
|
|
</div>
|
|
|
- <div class="login-button">登录</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="sk-rotating-plane"></div>
|
|
|
@@ -61,35 +171,61 @@
|
|
|
|
|
|
<!-- scripts -->
|
|
|
<script src="sa-frame/login/particles.min.js"></script>
|
|
|
- <script src="sa-frame/login/app.js"></script>
|
|
|
<script src="static/kj/jquery.min.js"></script>
|
|
|
<script src="static/kj/layer/layer.js"></script>
|
|
|
<script src="static/sa.js"></script>
|
|
|
+ <script src="static/kj/jsencrypt.js"></script>
|
|
|
<script type="text/javascript">
|
|
|
-
|
|
|
// 你所有要改的代码全在这里 ↓↓↓↓↓
|
|
|
|
|
|
// 所有参考属性
|
|
|
- var page_title = '互市管理 后台登录'; // 页面标题
|
|
|
- var key = 'sa'; // 默认的账号
|
|
|
- var password = '123456'; // 默认的password
|
|
|
- var logo = 'sa-frame/admin-logo.png'; // logo地址，为空字符串则不显示
|
|
|
+ var page_title = '你好，欢迎后台系统'; // 页面标题
|
|
|
+ var key = 'sa'; // 默认的账号
|
|
|
+ var password = '123456'; // 默认的password
|
|
|
+ var logo = 'sa-frame/admin-logo.png'; // logo地址，为空字符串则不显示
|
|
|
+ var codeKey = '';
|
|
|
+ var pKey = '';
|
|
|
|
|
|
+ function getCaptcha() {
|
|
|
+ sa.ajax('/sp-admin/AccAdmin/captcha', {}, function(res) {
|
|
|
+ let data = res.data;
|
|
|
+ $('#captcha').attr('src', data.image);
|
|
|
+ codeKey = data.key;
|
|
|
+ pKey = data.pKey;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ $(function() {
|
|
|
+ $('#notice').html('')
|
|
|
+ getCaptcha();
|
|
|
+ });
|
|
|
+ $('#captcha').click(function() {
|
|
|
+ getCaptcha()
|
|
|
+ })
|
|
|
// 点击登录按钮
|
|
|
document.querySelector(".login-button").onclick = function() {
|
|
|
+ var encrypt = new JSEncrypt();
|
|
|
+ encrypt.setPublicKey(pKey);
|
|
|
// 1、取值
|
|
|
var p = {
|
|
|
key: $('[name=key]').val(),
|
|
|
- password: $('[name=password]').val()
|
|
|
+ password: $('[name=password]').val(),
|
|
|
+ verCode: $('[name=verCode]').val(),
|
|
|
+ code: codeKey
|
|
|
}
|
|
|
// 2、判断
|
|
|
- if(p.key == '' || p.password == ''){
|
|
|
+ if (p.key == '' || p.password == '') {
|
|
|
return layer.msg('请输入账号密码');
|
|
|
}
|
|
|
+ if (p.verCode == '') {
|
|
|
+ return layer.msg('请输入验证码');
|
|
|
+ }
|
|
|
+ let res = encrypt.encrypt(p.password);
|
|
|
+ let s = encrypt.decrypt(res);
|
|
|
+ p.password = res;
|
|
|
// 3、请求后台
|
|
|
- sa.ajax('/sp-admin/AccAdmin/doLogin', p, function(res){
|
|
|
+ sa.ajax('/sp-admin/AccAdmin/doLogin', p, function(res) {
|
|
|
// 写入token
|
|
|
- if(res.data.tokenInfo) {
|
|
|
+ if (res.data.tokenInfo) {
|
|
|
localStorage.tokenName = res.data.tokenInfo.tokenName;
|
|
|
localStorage.tokenValue = res.data.tokenInfo.tokenValue;
|
|
|
}
|
|
|
@@ -97,10 +233,10 @@
|
|
|
sa.setAuth(res.data.per_list);
|
|
|
// 打个招呼，进入 index.html
|
|
|
sa.msg('登录成功，欢迎你：' + p.key);
|
|
|
- setTimeout(function () {
|
|
|
- if(parent == window){
|
|
|
+ setTimeout(function() {
|
|
|
+ if (parent == window) {
|
|
|
location.href = "index.html";
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
sa.closeCurrIframe();
|
|
|
parent.location.reload();
|
|
|
}
|
|
|
@@ -108,7 +244,6 @@
|
|
|
})
|
|
|
}
|
|
|
// 你所有要改的代码全在这里 ↑↑↑↑↑
|
|
|
-
|
|
|
</script>
|
|
|
<script type="text/javascript">
|
|
|
// 替换属性
|
|
|
@@ -116,21 +251,16 @@
|
|
|
$('title').html(page_title);
|
|
|
$('[name=key]').val(key);
|
|
|
$('[name=password]').val(password);
|
|
|
- if(logo != null && logo != '') {
|
|
|
+ if (logo != null && logo != '') {
|
|
|
$('.logo-img').attr('src', logo);
|
|
|
$('.logo-img').show();
|
|
|
}
|
|
|
// 绑定回车事件
|
|
|
- $('[name=password]').bind('keypress', function(event){
|
|
|
- if(event.keyCode == "13") {
|
|
|
+ $('[name=password]').bind('keypress', function(event) {
|
|
|
+ if (event.keyCode == "13") {
|
|
|
$('.login-button').click();
|
|
|
}
|
|
|
});
|
|
|
- // 去掉透明
|
|
|
- setTimeout(function() {
|
|
|
- // document.querySelector('.login').style.backgroundColor = 'rgba(256,256,256,1)';
|
|
|
- document.querySelector('.login').style.opacity = '1';
|
|
|
- }, 0)
|
|
|
</script>
|
|
|
</body>
|
|
|
-</html>
|
|
|
+</html>
|
李书文
