<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智能物流系统 - 登录注册</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #2c3e50, #4a6491);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
display: flex;
width: 900px;
height: 550px;
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.info-panel {
flex: 1;
background: #2c3e50;
color: white;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.info-panel h1 {
font-size: 32px;
margin-bottom: 20px;
display: flex;
align-items: center;
}
.info-panel h1 i {
margin-right: 15px;
color: #3498db;
}
.info-panel ul {
list-style: none;
margin-top: 30px;
}
.info-panel li {
margin: 15px 0;
display: flex;
align-items: center;
}
.info-panel li i {
margin-right: 10px;
color: #3498db;
width: 25px;
text-align: center;
}
.form-panel {
flex: 1;
padding: 50px;
display: flex;
flex-direction: column;
justify-content: center;
}
.form-container {
width: 100%;
}
.tabs {
display: flex;
margin-bottom: 30px;
border-bottom: 2px solid #eee;
}
.tab {
padding: 12px 25px;
cursor: pointer;
font-weight: 600;
font-size: 18px;
color: #7f8c8d;
transition: all 0.3s;
}
.tab.active {
color: #2c3e50;
border-bottom: 3px solid #3498db;
margin-bottom: -2px;
}
.form-group {
margin-bottom: 25px;
position: relative;
}
.form-group i {
position: absolute;
left: 15px;
top: 15px;
color: #7f8c8d;
}
.form-control {
width: 100%;
padding: 15px 15px 15px 45px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 16px;
transition: all 0.3s;
}
.form-control:focus {
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
outline: none;
}
.captcha-container {
display: flex;
gap: 15px;
}
.captcha-container .form-group {
flex: 1;
}
.captcha-img {
flex: 1;
background: #f1f2f6;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 20px;
letter-spacing: 5px;
color: #2c3e50;
cursor: pointer;
}
.remember-forgot {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.remember {
display: flex;
align-items: center;
}
.remember input {
margin-right: 8px;
}
.forgot-password {
color: #3498db;
text-decoration: none;
font-weight: 500;
}
.forgot-password:hover {
text-decoration: underline;
}
.btn {
width: 100%;
padding: 15px;
background: #3498db;
color: white;
border: none;
border-radius: 8px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.btn:hover {
background: #2980b9;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}
.register-link {
text-align: center;
margin-top: 25px;
color: #7f8c8d;
}
.register-link a {
color: #3498db;
text-decoration: none;
font-weight: 600;
}
.register-link a:hover {
text-decoration: underline;
}
.system-info {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #eee;
text-align: center;
color: #7f8c8d;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<div class="info-panel">
<h1><i class="fas fa-truck"></i>智能物流车多源数据分析路径优化系统</h1>
<p>融合实时路况、订单需求与车辆状态数据，实现动态路径优化，提升物流配送效率</p>
<ul>
<li><i class="fas fa-check-circle"></i> 多源数据采集与融合</li>
<li><i class="fas fa-check-circle"></i> 智能路径优化算法</li>
<li><i class="fas fa-check-circle"></i> 实时车辆监控与调度</li>
<li><i class="fas fa-check-circle"></i> 可视化数据分析看板</li>
<li><i class="fas fa-check-circle"></i> 异常事件快速响应</li>
</ul>
</div>
<div class="form-panel">
<div class="form-container">
<div class="tabs">
<div class="tab active">登录</div>
<div class="tab">注册</div>
</div>
<!-- 登录表单 -->
<form id="loginForm" style="display: block;">
<div class="form-group">
<i class="fas fa-user"></i>
<input type="text" class="form-control" placeholder="用户名" required>
</div>
<div class="form-group">
<i class="fas fa-lock"></i>
<input type="password" class="form-control" placeholder="密码" required>
</div>
<div class="captcha-container">
<div class="form-group">
<i class="fas fa-shield-alt"></i>
<input type="text" class="form-control" placeholder="验证码" required>
</div>
<div class="captcha-img">A3B7</div>
</div>
<div class="remember-forgot">
<div class="remember">
<input type="checkbox" id="remember">
<label for="remember">记住我</label>
</div>
<a href="#" class="forgot-password">忘记密码?</a>
</div>
<button type="submit" class="btn">登录系统</button>
<div class="register-link">
还没有账号? <a href="#" id="showRegister">立即注册</a>
</div>
</form>
<!-- 注册表单 -->
<form id="registerForm" style="display: none;">
<div class="form-group">
<i class="fas fa-user"></i>
<input type="text" class="form-control" placeholder="用户名" required>
</div>
<div class="form-group">
<i class="fas fa-envelope"></i>
<input type="email" class="form-control" placeholder="电子邮箱" required>
</div>
<div class="form-group">
<i class="fas fa-lock"></i>
<input type="password" class="form-control" placeholder="设置密码" required>
</div>
<div class="form-group">
<i class="fas fa-lock"></i>
<input type="password" class="form-control" placeholder="确认密码" required>
</div>
<div class="captcha-container">
<div class="form-group">
<i class="fas fa-shield-alt"></i>
<input type="text" class="form-control" placeholder="验证码" required>
</div>
<div class="captcha-img">C5D2</div>
</div>
<div class="remember">
<input type="checkbox" id="agree">
<label for="agree">我已阅读并同意<a href="#">用户协议</a></label>
</div>
<button type="submit" class="btn" style="margin-top: 20px;">注册账号</button>
<div class="register-link">
已有账号? <a href="#" id="showLogin">立即登录</a>
</div>
</form>
<div class="system-info">
<p>智能物流系统 © 2023 | 当前系统版本: v2.1.5</p>
</div>
</div>
</div>
</div>
<script>
// 切换登录/注册表单
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => {
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
tab.classList.add('active');
if (tab.textContent === '登录') {
document.getElementById('loginForm').style.display = 'block';
document.getElementById('registerForm').style.display = 'none';
} else {
document.getElementById('loginForm').style.display = 'none';
document.getElementById('registerForm').style.display = 'block';
}
});
});
// 注册链接切换
document.getElementById('showRegister').addEventListener('click', (e) => {
e.preventDefault();
document.querySelectorAll('.tab')[1].click();
});
document.getElementById('showLogin').addEventListener('click', (e) => {
e.preventDefault();
document.querySelectorAll('.tab')[0].click();
});
// 表单提交处理
document.getElementById('loginForm').addEventListener('submit', (e) => {
e.preventDefault();
alert('登录请求已提交，正在验证...');
// 实际项目中这里会有AJAX请求
});
document.getElementById('registerForm').addEventListener('submit', (e) => {
e.preventDefault();
alert('注册信息已提交，正在创建账号...');
// 实际项目中这里会有AJAX请求
});
// 验证码刷新
document.querySelectorAll('.captcha-img').forEach(img => {
img.addEventListener('click', function() {
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
let newCode = '';
for (let i = 0; i < 4; i++) {
newCode += chars.charAt(Math.floor(Math.random() * chars.length));
}
this.textContent = newCode;
});
});
</script>
</body>
</html>