login.html 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>登录</title>
  6. <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
  7. <meta name="author" content="Vincent Garreau" />
  8. <meta name="viewport"
  9. content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  10. <link rel="stylesheet" media="screen" href="sa-frame/login/style.css">
  11. <link rel="stylesheet" href="static/kj/element-ui/theme-chalk/index.css">
  12. <link rel="stylesheet" href="static/sa.css">
  13. <style type="text/css">
  14. /* 背景图片 */
  15. body {
  16. background-image: url(sa-frame/login/bg.jpg);
  17. background-size: cover;
  18. }
  19. /* 样式调整 */
  20. .login-box {
  21. width: 370px;
  22. padding: 10px 30px 48px 30px;
  23. background-color: white;
  24. box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.1);
  25. border-radius: 10px;
  26. position: absolute;
  27. top: 20%;
  28. left: 65%;
  29. }
  30. .clear {
  31. clear: both;
  32. }
  33. .form {
  34. padding: 0px 25px 10px 25px;
  35. }
  36. .bag {}
  37. .bage {
  38. width: 10%;
  39. height: 3px;
  40. border-radius: 5px;
  41. background-color: #0E80eF;
  42. margin: 0 auto;
  43. margin-top: 10px;
  44. }
  45. .lg {
  46. background: #F2F4F9;
  47. border-radius: 8px;
  48. padding: 15px;
  49. margin-bottom: 17px;
  50. position: relative;
  51. }
  52. .icon {
  53. float: left;
  54. width: 20px;
  55. height: 20px;
  56. margin-right: 20px;
  57. margin-top: -3px;
  58. border-right: 1px solid #D8DDED;
  59. padding-right: 15px;
  60. }
  61. input {
  62. border: 0px;
  63. background-color: #F2F4F9;
  64. font-size: 15px;
  65. float: left;
  66. width: 50%;
  67. }
  68. .login {
  69. width: 400px;
  70. top: 10px;
  71. height: auto;
  72. padding: 50px 50px;
  73. position: static;
  74. border-radius: 15px;
  75. pointer-events: all;
  76. }
  77. .login-top {
  78. margin-top: 20px;
  79. margin-bottom: 30px;
  80. }
  81. .logo-img {
  82. width: 50px;
  83. height: 50px;
  84. vertical-align: middle;
  85. position: relative;
  86. top: -3px;
  87. border-radius: 50%;
  88. margin-left: -10px;
  89. margin-right: 10px;
  90. }
  91. .logo-img {
  92. display: none;
  93. }
  94. .login-button {
  95. border-radius: 6px;
  96. transition: all 0.2s;
  97. }
  98. .login-button:hover {
  99. background-color: #0E80eF;
  100. }
  101. /* .page-title{line-height: 50px;} */
  102. .sk-rotating-plane {}
  103. /* 动画相关 */
  104. /* .login{background-color: rgba(0,0,0,0); } */
  105. .login {
  106. opacity: 0;
  107. }
  108. .page-title {
  109. text-align: center;
  110. box-shadow: 0px 13px 35px 0px rgba(0, 129, 255, 0.03);
  111. }
  112. #captcha {
  113. position: absolute;
  114. height: 35px;
  115. top: 6px;
  116. border-radius: 3px;
  117. }
  118. </style>
  119. </head>
  120. <body>
  121. <div>
  122. <div class="login-box">
  123. <div class="bg">
  124. <div class="login-top">
  125. <span class="page-title">登录</span>
  126. <div class="bag">
  127. <div class="bage"></div>
  128. </div>
  129. </div>
  130. <div class="form">
  131. <div class="lg">
  132. <img src="sa-frame/login/name.png" class="icon" />
  133. <input type="text" name="key" value="" placeholder="请输入账号" />
  134. <div class="clear"></div>
  135. </div>
  136. <div class="lg">
  137. <img src="sa-frame/login/password.png" class="icon" />
  138. <input type="password" name="password" value="" placeholder="请输入密码" />
  139. <div class="clear"></div>
  140. </div>
  141. <div class="lg">
  142. <img src="sa-frame/login/code.png" class="icon" />
  143. <input type="text" name="verCode" value="" placeholder="请输入验证码" />
  144. <img id="captcha" />
  145. <div class="clear"></div>
  146. </div>
  147. <div class="login-button">登录</div>
  148. </div>
  149. </div>
  150. </div>
  151. <div class="sk-rotating-plane"></div>
  152. <div style="position: absolute;bottom: 10px;left: 45%;">
  153. <img src="static/icon/beian.png" style="width: 18px;height: 18px;" />
  154. <a href="https://beian.mps.gov.cn/#/query/webSearch" target="_blank">
  155. 滇ICP备2024030692号</a>
  156. <a style="margin-left: 10px;"
  157. href="https://beian.miit.gov.cn/?spm=5176.29125882.J_9220772140.60.f1522868kNvbiS" target="_blank">
  158. 滇ICP备2024030692号-1</a>
  159. </div>
  160. </div>
  161. <!-- scripts -->
  162. <script src="sa-frame/login/particles.min.js"></script>
  163. <script src="static/kj/jquery.min.js"></script>
  164. <script src="static/kj/layer/layer.js"></script>
  165. <script src="static/sa.js"></script>
  166. <script src="static/kj/jsencrypt.js"></script>
  167. <script type="text/javascript">
  168. // 你所有要改的代码全在这里 ↓↓↓↓↓
  169. // 所有参考属性
  170. var page_title = '你好,欢迎登录系统'; // 页面标题
  171. var key = 'admin'; // 默认的账号
  172. var password = 'admin123'; // 默认的password fdsg@3,;27Rf
  173. var logo = 'sa-frame/admin-logo.png'; // logo地址,为空字符串则不显示
  174. var codeKey = '';
  175. var pKey = '';
  176. function getCaptcha() {
  177. sa.ajaxNoLoading('/sp-admin/AccAdmin/captcha', {}, function(res) {
  178. let data = res.data;
  179. $('#captcha').attr('src', data.image);
  180. codeKey = data.key;
  181. pKey = data.pKey;
  182. })
  183. }
  184. $(function() {
  185. $('#notice').html('')
  186. getCaptcha();
  187. });
  188. $('#captcha').click(function() {
  189. getCaptcha()
  190. })
  191. // 点击登录按钮
  192. document.querySelector(".login-button").onclick = function() {
  193. var encrypt = new JSEncrypt();
  194. encrypt.setPublicKey(pKey);
  195. // 1、取值
  196. var p = {
  197. key: $('[name=key]').val(),
  198. password: $('[name=password]').val(),
  199. verCode: $('[name=verCode]').val(),
  200. code: codeKey
  201. }
  202. // 2、判断
  203. if (p.key == '' || p.password == '') {
  204. return layer.msg('请输入账号密码');
  205. }
  206. if (p.verCode == '') {
  207. return layer.msg('请输入验证码');
  208. }
  209. let res = encrypt.encrypt(p.password);
  210. let s = encrypt.decrypt(res);
  211. p.password = res;
  212. $.ajax({
  213. url: sa.cfg.api_url + '/sp-admin/AccAdmin/doLogin',
  214. data: p,
  215. method: 'post',
  216. success: function(res) {
  217. let code = res.code;
  218. if (code == 200) {
  219. successLogin(res)
  220. } else {
  221. let msg=res.msg;
  222. sa.error(msg)
  223. getCaptcha();
  224. }
  225. }
  226. })
  227. }
  228. function successLogin(res){
  229. // 写入token
  230. if (res.data.tokenInfo) {
  231. localStorage.tokenName = res.data.tokenInfo.tokenName;
  232. localStorage.tokenValue = res.data.tokenInfo.tokenValue;
  233. }
  234. // 写入权限码
  235. sa.setAuth(res.data.per_list);
  236. // 打个招呼,进入 index.html
  237. sa.msg('登录成功');
  238. setTimeout(function() {
  239. if (parent == window) {
  240. location.href = "index.html";
  241. } else {
  242. sa.closeCurrIframe();
  243. parent.location.reload();
  244. }
  245. }, 500);
  246. }
  247. // 你所有要改的代码全在这里 ↑↑↑↑↑
  248. </script>
  249. <script type="text/javascript">
  250. // 替换属性
  251. $('.page-title').html(page_title);
  252. $('title').html(page_title);
  253. $('[name=key]').val(key);
  254. $('[name=password]').val(password);
  255. if (logo != null && logo != '') {
  256. $('.logo-img').attr('src', logo);
  257. $('.logo-img').show();
  258. }
  259. // 绑定回车事件
  260. $('[name=password]').bind('keypress', function(event) {
  261. if (event.keyCode == "13") {
  262. $('.login-button').click();
  263. }
  264. });
  265. </script>
  266. </body>
  267. </html>