<view>
  <view class="con1 flex-row">
    <view>
      <image src="/img/order_icon5.png" class="order_icon"></image>
    </view>
    <view class="w_text">
      <view class="item">订单编号：{{expresslist.order_no}}</view>
      <view class="item">物流公司：{{expresslist.de_company}}</view>
      <view class="item">物流单号：{{expresslist.wuliu_no}}</view>
    </view>
  </view>
  <view class="con4" wx:if="{{expresslist.list.length>0}}">
    <view class="con4_top1">物流信息</view>
    <view class="con4_top3 flex" wx:for="{{expresslist.list}}" wx:key="list">
      <view class="con4_text" wx:key="key" wx:for-item='item'>
        <text class="con4_time {{index==0?'':'no'}}">{{item.time}}</text>
        <view class="line_ellipsis text ">{{item.text}}</view>
        <view class="con4_icon">
          <image wx:if="{{item.display==0}}" src="{{item.status==1?'/img/w_icon4.png':'/img/wuliu_icon2.png'}}" class="chek_img"></image>
          <image wx:if="{{item.display==1}}" src="{{item.status==1?'/img/wuliu_icon3.png':'/img/w_icon3.png'}}" class="chek_img"></image>
          <image wx:if="{{item.display==2}}" src="{{item.status==1?'/img/wuliu_icon4.png':'/img/w_icon2.png'}}" class="chek_img"></image>
          <image wx:if="{{item.display==3}}" src="{{item.status==1?'/img/wuliu_icon5.png':'/img/w_icon1.png'}}" class="chek_img"></image>
          <view class="line" wx:if="{{index!=0}}"></view> <!-- 当第二个开始有一条物流的横线 -->
        </view>
      </view>
    </view>
  </view>
</view>
                                    
                                

                                    
                                        
page {
  background-color: #f2f2f2;
}

.con1 {
  width: 700rpx;
  background: #d81e06;
  box-shadow: 0px 5rpx 18rpx 3rpx rgba(176, 176, 176, 0.06);
  border-radius: 20rpx;
  margin: 40rpx 25rpx;
  padding: 26rpx 25rpx;
  box-sizing: border-box;
}

.order_icon {
  width: 150rpx;
  height: 120rpx;
}

.w_text {
  margin-left: 30rpx;
  color: #fff;
  font-size: 25rpx;
}

.item {
  margin-bottom: 20rpx;
}

.item:last-child {
  margin-bottom: 0;
}

.con4 {
  width: 700rpx;
  background: #FFFFFF;
  box-shadow: 0px 5rpx 18rpx 3rpx rgba(176, 176, 176, 0.06);
  border-radius: 20rpx;
  margin: 40rpx 25rpx;
  padding: 26rpx 25rpx 56rpx;
  box-sizing: border-box;
}

.con4_top1 {
  text-align: center;
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
  margin-bottom: 35rpx;
}

.con4_top2 {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 42rpx;
}

.con4_img {
  width: 25rpx;
  height: 28rpx;
}

.chek_img {
  width: 52rpx;
  height: 52rpx;
}

.con4_top3 {
  margin-bottom: 53rpx;
  position: relative;
}

.con4_top3:last-child {
  margin-bottom: 0
}

.con4_icon {
  position: absolute;
  left: 0rpx;
  top: 0rpx;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.con4_text {
  font-size: 22rpx;
  font-weight: 400;
  color: #666666;
  padding-left: 51rpx;
  margin-left: 23rpx
}

.con4_time {
  font-size: 28rpx;
  font-weight: 500;
  color: #682074;
}

.con4_icon1 {
  position: absolute;
  left: 0rpx;
  top: 0rpx;
}

.line {
  width: 2rpx;
  height:70rpx;
  background: #999999;
  position: absolute;
  top: -83rpx;
  left: 25rpx;
}

.text {
  font-size: 22rpx;
  font-weight: 400;
  color: #666666;
  min-height:60rpx;
}

.no {
  font-size: 28rpx;
  font-weight: 500;
  color: #666666;
}

/*悬浮按钮*/
.suspension {
  position: fixed;
  bottom: 200rpx;
  right: 25rpx;
  width: 74rpx;
  height: 180rpx;
  background: #FFFFFF;
  box-shadow: 0px 0px 33rpx 2rpx #E1E1E1;
  border-radius: 37rpx;
}

.suspension::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 20rpx;
  margin-top: -1rpx;
  width: 34rpx;
  height: 2rpx;
  background: #DFDFDF;
}

.suspen_title {
  padding: 25rpx 0;
  height: 40rpx;
}

.suspen_title image {
  display: block;
  width: 40rpx;
  height: 40rpx;
  margin: 0 auto;
}

.aa {
  width: 400rpx;
  height: 90rpx;
  border: 1rpx solid #ccc;
}

.bb {
  border: 1rpx solid blue;
}