161 lines
5.4 KiB
HTML
161 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>登录 - CRM客户管理系统</title>
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
body {
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
margin: 0;
|
|
}
|
|
|
|
.login-card {
|
|
background: white;
|
|
padding: 2.5rem;
|
|
border-radius: 12px;
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
|
width: 100%;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.login-header {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.login-header i {
|
|
font-size: 3rem;
|
|
color: #FF6B35;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.login-header h2 {
|
|
margin: 0;
|
|
color: #333;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.form-group input {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
font-size: 1rem;
|
|
transition: border-color 0.3s;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.form-group input:focus {
|
|
outline: none;
|
|
border-color: #FF6B35;
|
|
}
|
|
|
|
.login-btn {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
background-color: #FF6B35;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.login-btn:hover {
|
|
background-color: #e85a2a;
|
|
}
|
|
|
|
.error-msg {
|
|
color: #e74c3c;
|
|
font-size: 0.85rem;
|
|
margin-top: 1rem;
|
|
text-align: center;
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="login-card">
|
|
<div class="login-header">
|
|
<svg width="48" height="48" viewBox="0 0 50 43" fill="none" xmlns="http://www.w3.org/2000/svg"
|
|
style="color: #FF6B35; margin-bottom: 1rem;">
|
|
<path
|
|
d="M30.8799 0.0634766C32.1561 0.191098 35.0914 0.25518 40.1953 3.12598C46.9838 7.51557 49.4463 14.7383 49.8291 17.8008C50.297 20.8846 50.084 28.5324 45.4902 34.4531C40.8966 40.3736 33.8362 42.194 30.8799 42.3643H9.95215V31.1357C4.45541 31.1354 0 26.6803 0 21.1836C2.62861e-05 15.6869 4.45542 11.2308 9.95215 11.2305V0H30.8799V0.0634766ZM30.8799 11.3564C28.7219 11.1986 15.882 11.302 11.4531 11.3428C16.2383 12.0662 19.9062 16.1966 19.9062 21.1836C19.9062 26.1365 16.288 30.2432 11.5508 31.0078H30.8799C33.2407 30.4973 39.1744 27.7535 38.6641 20.2891C38.2557 14.3174 33.3045 11.8457 30.8799 11.3564Z"
|
|
fill="currentColor"></path>
|
|
</svg>
|
|
<h2>CRM 系统登录</h2>
|
|
</div>
|
|
<form id="loginForm">
|
|
<div class="form-group">
|
|
<label for="username">用户名</label>
|
|
<input type="text" id="username" required placeholder="请输入用户名">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password">密码</label>
|
|
<input type="password" id="password" required placeholder="请输入密码">
|
|
</div>
|
|
<button type="submit" class="login-btn">立即登录</button>
|
|
<div id="errorMsg" class="error-msg"></div>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('loginForm').addEventListener('submit', async function (e) {
|
|
e.preventDefault();
|
|
const username = document.getElementById('username').value;
|
|
const password = document.getElementById('password').value;
|
|
const errorMsg = document.getElementById('errorMsg');
|
|
|
|
try {
|
|
const response = await fetch('/api/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username, password })
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
localStorage.setItem('crmToken', data.token);
|
|
window.location.href = '/';
|
|
} else {
|
|
const text = await response.text();
|
|
errorMsg.textContent = text || '登录失败，请检查用户名和密码';
|
|
errorMsg.style.display = 'block';
|
|
}
|
|
} catch (error) {
|
|
console.error('Login error:', error);
|
|
errorMsg.textContent = '服务器连接失败，请稍后再试';
|
|
errorMsg.style.display = 'block';
|
|
}
|
|
});
|
|
|
|
// 如果已经登录，直接跳转
|
|
if (localStorage.getItem('crmToken')) {
|
|
window.location.href = '/';
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |