z 物流信息显示布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 50%;
background-color: #eef1f5;
margin: 20px auto;
padding: 20px;
text-align: center;
}
.mainCon {
margin: 10px 0;
}
.mainCon .error {
font-size: 20px;
font-weight: bold;
color: #f00;
}
.mainCon .history {
margin: 20px 0 50px;
position: relative;
}
.mainCon .history:after {
position: absolute;
content: '';
width: 5px;
height: 100%;
top: 0;
left: 50%;
transform: translate(-50%, 0);
background: #f5f5f5;
}
.historyItem {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
position: relative;
}
.historyItem:after {
position: absolute;
content: '';
width: 25px;
height: 25px;
border-radius: 25px;
background: #fff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 2;
}
.historyItem:before {
position: absolute;
content: '';
width: 10px;
height: 10px;
border-radius: 10px;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 5;
}
.historyItem div {
width: 50%;
font-size: 14px;
padding: 0 25px;
}
.historyItem div:first-child {
text-align: right;
}
.historyItem div:last-child {
text-align: left;
}
.history .historyItem:nth-child(1):before {
background: rgb(225, 50, 80);
}
.history .historyItem:nth-child(2):before {
background: rgb(140, 162, 53);
}
.history .historyItem:nth-child(3):before {
background: rgb(41, 226, 134);
}
.history .historyItem:nth-child(4):before {
background: rgb(193, 132, 57);
}
.history .historyItem:nth-child(5):before {
background: rgb(226, 5, 90);
}
.history .historyItem:nth-child(6):before {
background: rgb(161, 13, 83);
}
.history .historyItem:nth-child(7):before {
background: rgb(21, 123, 241);
}
.history .historyItem:nth-child(8):before {
background: rgb(202, 187, 169);
}
.history .historyItem:nth-child(9):before {
background: rgb(30, 67, 239);
}
.history .historyItem:nth-child(10):before {
background: rgb(71, 47, 71);
}
.history .historyItem:nth-child(11):before {
background: rgb(18, 133, 209);
}
.history .historyItem:nth-child(12):before {
background: rgb(51, 18, 139);
}
@media screen and (max-width: 768px) {
.main {
width: 90%;
}
}
</style>
</head>
<body>
<div class="main">
<h4>货单号：SJL0800010614</h4>
<div class="mainCon">
<div class="history">
<div class="historyItem">
<div class="time">2022-06-23 14:12:00</div>
<div class="s_info">貨件已由蘆洲營業所送達。貨物件數共1件。</div>
</div>
<div class="historyItem">
<div class="time">2022-06-23 07:55:00</div>
<div class="s_info">貨件由蘆洲營業所人員配送中。</div>
</div>
<div class="historyItem">
<div class="time">2022-06-23 03:52:00</div>
<div class="s_info">貨件已抵達蘆洲營業所，分貨中。</div>
</div>
<div class="historyItem">
<div class="time">2022-06-22 19:22:00</div>
<div class="s_info">貨件已抵達五股營業所，貨件整理中。貨物件數共1件。</div>
</div>
<div class="historyItem">
<div class="time">2022-06-22 19:22:00</div>
<div class="s_info">貨件已抵達五股營業所，貨件整理中。貨物件數共1件。</div>
</div>
<div class="historyItem">
<div class="time">2022-06-22 10:10:07</div>
<div class="s_info">清关已完成</div>
</div>
<div class="historyItem">
<div class="time">2022-06-22 10:08:23</div>
<div class="s_info">开始清关</div>
</div>
<div class="historyItem">
<div class="time">2022-06-21 08:42:00</div>
<div class="s_info">航班已抵达目的地，准备清关</div>
</div>
<div class="historyItem">
<div class="time">2022-06-21 00:29:00</div>
<div class="s_info">您的包裹已预配航班</div>
</div>
<div class="historyItem">
<div class="time">2022-06-16 22:07:19</div>
<div class="s_info">包裹在集运仓装车完成，开始发往目的地</div>
</div>
<div class="historyItem">
<div class="time">2022-06-16 22:06:11</div>
<div class="s_info">包裹已出库</div>
</div>
<div class="historyItem">
<div class="time">2022-06-16 22:05:40</div>
<div class="s_info">您的包裹已到达仓库</div>
</div>
</div>
</div>
</div>
</body>
</html>
免责申明：
1. 本站所有教程、文章或资源分享目的仅供大家学习和交流！
2. 如有无法查看或链接失效，麻烦请报告联系管理员处理！
3. 本站无法保证资源或其时效性，恕不接受任何提问。
4. 在本站下载的源码严禁杜绝任何形式的正式商业用途，请去程序官方购买。 所有资料均来自于网络，版权归原创者所有！本站不提供任何保证，并不承担任何法律责任，如果对您的版权或者利益造成损害，请提供相应的资质证明，我们将于3个工作日内予以删除。
