login.html 6.7 KB

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