línea de tiempo propio para lograr un pequeño programa relacionado Taro

Una línea de tiempo.

Recientemente, en la realización del proyecto, se reunió pantalla logística de línea de tiempo, grabar dejó rugido

taro-ui sí nos da una línea de tiempo taroUI documentos oficiales - Línea de tiempo ,

Pero Su uso personal taroui ellos siempre algo flexible, y por lo tanto sus propias manos yardas,

Los datos se presenta dinámicamente, a fin de facilitar la multiplexación, ver más claramente. Publicado solamente un fragmento de código,

Flex + 100% diseño; Tomé una pequeña css pintado punto.

Me gustaría añadir icono es la misma razón.

     <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>

Tal como se usa en el presente documento, es 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;
          }
        }
      }
    }