Own timeline to achieve a small program related -Taro

A timeline.

Recently in doing the project, met logistics timeline display, record it left roar

taro-ui itself gives us a timeline taroUI official documents - Timeline ,

But Su personal use them taroui always somewhat flexible, and thus their own hands yards,

Data is dynamically rendered, in order to facilitate multiplexing, see more clearly. Posted only a snippet of code,

flex + 100% layout; I took a small dot css painted.

Would like to add icon icon is the same reason.

     <View className='ys-list' key='logistic'>
          <View className='des-time'>
            <Text className=''>{day}</Text>
            <Text className=''>{dayTime}</Text>
          </View>
          <View className='des-mes'>
            <View className='list-dot'>
              <View className='dot' />
            </View>
            <Text className=''>{list.content}</Text>
          </View>
     </View>

As used herein, it is scss:

    .ys-list {
      width: 100%;
      display: flex;
      flex-direction: row;
      .des-time {
        width: 10%;
        font-size: 22px;
        display: flex;
        flex-direction: column;
        text-align: right;
        padding-right: 40px;
        color: #888888;
      }
      .des-mes {
        border-left: 2px solid #e6e6e6;
        padding-left: 40px;
        width: 80%;
        display: flex;
        flex-direction: column;
        font-size: 26px;
        position: relative;
        padding-bottom: 80px;
        .list-dot {
          width: 48px;
          height: 48px;
          line-height: 48px;
          position: absolute;
          top: -9px;
          left: -24px;
          display: flex;
          align-items: center;
          justify-content: center;
          .dot {
            width: 15px;
            height: 15px;
            border-radius: 100%;
            background-color: #dddddd;
          }
        }
      }
    }