物流快递跟踪样式

先上最后的效果图看看：

wxml

<view class="logistics-box" wx:if="{{logisticsData.length > 0}}">
  <view class="logistics-item" wx:for="{{logisticsData}}" wx:key="index">
    <view class="logistics-item-left">
      <view class="line-box">
        <view class="top-line {{index == 0 ? '' : 'bg-gray'}}"></view>
        <view class="bottom-line {{index + 1 == logisticsData.length ? '' : 'bg-gray'}}"></view>
      </view>
      <view class="center-circle"></view>
    </view>
    <view
      class="logistics-item-right {{index == 0 ? '' : 'color-gray'}}">
      <view class="logistics-item-text">{{item.content}}</view>
      <view class="logistics-item-time">{{item.time}}</view>
    </view>
  </view>
</view>
<view class="logistics-no-info" wx:else>暂无物流信息</view>

wxss

.logistics-box{
  padding: 30rpx 0;
}

.logistics-item {
  width: 97%;
  display: flex;
  color: #1E1E1E;
  font-size: 28rpx;
}

.logistics-item-left {
  position: relative;
  width: 60rpx;
}

.logistics-item-time{
  font-size: 24rpx;
  color: #8F8F8F;
}

.line-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 32rpx;
}

.bg-gray {
  background-color: #ccc;
}

.top-line {
  width: 1px;
  height: 28rpx;
}

.bottom-line {
  flex: 1;
  width: 1px;
}

.map-icon {
  position: absolute;
  top: 30rpx;
  left: 9rpx;
  width: 40rpx;
  height: 40rpx;
}

.center-circle {
  position: absolute;
  top: 10rpx;
  left: 24rpx;
  width: 18rpx;
  height: 18rpx;
  border-radius: 50%;
  background-color: #D8D8D8;
}

.logistics-item-right {
  flex: 1;
  padding-bottom: 32rpx;
  box-sizing: border-box;
}

.color-gray {
  color: #8F8F8F;
}

.logistics-item-text {
  margin-bottom: 4rpx;
  line-height: 1.5;
}

.logistics-no-info {
  padding: 40rpx 0;
  box-sizing: border-box;
  text-align: center;
  color:  #8F8F8F;
}

js

const app = getApp()
Page({
  data: {
    logisticsData: [
      {
        content: '您的订单正在派送中',
        time: '2020-01-11 00:00:00'
      },
      {
        content: '您的订单已达到广东省深圳市福田区新洲广东省深圳市福田区新洲广东省深圳市福田区',
        time: '2020-01-11 00:00:00'
      },
      {
        content: '您的订单正在路上飞奔',
        time: '2020-01-11 00:00:00'
      },
      {
        content: '您的订单已出库',
        time: '2020-01-11 00:00:00'
      },
      {
        content: '您的订单正在出库中',
        time: '2020-01-11 00:00:00'
      },
      {
        content: '您的订单已提交',
        time: '2020-01-11 00:00:00'
      }
    ]
  }
})

• 点赞
• 收藏
• 分享
• • 文章举报

学web的碎碎 发布了44 篇原创文章 · 获赞 34 · 访问量 2万+ 私信 关注

标签：logistics,00,item,样式,content,快递,time,物流,color
来源： https://blog.csdn.net/weixin_42695298/article/details/103934520