css实现时间线

效果:

<ul class="timeline-list">

        <li class="timeline-item" v-for="(i, index) in tt" :key="index">

          <div class="tail"></div>

          <div class="node"></div>

          <div class="wrapper">

            <div class="times">{{ i.time }}</div>

            <div class="cont">{{ i.cont }}</div>

          </div>

        </li>

      </ul>

.timeline-list {

  margin: 0;

  padding: 16px;

  font-size: 12px;

  list-style: none;

  .timeline-item:last-child .tail {

    display: none;

  }

  .timeline-item {

    position: relative;

    padding-bottom: 14px;

  }

  .tail {

    position: absolute;

    left: 0;

    height: 100%;

    border-left: 1px dotted #d7d8db;

  }

  .node {

    position: absolute;

    background: #fff;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    left: -2px;

    width: 6px;

    height: 6px;

    background: #0a7fef;

  }

  .wrapper {

    position: relative;

    top: -6px;

    left: 8px;

  }

  .times {

    margin-bottom: 2px;

    padding-top: 0px;

    line-height: 17px;

    color: #373d4a;

    font-size: 12px;

  }

  .cont {

    line-height: 17px;

    color: #8b8b8b;

    font-size: 12px;

  }

}

相关推荐

  1. CSC博士联培申请时间线

    2024-03-19 12:28:08       36 阅读
  2. Flutter框架时间线梳理

    2024-03-19 12:28:08       30 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-19 12:28:08       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-19 12:28:08       101 阅读
  3. 在Django里面运行非项目文件

    2024-03-19 12:28:08       82 阅读
  4. Python语言-面向对象

    2024-03-19 12:28:08       91 阅读

热门阅读

  1. C语言经典面试题目(十五)

    2024-03-19 12:28:08       42 阅读
  2. mysql 常见问题

    2024-03-19 12:28:08       45 阅读
  3. 人工智能需要的数学基础有哪些?

    2024-03-19 12:28:08       41 阅读
  4. Python基础知识

    2024-03-19 12:28:08       41 阅读
  5. windows 自动启动jar

    2024-03-19 12:28:08       39 阅读
  6. Linux:vim详解及使用

    2024-03-19 12:28:08       36 阅读
  7. P1041 [NOIP2003 提高组] 传染病控制

    2024-03-19 12:28:08       43 阅读
  8. Windows程序员用MAC:初始设置(用起来像win一些)

    2024-03-19 12:28:08       49 阅读
  9. 【无标题】

    2024-03-19 12:28:08       43 阅读
  10. MacOS安装Homebrew教程

    2024-03-19 12:28:08       44 阅读
  11. c# Action 关键字使用

    2024-03-19 12:28:08       43 阅读
  12. 华为机试题-最小矩阵

    2024-03-19 12:28:08       46 阅读