login.html 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>看店4DKanKan管理平台</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. </style>
  29. <script>
  30. var _hmt = _hmt || [];
  31. (function () {
  32. var hm = document.createElement("script");
  33. hm.src = "https://hm.baidu.com/hm.js?4656e49e8efa9f2ad6868ea26fb8984c";
  34. var s = document.getElementsByTagName("script")[0];
  35. s.parentNode.insertBefore(hm, s);
  36. })();
  37. </script>
  38. </head>
  39. <body class="signin hold-transition login-page">
  40. <div class="fixed-logo">
  41. <img src="./statics/img/logo-top.png" alt="">
  42. </div>
  43. <div class="loginscreen animated fadeInDown signinpanel" id="loginBox" v-cloak>
  44. <div class="col-md-9">
  45. <div class="login-info">
  46. <img src="./statics/img/logo.png" alt="">
  47. <p>看店4DKanKan新体验:</p>
  48. <p>宅家中,云逛街,轻松买</p>
  49. </div>
  50. </div>
  51. <div class="col-md-3">
  52. <Card class="m-t text-center" style="background: rgba(109, 109, 109, 0.23);border: 0px solid #dddee1;">
  53. <p style="padding: 0 20px 20px 20px;">登录到看店4DKanKan管理平台</p>
  54. <div class="form-group has-feedback">
  55. <i-input v-model="username" @on-enter="login" placeholder="账号" style="width: 240px;" autofocus/>
  56. </div>
  57. <div class="form-group has-feedback">
  58. <i-input type="password" v-model="password" @on-enter="login" style="width: 240px;"
  59. placeholder="密码"/>
  60. </div>
  61. <div class="form-group has-feedback">
  62. <div style="display: inline-block;width: 120px;">
  63. <i-input v-model="captcha" @on-enter="login"
  64. placeholder="验证码"/>
  65. </div>
  66. <div style="display: inline-block;width: 120px;">
  67. <img style="height: 32px;width: 96px;border-radius: 4px;" alt="如果看不清楚,请单击图片刷新!" title="点击刷新"
  68. class="pointer" :src="src" @click="refreshCode">
  69. </div>
  70. </div>
  71. <div>
  72. <i-button type="primary" @click="login" style="width: 240px;">登录</i-button>
  73. </div>
  74. </Card>
  75. </div>
  76. </div>
  77. <!-- /.login-box -->
  78. <script src="statics/libs/jquery.min.js"></script>
  79. <script src="statics/libs/vue.min.js"></script>
  80. <script src="statics/libs/iview.min.js"></script>
  81. <script src="statics/libs/bootstrap.min.js"></script>
  82. <script src="statics/plugins/slimscroll/jquery.slimscroll.min.js"></script>
  83. <script src="statics/libs/fastclick.min.js"></script>
  84. <script type="text/javascript">
  85. var vm = new Vue({
  86. el: '#loginBox',
  87. data: {
  88. username: '',
  89. password: '',
  90. captcha: '',
  91. src: 'captcha.jpg'
  92. },
  93. beforeCreate: function () {
  94. if (self != top) {
  95. top.location.href = self.location.href;
  96. }
  97. },
  98. methods: {
  99. refreshCode: function () {
  100. this.src = "captcha.jpg?t=" + $.now();
  101. },
  102. login: function (event) {
  103. if (vm.username == '') {
  104. iview.Message.warning("用户名为空");
  105. return false;
  106. }
  107. if (vm.password == '') {
  108. iview.Message.warning("密码为空");
  109. return false;
  110. }
  111. if (vm.captcha == '') {
  112. iview.Message.warning("验证码为空");
  113. return false;
  114. }
  115. var data = "username=" + vm.username + "&password=" + vm.password + "&captcha=" + vm.captcha;
  116. $.ajax({
  117. type: "POST",
  118. url: "sys/login",
  119. data: data,
  120. dataType: "json",
  121. success: function (result) {
  122. if (result.code == 0) {//登录成功
  123. parent.location.href = 'index.html';
  124. } else {
  125. vm.refreshCode();
  126. iview.Message.error(result.msg);
  127. }
  128. }
  129. });
  130. }
  131. }
  132. });
  133. </script>
  134. </body>
  135. </html>