后台登陆页面

直接使用代码

图片素材

css代码

 <style>
.login-bg{
    background:url(http://www.bootfastui.cn/img/2021/0426-3/bg2.png) no-repeat top center;background-size:100% auto;overflow:hidden;overflow-y:hidden;}
   .login-bg::-webkit-scrollbar{height:0 !important;width:0px !important;}
   .login{position:fixed;right:20%;top:20%;min-height:420px;width:420px;padding:40px;background-color:#ffffff;margin-left:auto;margin-right:auto;border-radius:4px;/* overflow-x:hidden;*/
    box-sizing:border-box;}
  .login input[type=text],.login input[type=file],.login input[type=password],.login input[type=email],select{border:1px solid #DCDEE0;vertical-align:middle;border-radius:3px;height:50px;padding:0px 16px;font-size:14px;color:#555555;outline:none;width:100%;box-sizing:border-box;}
   .login input[type=text]:focus,.login input[type=file]:focus,.login input[type=password]:focus,.login input[type=email]:focus,select:focus{border:1px solid #27A9E3;}
   .login input[type=submit],.login input[type=button]{display:inline-block;vertical-align:middle;padding:12px 24px;margin:0px;font-size:18px;line-height:24px;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;color:#ffffff;background-color:#4eb1ff;border-radius:6px;border:none;-webkit-appearance:none;outline:none;width:100%;}
   .login-name{padding-left:50px!important;background:url(http://www.bootfastui.cn/img/2021/0426-3/login1.png) no-repeat 10px center;background-size:30px}
   .login-pwd{padding-left:50px!important;background:url(http://www.bootfastui.cn/img/2021/0426-3/login2.png) no-repeat 10px center;background-size:35px}
   .login hr{background:#fff url() 0 0 no-repeat;}
   .login hr.hr15{height:15px;border:none;margin:0px;padding:0px;width:100%;}
   .login hr.hr20{height:20px;border:none;margin:0px;padding:0px;width:100%;}
</style>

HTML+JS代码

 
<body class="login-bg" style="overflow: hidden;">

  <div class="login layui-anim layui-anim-up">
  
    <h3 class="text-center  f25" style="padding-bottom:30px">用户登陆</h3>

    <form method="post" class="layui-form">
      <input name="username" placeholder="用户名" type="text" lay-verify="required" class="layui-input login-name"
        autocomplete='off'>
      <hr class="hr15">
      <input name="password" lay-verify="required" placeholder="密码" type="password" class="layui-input login-pwd"
        autocomplete='off'>
      <hr class="hr15">
      <input name="verify" lay-verify="required" style="width:160px;float:left" placeholder="验证码" type="text"
        class="layui-input">
      <img src="/admin/index/verify" alt="captcha" style="width:150px;float:right"
        onclick="javascript:this.src='/admin/index/verify?'+Math.random();" class="verify" />
      <hr class="hr15">
      <input value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit">
      <hr class="hr20">
    </form>
  </div>

  <script>
    layui.use(['form', 'layer', 'upload', 'jquery'],
      function () {
        $ = layui.jquery;
        var form = layui.form,
          layer = layui.layer;


        var $ = layui.jquery,
          upload = layui.upload;



        //监听提交
        form.on('submit(login)',
          function (data) {
            console.log(data.field);

            //发异步，把数据提交给php
            $.ajax({
              url: '/admin/index/check',
              method: 'post',
              data: data.field,
              dataType: 'json',//预期服务器返回的数据类型
              success: function (res) {
                // parent.closeIframe(res.msg);
                console.log(res)

                if (res.status == 'success') {
                  layer.msg(res.msg,
                    {
                      time: 500,//2秒关闭（如果不配置，默认是3秒）,
                      anim: 0
                    },
                    function () {
                      location.href = '/admin/index/index'
                    });

                } else {
                  layer.msg(res.msg);
                  $('.verify').click()

                }



              },
              error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert('程序出错');   //弹出500
              },
            })
            return false;//如果不加这句，则ajax的回调函数不执行,作用为阻止表单提交

          });

      });
  </script>


</body>