微信小程序之物流进度样式

微信小程序：物流进度信息

1,wxml

// An highlighted block
<view class="order-info">
    <view class="order-info-title">物流信息</view>
    <view class="order-box" wx:if="{{list.length > 0}}">
      <view class="order-item" wx:for="{{list}}" wx:key="index">
        <!--左-->
        <view class="view-item-left">
          <view class="line-box">
            <!-- 第一个上线无色 -->
            <view class="top-line {{index == 0 ? '' : 'bg-gray'}}"></view>
            <!-- 最后一个下线无色 -->
            <view class="bottom-line {{index + 1 == list.length ? '' : 'bg-gray'}}"></view>
          </view>
          <image class="map-icon" src="../../img/map_icon.png" wx:if="{{index == 0}}"></image>
          <view class="center-circle" wx:else="{{index > 0}}"></view>
        </view>
        <!--右-->
        <!-- 最后一个右边部分无下边框 -->
        <view class="view-item-right  {{index + 1 == list.length ? '' : 'border-bottom'}}">
          <view class="title-text">{{item.content}}</view>
          <view>{{item.time}}</view>
        </view>
      </view>
    </view>

    <view class="logistics-no-info" wx:else>暂无物流信息</view>
  </view>

2,css

Page{
  background: #eee;
  font-size: 30rpx;
}
.order-info {
  margin: 20rpx;
  padding: 0rpx 32rpx;
  box-sizing: border-box;
  background-color: #fff;
}

.order-info-title {
  padding: 32rpx 0;
  font-weight: 900;
  font-size: 34rpx;
  box-sizing: border-box;
  border-bottom: 1px solid #f2f2f2;
}
.order-item {
 display: flex;
}
.view-item-left {
  position: relative;
  width: 60rpx;
}
.line-box {
 /* 高撑满只能用百分比*/
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 29rpx;
}
.bg-gray {
  background-color: #ccc;
}
.top-line {
  width: 1rpx;
  height: 50rpx;
}
/* 下线撑满盒子剩余空间 */
.bottom-line {
  flex: 1;
  width: 1rpx;
}
.map-icon {
  position: absolute;
  top: 30rpx;
  left: 9rpx;
  width: 40rpx;
  height: 40rpx;
}
.center-circle {
  position: absolute;
  top: 44rpx;
  left: 20rpx;
  width: 24rpx;
  height: 24rpx;
  border-radius: 30rpx;
  background-color: #ccc;
}
.view-item-right {
  flex: 1;
  padding: 32rpx 0;
  box-sizing: border-box;
}
.border-bottom {
  border-bottom: 1rpx solid #eee;
}
.title-text{
  color: black;
  font-weight: 700;
  font-size: 34rpx;
}
.color-black{
  color: #393939;
}
.logistics-item-text {
  margin-bottom: 10rpx;
 }
.bolder-text{
  font-weight: 700;
}



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

3,js

data: {
    
    list: [
      {
        content: '标题一',
        time: '2018-04-16 17:09:34'
      },
      {
        content: '标题二',
        time: '内容内容发条语音台风的想法国药股份更过分过分一套房对方付车费出风口出风口处非常非常托管费的倒反天罡股份可多次反复考察通过方可反馈'
      },
      {
        content: '标题三',
        time: '2018-04-16 17:09:34'
      },
      {
        content: '标题四',
        time: '2018-04-16 17:09:34'
      },
      {
        content: '标题五',
        time: '2018-04-16 17:09:34'
      },
      {
        content: '标题六',
        time: '2018-04-16 17:09:34'
      }
    ]
  },