You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
351 lines
12 KiB
351 lines
12 KiB
<!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>
|