<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <script th:replace="common/head"></script>
        <!-- 样式 -->
        <link rel="stylesheet" th:href="@{'/css/login.css'}" media="all">
        <script>
            if (self !== top){
                window.top.location.replace(self.location);
            }
        </script>
        <style>

            body{
                background: url('/images/estate-bg.png') no-repeat center center;
                background-size: cover;
            }
            #LAY-user-login, .layadmin-user-display-show{
                position: absolute;
                left: 50%;
                top: 53%;
                transform: translate(-50%,-50%);
            }
            @media screen and (max-width: 1680px) {


                .layui-form-item {
                    margin-bottom: 20px;

                }
            }
            @media screen and (min-width: 1680px) {

                .layui-form-item {
                    margin-bottom: 26px;

                }
            }
            .layadmin-link{
                color: #1e90ff!important;
                cursor: pointer;
            }
            .layui-form-checkbox[lay-skin=primary] span{
                color: #fff!important;
            }
            .layui-btn{
                background-color: #3568b2;
            }

            .layui-form-item h2{
                font: 22px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
                color: #1e90ff;
                letter-spacing: 2px;
                text-align: center;
            }
            .layadmin-user-login-box {
                padding: 0px 20px;
            }
            .layui-btn:hover {
                opacity: 1;
                filter: alpha(opacity=100);
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login">

            <div class="layadmin-user-login-main">

                <!-- 表单详情 -->
                <form class="layadmin-user-login-box layadmin-user-login-body layui-form">
                    <div class="layui-form-item">
                        <h2><span th:text="小区智能管理系统"></span></h2>
                    </div>
                    <!-- 用户名 -->
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
                        <input type="text" lay-verify="required" name="loginName" id="LAY-user-login-username" placeholder="用户名" class="layui-input">
                    </div>
                    <!-- 密码 -->
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
                        <input type="password" lay-verify="required" name="loginPwd" id="LAY-user-login-password" placeholder="密码" class="layui-input">
                    </div>
                    <!-- 提交按钮 -->
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <button id="login_btn" class="layui-btn" type="button" lay-submit lay-filter="login_form_btn">账号密码登陆</button>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <a href="/permissions/third/authentication/render/CTWING" class="layui-btn" style="background: orange">天翼免密登录</a>
                        </div>
                    </div>
                    <div class="layui-form-item" style="margin-bottom: 20px;">
                        <input type="checkbox" name="rememberMe" value="1" lay-skin="primary" title="自动登录">
                        <a href="javascript:void(0);" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码？</a>
                    </div>
                </form>
            </div>



        </div>
    </body>

    <script type="text/javascript" th:src="@{'/layui/layui.js'}"></script>
    <script type="text/javascript">
        layui.config({
            base: '/' //静态资源所在路径
        }).extend({
            common    :   'js/common'
        }).use(['jquery','common','layer','form'],function(){
            var $ = layui.jquery;
            var form = layui.form;
            //  弹窗插件
            var layer = layui.layer;
            //  引入公共模块
            var common = layui.common;

            //  点击登陆事件
            form.on("submit(login_form_btn)",function(data){
                //  发送请求
                var loadIndex = layer.load(2);
                $.ajax({
                    url     :   '/permissions/authentication/login',
                    type    :   'POST',
                    data    :   data.field,
                    success :   function(res){
                        layer.close(loadIndex);
                        window.location.href = '/';
                    },
                    error: function(res){
                        layer.close(loadIndex);
                    }
                });
            }) ;

            //  点击天翼登陆事件
            form.on("submit(third_form_btn)",function(data){
                //  发送请求
                var loadIndex = layer.load(2);
                $.ajax({
                    url     :   '/permissions/third/authentication/render/CTWING',
                    type    :   'GET',
                    data    :   data.field,
                    error: function(res){
                        layer.close(loadIndex);
                    }
                });
            }) ;




            $(window).on('keyup', function(event){
                var e = event || window.event;
                if (e.keyCode === 13) {
                    $('#login_btn').click();
                }
            });

            $('.layadmin-user-jump-change').click(function () {
                layer.msg("请联系管理员找回密码！");
            });

        });
    </script>
</html>
