|
|
<!DOCTYPE html><html lang="zh-CN">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>系统登录</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; }
body { background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; }
.login-container { background-color: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); width: 100%; max-width: 420px; padding: 40px 30px; transition: transform 0.3s ease; }
.login-container:hover { transform: translateY(-5px); }
.login-header { text-align: center; margin-bottom: 30px; }
.login-header h1 { color: #333; font-size: 28px; margin-bottom: 8px; }
.login-header p { color: #666; font-size: 16px; }
.form-group { margin-bottom: 20px; }
label { display: block; margin-bottom: 8px; color: #555; font-weight: 500; }
input { width: 100%; padding: 14px 16px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; transition: all 0.3s; }
input:focus { border-color: #4a90e2; box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2); outline: none; }
.error-message { color: #e74c3c; font-size: 14px; margin-top: 5px; display: none; }
.login-button { background: linear-gradient(to right, #6a11cb, #2575fc); color: white; border: none; border-radius: 8px; padding: 14px; font-size: 16px; font-weight: 600; cursor: pointer; width: 100%; transition: all 0.3s; margin-top: 10px; }
.login-button:hover { background: linear-gradient(to right, #5a0db5, #1c68e8); box-shadow: 0 5px 15px rgba(37, 117, 252, 0.4); }
.login-button:active { transform: scale(0.98); }
.login-footer { text-align: center; margin-top: 25px; color: #777; font-size: 14px; }
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; display: none; }
.alert-error { background-color: #ffebee; color: #c62828; border: 1px solid #ffcdd2; }
.alert-success { background-color: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.password-requirements { font-size: 12px; color: #777; margin-top: 5px; }
.input-error { border-color: #e74c3c; box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2); } </style></head>
<body> <div class="login-container"> <div class="login-header"> <h1>系统登录</h1> <p>请输入您的账号和密码</p> </div>
<div id="usernameAlert" class="alert alert-error"> 账号不存在，请检查后重试！ </div>
<div id="passwordAlert" class="alert alert-error"> 密码错误，请检查后重试！ </div>
<form id="loginForm"> <div class="form-group"> <label for="username">账号</label> <input type="text" id="username" name="username" placeholder="请输入账号" required> <div class="error-message" id="usernameError">账号不能为空</div> </div>
<div class="form-group"> <label for="password">密码</label> <input type="password" id="password" name="password" placeholder="请输入密码" required> <div class="error-message" id="passwordError">密码不能为空</div> <div class="password-requirements">密码必须为8位数字</div> </div>
<button type="submit" class="login-button">登录</button> </form> </div>
<script> document.addEventListener('DOMContentLoaded', function () { const loginForm = document.getElementById('loginForm'); const usernameInput = document.getElementById('username'); const passwordInput = document.getElementById('password'); const usernameError = document.getElementById('usernameError'); const passwordError = document.getElementById('passwordError'); const usernameAlert = document.getElementById('usernameAlert'); const passwordAlert = document.getElementById('passwordAlert');
// 正确的账号和密码 const CORRECT_USERNAME = 'admin'; const CORRECT_PASSWORD = '20251107';
// 表单提交事件 loginForm.addEventListener('submit', function (e) { e.preventDefault();
// 重置错误状态 resetErrors();
// 获取表单数据 const username = usernameInput.value.trim(); const password = passwordInput.value.trim();
// 表单验证 let isValid = true;
if (!username) { showError(usernameError, '账号不能为空'); usernameInput.classList.add('input-error'); isValid = false; }
if (!password) { showError(passwordError, '密码不能为空'); passwordInput.classList.add('input-error'); isValid = false; } else if (!/^\d{8}$/.test(password)) { showError(passwordError, '密码必须为8位数字'); passwordInput.classList.add('input-error'); isValid = false; }
// 如果验证通过，尝试登录 if (isValid) { // 验证账号密码 if (username === CORRECT_USERNAME && password === CORRECT_PASSWORD) { // 登录成功，保存登录状态 localStorage.setItem('isLoggedIn', 'true'); localStorage.setItem('loginTime', new Date().getTime());
// 显示成功消息（短暂显示后跳转） showSuccessMessage();
// 延迟跳转，让用户看到成功消息 setTimeout(function () { window.location.href = 'hcdbqb-management.html'; }, 1000); } else { // 登录失败，明确提示是账号还是密码错误 if (username !== CORRECT_USERNAME) { usernameAlert.style.display = 'block'; usernameInput.classList.add('input-error'); usernameInput.focus(); } else { passwordAlert.style.display = 'block'; passwordInput.classList.add('input-error'); passwordInput.value = ''; passwordInput.focus(); } } } });
// 实时验证 usernameInput.addEventListener('blur', function () { if (!this.value.trim()) { showError(usernameError, '账号不能为空'); this.classList.add('input-error'); } else { hideError(usernameError); this.classList.remove('input-error'); } });
passwordInput.addEventListener('blur', function () { const password = this.value.trim(); if (!password) { showError(passwordError, '密码不能为空'); this.classList.add('input-error'); } else if (!/^\d{8}$/.test(password)) { showError(passwordError, '密码必须为8位数字'); this.classList.add('input-error'); } else { hideError(passwordError); this.classList.remove('input-error'); } });
// 输入时隐藏错误提示 usernameInput.addEventListener('input', function () { hideError(usernameError); hideAlert(usernameAlert); this.classList.remove('input-error'); });
passwordInput.addEventListener('input', function () { hideError(passwordError); hideAlert(passwordAlert); this.classList.remove('input-error'); });
// 辅助函数 function showError(element, message) { element.textContent = message; element.style.display = 'block'; }
function hideError(element) { element.style.display = 'none'; }
function hideAlert(alertElement) { alertElement.style.display = 'none'; }
function resetErrors() { hideError(usernameError); hideError(passwordError); hideAlert(usernameAlert); hideAlert(passwordAlert); usernameInput.classList.remove('input-error'); passwordInput.classList.remove('input-error'); }
function showSuccessMessage() { // 临时创建一个成功提示 const successAlert = document.createElement('div'); successAlert.className = 'alert alert-success'; successAlert.textContent = '登录成功，正在跳转...'; usernameAlert.parentNode.insertBefore(successAlert, usernameAlert); successAlert.style.display = 'block';
// 移除错误提示（如果有） hideAlert(usernameAlert); hideAlert(passwordAlert); }
// 检查是否已经登录（如果已经登录，直接跳转） if (localStorage.getItem('isLoggedIn') === 'true') { // 检查登录时间，如果超过24小时需要重新登录 const loginTime = parseInt(localStorage.getItem('loginTime')); const currentTime = new Date().getTime(); const hoursDiff = (currentTime - loginTime) / (1000 * 60 * 60);
if (hoursDiff < 24) { window.location.href = 'hcdbqb-management.html'; } else { // 超过24小时，清除登录状态 localStorage.removeItem('isLoggedIn'); localStorage.removeItem('loginTime'); } } }); </script></body>
</html>
|
