index.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <title>大友房估·数据库</title>
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <link rel="shortcut icon" href="favicon.ico">
  9. <script type="text/javascript" src="vendor/jquery-v1.8.3/jquery.min.js"></script>
  10. <style>
  11. body {
  12. margin: 0;
  13. padding: 0;
  14. min-height: 700px;
  15. overflow: auto;
  16. position: relative;
  17. }
  18. .header {
  19. height: 100px;
  20. }
  21. .header > .logo img {
  22. margin-top: 10px;
  23. height: 80px;
  24. width: 340px;
  25. margin-left: 20px;
  26. }
  27. .main {
  28. background: rgb(5, 6, 28) url('/style/login/images/bg.jpg') no-repeat center;
  29. position: relative;
  30. height: 402px;
  31. padding: 60px 0;
  32. }
  33. .main > .box {
  34. position: relative;
  35. height: 100%;
  36. margin: 0 auto;
  37. width: 1000px;
  38. }
  39. .main > .box > .login {
  40. background-color: #fff;
  41. width: 360px;
  42. position: absolute;
  43. right: 0;
  44. top: 35px;
  45. }
  46. .main > .box > .login > .title {
  47. height: 70px;
  48. text-align: center;
  49. font-size: 22px;
  50. line-height: 70px;
  51. border-bottom: 1px solid #e5e5e5;
  52. box-sizing: border-box;
  53. }
  54. .main > .box > .login > .center {
  55. padding: 0 48px;
  56. }
  57. .main > .box > .login > .center > div {
  58. height: 40px;
  59. line-height: 40px;
  60. }
  61. .main > .box > .login > .center > .error {
  62. text-align: center;
  63. color: #ea0805;
  64. font-size: 16px;
  65. }
  66. .main > .box > .login > .center > .username,
  67. .main > .box > .login > .center > .password {
  68. height: 46px;
  69. line-height: 46px;
  70. border: 1px solid #e5e5e5;
  71. box-sizing: border-box;
  72. }
  73. .main > .box > .login > .center .icon {
  74. border-right: 1px solid #e5e5e5;
  75. box-sizing: border-box;
  76. display: inline-block;
  77. height: 46px;
  78. width: 46px;
  79. text-align: center;
  80. }
  81. .main > .box > .login > .center .icon > img {
  82. position: relative;
  83. top: 5px;
  84. }
  85. .main > .box > .login > .center > .password {
  86. margin-top: 24px;
  87. }
  88. .main > .box > .login > .center > .password > input,
  89. .main > .box > .login > .center > .username > input {
  90. border: none;
  91. outline: none;
  92. font-size: 16px;
  93. padding: 0 20px;
  94. height: 40px;
  95. line-height: 40px;
  96. width: 170px;
  97. box-sizing: border-box;
  98. }
  99. input[required]:invalid, input:focus:invalid, textarea[required]:invalid, textarea:focus:invalid {
  100. box-shadow: none;
  101. }
  102. .main > .box > .login > .center > .rf {
  103. }
  104. .main > .box > .login .btn-login {
  105. }
  106. .main > .box > .login .btn-login > button {
  107. height: 50px;
  108. line-height: 50px;
  109. color: #fff;
  110. background-color: #31bbff;
  111. width: 100%;
  112. text-align: center;
  113. font-size: 20px;
  114. outline: none;
  115. border: 0;
  116. cursor: pointer;
  117. }
  118. .main > .box > .login > .center > .register {
  119. text-align: center;
  120. height: 40px;
  121. line-height: 40px;
  122. margin-bottom: 10px;
  123. margin-top: 15px;
  124. }
  125. .main > .box > .login > .center > .register > a {
  126. font-size: 20px;
  127. cursor: pointer;
  128. color: #0f0f0f;
  129. padding: 0 20px;
  130. text-underline: none;
  131. text-decoration: none;
  132. }
  133. .main > .box > .login > .center > .register > a:hover {
  134. border-bottom: 1px solid #ff1f2e;
  135. }
  136. .footer {
  137. position: absolute;
  138. height: 60px;
  139. bottom: 0;
  140. width: 100%;
  141. }
  142. .footer .copyright {
  143. color: #a5a5a5;
  144. height: 100%;
  145. padding: 12px 0px;
  146. box-sizing: border-box;
  147. width: 100%;
  148. text-align: center;
  149. font-size: 13px;
  150. }
  151. @media only screen and (max-width: 1000px) {
  152. body {
  153. min-height: 600px;
  154. overflow: auto;
  155. }
  156. .header {
  157. text-align: center;
  158. height: 60px;
  159. }
  160. .header > .logo img {
  161. margin-top: 2px;
  162. height: 56px;
  163. width: auto;
  164. }
  165. .header p {
  166. height: 60px;
  167. line-height: 60px;
  168. }
  169. .main {
  170. padding: 2em 0;
  171. }
  172. .main > .box {
  173. width: 100% !important;
  174. text-align: center;
  175. height: 335px;
  176. }
  177. .main > .box > .login {
  178. background-color: #fff;
  179. width: 94%;
  180. max-width: 600px;
  181. margin: 0 auto;
  182. top: 2em;
  183. left: 0;
  184. height: 100%;
  185. position: relative;
  186. }
  187. .main > .box > .login > .center {
  188. width: 100%;
  189. padding: 0 1em;
  190. box-sizing: border-box;
  191. text-align: left;
  192. }
  193. input[type="text"], input[type="password"] {
  194. width: calc(100% - 60px) !important;
  195. padding: 0 1em;
  196. }
  197. .login > .center > div {
  198. }
  199. .register {
  200. display: none;
  201. }
  202. .footer .copyright {
  203. padding: 1em 0;
  204. }
  205. }
  206. </style>
  207. </head>
  208. <body>
  209. <div class="header">
  210. <div class="logo">
  211. <a>
  212. <img src="/logo.png" alt="四川大友房地产评估咨询有限公司">
  213. </a>
  214. </div>
  215. </div>
  216. <div class="main">
  217. <div class="box">
  218. <div class="login">
  219. <div class="title">用户登录</div>
  220. <div class="center">
  221. <div class="error" ng-cloak></div>
  222. <div class="username">
  223. <div class="icon">
  224. <img src="/style/login/images/icon-user.png"/>
  225. </div>
  226. <input type="text" id="username" name="username" required tabindex="2"
  227. placeholder="输入用户名" maxlength="16"/>
  228. </div>
  229. <div class="password">
  230. <div class="icon">
  231. <img src="/style/login/images/icon-lock.png"/>
  232. </div>
  233. <input type="password" id="password" name="password" required tabindex="3"
  234. placeholder="输入密码" maxlength="16"/>
  235. </div>
  236. <div class="rf">
  237. <label class="remember"><input type="checkbox" value="true"/> 记住用户</label>
  238. <div class="forget"><a href="#">忘记密码?</a></div>
  239. </div>
  240. <div class="btn-login">
  241. <button>登录</button>
  242. </div>
  243. <div class="register">
  244. </div>
  245. </div>
  246. </div>
  247. </div>
  248. </div>
  249. <div class="footer">
  250. <div class="copyright">@2019 四川大友房地产评估咨询有限公司</div>
  251. <div class="copyright"><a href="http://leeroa.com" style="text-decoration: none">成都利锐计算机有限公司</a> 提供技术支持</div>
  252. </div>
  253. <script type="text/javascript">
  254. $(function () {
  255. var username = localStorage.getItem("username") || '';
  256. $('#username')[0].focus();
  257. if (username) {
  258. $('#username').val(username);
  259. $('.remember>:checkbox').attr('checked', 'checked');
  260. $('#password')[0].focus();
  261. }
  262. var busy = false;
  263. function login() {
  264. if (busy) {
  265. return;
  266. }
  267. username = $('#username').val();
  268. if (!username) {
  269. $('.error').html('请输入用户名!');
  270. $('.username>input').focus();
  271. return;
  272. }
  273. var password = $('#password').val();
  274. if (!password) {
  275. $('.error').html('请输入密码!');
  276. $('.password>input').focus();
  277. return;
  278. }
  279. $('.btn-login>button').html('登录中...');
  280. $.post('login', {loginName: username, password: password})
  281. .success(function (data) {
  282. data = data || {};
  283. if ($('.remember>:checkbox').is(":checked")) {
  284. localStorage.setItem("username", username);
  285. } else {
  286. localStorage.removeItem("username");
  287. }
  288. if (data['success']) {//登录成功
  289. window.location.href = 'main';
  290. } else {//登录失败
  291. busy = false;
  292. $('.btn-login>button').html('登录');
  293. $('.error').html(data['message']);
  294. }
  295. })
  296. .error(function () {
  297. busy = false;
  298. $('.btn-login>button').html('登录');
  299. $('.error').html('请求错误,请重试!');
  300. });
  301. }
  302. $('.btn-login>button').bind('click', login);
  303. $('input').on('keyup', function (e) {
  304. var key = e.keyCode || e.which;
  305. if (key === 13) login();
  306. });
  307. });
  308. //解决session失效后登录页面不是顶层窗口的问题
  309. if (window.top !== window) {
  310. window.top.location.href = window.location.href;
  311. }
  312. </script>
  313. </body>
  314. </html>