参考：https://blog.csdn.net/qq_44114279/article/details/107376655
如图：
转换手机的前端代码
// 数据
const express = [{
classId: 1,
tel: '',
title: '已下单',
detail: '订单提交成功',
time: '2020－07-11 16:20:00',
// icon: images.order,
// iconActive: images.orderActive,
step: []
}, {
classId: 2,
tel: '',
title: '已支付',
detail: '订单支付成功，等待海关清关',
time: '2020－07-11 16:22:00',
// icon: images.pay,
// iconActive: images.payActive,
step: []
}, {
classId: 3,
tel: '',
title: '仓库作业中',
detail: '订单打包完成',
time: '2020－07-11 16:20:00',
// icon: images.pack,
// iconActive: images.packActive,
step: [{
stepID: 301,
steptitle: '订单分拣完成',
steptime: '2020－07-11 19:55:00',
}, {
stepID: 302,
steptitle: '订单打单完成',
steptime: '2020－07-11 19:55:00',
}, {
stepID: 303,
steptitle: '订单清关完成，等待仓库发货',
steptime: '2020－07-11 19:55:00',
}]
}, {
classId: 4,
tel: '',
title: '已出库',
detail: '包裹已出库来自：合肥保税仓',
time: '2020－07-11 16:20:00',
// icon: images.entrepot,
// iconActive: images.entrepotActive,
step: []
}, {
classId: 5,
tel: '',
title: '运输中',
detail: '【合肥市】到达 合肥政务区服务网点',
time: '2020－07-11 16:20:00',
// icon: images.transport,
// iconActive: images.transportActive,
step: [{
stepID: 501,
steptitle: '【合肥市】合肥仓已发出',
steptime: '2020－07-11 19:55:00',
}]
}, {
classId: 6,
tel: '18817580976',
title: '派送中',
detail: '【合肥市】政务区代派派件员陈世峰电话:18817580976当前正在为您派件',
time: '2020－07-11 16:20:00',
// icon: images.delivery,
// iconActive: images.deliveryActive,
step: []
}, {
classId: 7,
tel: '',
title: '已签收',
detail: '【合肥市】已签收，快递已被合肥政务区置地广场C座代签收，感谢使用中通快递，期待再次为您服务！',
time: '2020－07-11 16:20:00',
// icon: images.get,
// iconActive: images.getActive,
step: []
}, {
classId: 8,
tel: '',
title: '交易完成',
detail: '订单交易成功',
time: '2020－07-14 13:16:04',
// icon: images.ok,
// iconActive: images.okActive,
step: [{
stepID: 801,
steptitle: '系统自动确认收货',
steptime: '2020－07-11 19:55:00',
}]
}]
// 代码
{/* 快递详细信息 */}
<div className="express-detail-main">
<div className="express-detail-main-title">
<div className="express-detail-main-title-name">{'this.courier.name'}</div>
<div className="express-detail-main-title-num">{'this.courier.num'}</div>
{/* <img className="express-detail-main-title-img" src={'images.copy'} /> */}
</div>
<div className="express-detail-main-content">
{
express.map(item => {
let detail
item.tel == '' ? detail = (
<div className="express-detail-main-content-item-top-message-detail">
{item.detail}
</div>
) : detail = (
<div className="express-detail-main-content-item-top-message-detail">
{item.detail.split(item.tel)[0]}
<div
className="express-detail-main-content-item-top-message-detail-active"
// onClick={this.handleTel.bind(this, item.tel)}
>
{item.tel}
</div>
{item.detail.split(item.tel)[1]}
</div>)
return (
<div className="express-detail-main-content-item"
key={item.classId}
>
<div className="express-detail-main-content-item-top">
<div className="express-detail-main-content-item-top-imgbox">
<img className="express-detail-main-content-item-top-imgbox-img" src={item.icon} />
</div>
<div className="express-detail-main-content-item-top-message">
<div className="express-detail-main-content-item-top-message-title">
{item.title}
</div>
{detail}
<div className="express-detail-main-content-item-top-message-time">
{item.time}
</div>
</div>
</div>
{
item.step.map(step => {
return (
<div className="express-detail-main-content-item-step" key={step.stepID}>
<div className="express-detail-main-content-item-step-imgbox">
<div className="express-detail-main-content-item-step-imgbox-img"></div>
</div>
<div className="express-detail-main-content-item-step-message">
<div className="express-detail-main-content-item-step-message-title">
{step.steptitle}
</div>
<div className="express-detail-main-content-item-step-message-time">
{step.steptime}
</div>
</div>
</div>
)
})
}
</div>
)
})
}
</div>
</div> .express-detail-main-content-item:first-child{
.express-detail-main-content-item-top-imgbox{
height:0
}
}
.express-detail-main{
background:#ffffff;
box-shadow:0 4px 12px 0 rgba(204,204,204,0.30);
border-radius:16px;
width:702px;
margin:16px 24px ;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
// overflow:hidden; // 如果overflow设置为hidden当内容过长时就不能上下滑动
&-title{
padding:0 24px;
background:rgba(240,240,240,0.60);
border-radius:8px 8px 0 0;
width:654px;
height:88px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
&-name{
font-family:PingFangSC-Regular;
font-size:14px;
color:#333333;
letter-spacing:0;
text-align:center;
margin-right:24px;
}
&-num{
font-family:PingFangSC-Regular;
font-size:14px;
color:#333333;
letter-spacing:0;
text-align:center;
margin-right:16px;
}
&-img{
width:24px;
height:24px;
}
}
&-content{
padding:68.5px 24px 0 24px;
width:654px;
background:#ffffff;
display: flex;
flex-direction: column-reverse;
justify-content: flex-start;
align-items: flex-start;
&-item{
width:654px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
&-top{
display: flex;
width:100%;
flex-direction: row;
justify-content: space-between;
&-imgbox{
width:5px;
background:#dddddd;
position: relative;
margin:0 22.5px;
&-img{
width:50px;
height:50px;
position: absolute;
top:-22.5px;
left:-22.5px;
z-index:10;
}
}
&-message{
margin-top:-22.5px;
width:562px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
&-title{
font-family:PingFangSC-Medium;
font-size:16px;
color:#333333;
letter-spacing:0;
text-align:left;
}
&-detail{
font-family:PingFangSC-Regular;
font-size:14px;
color:#333333;
letter-spacing:0;
text-align:left;
}
&-detail-active{
font-family:PingFangSC-Regular;
font-size:14px;
color:red;
letter-spacing:0;
text-align:left;
text-decoration:underline;
padding:0 10px;
}
&-time{
font-family:PingFangSC-Regular;
font-size:12px;
color:#999999;
letter-spacing:0;
text-align:left;
margin-bottom:60px;
}
}
}
&-step{
width:100%;
display: flex;
flex-direction: row;
justify-content: space-between;
&-imgbox{
width:5px;
background:#dddddd;
position: relative;
margin:0 22.5px;
&-img{
background:#cccccc;
width:16px;
height:16px;
border-radius:100%;
position: absolute;
top:-5.5px;
left:-5.5px;
}
}
&-message{
margin-top:-5.5px;
width:562px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
&-title{
font-family:PingFangSC-Regular;
font-size:14px;
color:#999999;
letter-spacing:0;
text-align:left;
}
&-time{
font-family:PingFangSC-Regular;
font-size:12px;
color:#999999;
letter-spacing:0;
text-align:left;
margin-bottom:60px;
}
}
}
}
}
}