angular 时间条

188 阅读1分钟

html:
            <ul *ngFor="let timeline of timeLineData">
                        <li class="li-show">{{timeline.tips}}</li>
                        <li class="li-none">{{timeline.time}}</li>
             </ul>
css:
    > ul {
      position : relative;
      list-style-image : url('../../../assets/img/point.png');  //时间条的点
      > li {
        margin-bottom : 10px; 
     }      
.li-none {
        //去除第二个节点的 list-style-img
        list-style : none;;
      }
    }
    > ul::before {
      // 加时间条的竖线
      position : absolute;
      top : 2px;
      left : -15px;
      width : 1px;
      height : 133%;
      content : ' ';
      background : #E3E7EF;
    }
    > ul:last-child::before {
    //去除最后一个时间条的竖线
      background : transparent;
    }