login.html 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>良房一廳管理平台</title>
  7. <!-- Tell the browser to be responsive to screen width -->
  8. <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  9. <link rel="stylesheet" href="statics/css/bootstrap.min.css">
  10. <link rel="stylesheet" href="statics/css/font-awesome.min.css">
  11. <link rel="stylesheet" href="statics/css/style.css">
  12. <link rel="stylesheet" href="statics/css/login.css">
  13. <link rel="stylesheet" href="statics/css/main.css">
  14. <link rel="stylesheet" href="statics/css/iview.css">
  15. <link rel="shortcut icon" href=//4dkk.4dage.com/FDKKIMG/icon/kankan_icon.ico>
  16. <link rel=icon type=image/png href=//4dkk.4dage.com/FDKKIMG/icon/kankan_icon192.png sizes=192x192>
  17. <link rel=apple-touch-icon sizes=180x180 href=//4dkk.4dage.com/FDKKIMG/icon/kankan_icon180.png>
  18. <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  19. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  20. <!--[if lt IE 9]>
  21. <script src="statics/libs/html5shiv.min.js"></script>
  22. <script src="statics/libs/respond.min.js"></script>
  23. <![endif]-->
  24. <style>
  25. .ivu-card-body{
  26. padding: 16px!important;
  27. }
  28. .beian{
  29. position: fixed;
  30. bottom: 20px;
  31. color: #fff;
  32. left: 40px;
  33. }
  34. .beian a{
  35. color: #fff;
  36. }
  37. </style>
  38. <script>
  39. var _hmt = _hmt || [];
  40. (function () {
  41. var hm = document.createElement("script");
  42. hm.src = "https://hm.baidu.com/hm.js?4656e49e8efa9f2ad6868ea26fb8984c";
  43. var s = document.getElementsByTagName("script")[0];
  44. s.parentNode.insertBefore(hm, s);
  45. })();
  46. </script>
  47. </head>
  48. <body class="signin hold-transition login-page">
  49. <div class="fixed-logo">
  50. <img src="./statics/img/logo-top.png" alt="">
  51. </div>
  52. <div class="loginscreen animated fadeInDown signinpanel" id="loginBox" v-cloak>
  53. <div class="col-md-9">
  54. <div class="login-info">
  55. <img src="./statics/img/logo.png" alt="">
  56. <p>良房一廳新体验</p>
  57. <p>宅家中,云逛街,轻松买</p>
  58. </div>
  59. </div>
  60. <div class="col-md-3">
  61. <Card class="m-t text-center" style="background: rgba(109, 109, 109, 0.23);border: 0px solid #dddee1;">
  62. <p style="padding: 0 20px 20px 20px;">登录到良房一廳管理平台</p>
  63. <div class="form-group has-feedback">
  64. <i-input v-model="username" @on-enter="login" placeholder="账号" style="width: 240px;" autofocus/>
  65. </div>
  66. <div class="form-group has-feedback">
  67. <i-input :type="showPsd?'':'password'" v-model="password" @on-click="showPsd=!showPsd" icon="ios-eye" @on-enter="login" style="width: 240px;"
  68. placeholder="密码"/>
  69. </div>
  70. <div class="form-group has-feedback">
  71. <div style="display: inline-block;width: 120px;">
  72. <i-input v-model="captcha" @on-enter="login"
  73. placeholder="验证码"/>
  74. </div>
  75. <div style="display: inline-block;width: 120px;">
  76. <img style="height: 32px;width: 96px;border-radius: 4px;" alt="如果看不清楚,请单击图片刷新!" title="点击刷新"
  77. class="pointer" :src="src" @click="refreshCode">
  78. </div>
  79. </div>
  80. <div>
  81. <i-button type="primary" @click="login" style="width: 240px;">登录</i-button>
  82. </div>
  83. </Card>
  84. </div>
  85. </div>
  86. <div class="beian">
  87. <div>珠海市四维时代网络科技有限公司</div>
  88. <div>Copyright © 2020 4DAGE Co., Ltd. All rights reserved.</div>
  89. <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备14078495号-3</a>
  90. </div>
  91. <!-- /.login-box -->
  92. <script src="statics/libs/jquery.min.js"></script>
  93. <script src="statics/libs/vue.min.js"></script>
  94. <script src="statics/libs/iview.min.js"></script>
  95. <script src="statics/libs/bootstrap.min.js"></script>
  96. <script src="statics/plugins/slimscroll/jquery.slimscroll.min.js"></script>
  97. <script src="statics/libs/fastclick.min.js"></script>
  98. <script src="statics/libs/base64.min.js"></script>
  99. <script src="statics/libs/common.js"></script>
  100. <script type="text/javascript">
  101. var vm = new Vue({
  102. el: '#loginBox',
  103. data: {
  104. username: '',
  105. password: '',
  106. captcha: '',
  107. src: 'captcha.jpg',
  108. showPsd:false
  109. },
  110. beforeCreate: function () {
  111. if (self != top) {
  112. top.location.href = self.location.href;
  113. }
  114. },
  115. methods: {
  116. refreshCode: function () {
  117. this.src = "captcha.jpg?t=" + $.now();
  118. },
  119. login: function (event) {
  120. if (vm.username == '') {
  121. iview.Message.warning("用户名为空");
  122. return false;
  123. }
  124. if (vm.password == '') {
  125. iview.Message.warning("密码为空");
  126. return false;
  127. }
  128. if (vm.captcha == '') {
  129. iview.Message.warning("验证码为空");
  130. return false;
  131. }
  132. // encodeStr(Base64.encode(vm.password))
  133. var data = "username=" + vm.username + "&password=" + encodeStr(Base64.encode(vm.password)) + "&captcha=" + vm.captcha;
  134. $.ajax({
  135. type: "POST",
  136. url: "sys/login",
  137. data: data,
  138. dataType: "json",
  139. success: function (result) {
  140. if (result.code == 0) {//登录成功
  141. localStorage.setItem('token', result.token)
  142. localStorage.setItem('userInfo', JSON.stringify(result.user))
  143. parent.location.href = 'index.html';
  144. } else {
  145. vm.refreshCode();
  146. iview.Message.error(result.msg);
  147. }
  148. }
  149. });
  150. }
  151. }
  152. });
  153. </script>
  154. </body>
  155. </html>