Pro/application/jk/view/login/index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>登录 - 监控系统</title>  
    <link rel="stylesheet" href="/static/jk/css/pintuer.css">
    <link rel="stylesheet" href="/static/jk/css/admin.css">
    <script type="text/javascript" src="/static/jk/js/jquery-2.1.0.min.js{$Think.VERSION_V}"></script>
    <script type="text/javascript" src="/static/jk/layer/layer.js{$Think.VERSION_V}"></script>
    <script src="/static/jk/js/pintuer.js"></script>
    <style>
        .bodyhd{
            width: 100%;
            background-color: #047fbb;
            height: 30px;
            color: #fff;
            font-size: 16px;
            line-height: 30px;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
        }
        .bodyhd .titlename{
            padding-left: 20px;
            float: left;
        }
        .bodyhd .btn{
            float: right;
        }
        .bodyhd .btn span{
            width: 30px;
            height: 30px;
            display: inline-block;
            position: relative;
            /*background: pink*/
        }
        .bodyhd .btn span:active{opacity: 0.6}

        .bodyhd .btn .minimize::before {
            content: '';
            display: inline-block;
            width: 16px;
            border-bottom: 2px solid #fff;
            position: absolute;
            right: 6px;
            top: 15px;
            z-index: 200;
        }

        .bodyhd .btn .maximize::before {
            content: '□';
            display: inline-block;
            font-size: 32px;
            position: absolute;
            font-weight: bold;
            right: 5px;
            top: -3px;
            z-index: 200;
        }
        .bodyhd .btn .close::before {
            content: '✕';
            display: inline-block;
            font-size: 22px;
            position: absolute;
            font-weight: normal;
            right: 6px;
            top: 1px;
            z-index: 200;
        }
        .box-login{
            margin-top: 10%;
           
        }
        @media (min-width: 1000px){
            .xm4-move {
                width: 40%;
                margin-left: 30%

            }
        }

    </style>
</head>
<body class="bg">
<section class="box">
    <div class="panel loginbox" style="width:350px !important;">
                <div class="text-center margin-big padding-big-top"><h1>监控系统</h1></div>
                <div class="panel-body" style="padding:30px; padding-bottom:10px; padding-top:10px;">
                    <div class="form-group">
                        <div class="field field-icon-right">
                            <input type="text" class="input input-big" name="name" id="name" placeholder="登录账号" data-validate="required:请填写账号" />
                            <span class="icon icon-user margin-small"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="field field-icon-right">
                            <input type="password" class="input input-big" name="password" id="password" placeholder="登录密码" data-validate="required:请填写密码" />
                            <span class="icon icon-key margin-small"></span>
                        </div>
                    </div>
                    
                </div>
                <div style="padding:30px;"><input type="submit" id="submit" class="button button-block bg-main text-big input-big" value="登录"></div>
            </div>
</section>
</body>

<script>
    $(function(){
        // 确定键触发提交登录
        $(document).keydown(function(e){
            if(e.keyCode == 13) $('#submit').trigger('click');
        });

        // 提交登录
        $('#submit').click(function(){
            // 获取要提交的数据
            var name = $('#name').val();
            var password = $('#password').val();

            // 数据验证
            if(name == ""){
                layer.msg('账号不能为空!');
                return false;
            }
            if(password == ""){
                layer.msg('密码不能为空!');
                return false;
            }

            // 拼装数据
            var query = new Object;
            query.name = name;
            query.password = password;

            // 发送数据给后台处理登录
            $.ajax({
                url:'/login/do_login',
                data:query,
                type:'POST',
                dataType:'JSON',
                success:function(data){
                    if(data.code == 1){
                        layer.msg(data.msg,{time:1500},function(){
                            location.href = data.url;
                        });
                    }else if(data.code == 0){
                        layer.msg(data.msg);
                    }
                }
            });
        });
    });
</script>
</html>