index.html 4.6 KB

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