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;

}

}

相关推荐
风骏时光牛马7 小时前
生成一个AI多模态标题,仅输出一条标题,无额外文字、问句、备选、配图、文案等任何附加内容,不需要其他的任务服务 只要标题。
前端
wangruofeng8 小时前
从 GIF 到 AVIF:网页图片格式演进与 2026 年选型指南
前端·架构
清晨Coding9 小时前
为什么用 React Developer Tools 查看组件树这么乱?
前端·react.js
鶴哥只手遮天9 小时前
《Electron 45.2.3 内核解剖》第 4 章 补丁体系:380 个补丁改了什么
前端·electron
FungLeo11 小时前
成为全栈·Vue 管理后台篇·分类树与标签管理:层级数据如何落到管理界面
前端·javascript·vue.js·分类树·naive ui·标签管理·前端数据结构
Lank_M15 小时前
白底都占八成,PNG 为何只在图表页赢过 JPG
前端
张一凡9315 小时前
给 Coding Agent 加一道"架构闸门":Jin 是如何做到"先审架构、再写代码、不漂移"的
前端·后端·agent
Linye15 小时前
AI 写的 HTML 原型全是空壳?聊聊真实 DOM 交互避坑
前端·人工智能
ZANE15 小时前
纯前端实现的 PDF 与图片互相转换工具技术实现
前端
Swot15 小时前
SvelteKit Remote Functions 使用指南
前端·后端