<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>错敏信息校审系统</title>
    <meta name="description" content="错敏信息校审系统">
    <!-- 基础样式 -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <!-- 自定义登录样式 -->
    <style>
        :root {
            --primary-color: #1890ff;
            --secondary-color: #096dd9;
            --accent-color: #13c2c2;
            --light-color: #f0f2f5;
            --dark-color: #1f1f1f;
        }

        body.smart-login {
            background: url('../img/login-bg.jpg') no-repeat center center;
            background-size: cover;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }

        .signinpanel.smart-theme {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            max-width: 1000px;
            margin: 5% auto;
        }

        .signin-info.smart-theme {
            padding: 40px;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            height: 100%;
        }

        .smart-logo {
            text-align: center;
            margin-bottom: 30px;
        }

        .smart-logo h1 {
            color: white;
            font-size: 28px;
            font-weight: 600;
            margin-top: 15px;
        }

        .smart-features {
            list-style: none;
            padding: 0;
            margin: 30px 0;
        }

        .smart-features li {
            margin-bottom: 15px;
            position: relative;
            padding-left: 30px;
            font-size: 15px;
        }

        .smart-features li i {
            position: absolute;
            left: 0;
            top: 3px;
            color: var(--accent-color);
        }

        .login-form-container {
            padding: 40px;
        }

        .form-title {
            color: var(--dark-color);
            font-size: 22px;
            margin-bottom: 5px;
            font-weight: 600;
        }

        .form-subtitle {
            color: #666;
            margin-bottom: 25px;
            font-size: 14px;
        }

        .smart-input-group {
            position: relative;
            margin-bottom: 20px;
        }

        .smart-input-group i {
            position: absolute;
            left: 12px;
            top: 12px;
            color: #999;
            z-index: 2;
        }

        .form-control.smart-input {
            padding-left: 36px;
            height: 44px;
            border-radius: 4px;
            border: 1px solid #ddd;
            transition: all 0.3s;
        }

        .form-control.smart-input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }

        .btn-smart-primary {
            background: var(--primary-color);
            border: none;
            height: 44px;
            font-size: 16px;
            font-weight: 500;
            border-radius: 4px;
            transition: all 0.3s;
        }

        .btn-smart-primary:hover {
            background: var(--secondary-color);
        }

        .captcha-container {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .captcha-img {
            border-radius: 4px;
            cursor: pointer;
            height: 44px;
            border: 1px solid #ddd;
        }

        .remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .smart-footer {
            text-align: center;
            padding: 15px;
            color: #666;
            font-size: 12px;
            border-top: 1px solid #eee;
        }
        html, body {  overflow: hidden; }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .signin-info.smart-theme {
                padding: 30px 20px;
            }
            .login-form-container {
                padding: 30px 20px;
            }
        }
    </style>
    <!-- 浏览器兼容设置 -->
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" th:href="@{/favicon.ico}"/>
    <script>
        if(window.top!==window.self){alert('未登录或登录超时。请重新登录');window.top.location=window.location};
    </script>
</head>
<body class="signin smart-login">
<div class="signinpanel smart-theme">
    <div class="row">
        <!-- 左侧信息区 -->
        <div class="col-sm-7">
            <div class="signin-info smart-theme">
                <!--<div class="smart-logo">
                    <img th:src="@{/static/images/logo-white.png}" alt="系统logo" width="60">
                    <h1>错敏信息库智能应用系统</h1>
                </div>-->
                <h3>欢迎使用错敏信息校审系统</h3>
                <ul class="smart-features">
                    <li><i class="fa fa-check-circle"></i> 智能文本错敏检测</li>
                    <li><i class="fa fa-check-circle"></i> 多维度数据分析</li>
                    <li><i class="fa fa-check-circle"></i> 实时校对报告生成</li>
                    <li><i class="fa fa-check-circle"></i> 团队协作审校</li>
                    <li><i class="fa fa-check-circle"></i> 敏感信息自动过滤</li>
                </ul>
                <div th:if="${isAllowRegister}" class="register-link">
                    还没有账号？ <a th:href="@{/register}" class="text-white">立即注册 <i class="fa fa-arrow-right"></i></a>
                </div>
            </div>
        </div>

        <!-- 右侧登录表单 -->
        <div class="col-sm-5">
            <div class="login-form-container">
                <h3 class="form-title">用户登录</h3>
                <p class="form-subtitle">精准校对，智能分析</p>

                <form id="signupForm" autocomplete="on">
                    <div class="smart-input-group">
                        <i class="fa fa-user"></i>
                        <input type="text" name="username" id="username" autocomplete="username" class="form-control smart-input"
                               placeholder="用户名" />
                    </div>

                    <div class="smart-input-group">
                        <i class="fa fa-lock"></i>
                        <input type="password" name="password" id="password" autocomplete="current-password" class="form-control smart-input"
                               placeholder="密码" />
                    </div>

                    <div th:if="${captchaEnabled==true}" class="captcha-container">
                        <div style="flex: 1;">
                            <input type="text" name="validateCode" class="form-control smart-input"
                                   placeholder="验证码" maxlength="5"/>
                        </div>
                        <a href="javascript:void(0);" title="点击更换验证码">
                            <img th:src="@{/captcha/captchaImage(type=${captchaType})}"
                                 class="captcha-img"/>
                        </a>
                    </div>

                    <div class="remember-forgot" th:if="${isRemembered}">
                        <div class="checkbox">
                            <input style="margin-left:0px" type="checkbox" id="rememberme" name="rememberme">
                            <label for="rememberme">记住我</label>
                        </div>
                        <!--<a th:href="@{/forget}" class="text-muted">忘记密码？</a>-->
                    </div>

                    <button class="btn btn-smart-primary btn-block" id="btnSubmit"
                            data-loading="正在验证登录，请稍候...">
                        <i class="fa fa-sign-in-alt"></i> 登 录
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="smart-footer">
        Copyright © 2025 错敏信息校审系统 All Rights Reserved. | 版本 v1.0.0
    </div>
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=4.7.9}"></script>
<script th:src="@{/ruoyi/login.js}"></script>
<!-- 全局js -->
<script th:inline="javascript">
    var ctx = [[@{/}]];
    var captchaType = [[${captchaType}]];
    var captchaEnabled = [[${captchaEnabled}]];

    // 验证码刷新函数
    function refreshCaptcha() {
        $('.captcha-img').attr('src', ctx + 'captcha/captchaImage?type=' + captchaType + '&t=' + new Date().getTime());
    }

    // 点击验证码图片刷新
    $(document).on('click', '.captcha-img', function(){
        refreshCaptcha();
    });
</script>



<!-- 增强交互效果 -->
<script>
    $(function(){
        // 输入框聚焦效果
        $('.smart-input').focus(function(){
            $(this).parent().find('i').css('color', 'var(--primary-color)');
        }).blur(function(){
            $(this).parent().find('i').css('color', '#999');
        });

        // 回车提交
        $(document).keypress(function(e) {
            if (e.which == 13) {
                $('#btnSubmit').click();
            }
        });
    });
</script>
</body>
</html>