<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>登录{$Auth_site_name}管理系统</title>
    <meta name="generator" content="CRMEB! v2.5" />
    <meta name="author" content="CRMEB! Team and CRMEB UI Team" />
    <meta name="copyright" content="2001-2013 CRMEB Inc." />
    <link href="{__FRAME_PATH}css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
    <link href="{__FRAME_PATH}css/font-awesome.min.css?v=4.3.0" rel="stylesheet">
    <link href="{__FRAME_PATH}css/animate.min.css" rel="stylesheet">
    <link href="{__FRAME_PATH}css/style.min.css?v=3.0.0" rel="stylesheet">
    <link href="{__STATIC_PATH}plug/layer/mobile/need/layer.css" rel="stylesheet">
    <script src="{__STATIC_PATH}plug/layer/mobile/layer.js"></script>
    <script>
        top != window && (top.location.href = location.href);
    </script>
    <style>
        body {
            background: url("{__ADMIN_PATH}images/login_bg.png") center/cover no-repeat;
        }

        .dialog {
            position: fixed;
            top: 50%;
            left: 50%;
            display: flex;
            border-radius: 6px;
            margin-top: -36px;
            overflow: hidden;
            transform: translate(-50%, -50%);
        }

        .dialog .poster {
            width: 286px;
            height: 400px;
        }

        .dialog .form {
            width: 384px;
            height: 400px;
            padding: 0 52px;
            background-color: #FFFFFF;
        }

        .dialog .logo {
            height: 117px;
        }

        .dialog .logo img {
            display: block;
            width: 117px;
            height: 117px;
            margin: 0 auto;
            object-fit: contain;
        }

        .dialog input {
            width: 100%;
            height: 40px;
            padding: 0 12px;
            border: 1px solid #DDDDDD;
            border-radius: 3px;
            outline: none;
        }

        .dialog .input-wrap {
            margin-bottom: 22px;
        }

        .dialog .login-btn {
            width: 100%;
            height: 40px;
            border: none;
            border-radius: 3px;
            background-color: #338BFB;
            font-size: 14px;
            color: #FFFFFF;
            outline: none;
        }

        .dialog input::placeholder {
            color: #999999;
        }

        .dialog .verify {
            display: flex;
            border: 1px solid #DDDDDD;
            border-radius: 3px;
            margin: 22px 0 28px;
            overflow: hidden;
        }

        .dialog .verify input {
            border: none;
        }

        .dialog .verify button {
            padding: 0;
            border: none;
            outline: none;
        }

        .dialog .verify img {
            width: 116px;
            height: 40px;
        }

        .login-label {
            position: absolute;
            top: 0;
            right: 0;
            width: 109px;
        }
    </style>
</head>

<body>
    <div class="dialog">
        <img class="login-label" src="{__ADMIN_PATH}images/login_label.png" alt="">
        <div>
            <img class="poster" src="{__ADMIN_PATH}images/login_poster.png">
        </div>
        <div class="form">
            <div class="logo">
                <img src="{$login_logo}" alt="">
            </div>
            <div class="input-wrap">
                <input type="text" id="account" name="account" placeholder="请输入账号">
            </div>
            <div class="input-wrap">
                <input type="password" id="pwd" name="pwd" placeholder="密码" placeholder="请输入密码">
            </div>
            <div class="verify">
                <input type="text" id="verify" name="verify" placeholder="请输入验证码">
                <button>
                    <img id="verify_img" src="{:Url('captcha')}" alt="">
                </button>
            </div>
            <div>
                <button class="login-btn">登录</button>
            </div>
        </div>
    </div>
    <div class="footer" style="position: fixed;bottom: 0;width: 100%;left: 0;margin: 0;opacity: 0.8;">
        <div class="pull-right">Copyright © 2022 <span id="copyright"></span> 版本号：<a href="http://www.crmeb.com/" target="_blank">CRMEB-ZSFF-v2.1</a>
        </div>
    </div>
    <script src="{__PLUG_PATH}jquery-1.10.2.min.js"></script>
    <script src="{__FRAME_PATH}js/bootstrap.min.js?v=3.4.0"></script>
    <script src="{__MODULE_PATH}login/flaotfont.js"></script>
    <script src="{__MODULE_PATH}login/ios-parallax.js"></script>
    <script src="{__MODULE_PATH}login/index.js"></script>
    <script src="{__PLUG_PATH}md5.min.js"></script>
    <script>
        $(function () {
            // 版权信息
            $.ajax({
                url: "{:url('login/get_copyright')}",
                type: 'GET',
                dataType: 'json',
                success: function (res) {
                    if (res.code === 200) {
                        $('#copyright').text(function () {
                            return res.data || 'CRMEB';
                        });
                    } else {
                        $('#copyright').text('CRMEB');
                    }
                },
                error: function () {
                    $('#copyright').text('CRMEB');
                }
            });
            function loginHandler() {
                var name = $.trim($('#account').val());
                var pwd = $.trim($('#pwd').val());
                var verify = $.trim($('#verify').val());

                if (!name) {
                    return layer.open({content: '请输入用户名', skin: 'msg', time: 1});
                }
                if (!pwd) {
                    return layer.open({content: '请输入密码', skin: 'msg', time: 1});
                }
                if (!verify) {
                    return layer.open({content: '请输入验证码', skin: 'msg', time: 1});
                }

                $.ajax({
                    url: "{:url('verify')}",
                    type: 'post',
                    data: {
                        account: name,
                        pwd: md5(pwd),
                        verify: verify
                    },
                    dataType: 'json',
                    success: function (res) {
                        if (res.code == 1) {
                            window.location.replace("{:url('index/index')}");
                        } else if (res.code == 2) {
                            return layer.open({
                                content: '验证码错误，请重新输入！',
                                skin: 'msg',
                                time: 1,
                                end: function () {
                                    $('#verify_img').trigger('click');
                                }
                            });
                        } else if (res.code == 3) {
                            return layer.open({content: '错误次数过多,请稍候再试！', skin: 'msg', time: 1});
                        } else if (res.code == 4) {
                            return layer.open({
                                content: '请登陆!',
                                skin: 'msg',
                                time: 1,
                                end: function () {
                                    $('#verify_img').trigger('click');
                                }
                            });
                        } else if (res.code == 0) {
                            return layer.open({
                                content: res.msg,
                                skin: 'msg',
                                time: 1,
                                end: function () {
                                    $('#verify_img').trigger('click');
                                }
                            });
                        }
                    },
                    error: function (err) {
                        return layer.open({
                            content: '登录失败！',
                            skin: 'msg',
                            time: 1,
                            end: function () {
                                $('#verify_img').trigger('click');
                            }
                        });
                    }
                });
            }

            $('.login-btn').on('click', loginHandler);
            $(document).on('keydown', function (event) {
                if (event.keyCode === 13) {
                    loginHandler();
                }
            });
        });
    </script>
</body>

</html>