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;

}

}

相关推荐
anew___3 分钟前
《从零手写操作系统 (20):ELF加载器——让OS读懂现代编译器》
java·服务器·前端
ss2734 分钟前
AI全栈实战 | 2.3-01 组件库实战:Element Plus 怎么搭出专业界面,过度封装为什么成维护负担
前端·javascript·elementui·vue
对空六课10 分钟前
动态按钮ID变化时的稳定埋点标识设计
前端·数据分析
福兮说13 分钟前
URL 编码的七个坑:c++ 传到后端变空格、%25 套娃、截断 emoji 直接报错
开发语言·前端·javascript·node.js·url
吴声子夜歌19 分钟前
Nginx应用与运维——Nginx Web服务应用实战(Python网站的搭建)
运维·前端·nginx
小的时候可菜了37 分钟前
JS 异步的本质:从单线程到 thenable(一条进化链)
开发语言·前端·javascript
liangshanbo121543 分钟前
Webpack vs Vite 底层原理高频追问的问题
前端·webpack·node.js
web打印社区1 小时前
Windows 网页静默打印设置步骤:客户端、防火墙与联调清单
开发语言·前端·javascript·chrome·pdf·ecmascript
恋猫de小郭1 小时前
KMP 又改了编译流程, Separate Compilation 禁止了 `commonMain` 的依赖穿透
android·前端·flutter
吴声子夜歌1 小时前
Nginx应用与运维——Nginx Web服务应用实战(静态文件服务器的搭建)
运维·前端·nginx