index.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  6. <title>登录页面 - 缘中秀后台管理</title>
  7. <link rel="icon" href="favicon.ico" type="image/ico">
  8. <meta name="author" content="yinqi">
  9. <link href="__CSS__/bootstrap.min.css" rel="stylesheet">
  10. <link href="__CSS__/materialdesignicons.min.css" rel="stylesheet">
  11. <link href="__CSS__/style.min.css" rel="stylesheet">
  12. <!-- 引入 layui.css -->
  13. <link href="//unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet">
  14. <!-- 引入 layui.js -->
  15. <script src="//unpkg.com/layui@2.7.6/dist/layui.js"></script>
  16. <script type="text/javascript" src="/static/js/jquery.min.js"></script>
  17. <style>
  18. body {
  19. display: -webkit-box;
  20. display: flex;
  21. -webkit-box-pack: center;
  22. justify-content: center;
  23. -webkit-box-align: center;
  24. align-items: center;
  25. height: 100%;
  26. }
  27. .login-box {
  28. display: table;
  29. table-layout: fixed;
  30. overflow: hidden;
  31. max-width: 700px;
  32. }
  33. .login-left {
  34. display: table-cell;
  35. position: relative;
  36. margin-bottom: 0;
  37. border-width: 0;
  38. padding: 45px;
  39. }
  40. .login-left .form-group:last-child {
  41. margin-bottom: 0px;
  42. }
  43. .login-right {
  44. display: table-cell;
  45. position: relative;
  46. margin-bottom: 0;
  47. border-width: 0;
  48. padding: 45px;
  49. width: 50%;
  50. max-width: 50%;
  51. background: #67b26f!important;
  52. background: -moz-linear-gradient(45deg,#67b26f 0,#4ca2cd 100%)!important;
  53. background: -webkit-linear-gradient(45deg,#67b26f 0,#4ca2cd 100%)!important;
  54. background: linear-gradient(45deg,#67b26f 0,#4ca2cd 100%)!important;
  55. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67b26f', endColorstr='#4ca2cd', GradientType=1 )!important;
  56. }
  57. .login-box .has-feedback.feedback-left .form-control {
  58. padding-left: 38px;
  59. padding-right: 12px;
  60. }
  61. .login-box .has-feedback.feedback-left .form-control-feedback {
  62. left: 0;
  63. right: auto;
  64. width: 38px;
  65. height: 38px;
  66. line-height: 38px;
  67. z-index: 4;
  68. color: #dcdcdc;
  69. }
  70. .login-box .has-feedback.feedback-left.row .form-control-feedback {
  71. left: 15px;
  72. }
  73. @media (max-width: 576px) {
  74. .login-right {
  75. display: none;
  76. }
  77. }
  78. </style>
  79. </head>
  80. <body style="background-image: url(__IMG__/login-bg-2.jpg); background-size: cover;">
  81. <div class="bg-translucent p-10">
  82. <div class="login-box bg-white clearfix">
  83. <div class="login-left">
  84. <form class="layui-form" method="POST">
  85. <div class="form-group has-feedback feedback-left">
  86. <input type="text" placeholder="请输入您的用户名" class="form-control" name="username" id="username" />
  87. <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
  88. </div>
  89. <div class="form-group has-feedback feedback-left">
  90. <input type="password" placeholder="请输入密码" class="form-control" id="password" name="password" />
  91. <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
  92. </div>
  93. <div class="form-group">
  94. <button class="btn btn-block btn-primary layui-btn" lay-submit lay-filter="login" style="width:100%;">立即提交</button>
  95. </div>
  96. </form>
  97. </div>
  98. <div class="login-right">
  99. <p class="text-white m-tb-15">缘中秀后台 是一个基于Bootstrap v3.3.7的后台管理系统开发。</p>
  100. <p class="text-white">Copyright © 2020 <a href="#">铭迅网络科技</a>. All right reserved</p>
  101. </div>
  102. </div>
  103. </div>
  104. <script>
  105. layui.use(['form','layer'], function(){
  106. const form = layui.form;
  107. const layer = layui.layer;
  108. //提交
  109. form.on('submit(login)', function(data){
  110. const body = data.field
  111. $.ajax({
  112. type: 'POST',
  113. url: "{:url('admin/login/login')}",
  114. data: { "username": body.username, "password": body.password },
  115. success: (res) => {
  116. console.log(res)
  117. if (res.code === 200) {
  118. window.location.href="{:url('admin/index/index')}";
  119. } else {
  120. layer.msg(res.message);
  121. }
  122. },
  123. error:(err) => {
  124. layer.msg('服务器发生错误请稍后再试!');
  125. console.log(err)
  126. }
  127. });
  128. return false;
  129. });
  130. });
  131. </script>
  132. </body>
  133. </html>