<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>工业领域重要数据和核心数据目录备案管理系统</title>
    <meta name="keywords" content="工业领域重要数据和核心数据目录备案管理系统">
    <meta name="description" content="工业领域重要数据和核心数据目录备案管理系统">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/login.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->
    <script>
        if (window.top !== window.self) {
            window.top.location = window.location;
        }
    </script>

</head>

<body class="signin">
    <div class="signinpanel">
        <div style="position: fixed;z-index: 1;width: 100%;top: 5vh;left: 0;font-size: 36px;">
            <p style="text-align: center;color: #007cfd;">工业领域重要数据和核心数据</p>
            <p style="text-align: center;color: #007cfd;">目录备案管理系统</p>
        </div>
    <div class="row back" style="position:fixed;z-index:1;top: 25%;left: 25%;vertical-align: middle;">
        <div class="pull-right" style="padding-right: 35px;text-align: left;margin-top: 4%;width: 50%;height: 100%">
            <form id="signupForm" style="padding:20px;background:transparent;border:0;">
                <!--                <h3 class="text-center">用户登录</h3>-->
                <!--                <p class="m-t-md text-center">欢迎登录工业领域重要数据和核心数据备案管理平台</p>-->
                <div>
                    <input type="text" name="username" class="form-control uname"/>

                </div>
                <div></div>
                <div>
                    <input type="password" name="password" class="form-control pword m-b"
                           style="::-ms-clear, ::-ms-reveal{display: none;}"/>

                </div>
                <div></div>
                <div style="width: 90%;">
                    <input type="text" name="verify" class="verifyclass"
                           style="border-radius: 4px;width: 50%;border: 1px solid #e5e6e7;font-size: 14px;color: inherit;padding: 6px 12px;">
                    <a href="javascript:changeImg();" rel="external nofollow" title="点击更换验证码">
                        <img id="img" src="/getVerify" alt="验证码"/>
                    </a>
                </div>
                <div></div>
                <a id="login" class="btn btn-login btn-block">登录</a>
            </form>
            <a th:href="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath()} "
               id="contextPath"></a>
        </div>
    </div>
    <div class="signup-footer">
        <div class="pull-left">
        </div>
    </div>

    <div style="position: fixed; left: 0px; right: 0px; bottom: 20px; color: #00a3ff; font-size: 18px;
        padding: 5px 4px 4px; border-radius: 3px; text-align: center; ">工信安全备案工具V1.0</div>
</div>
<script th:inline="javascript"> var ctx = [[@{
    /}]] ; </script>
<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4" th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
<script src="/js/bootstrap.min.js?v=3.3.6" th:src="@{/js/bootstrap.min.js?v=3.3.6}"></script>

<!-- 自定义js -->
<script src="/js/content.js?v=1.0.0" th:src="@{/js/content.js?v=1.0.0}"></script>

<!-- jQuery Validation plugin javascript-->
<script src="/js/ajax-util.js"></script>
<script src="/js/plugins/validate/jquery.validate.min.js"
        th:src="@{/js/plugins/validate/jquery.validate.min.js}"></script>
<script src="/js/plugins/validate/messages_zh.min.js" th:src="@{/js/plugins/validate/messages_zh.min.js}"></script>
<script src="/js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "get",
            url: ctx + "getLoginUrl",
            success: function (r) {
                parent.location.href = r;
            },
        });

        $("#login").on('click', function () {
            $("#signupForm").submit();
        });
        validateRule();
        $("body").keydown(keyDownLogon);
        // getVerify($("#imgVerify"));
        $("#imgVerify").click();


        let contextPath = $('#contextPath').attr('href');
        $('#kanbuq').click(function () {
            let verifiyimg = $('#verImg').attr("src");
            $('#verImg').attr("src", contextPath + '/getVerify');
        });

    });

    $.validator.setDefaults({
        submitHandler: function () {
            login();
        }
    });

    function login() {
        //跳转到公共登录页面
        $.ajax({
            type: "POST",
            url: ctx + "login",
            data: $('#signupForm').serialize(),
            success: function (r) {
                if (r.code == 0) {
                    var index = layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });
                    parent.location.href = '/index?sysFlag=1';
                } else {
                    layer.msg(r.msg);
                }
            },
        });
    }

    function changeImg() {
        document.getElementById("img").src = "/getVerify?r=" + Math.random();
    }

    function keyDownLogon() {
        if (event.keyCode == "13") {
            $("#login").trigger('click');
        }
    }


    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#signupForm").validate({
            rules: {
                username: {
                    required: true
                },
                password: {
                    required: true
                },
                verify: {
                    required: true
                }
            },
            messages: {
                username: {
                    required: icon + "请输入您的用户名",
                },
                password: {
                    required: icon + "请输入您的密码",
                },
                verify: {
                    required: icon + "请输入验证码",
                }
            }, errorPlacement: function (error, element) { //错误信息位置设置方法
                error.appendTo(element.parent().next()); //这里的element是录入数据的对象
            }
        })
    }

</script>

<style type="text/css">
    .backs {
        background: #18c8f6;
        height: auto;
        background: url("../img/1_load_window.png") no-repeat center fixed;
        background-size: 80% 60%;
        /*background:url("../img/backg03.png") no-repeat center fixed;*/
        /*background:url("../img/background_login.jpg") no-repeat center fixed;*/
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        color: rgba(255, 255, 255, .95);
    }


    .verifyclass:focus {
        outline: none;
        border: 1px solid deepskyblue;
    }

    .back {
        /*background-color: rgb(255, 208, 0);*/
        background-image: url("../img/1_load_window.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        /*position: absolute;*/
        padding: 0px;
        width: 50%;
        height: 44%;
    }

    .divInfo {
        position: absolute;
    / / 绝对定位，这个是随页面走动的，可以换成fixed，不随页面走动。 left: 0;
        top: 0;
        z-inde: 111111;
        width: 1440px;
        height: 36px;
        background: red;
    }

    /*去除ie edge的密码框默认出现的小眼睛
		给人添乱这一块，巨硬从来都没让我失望过*/
    input[type="password"]::-ms-reveal {
        display: none;
    }

    input[type="password"]::-ms-clear {
        display: none;
    }

    input[type="password"]::-o-clear {
        display: none;
    }

</style>
</body>
</html>
