123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290 |
- <!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/kj/element-ui/theme-chalk/index.css">
- <link rel="stylesheet" href="static/sa.css">
- <style type="text/css">
- /* 背景图片 */
- body {
- background-image: url(sa-frame/login/bg.jpg);
- background-size: cover;
- }
- /* 样式调整 */
- .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 {}
- /* 动画相关 */
- /* .login{background-color: rgba(0,0,0,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>
- <div class="login-box">
- <div class="bg">
- <div class="login-top">
- <span class="page-title">登录</span>
- <div class="bag">
- <div class="bage"></div>
- </div>
- </div>
- <div class="form">
- <div class="lg">
- <img src="sa-frame/login/name.png" class="icon" />
- <input type="text" name="key" value="" placeholder="请输入账号" />
- <div class="clear"></div>
- </div>
- <div class="lg">
- <img src="sa-frame/login/password.png" class="icon" />
- <input type="password" name="password" value="" placeholder="请输入密码" />
- <div class="clear"></div>
- </div>
- <div class="lg">
- <img src="sa-frame/login/code.png" class="icon" />
- <input type="text" name="verCode" value="" placeholder="请输入验证码" />
- <img id="captcha" />
- <div class="clear"></div>
- </div>
- <div class="login-button">登录</div>
- </div>
- </div>
- </div>
- <div class="sk-rotating-plane"></div>
- <div style="position: absolute;bottom: 10px;left: 45%;">
- <img src="static/icon/beian.png" style="width: 18px;height: 18px;" />
- <a href="https://beian.mps.gov.cn/#/query/webSearch" target="_blank">
- 滇ICP备2024030692号</a>
- <a style="margin-left: 10px;"
- href="https://beian.miit.gov.cn/?spm=5176.29125882.J_9220772140.60.f1522868kNvbiS" target="_blank">
- 滇ICP备2024030692号-1</a>
- </div>
- </div>
- <!-- scripts -->
- <script src="sa-frame/login/particles.min.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 = 'admin'; // 默认的账号
- var password = 'admin123'; // 默认的password fdsg@3,;27Rf
- var logo = 'sa-frame/admin-logo.png'; // logo地址,为空字符串则不显示
- var codeKey = '';
- var pKey = '';
- function getCaptcha() {
- sa.ajaxNoLoading('/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(),
- verCode: $('[name=verCode]').val(),
- code: codeKey
- }
- // 2、判断
- 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;
- $.ajax({
- url: sa.cfg.api_url + '/sp-admin/AccAdmin/doLogin',
- data: p,
- method: 'post',
- success: function(res) {
- let code = res.code;
- if (code == 200) {
- successLogin(res)
- } else {
- let msg=res.msg;
- sa.error(msg)
- getCaptcha();
- }
- }
- })
- }
- function successLogin(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('登录成功');
- 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();
- }
- });
- </script>
- </body>
- </html>
|