- 响应式设计：在电脑和手机上都能良好显示。
- 模拟数据：包含了从“已下单”到“派送中”再到“已签收”的完整物流轨迹，方便演示。
- 状态卡片：顶部显示运单号、发货/收货信息、当前状态和预计送达时间。
- 时间轴：清晰地展示物流的每一个环节，包括时间、地点和处理信息。
- 交互效果：鼠标悬停在时间轴节点上时，会有高亮效果，突出显示当前状态。
- 现代UI：使用了柔和的阴影、圆角和颜色区分，界面友好。
HTML 代码
您可以直接将以下代码复制到一个 .html 文件中，然后用浏览器打开即可查看效果。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">德邦物流 - 配送信息查询</title>
<style>
/* --- 全局样式 --- */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #f4f7f9;
color: #333;
line-height: 1.6;
padding: 20px;
}
.container {
max-width: 800px;
margin: 20px auto;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
padding: 30px;
}
h1 {
text-align: center;
color: #0066cc;
margin-bottom: 30px;
font-size: 28px;
}
/* --- 状态卡片样式 --- */
.status-card {
background-color: #f0f7ff;
border-left: 5px solid #0066cc;
padding: 20px;
border-radius: 8px;
margin-bottom: 40px;
}
.status-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
flex-wrap: wrap;
}
.waybill-number {
font-size: 16px;
color: #666;
}
.waybill-number span {
font-weight: bold;
color: #333;
}
.current-status {
font-size: 24px;
font-weight: bold;
color: #0066cc;
}
.status-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.detail-item h3 {
font-size: 14px;
color: #888;
margin-bottom: 5px;
}
.detail-item p {
font-size: 16px;
color: #333;
}
.estimated-time {
margin-top: 15px;
font-size: 16px;
color: #e74c3c;
text-align: right;
}
/* --- 时间轴样式 --- */
.timeline {
position: relative;
padding-left: 30px;
}
.timeline::before {
content: '';
position: absolute;
left: 15px;
top: 0;
height: 100%;
width: 2px;
background-color: #e0e0e0;
}
.timeline-item {
position: relative;
padding-bottom: 30px;
}
.timeline-item:last-child {
padding-bottom: 0;
}
.timeline-node {
position: absolute;
left: -22px;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #e0e0e0;
border: 3px solid #fff;
box-shadow: 0 0 0 2px #e0e0e0;
transition: all 0.3s ease;
}
/* 当前状态节点样式 */
.timeline-item.active .timeline-node {
background-color: #0066cc;
box-shadow: 0 0 0 2px #0066cc;
}
/* 已完成状态节点样式 */
.timeline-item.completed .timeline-node {
background-color: #4CAF50;
box-shadow: 0 0 0 2px #4CAF50;
}
.timeline-content {
background-color: #fff;
padding: 15px;
border-radius: 8px;
border: 1px solid #eee;
transition: all 0.3s ease;
}
.timeline-item.active .timeline-content {
border-color: #0066cc;
box-shadow: 0 2px 8px rgba(0, 102, 204, 0.15);
}
.timeline-item:hover .timeline-content {
transform: translateX(5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.timeline-time {
font-size: 14px;
color: #888;
margin-bottom: 5px;
}
.timeline-location {
font-size: 16px;
font-weight: bold;
color: #333;
margin-bottom: 5px;
}
.timeline-desc {
font-size: 15px;
color: #555;
}
/* --- 响应式设计 --- */
@media (max-width: 600px) {
.container {
padding: 20px;
}
h1 {
font-size: 24px;
}
.status-header {
flex-direction: column;
align-items: flex-start;
}
.estimated-time {
text-align: left;
margin-top: 10px;
}
.status-details {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<h1>德邦物流 - 配送信息</h1>
<!-- 状态卡片 -->
<div class="status-card">
<div class="status-header">
<div class="waybill-number">运单号：<span>9876543210</span></div>
<div class="current-status">派送中</div>
</div>
<div class="status-details">
<div class="detail-item">
<h3>发货人</h3>
<p>张三 (138****5678)</p>
</div>
<div class="detail-item">
<h3>收货人</h3>
<p>李四 (139****8765)</p>
</div>
<div class="detail-item">
<h3>发货地</h3>
<p>上海市浦东新区张江高科技园区</p>
</div>
<div class="detail-item">
<h3>目的地</h3>
<p>北京市海淀区中关村软件园</p>
</div>
</div>
<div class="estimated-time">
预计送达时间：18:00 前
</div>
</div>
<!-- 时间轴 -->
<div class="timeline">
<div class="timeline-item completed">
<div class="timeline-node"></div>
<div class="timeline-content">
<div class="timeline-time">2025-10-27 14:30:15</div>
<div class="timeline-location">【北京】目的地网点</div>
<div class="timeline-desc">快件已由【北京中关村营业部】派送员【王师傅】揽收</div>
</div>
</div>
<div class="timeline-item completed">
<div class="timeline-node"></div>
<div class="timeline-content">
<div class="timeline-time">2025-10-27 10:15:22</div>
<div class="timeline-location">【北京】转运中心</div>
<div class="timeline-desc">快件已到达【北京转运中心】，正在分拣</div>
</div>
</div>
<div class="timeline-item completed">
<div class="timeline-node"></div>
<div class="timeline-content">
<div class="timeline-time">2025-10-26 22:45:33</div>
<div class="timeline-location">【上海】转运中心</div>
<div class="timeline-desc">快件已从【上海转运中心】发出，发往【北京转运中心】</div>
</div>
</div>
<div class="timeline-item completed">
<div class="timeline-node"></div>
<div class="timeline-content">
<div class="timeline-time">2025-10-26 09:20:11</div>
<div class="timeline-location">【上海】始发网点</div>
<div class="timeline-desc">快件已到达【上海张江营业部】，等待发往转运中心</div>
</div>
</div>
<div class="timeline-item completed">
<div class="timeline-node"></div>
<div class="timeline-content">
<div class="timeline-time">2025-10-25 16:00:00</div>
<div class="timeline-location">【上海】张江高科技园区</div>
<div class="timeline-desc">德邦快递已收取您的快件</div>
</div>
</div>
<div class="timeline-item active">
<div class="timeline-node"></div>
<div class="timeline-content">
<div class="timeline-time">预计今天 18:00 前</div>
<div class="timeline-location">【北京】中关村软件园</div>
<div class="timeline-desc">派送员王师傅正在为您派件，请保持电话畅通</div>
</div>
</div>
</div>
</div>
</body>
</html>
（图片来源网络，侵删）
