login.html 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. <!DOCTYPE html>
  2. <html>
  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" href="images/favicon.ico">
  13. <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
  14. <!--[if lt IE 9]>
  15. <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  16. <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  17. <![endif]-->
  18. <style>
  19. html, body {
  20. width: 100%;
  21. height: 100%;
  22. overflow: hidden
  23. }
  24. body {
  25. background: #1E9FFF;
  26. }
  27. body:after {
  28. content: '';
  29. background-repeat: no-repeat;
  30. background-size: cover;
  31. -webkit-filter: blur(3px);
  32. -moz-filter: blur(3px);
  33. -o-filter: blur(3px);
  34. -ms-filter: blur(3px);
  35. filter: blur(3px);
  36. position: absolute;
  37. top: 0;
  38. left: 0;
  39. right: 0;
  40. bottom: 0;
  41. z-index: -1;
  42. }
  43. .layui-container {
  44. width: 100%;
  45. height: 100%;
  46. overflow: hidden
  47. }
  48. .admin-login-background {
  49. width: 360px;
  50. height: 300px;
  51. position: absolute;
  52. left: 50%;
  53. top: 40%;
  54. margin-left: -180px;
  55. margin-top: -100px;
  56. }
  57. .logo-title {
  58. text-align: center;
  59. letter-spacing: 2px;
  60. padding: 14px 0;
  61. }
  62. .logo-title h1 {
  63. color: #1E9FFF;
  64. font-size: 25px;
  65. font-weight: bold;
  66. }
  67. .login-form {
  68. background-color: #fff;
  69. border: 1px solid #fff;
  70. border-radius: 3px;
  71. padding: 14px 20px;
  72. box-shadow: 0 0 8px #eeeeee;
  73. }
  74. .login-form .layui-form-item {
  75. position: relative;
  76. }
  77. .login-form .layui-form-item label {
  78. position: absolute;
  79. left: 1px;
  80. top: 1px;
  81. width: 38px;
  82. line-height: 36px;
  83. text-align: center;
  84. color: #d2d2d2;
  85. }
  86. .login-form .layui-form-item input {
  87. padding-left: 36px;
  88. }
  89. .captcha {
  90. width: 60%;
  91. display: inline-block;
  92. }
  93. .captcha-img {
  94. display: inline-block;
  95. width: 34%;
  96. float: right;
  97. }
  98. .captcha-img img {
  99. height: 34px;
  100. border: 1px solid #e6e6e6;
  101. height: 36px;
  102. width: 100%;
  103. }
  104. </style>
  105. </head>
  106. <body>
  107. <div class="layui-container">
  108. <div class="admin-login-background">
  109. <div class="layui-form login-form" lay-filter="login-form">
  110. <form class="layui-form" action="">
  111. <div class="layui-form-item logo-title">
  112. <h1>南京市规划和自然资源局综合档案系统</h1>
  113. </div>
  114. <div class="layui-form-item">
  115. <label class="layui-icon layui-icon-username"></label>
  116. <input type="text" name="account" lay-verify="required|account" placeholder="用户名或者邮箱"
  117. autocomplete="off" class="layui-input" value="liuchanglan">
  118. </div>
  119. <div class="layui-form-item">
  120. <label class="layui-icon layui-icon-password"></label>
  121. <input type="password" name="password" lay-verify="required|password" placeholder="密码"
  122. autocomplete="off" class="layui-input" value="123456">
  123. </div>
  124. <div class="layui-form-item">
  125. <label class="layui-icon layui-icon-vercode"></label>
  126. <input type="text" name="captcha" lay-verify="required|captcha" placeholder="图形验证码"
  127. autocomplete="off" class="layui-input verification captcha" value="a">
  128. <div class="captcha-img" style="cursor:pointer">
  129. <img id="captchaPic">
  130. </div>
  131. </div>
  132. <div class="layui-form-item">
  133. <input type="checkbox" id="rememberMe" name="rememberMe" value="" lay-skin="primary" title="记住密码">
  134. </div>
  135. <div class="layui-form-item">
  136. <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit=""
  137. lay-filter="login">登 入
  138. </button>
  139. </div>
  140. </form>
  141. </div>
  142. </div>
  143. </div>
  144. <script src="./lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
  145. <script src="./lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
  146. <script src="./lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
  147. <script src="./js/lay-config.js?v=1.0.4" charset="utf-8"></script>
  148. <script>
  149. layui.use(['form', 'http'], function () {
  150. var form = layui.form,
  151. http = layui.http,
  152. $ = layui.jquery,
  153. layer = layui.layer;
  154. // 登录过期的时候,跳出ifram框架
  155. if (top.location != self.location) top.location = self.location;
  156. // 粒子线条背景
  157. $(document).ready(function () {
  158. $('.layui-container').particleground({
  159. dotColor: '#7ec7fd',
  160. lineColor: '#7ec7fd'
  161. });
  162. });
  163. let readCachePassword = function (){
  164. let a = layui.data('rememberMe')
  165. if (a){
  166. form.val("login-form", a.data);
  167. form.render();
  168. }
  169. }
  170. // 生成验证码
  171. let generatePictureCaptcha = function () {
  172. http.get('system/auth/generatePictureCaptcha', {}, true, res => {
  173. $("#captchaPic").prop('src',res.data)
  174. })
  175. }
  176. // 进行登录操作
  177. form.on('submit(login)', function (data) {
  178. data = data.field;
  179. if (data.account == '') {
  180. layer.msg('用户名不能为空');
  181. return false;
  182. }
  183. if (data.password == '') {
  184. layer.msg('密码不能为空');
  185. return false;
  186. }
  187. if (data.captcha == '') {
  188. layer.msg('验证码不能为空');
  189. return false;
  190. }
  191. let rememberMe = {
  192. account: data.account,
  193. password: data.password,
  194. rememberMe: $("#rememberMe").prop('checked')
  195. }
  196. if (rememberMe.rememberMe) {
  197. // 勾选记住密码
  198. layui.data('rememberMe', {
  199. key: 'data',
  200. value: rememberMe
  201. })
  202. }else {
  203. layui.data('rememberMe', null)
  204. }
  205. http.login(data)
  206. return false;
  207. });
  208. // 点击验证码刷新
  209. $("#captchaPic").click(function () {
  210. generatePictureCaptcha()
  211. })
  212. readCachePassword()
  213. generatePictureCaptcha()
  214. });
  215. </script>
  216. </body>
  217. </html>