login.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528
  1. {% load staticfiles %}
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8" />
  6. <title></title>
  7. <link rel="stylesheet" href="{% static '/css/style.css' %}">
  8. <!-- <link rel="shortcut icon" href="{% static '/img/favicon.png' %}" type="image/x-icon"> -->
  9. <link rel="stylesheet" href="{% static '/lib/font-awesome/4.5.0/css/font-awesome.css' %}">
  10. <link href="{% static '/css/popup-box.css' %}" rel="stylesheet" type="text/css" media="all" />
  11. <style type="text/css">
  12. body {
  13. background: url(static/img/loginBg.gif) no-repeat 0px 0px;
  14. /* background: url(static/img/loginBj22.jpg) no-repeat 0px 0px; */
  15. /* background: url(static/img/loginBj2.jpg) no-repeat 0px 0px; */
  16. /* background: url(static/img/loginBj.jpg) no-repeat 0px 0px; */
  17. background-size: cover;
  18. font-family: 'Open Sans', sans-serif;
  19. background-attachment: fixed;
  20. background-position: center;
  21. }
  22. .loginCover {
  23. width: 959px;
  24. height: 523px;
  25. /* margin: 51px auto; */
  26. position: absolute;
  27. left: 50%;
  28. top: 50%;
  29. margin-left: -478px;
  30. margin-top: -261px;
  31. box-shadow: 0px 0px 70px rgba(0, 0, 0, .7);
  32. webkit-box-shadow: 0px 0px 70px rgba(0, 0, 0, .7);
  33. -moz-box-shadow: 0px 0px 70px rgba(0, 0, 0, .7);
  34. border-radius: 15px;
  35. background: #fff url(static/img/loginHeadImg22.jpg) no-repeat -1px -1px;
  36. /* background: #fff url(static/img/loginHeadImg2.png) no-repeat -1px -1px; */
  37. /* background: #fff url(static/img/loginHeadImg.png) no-repeat -1px -1px; */
  38. }
  39. .loginBox {
  40. width: 290px;
  41. margin-left: 589px;
  42. padding: 113px 40px 0 40px;
  43. }
  44. .loginBox h2 {
  45. text-align: center;
  46. font-size: 20px;
  47. margin-bottom: 34px;
  48. }
  49. #loginItems {
  50. float: inherit;
  51. }
  52. #loginItems>li {
  53. display: block;
  54. margin-bottom: 20px;
  55. position: relative;
  56. }
  57. #loginItems>li .fa {
  58. position: absolute;
  59. left: 9px;
  60. top: 6px;
  61. }
  62. .border-bottom {
  63. border-bottom: 1px solid #777;
  64. }
  65. #loginItems>li input {
  66. border: none;
  67. border-radius: 0;
  68. padding: 8px;
  69. width: 95%;
  70. margin: 0;
  71. text-indent: 25px;
  72. }
  73. .denglu {
  74. width: 100%;
  75. border-radius: 5px;
  76. background: #49bd78;
  77. color: #fff;
  78. font-size: 16px;
  79. height: 38px;
  80. margin-top: 15px;
  81. border: none;
  82. }
  83. .denglu:hover {
  84. background-color: #4a8c1e;
  85. color: white;
  86. cursor: pointer;
  87. }
  88. input:-webkit-autofill,
  89. textarea:-webkit-autofill,
  90. select:-webkit-autofill {
  91. background-color: rgb(255, 255, 255) !important;
  92. background-image: none !important;
  93. color: rgb(0, 0, 0) !important;
  94. }
  95. /* 忘记密码新增样式 */
  96. .book-form h3 {
  97. margin-bottom: 1.2em;
  98. }
  99. .retrieveMsgBox label {
  100. width: 18%;
  101. text-align: right;
  102. display: inline-block;
  103. margin-right: 10px;
  104. }
  105. .retrieveMsgBox input {
  106. width: 70%;
  107. }
  108. .retrieveMsgBox .codeInput {
  109. width: 30%;
  110. }
  111. #sendCode {
  112. width: 25%;
  113. padding: 15px;
  114. border: 1px solid #7d7d7d;
  115. outline: none;
  116. font-size: 14px;
  117. margin-bottom: 20px;
  118. border-radius: 25px;
  119. cursor: pointer;
  120. margin-left: 70px;
  121. }
  122. #sendCode.defaultColor {
  123. background: #70ad47;
  124. color: #fff;
  125. }
  126. #loginItems #username,
  127. #loginItems #password {
  128. box-shadow: 0 0 0px 1000px white inset !important;
  129. -webkit-box-shadow: 0 0 0px 1000px white inset !important;
  130. }
  131. /* 备案号 */
  132. .guardCode{
  133. position: absolute;
  134. bottom: 30px;
  135. left: 0;
  136. right: 0;
  137. text-align: center;
  138. color: #49bd78;
  139. }
  140. .guardCode >a{
  141. color: #49bd78;
  142. }
  143. </style>
  144. <meta name="viewport" content="width=device-width, initial-scale=1" />
  145. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  146. </head>
  147. <body>
  148. <div class="loginCover">
  149. <div class="loginBox">
  150. <!-- <h2>河南云飞科技</h2> -->
  151. <h2>欢迎登录</h2>
  152. <form action="" method="post"> {% csrf_token %}
  153. <ul id="loginItems">
  154. <li class="border-bottom usernameItem">
  155. <i class="fa fa-user-o" aria-hidden="true"></i>
  156. <input type="text" id="username" class="name" placeholder="用户名" required="" value={{user_name}}>
  157. </li>
  158. <li class="border-bottom passwordItem">
  159. <i class="fa fa-unlock-alt" aria-hidden="true"></i>
  160. <input type="password" id="password" class="password" onkeypress="if (event.keyCode == 13) sub();" placeholder="密码" required=""
  161. value={{pass_word}}>
  162. </li>
  163. <li>
  164. <div>
  165. <input type="checkbox" id="brand1" check="" value="">
  166. <label for="brand1">
  167. <span> </span>记住密码</label>
  168. <a class="popup-with-zoom-anim" data-wow-delay=".5s" href=".wangji">忘记密码?</a>
  169. </div>
  170. </li>
  171. <li style="margin-bottom: 0;">
  172. <button type="button" class="denglu" onclick="sub()">登 录</button>
  173. </li>
  174. <li>
  175. <button type="button" class="denglu" onclick="subBigData()">监管中心</button>
  176. </li>
  177. </ul>
  178. </form>
  179. </div>
  180. </div>
  181. <div class="guardCode">
  182. 备案号:<a href="http://www.beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备13013965号</a>
  183. </div>
  184. <div id="small-dialog" class="mfp-hide book-form wangji">
  185. <h3>找回密码</h3>
  186. <form action="#" method="post">
  187. <p class="retrieveMsgBox">
  188. <label for="">用户名:</label>
  189. <input type="text" name="Name" placeholder="请输入用户名" required="" />
  190. </p>
  191. <p class="retrieveMsgBox">
  192. <label for="">手机号:</label>
  193. <input type="text" name="Email" class="email" placeholder="请输入手机号" required="" />
  194. </p>
  195. <p class="retrieveMsgBox">
  196. <label for="">验证码:</label>
  197. <input type="password" name="Password" class="password codeInput" placeholder="请输入验证码" required="" />
  198. <input type="button" id="sendCode" class="" value="获取验证码">
  199. </p>
  200. <p class="retrieveMsgBox">
  201. <label for=""></label>
  202. <input type="submit" value="立即找回">
  203. </p>
  204. </form>
  205. </div>
  206. <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
  207. <script src="{% static '/lib/layui/layui.js' %}"></script>
  208. <script src="{% static '/lib/js/jquery.magnific-popup.js' %}" type="text/javascript"></script>
  209. <script src="{% static '/lib/js/jquery.base64.js' %}" type="text/javascript"></script>
  210. <script type="application/x-javascript">
  211. addEventListener("load", function() {
  212. setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
  213. </script>
  214. <script>
  215. $(document).ready(function () {
  216. $('.popup-with-zoom-anim').magnificPopup({
  217. type: 'inline',
  218. fixedContentPos: false,
  219. fixedBgPos: true,
  220. overflowY: 'auto',
  221. closeBtnInside: true,
  222. preloader: false,
  223. midClick: true,
  224. removalDelay: 300,
  225. mainClass: 'my-mfp-zoom-in'
  226. });
  227. });
  228. </script>
  229. <script type="text/javascript">
  230. $.ajaxSetup({
  231. data: { csrfmiddlewaretoken: '{{ csrf_token }}' },
  232. });
  233. window.onload = function () {
  234. if (username != "" && password != "") {
  235. document.getElementById('brand1').checked = "checked";
  236. } else {
  237. document.getElementById('brand1').checked = "";
  238. }
  239. }
  240. function sub() {
  241. var username = $("#username").val();
  242. var password = $("#password").val();
  243. var brand1 = $("#brand1").val();
  244. if (username == "" || password == "") {
  245. layui.use('layer', function () {
  246. var layer = layui.layer;
  247. layer.msg('请正确输入用户名和密码!', { time: 2000 });
  248. });
  249. return;
  250. }
  251. if (document.getElementById('brand1').checked == true) {
  252. document.getElementById('brand1').value = "remember";
  253. }
  254. else {
  255. document.getElementById('brand1').value = "no";
  256. }
  257. $.ajax({
  258. type: "post",
  259. url: "",
  260. data: {
  261. "username": username.trim(),
  262. "password": password.trim(),
  263. "brand1": document.getElementById('brand1').value,
  264. },
  265. dataType: "json",
  266. success: function (data) {
  267. if (data == 0) {
  268. // 登录成功
  269. if (document.getElementById('brand1').value == 'remember') {
  270. // setCookie(username, $.base64.btoa(password), 5);
  271. localStorage.setItem(username,$.base64.btoa(password));
  272. sessionStorage.setItem('judgeAccount', username)
  273. } else {
  274. // removeCookie(username);
  275. localStorage.removeItem(username);
  276. }
  277. location.href = 'home';
  278. }
  279. else if (data == 1) {
  280. layui.use('layer', function () {
  281. var layer = layui.layer;
  282. layer.msg('该用户名不存在!', { time: 2000 });
  283. });
  284. }
  285. else if (data == 2) {
  286. layui.use('layer', function () {
  287. var layer = layui.layer;
  288. layer.msg('该用户不可用!', { time: 2000 });
  289. });
  290. }
  291. else if (data == 3) {
  292. layui.use('layer', function () {
  293. var layer = layui.layer;
  294. layer.msg('密码错误,请重新输入!', { time: 2000 });
  295. });
  296. }
  297. else if (data == 4) {
  298. layui.use('layer', function () {
  299. var layer = layui.layer;
  300. layer.msg('账号已到期!', { time: 2000 });
  301. });
  302. }
  303. }
  304. });
  305. return;
  306. }
  307. function subBigData(){
  308. var username = $("#username").val();
  309. var password = $("#password").val();
  310. var brand1 = $("#brand1").val();
  311. if (username == "" || password == "") {
  312. layui.use('layer', function () {
  313. var layer = layui.layer;
  314. layer.msg('请正确输入用户名和密码!', { time: 2000 });
  315. });
  316. return;
  317. }
  318. if (document.getElementById('brand1').checked == true) {
  319. document.getElementById('brand1').value = "remember";
  320. }
  321. else {
  322. document.getElementById('brand1').value = "no";
  323. }
  324. $.ajax({
  325. type: "post",
  326. url: "user_judge",
  327. data: {
  328. "username": username.trim(),
  329. "password": password.trim(),
  330. },
  331. dataType: "json",
  332. success: function (data) {
  333. if (data == 0) {
  334. // 登录成功
  335. // var a = $("<a href='big_data' target='_blank'>Apple</a>").get(0);
  336. // var e = document.createEvent('MouseEvents');
  337. // e.initEvent( 'click', true, true );
  338. // a.dispatchEvent(e);
  339. location.href = 'big_data';
  340. }
  341. else if (data == 1) {
  342. layui.use('layer', function () {
  343. var layer = layui.layer;
  344. layer.msg('该用户名不存在!', { time: 2000 });
  345. });
  346. }
  347. else if (data == 2) {
  348. layui.use('layer', function () {
  349. var layer = layui.layer;
  350. layer.msg('该用户不可用!', { time: 2000 });
  351. });
  352. }
  353. else if (data == 3) {
  354. layui.use('layer', function () {
  355. var layer = layui.layer;
  356. layer.msg('密码错误,请重新输入!', { time: 2000 });
  357. });
  358. }
  359. else if (data == 4) {
  360. layui.use('layer', function () {
  361. var layer = layui.layer;
  362. layer.msg('账号已到期!', { time: 2000 });
  363. });
  364. }
  365. else if (data == 5) {
  366. layui.use('layer', function () {
  367. var layer = layui.layer;
  368. layer.msg('您暂无权限!', { time: 2000 });
  369. });
  370. }
  371. }
  372. });
  373. return;
  374. }
  375. //用户注册:用户注册:
  376. function register() {
  377. var username = $("#reUsername").val();
  378. var email = $("#email").val();
  379. var user_phone = $("#user_phone").val();
  380. var password = $("#rePassword").val();
  381. var password2 = $("#rePassword2").val();
  382. console.log(username, email, user_phone, password, password2)
  383. if (username == "" || email == "" || user_phone == "" || password == "" || password2 == "") {
  384. layer.msg('请将注册信息填写完整!', { time: 2000 });
  385. return;
  386. }
  387. if (password.length < 6 || password2.length < 6 || password.length > 16 || password2.length > 16) {
  388. layer.msg('请输入6到16位密码!!!', { time: 2000 });
  389. return;
  390. }
  391. if (password != password2) {
  392. layer.msg('密码两次输入不一致!!!', { time: 2000 });
  393. return;
  394. }
  395. var pattern1 = /^((13[0-9])|(15[1-3,5-9])|(17[7])|(18[0-9]))\d{8}$/
  396. var strPhone = pattern1.test(user_phone);
  397. if (strPhone != true) {
  398. layer.msg("手机格式不正确!!!", { time: 2000 });
  399. return;
  400. }
  401. var pattern2 = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
  402. var strEmail = pattern2.test(email);
  403. if (strEmail) {
  404. //邮箱格式正确
  405. } else {
  406. //邮箱格式不正确
  407. layer.msg('邮箱格式不正确!!!', { time: 2000 });
  408. return;
  409. }
  410. $.ajax({
  411. type: "post",
  412. url: "register",
  413. data: {
  414. "username": username.trim(),
  415. "email": email.trim(),
  416. "user_phone": user_phone.trim(),
  417. "password": password.trim(),
  418. "password2": password2.trim(),
  419. },
  420. dataType: "json",
  421. success: function (data) {
  422. if (data == 0) {
  423. layer.msg("注册成功!", { time: 2000 });
  424. // location.href='home';
  425. }
  426. else if (data == 1) {
  427. layer.msg("该用户名已存在!", { time: 2000 });
  428. }
  429. }
  430. });
  431. return;
  432. }
  433. /*是否自动填充密码*/
  434. $("#username").on('keyup', function () {
  435. var username = $(this).val();
  436. console.log(username)
  437. if (localStorage.getItem(username)){
  438. // if (getCookie(username)) {
  439. $('#password').val($.base64.atob(localStorage.getItem(username)));
  440. $('#brand1').prop('checked', 'checked')
  441. }
  442. })
  443. /*记住密码*/
  444. function setCookie(nameV, valueV, data) {
  445. var date = new Date();
  446. date.setTime(date.getTime() + data * 24 * 60 * 60 * 1000);
  447. document.cookie = nameV + '=' + valueV + ';' + 'expires=' + date + ';path=/';
  448. }
  449. function getCookie(key) {
  450. var key = key + '=';
  451. var arr = document.cookie.split(';');
  452. for (var i = 0; i < arr.length; i++) {
  453. if (arr[i].trim().indexOf(key) == 0) {
  454. return arr[i].slice(key.length);
  455. }
  456. }
  457. return '';
  458. }
  459. function removeCookie(key) {
  460. var date = new Date();
  461. date.setTime(date.getTime() - 24 * 60 * 60 * 1000);
  462. document.cookie = key + '=random;expires=' + date + ';path=/';
  463. }
  464. $.base64.utf8encode = true;
  465. // 不是www.yfzhwlw.com去掉备案号
  466. if(location.href == 'http://ck.fengwocloud.com/' || location.href == 'http://ck.fengwocloud.com/login'){
  467. $('.guardCode').html('闽ICP备14019147号-13');
  468. }
  469. </script>
  470. </body>
  471. </html>