123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136 |
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="utf-8">
- <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">
- <link rel="stylesheet" media="screen" href="sa-frame/login/style.css">
- <link rel="stylesheet" href="static/sa.css">
- <style type="text/css">
- /* 背景图片 */
- #particles-js{
- background-image: url(sa-frame/login/bg.jpg);
- }
- /* 样式调整 */
- .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;}
- /* .page-title{line-height: 50px;} */
- .sk-rotating-plane{}
- /* 动画相关 */
- /* .login{background-color: rgba(0,0,0,0); } */
- .login{opacity: 0;}
- </style>
- </head>
- <body>
- <div id="particles-js">
- <div class="login-box">
- <div class="login">
- <div class="login-top">
- <img src="" class="logo-img" alt="">
- <span class="page-title">登录</span>
- </div>
- <div class="login-center clearfix">
- <div class="login-center-img"><img src="sa-frame/login/name.png" /></div>
- <div class="login-center-input">
- <input type="text" name="key" value="" placeholder="请输入账号" />
- <div class="login-center-input-text">账号</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">
- <input type="password" name="password" value="" placeholder="请输入密码" />
- <div class="login-center-input-text">密码</div>
- </div>
- </div>
- <div class="login-button">登录</div>
- </div>
- </div>
- <div class="sk-rotating-plane"></div>
- </div>
- <!-- 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 type="text/javascript">
- // 你所有要改的代码全在这里 ↓↓↓↓↓
- // 所有参考属性
- var page_title = '互市管理 后台登录'; // 页面标题
- var key = 'sa'; // 默认的账号
- var password = '123456'; // 默认的password
- var logo = 'sa-frame/admin-logo.png'; // logo地址,为空字符串则不显示
- // 点击登录按钮
- document.querySelector(".login-button").onclick = function() {
- // 1、取值
- var p = {
- key: $('[name=key]').val(),
- password: $('[name=password]').val()
- }
- // 2、判断
- if(p.key == '' || p.password == ''){
- return layer.msg('请输入账号密码');
- }
- // 3、请求后台
- sa.ajax('/sp-admin/AccAdmin/doLogin', p, function(res){
- // 写入token
- if(res.data.tokenInfo) {
- localStorage.tokenName = res.data.tokenInfo.tokenName;
- localStorage.tokenValue = res.data.tokenInfo.tokenValue;
- }
- // 写入权限码
- sa.setAuth(res.data.per_list);
- // 打个招呼,进入 index.html
- sa.msg('登录成功,欢迎你:' + p.key);
- setTimeout(function () {
- if(parent == window){
- location.href = "index.html";
- }else{
- sa.closeCurrIframe();
- parent.location.reload();
- }
- }, 500);
- })
- }
- // 你所有要改的代码全在这里 ↑↑↑↑↑
- </script>
- <script type="text/javascript">
- // 替换属性
- $('.page-title').html(page_title);
- $('title').html(page_title);
- $('[name=key]').val(key);
- $('[name=password]').val(password);
- if(logo != null && logo != '') {
- $('.logo-img').attr('src', logo);
- $('.logo-img').show();
- }
- // 绑定回车事件
- $('[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>
|