<template>
  <u-time-line>
    <u-time-line-item nodeTop="2">
      <!-- 此处自定义了左边内容，用一个图标替代 -->
      <template v-slot:node>
        <view class="u-node state">
          <!-- 此处为uView的icon组件 -->
          <!-- <u-icon :size="24" color="#fff" name="play-right-fill"></u-icon> -->
          <u-circle-progress :percent="100" active-color="#2979ff" borderWidth="4" width="66">
            <view class="u-progress-content">
              <view class="u-progress-dot"></view>
              <text class="u-progress-info">
                <u-icon name="checkmark" size="30"></u-icon>
              </text>
            </view>
          </u-circle-progress>
        </view>
      </template>
      <template v-slot:content>
        <view>
          <view class="u-order-title">待取件</view>
          <view class="u-order-desc">[自提柜]您的快件已放在楼下侧门，直走前方53.6米。</view>
          <view class="u-order-time">2019-05-08 12:12</view>
        </view>
      </template>
    </u-time-line-item>
    <u-time-line-item>
      <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
      <template v-slot:content>
        <view>
          <view class="u-order-desc">【深圳市】日照香炉生紫烟，遥看瀑布挂前川，飞流直下三千尺，疑是银河落九天。</view>
          <view class="u-order-time">2019-12-06 22:30</view>
        </view>
      </template>
    </u-time-line-item>
  </u-time-line>
</template>

<script>
export default {
  name: 'TimeLine',
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.u-node {
  width: 44rpx;
  height: 44rpx;
  border-radius: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #d0d0d0;
}

.state {
  border: 2px solid #999;
  background: #fff;
}

.u-order-title {
  color: #333333;
  font-weight: bold;
  font-size: 32rpx;
}

.u-order-desc {
  color: rgb(150, 150, 150);
  font-size: 28rpx;
  margin-bottom: 6rpx;
}

.u-order-time {
  color: rgb(200, 200, 200);
  font-size: 26rpx;
}
</style>
