index.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  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. <script type="text/javascript" src="/static/js/request.js"></script>
  18. <script>
  19. </script>
  20. <style>
  21. body {
  22. display: -webkit-box;
  23. display: flex;
  24. -webkit-box-pack: center;
  25. justify-content: center;
  26. -webkit-box-align: center;
  27. align-items: center;
  28. height: 100%;
  29. }
  30. .login-box {
  31. display: table;
  32. table-layout: fixed;
  33. overflow: hidden;
  34. max-width: 700px;
  35. }
  36. .login-left {
  37. display: table-cell;
  38. position: relative;
  39. margin-bottom: 0;
  40. border-width: 0;
  41. padding: 45px;
  42. }
  43. .login-left .form-group:last-child {
  44. margin-bottom: 0px;
  45. }
  46. .login-right {
  47. display: table-cell;
  48. position: relative;
  49. margin-bottom: 0;
  50. border-width: 0;
  51. padding: 45px;
  52. width: 50%;
  53. max-width: 50%;
  54. background: #67b26f!important;
  55. background: -moz-linear-gradient(45deg,#67b26f 0,#4ca2cd 100%)!important;
  56. background: -webkit-linear-gradient(45deg,#67b26f 0,#4ca2cd 100%)!important;
  57. background: linear-gradient(45deg,#67b26f 0,#4ca2cd 100%)!important;
  58. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67b26f', endColorstr='#4ca2cd', GradientType=1 )!important;
  59. }
  60. .login-box .has-feedback.feedback-left .form-control {
  61. padding-left: 38px;
  62. padding-right: 12px;
  63. }
  64. .login-box .has-feedback.feedback-left .form-control-feedback {
  65. left: 0;
  66. right: auto;
  67. width: 38px;
  68. height: 38px;
  69. line-height: 38px;
  70. z-index: 4;
  71. color: #dcdcdc;
  72. }
  73. .login-box .has-feedback.feedback-left.row .form-control-feedback {
  74. left: 15px;
  75. }
  76. @media (max-width: 576px) {
  77. .login-right {
  78. display: none;
  79. }
  80. }
  81. </style>
  82. </head>
  83. <body style="background-image: url(__IMG__/login-bg-2.jpg); background-size: cover;">
  84. <div class="bg-translucent p-10">
  85. <div class="login-box bg-white clearfix">
  86. <div class="login-left">
  87. <form class="layui-form" method="POST">
  88. <div class="form-group has-feedback feedback-left">
  89. <input type="text" placeholder="请输入您的用户名" class="form-control" name="username" id="username" />
  90. <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
  91. </div>
  92. <div class="form-group has-feedback feedback-left">
  93. <input type="password" placeholder="请输入密码" class="form-control" id="password" name="password" />
  94. <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
  95. </div>
  96. <div class="form-group">
  97. <button class="btn btn-block btn-primary layui-btn" lay-submit lay-filter="login" type="button" style="width:100%;">立即提交</button>
  98. </div>
  99. </form>
  100. </div>
  101. <div class="login-right">
  102. <p class="text-white m-tb-15">缘中秀后台 是一个基于Bootstrap v3.3.7的后台管理系统开发。</p>
  103. <p class="text-white">Copyright © 2020 <a href="#">铭迅网络科技</a>. All right reserved</p>
  104. </div>
  105. </div>
  106. </div>
  107. <script>
  108. layui.use(['form','layer'], function(){
  109. const form = layui.form;
  110. const layer = layui.layer;
  111. //提交
  112. form.on('submit(login)', async function(data){
  113. const body = data.field;
  114. const response = await request(
  115. '{:url("admin/login/login")}',
  116. { "username": body.username, "password": body.password }
  117. )
  118. if(response.code !== 200) {
  119. layer.msg(response.message);
  120. return;
  121. }
  122. window.location.href="{:url('admin/index/index')}";
  123. });
  124. });
  125. </script>
  126. </body>
  127. </html>