login.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>后台管理-登陆</title>
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. <meta http-equiv="Access-Control-Allow-Origin" content="*">
  8. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  10. <meta name="apple-mobile-web-app-capable" content="yes">
  11. <meta name="format-detection" content="telephone=no">
  12. <link rel="icon" th:href="@{//images/favicon.ico}">
  13. <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all">
  14. <style th:inline="text">
  15. .main-body {
  16. top: 50%;
  17. left: 50%;
  18. position: absolute;
  19. -webkit-transform: translate(-50%, -50%);
  20. -moz-transform: translate(-50%, -50%);
  21. -ms-transform: translate(-50%, -50%);
  22. -o-transform: translate(-50%, -50%);
  23. transform: translate(-50%, -50%);
  24. overflow: hidden;
  25. }
  26. .login-main .login-bottom .center .item input {
  27. display: inline-block;
  28. width: 227px;
  29. height: 22px;
  30. padding: 0;
  31. position: absolute;
  32. border: 0;
  33. outline: 0;
  34. font-size: 14px;
  35. letter-spacing: 0;
  36. }
  37. .login-main .login-bottom .center .item .icon-1 {
  38. background: url("/images/icon-login.png") no-repeat 1px 0;
  39. }
  40. .login-main .login-bottom .center .item .icon-2 {
  41. background: url("/images/icon-login.png") no-repeat -54px 0;
  42. }
  43. .login-main .login-bottom .center .item .icon-3 {
  44. background: url("/images/icon-login.png") no-repeat -106px 0;
  45. }
  46. .login-main .login-bottom .center .item .icon-4 {
  47. background: url("/images/icon-login.png") no-repeat 0 -43px;
  48. position: absolute;
  49. right: -10px;
  50. cursor: pointer;
  51. }
  52. .login-main .login-bottom .center .item .icon-5 {
  53. background: url("/images/icon-login.png") no-repeat -55px -43px;
  54. }
  55. .login-main .login-bottom .center .item .icon-6 {
  56. background: url("/images/icon-login.png") no-repeat 0 -93px;
  57. position: absolute;
  58. right: -10px;
  59. margin-top: 8px;
  60. cursor: pointer;
  61. }
  62. .login-main .login-bottom .tip .icon-nocheck {
  63. display: inline-block;
  64. width: 10px;
  65. height: 10px;
  66. border-radius: 2px;
  67. border: solid 1px #9abcda;
  68. position: relative;
  69. top: 2px;
  70. margin: 1px 8px 1px 1px;
  71. cursor: pointer;
  72. }
  73. .login-main .login-bottom .tip .icon-check {
  74. margin: 0 7px 0 0;
  75. width: 14px;
  76. height: 14px;
  77. border: none;
  78. background: url("/images/icon-login.png") no-repeat -111px -48px;
  79. }
  80. .login-main .login-bottom .center .item .icon {
  81. display: inline-block;
  82. width: 33px;
  83. height: 22px;
  84. }
  85. .login-main .login-bottom .center .item {
  86. width: 288px;
  87. height: 35px;
  88. border-bottom: 1px solid #dae1e6;
  89. margin-bottom: 35px;
  90. }
  91. .login-main {
  92. width: 500px;
  93. position: relative;
  94. float: left;
  95. }
  96. .login-main .login-top {
  97. height: 117px;
  98. background-color: #1aa094;
  99. border-radius: 12px 12px 0 0;
  100. font-family: SourceHanSansCN-Regular;
  101. font-size: 30px;
  102. font-weight: 400;
  103. font-stretch: normal;
  104. letter-spacing: 0;
  105. color: #fff;
  106. line-height: 117px;
  107. text-align: center;
  108. overflow: hidden;
  109. -webkit-transform: rotate(0);
  110. -moz-transform: rotate(0);
  111. -ms-transform: rotate(0);
  112. -o-transform: rotate(0);
  113. transform: rotate(0);
  114. }
  115. .login-main .login-top .bg1 {
  116. display: inline-block;
  117. width: 74px;
  118. height: 74px;
  119. background: #fff;
  120. opacity: .1;
  121. border-radius: 0 74px 0 0;
  122. position: absolute;
  123. left: 0;
  124. top: 43px;
  125. }
  126. .login-main .login-top .bg2 {
  127. display: inline-block;
  128. width: 94px;
  129. height: 94px;
  130. background: #fff;
  131. opacity: .1;
  132. border-radius: 50%;
  133. position: absolute;
  134. right: -16px;
  135. top: -16px;
  136. }
  137. .login-main .login-bottom {
  138. width: 500px;
  139. background: #fff;
  140. border-radius: 0 0 12px 12px;
  141. padding-bottom: 53px;
  142. }
  143. .login-main .login-bottom .center {
  144. width: 288px;
  145. margin: 0 auto;
  146. padding-top: 40px;
  147. padding-bottom: 15px;
  148. position: relative;
  149. }
  150. .login-main .login-bottom .tip {
  151. clear: both;
  152. height: 16px;
  153. line-height: 16px;
  154. width: 288px;
  155. margin: 0 auto;
  156. }
  157. body {
  158. background: url("/images/loginbg.jpg") 0% 0% / cover no-repeat;
  159. position: static;
  160. font-size: 12px;
  161. }
  162. input::-webkit-input-placeholder {
  163. color: #a6aebf;
  164. }
  165. input::-moz-placeholder { /* Mozilla Firefox 19+ */
  166. color: #a6aebf;
  167. }
  168. input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  169. color: #a6aebf;
  170. }
  171. input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  172. color: #a6aebf;
  173. }
  174. input:-webkit-autofill { /* 取消Chrome记住密码的背景颜色 */
  175. -webkit-box-shadow: 0 0 0 1000px white inset !important;
  176. }
  177. html {
  178. height: 100%;
  179. }
  180. .login-main .login-bottom .tip {
  181. clear: both;
  182. height: 16px;
  183. line-height: 16px;
  184. width: 288px;
  185. margin: 0 auto;
  186. }
  187. .login-main .login-bottom .tip .login-tip {
  188. font-family: MicrosoftYaHei;
  189. font-size: 12px;
  190. font-weight: 400;
  191. font-stretch: normal;
  192. letter-spacing: 0;
  193. color: #9abcda;
  194. cursor: pointer;
  195. }
  196. .login-main .login-bottom .tip .forget-password {
  197. font-stretch: normal;
  198. letter-spacing: 0;
  199. color: #1aa094;
  200. text-decoration: none;
  201. position: absolute;
  202. right: 62px;
  203. }
  204. .login-main .login-bottom .login-btn {
  205. width: 288px;
  206. height: 40px;
  207. background-color: #1aa094;
  208. border-radius: 16px;
  209. margin: 24px auto 0;
  210. text-align: center;
  211. line-height: 40px;
  212. color: #fff;
  213. font-size: 14px;
  214. letter-spacing: 0;
  215. cursor: pointer;
  216. border: none;
  217. }
  218. .login-main .login-bottom .center .item .validateImg {
  219. position: absolute;
  220. right: 1px;
  221. cursor: pointer;
  222. height: 36px;
  223. border: 1px solid #fff;
  224. }
  225. .footer {
  226. left: 0;
  227. bottom: 0;
  228. color: #fff;
  229. width: 100%;
  230. position: absolute;
  231. text-align: center;
  232. line-height: 30px;
  233. padding-bottom: 10px;
  234. text-shadow: #000 0.1em 0.1em 0.1em;
  235. font-size: 14px;
  236. }
  237. .padding-5 {
  238. padding: 5px !important;
  239. }
  240. .footer a, .footer span {
  241. color: #fff;
  242. }
  243. @media screen and (max-width: 428px) {
  244. .login-main {
  245. width: 360px !important;
  246. }
  247. .login-main .login-top {
  248. width: 360px !important;
  249. }
  250. .login-main .login-bottom {
  251. width: 360px !important;
  252. }
  253. }
  254. </style>
  255. </head>
  256. <body>
  257. <div class="main-body">
  258. <div class="login-main">
  259. <div class="login-top">
  260. <span>科研管控平台</span>
  261. <span class="bg1"></span>
  262. <span class="bg2"></span>
  263. </div>
  264. <form class="layui-form login-bottom">
  265. <div class="center">
  266. <div class="item">
  267. <span class="icon icon-2"></span>
  268. <input type="text" name="username" id="username" lay-verify="required" placeholder="请输入登录账号"
  269. maxlength="24"/>
  270. </div>
  271. <div class="item">
  272. <span class="icon icon-3"></span>
  273. <input type="password" name="password" id="password" lay-verify="required" placeholder="请输入密码"
  274. maxlength="20">
  275. <span class="bind-password icon icon-4"></span>
  276. </div>
  277. <!-- <div id="validatePanel" class="item" style="width: 167px;">-->
  278. <!-- <span class="icon icon-1"></span>-->
  279. <!-- <input type="text" id="captcha" name="captcha" placeholder="请输入验证码" autocomplete="off" maxlength="4">-->
  280. <!-- <img id="ver_btn" class="validateImg" alt="看不清? 点击刷新" title="看不清? 点击刷新"/>-->
  281. <!-- </div>-->
  282. </div>
  283. <div class="tip">
  284. <span class="icon-nocheck"></span>
  285. <span class="login-tip">记住密码</span>
  286. <a href="javascript:" class="forget-password">忘记密码?</a>
  287. </div>
  288. <div class="layui-form-item" style="text-align:center; width:100%;height:100%;margin:0px;">
  289. <button id="btn_login" class="login-btn" lay-submit lay-filter="login">
  290. <span id="btn_msg">登 录</span>&nbsp;
  291. <i id="btn_load" class="layui-icon layui-anim layui-anim-rotate layui-anim-loop"
  292. style="display: none">&#xe63d;</i>
  293. </button>
  294. </div>
  295. </form>
  296. </div>
  297. </div>
  298. <div class="footer">
  299. Copyright© 2023 <span class="padding-5">|</span>
  300. </div>
  301. <script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
  302. <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
  303. <script th:src="@{/lib/md5/md5.min.js}" charset="utf-8"></script>
  304. <script th:src="@{/js/lay-config.js}" charset="utf-8"></script>
  305. <script type="text/javascript" th:inline="javascript">
  306. AjaxUtil.ctx = /*[[@{/}]]*/'';
  307. // 在页面加载完毕后调用拦截器函数
  308. layui.use(['form', 'layNotify'], function () {
  309. var form = layui.form,
  310. layNotify = layui.layNotify;
  311. // 登录过期的时候,跳出ifram框架
  312. if (top.location != self.location) {
  313. top.location = self.location;
  314. }
  315. // 切换密码显示和隐藏
  316. $('.bind-password').on('click', function () {
  317. if ($(this).hasClass('icon-5')) {
  318. $(this).removeClass('icon-5');
  319. $("input[name='password']").attr('type', 'password');
  320. } else {
  321. $(this).addClass('icon-5');
  322. $("input[name='password']").attr('type', 'text');
  323. }
  324. });
  325. // 切换记住密码的选择
  326. $('.icon-nocheck').on('click', function () {
  327. if ($(this).hasClass('icon-check')) {
  328. $(this).removeClass('icon-check');
  329. } else {
  330. $(this).addClass('icon-check');
  331. }
  332. });
  333. if (localStorage.getItem("wowosign") == "rememberMe") {
  334. console.log("设置成勾选");
  335. // 设置成勾选
  336. $('.icon-nocheck').addClass('icon-check');
  337. }
  338. if (localStorage.getItem("username") && localStorage.getItem("password")) {
  339. console.log("浏览器记住,自动填入账号密码," + localStorage.getItem("username"))
  340. $("#username").val(localStorage.getItem("username"));
  341. $("#password").val(localStorage.getItem("password"));
  342. } else {
  343. console.log("不存在localStorage");
  344. }
  345. // // 验证码初始化
  346. // let kaptcha_key = [[${kaptcha_key}]];
  347. // getKaptcha(kaptcha_key);
  348. // 验证码点击事件
  349. // $("#ver_btn").click(function () {
  350. // let kaptcha_key = [[${kaptcha_key}]];
  351. // getKaptcha(kaptcha_key);
  352. // });
  353. // 进行登录操作
  354. form.on('submit(login)', function (data) {
  355. let formdata = data.field;
  356. if (formdata.username == '') {
  357. layer.msg('用户名不能为空');
  358. return false;
  359. }
  360. if (formdata.password == '') {
  361. layer.msg('密码不能为空');
  362. return false;
  363. }
  364. // if (formdata.captcha == '') {
  365. // layer.msg('验证码不能为空');
  366. // return false;
  367. // }
  368. // 未选中时,formdata.rememberMe的值为undefined
  369. if ($('.icon-nocheck').hasClass('icon-check')) {
  370. localStorage.setItem("username", formdata.username, "7d");
  371. localStorage.setItem("password", formdata.password, "7d");
  372. // localStorage.setItem("wowosign", "rememberMe", "7d");
  373. } else {
  374. localStorage.removeItem("username");
  375. localStorage.removeItem("password");
  376. // localStorage.removeItem("wowosign");
  377. }
  378. let password = md5.MD5(formdata.password); // 加密输入的密码
  379. // 设置按钮为登陆中,此时禁止点击
  380. logining();
  381. AjaxUtil.post({
  382. contentType: "application/x-www-form-urlencoded", // 默认就是这个
  383. url: AjaxUtil.ctx + "home/doLogin",
  384. data: {
  385. "username": formdata.username,
  386. "password": password
  387. },
  388. success: function (res) {
  389. console.log(res);
  390. if (res.code === 0) {
  391. layNotify.notice({
  392. title: "登录提示",
  393. type: "success",
  394. message: res.message
  395. });
  396. setTimeout(function () {
  397. window.location.href = AjaxUtil.ctx + "home/index";
  398. }, 1500);
  399. } else {
  400. loginend();
  401. layNotify.notice({
  402. title: "登录提示",
  403. type: "warning",
  404. message: res.message
  405. });
  406. // document.getElementById("ver_btn").click();
  407. document.getElementById("captcha").value = '';
  408. }
  409. },
  410. error: function (error) {
  411. loginend();
  412. redirection();
  413. layNotify.notice({
  414. title: "登录提示",
  415. type: "error",
  416. message: "请求失败,请联系系统管理员!"
  417. });
  418. }
  419. });
  420. return false; //阻止表单跳转,layui默认是form提交,阻止掉
  421. });
  422. // 键盘回车登录
  423. $('body').keydown(function () {
  424. if (13 == event.keyCode) {
  425. $('#btn_login').trigger('click');
  426. }
  427. });
  428. function redirection(){
  429. window.location.replace("http://10.28.114.107:8081/home/")
  430. }
  431. // 登陆中
  432. function logining() {
  433. document.getElementById("btn_login").setAttribute("disabled", true);//设置不可点击
  434. document.getElementById("btn_login").style.backgroundColor = '#9abcda';
  435. document.getElementById("btn_msg").innerText = '登 录 中';
  436. document.getElementById("btn_load").style.display = "inline-block";
  437. }
  438. // 登陆后
  439. function loginend() {
  440. document.getElementById("btn_login").removeAttribute("disabled");//去掉不可点击
  441. document.getElementById("btn_login").style.backgroundColor = '#1E9FFF';
  442. document.getElementById("btn_msg").innerText = '登 录';
  443. document.getElementById("btn_load").style.display = "none";
  444. }
  445. // function getKaptcha(kaptcha_key) {
  446. // AjaxUtil.get({
  447. // url: AjaxUtil.ctx + "kaptcha/getImage?kaptcha_key=" + kaptcha_key,
  448. // dataType: "text",
  449. // success: function (result) {
  450. // $("#ver_btn").attr("src", result);
  451. // },
  452. // error: function (error) {
  453. // layNotify.notice({
  454. // title: "提示",
  455. // type: "warning",
  456. // message: "获取验证码错误,请联系系统管理员!"
  457. // });
  458. // }
  459. // });
  460. // }
  461. });
  462. </script>
  463. </body>
  464. </html>