<!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">
<script>
// 获取当前时间并提前一个月
function getAdjustedTime() {
const now = new Date();
now.setMonth(now.getMonth() - 1);
return now.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
});
}
// 页面加载完成后设置时间
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('current-time').textContent = getAdjustedTime();
document.getElementById('login-time').textContent = getAdjustedTime();
// 设置公告时间
const noticeTimes = document.querySelectorAll('.notice-time');
noticeTimes.forEach(el => {
el.textContent = getAdjustedTime();
});
});
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
display: flex;
background-color: #f5f7fa;
color: #333;
}
.sidebar {
background-color: #2c3e50;
color: white;
width: 250px;
height: 100vh;
padding: 20px;
position: fixed;
left: 0;
top: 0;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
z-index: 100;
}
.logo {
margin-bottom: 30px;
font-size: 20px;
font-weight: bold;
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #34495e;
}
.logo i {
margin-right: 10px;
color: #3498db;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar li {
padding: 12px 15px;
margin-bottom: 5px;
cursor: pointer;
border-radius: 4px;
transition: all 0.3s ease;
display: flex;
align-items: center;
}
.sidebar li:hover {
background-color: #34495e;
}
.sidebar li i {
margin-right: 10px;
width: 20px;
text-align: center;
}
.sidebar li.active {
background-color: #3498db;
}
.main-content {
flex: 1;
margin-left: 250px;
padding: 30px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 1px solid #e0e6ed;
}
.header h1 {
color: #2c3e50;
font-size: 28px;
}
.time-info {
background-color: #e3f2fd;
padding: 8px 15px;
border-radius: 20px;
font-size: 14px;
color: #1976d2;
}
.dashboard {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
margin-bottom: 30px;
}
.card {
background: white;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
padding: 25px;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.card-title {
font-size: 18px;
color: #2c3e50;
font-weight: 600;
}
.user-profile {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #3498db;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
font-size: 36px;
color: white;
}
.user-info h2 {
font-size: 22px;
margin-bottom: 5px;
color: #2c3e50;
}
.user-info p {
color: #7f8c8d;
margin-bottom: 8px;
}
.user-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-top: 20px;
}
.stat-item {
text-align: center;
padding: 15px;
border-radius: 8px;
background-color: #f8f9fa;
}
.stat-value {
font-size: 24px;
font-weight: bold;
color: #3498db;
margin-bottom: 5px;
}
.stat-label {
font-size: 14px;
color: #7f8c8d;
}
.quick-links {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.link-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 15px;
border-radius: 8px;
background-color: #f8f9fa;
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
}
.link-item:hover {
background-color: #e3f2fd;
transform: scale(1.03);
}
.link-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #3498db;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
font-size: 20px;
color: white;
}
.link-title {
font-weight: 600;
color: #2c3e50;
margin-bottom: 5px;
}
.link-desc {
font-size: 13px;
color: #7f8c8d;
}
.notices {
grid-column: span 2;
}
.notice-list {
list-style: none;
}
.notice-item {
padding: 15px 0;
border-bottom: 1px solid #eee;
display: flex;
}
.notice-item:last-child {
border-bottom: none;
}
.notice-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #f1f8e9;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
color: #7cb342;
flex-shrink: 0;
}
.notice-content {
flex: 1;
}
.notice-title {
font-weight: 600;
margin-bottom: 5px;
color: #2c3e50;
}
.notice-meta {
display: flex;
font-size: 13px;
color: #7f8c8d;
}
.notice-time {
margin-right: 15px;
}
.notice-type {
color: #3498db;
}
.notice-text {
margin-top: 8px;
font-size: 14px;
line-height: 1.5;
}
.footer {
text-align: center;
padding: 20px;
color: #7f8c8d;
font-size: 14px;
border-top: 1px solid #e0e6ed;
margin-top: 30px;
}
</style>
</head>
<body>
<!-- 侧边栏 -->
<div class='sidebar'>
<div class='logo'>
<i class='fas fa-truck'></i>智能物流系统
</div>
<ul>
<li class="active"><i class='fas fa-home'></i>首页</li>
<li><i class='fas fa-map-marked-alt'></i>路径规划</li>
<li><i class='fas fa-chart-line'></i>数据分析</li>
<li><i class='fas fa-truck-moving'></i>车辆监控</li>
<li><i class='fas fa-exclamation-triangle'></i>异常处理</li>
<li><i class='fas fa-cog'></i>系统设置</li>
<li><i class='fas fa-user'></i>个人中心</li>
<li><i class='fas fa-sign-out-alt'></i>退出登录</li>
</ul>
</div>
<!-- 主内容区 -->
<div class="main-content">
<div class="header">
<h1>用户主界面</h1>
<div class="time-info">
<i class="fas fa-clock"></i> 当前时间: <span id="current-time"></span>
</div>
</div>
<div class="dashboard">
<!-- 用户信息卡片 -->
<div class="card user-card">
<div class="card-header">
<div class="card-title">个人信息</div>
<div class="time-info">
<i class="fas fa-user-clock"></i> 最后登录: <span id="login-time"></span>
</div>
</div>
<div class="user-profile">
<div class="avatar">
<i class="fas fa-user"></i>
</div>
<div class="user-info">
<h2>张物流</h2>
<p><i class="fas fa-briefcase"></i> 物流调度主管</p>
<p><i class="fas fa-building"></i> 华东物流中心</p>
<p><i class="fas fa-phone"></i> 13800138000</p>
</div>
</div>
<div class="user-stats">
<div class="stat-item">
<div class="stat-value">28</div>
<div class="stat-label">负责车辆</div>
</div>
<div class="stat-item">
<div class="stat-value">156</div>
<div class="stat-label">本月订单</div>
</div>
<div class="stat-item">
<div class="stat-value">97%</div>
<div class="stat-label">准时率</div>
</div>
</div>
</div>
<!-- 快捷入口卡片 -->
<div class="card quick-access">
<div class="card-header">
<div class="card-title">常用功能</div>
<i class="fas fa-bolt" style="color: #f1c40f;"></i>
</div>
<div class="quick-links">
<div class="link-item">
<div class="link-icon">
<i class="fas fa-route"></i>
</div>
<div class="link-title">路径规划</div>
<div class="link-desc">智能规划最优配送路线</div>
</div>
<div class="link-item">
<div class="link-icon">
<i class="fas fa-truck-loading"></i>
</div>
<div class="link-title">车辆调度</div>
<div class="link-desc">实时分配运输任务</div>
</div>
<div class="link-item">
<div class="link-icon">
<i class="fas fa-map-marked-alt"></i>
</div>
<div class="link-title">实时监控</div>
<div class="link-desc">查看车辆位置与状态</div>
</div>
<div class="link-item">
<div class="link-icon">
<i class="fas fa-file-invoice"></i>
</div>
<div class="link-title">订单管理</div>
<div class="link-desc">处理客户配送需求</div>
</div>
</div>
</div>
<!-- 系统公告卡片 -->
<div class="card notices">
<div class="card-header">
<div class="card-title">系统公告</div>
<i class="fas fa-bullhorn" style="color: #e74c3c;"></i>
</div>
<ul class="notice-list">
<li class="notice-item">
<div class="notice-icon">
<i class="fas fa-info-circle"></i>
</div>
<div class="notice-content">
<div class="notice-title">系统维护通知</div>
<div class="notice-meta">
<span class="notice-time"></span>
<span class="notice-type">系统公告</span>
</div>
<div class="notice-text">
本周末（6月10日 00:00-06:00）将进行系统维护升级，升级期间系统将暂停服务，请提前做好工作安排。
</div>
</div>
</li>
<li class="notice-item">
<div class="notice-icon">
<i class="fas fa-star"></i>
</div>
<div class="notice-content">
<div class="notice-title">新功能上线：实时路况分析</div>
<div class="notice-meta">
<span class="notice-time"></span>
<span class="notice-type">功能更新</span>
</div>
<div class="notice-text">
路径规划模块新增实时路况分析功能，可结合交通拥堵数据动态调整配送路线，提升配送效率15%以上。
</div>
</div>
</li>
<li class="notice-item">
<div class="notice-icon">
<i class="fas fa-trophy"></i>
</div>
<div class="notice-content">
<div class="notice-title">季度优秀员工表彰</div>
<div class="notice-meta">
<span class="notice-time"></span>
<span class="notice-type">公司新闻</span>
</div>
<div class="notice-text">
恭喜张物流、李配送、王调度三位同事获得本季度优秀员工称号，感谢你们在提升配送效率方面的突出贡献！
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="footer">
<p>智能物流车多源数据分析路径优化系统 © 2023 版权所有</p>
<p>系统版本 v2.1.5 | 服务状态 <span style="color:#2ecc71;">运行正常</span></p>
</div>
</div>
</body>
</html>