wenquanauth/admin/login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录</title>
    <link rel="stylesheet" href="../static/frame/layui/css/layui.css">
    <link rel="stylesheet" href="../static/frame/static/css/style.css">
    <link rel="icon" href="../static/frame/static/image/code.png">
    <script src="https://v.vaptcha.com/v3.js"></script>
<style>
    #canvas-cont {
        background-color: #222B3A;
        max-width: 100%;
        max-height: 100%;
        overflow: hidden;
    }
</style>

</head>
<script src="../static/canvas-particle.js"></script>

<body style="overflow: hidden">
<div id="canvas-cont"></div>
    <div class="login-main">
        <header class="layui-elip">后台登录</header>
        <form class="layui-form" style="padding: 40px;padding-top: 10px">
            <div class="layui-input-inline">
                <input type="text" name="username" required lay-verify="required" placeholder="账号" autocomplete="off"
                       class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="密码" autocomplete="off"
                       class="layui-input">
            </div>
            <div id="vaptchaContainer" class="layui-input-inline">
            </div>
            <div class="layui-input-inline login-btn">
                <button type="submit" lay-submit class="layui-btn layui-btn-normal">登录</button>
            </div>
<!--            <hr class="hr">-->
<!--            &lt;!&ndash; <div class="layui-input-inline">-->
<!--                 <button type="button" class="layui-btn layui-btn-primary">QQ登录</button>-->
<!--             </div>-->
<!--             <div class="layui-input-inline">-->
<!--                 <button type="button" class="layui-btn layui-btn-normal">微信登录</button>-->
<!--             </div> &ndash;&gt;-->
<!--            <p><a href="javascript:;" class="fl">立即注册</a><a href="javascript:;" class="fr" onclick="forgetpass()">忘记密码？</a></p>-->

        </form>
    </div>

<script src="../static/frame/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['form','layer'], function () {
        // 操作对象
        window.layer = layui.layer;
        var form = layui.form;
        window.$ = layui.jquery;
        $('document').ready(function () {
            var config = {
                vx: 4,
                vy: 4,
                height: 2,
                width: 2,
                count: 60,
                color: "34,79,151",
                stroke: "173,203,251",
                dist: 6000,
                e_dist: 20000,
                max_conn: 10
            };
            CanvasParticle(config);
        });
        form.on('submit', function (data) {

            var loading = layer.load();
            var token = '';
            if (typeof vaptchaObj != 'undefined'){
                token = vaptchaObj.getToken();
                vaptchaObj.reset();
            }
            $.ajax({
                url: 'ajax.php?mod=login',
                type: 'POST',
                dataType: 'json',
                data: 'username=' + data.field.username + '&password=' + data.field.password + '&token=' + token,
                success: function (data) {
                    layer.close(loading);
                    if (data.code === '1') {
                        window.location.href = 'admin.html';
                    } else {
                        layer.msg(data.msg);
                    }
                },
                error: function (data) {
                    layer.close(loading);
                    layer.msg('[' + data.status + ']' + data.statusText);
                }
            });

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        $.ajax({
            url: '../function/GetVerification.php',
            type: 'GET',
            dataType: 'html',
            success: function (data) {
                $('#vaptchaContainer').html(data);
            },
            error: function (data) {
                layer.msg('[' + data.status + ']' + data.statusText);
            }
        });
    });
    // function forgetpass() {
    //     //prompt层
    //     layer.prompt({title: '请输入站长邮箱', formType: 0}, function(value, index){
    //         layer.close(index);
    //         var loading = layer.load();
    //         $.ajax({
    //             url: './ajax.php?mod=forgetpass',
    //             type: 'GET',
    //             dataType: 'html',
    //             success: function (data) {
    //                 layer.close(loading);
    //                 layer.msg(data);
    //             },
    //             error: function (data) {
    //                 layer.close(loading);
    //                 layer.msg('[' + data.status + ']' + data.statusText);
    //             }
    //         });
    //     });
    // }
</script>

</body>
</html>