css实现时间线

news2024/12/24 2:17:15

效果:

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

  }

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1525282.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LocalDate、LocalTime、LocalDateTime --java学习笔记

LocalDate、LocalTime、LocalDateTime 它们获得对象的方法&#xff1a; LocalDate常用api&#xff1a; LocalTime常用api&#xff1a; LocalDateTime常用api&#xff1a; 这三种对象都是不可变对象&#xff0c;进行增删改等操作时会返回一个新对象&#xff0c;不会更改原对象

SpringBoot(RESTful,统一响应结构,输出日志,增删改查功能,分页功能,批量删除,常见bug)【详解】

目录 一、准备工作 1. 前后端分离开发流程 2. 开发规范 1.RESTful请求风格 2.统一响应结果 3.代码中输出日志 二、部门管理&#xff08;增删改查功能&#xff09; 1. 查询部门列表 2. 删除部门 3. 新增部门 4. 修改部门 三、员工管理&#xff08;分页功能和批量删除…

漏洞挖掘技术综述与人工智能应用探索:从静态分析到深度学习,跨项目挑战与未来机遇

在网络安全和软件工程领域中&#xff0c;将机器学习应用于源代码漏洞挖掘是一种先进的自动化方法。该过程遵循典型的监督学习框架&#xff0c;并可细化为以下几个关键步骤&#xff1a; 数据预处理&#xff1a; 源代码解析与清理&#xff1a;首先对源代码进行文本解析&#xff…

Linux——进程通信(一) 匿名管道

目录 前言 一、进程间通信 二、匿名管道的概念 三、匿名管道的代码实现 四、管道的四种情况 1.管道无数据&#xff0c;读端需等待 2.管道被写满&#xff0c;写端需等待 3.写端关闭&#xff0c;读端一直读取 4.读端关闭&#xff0c;写端一直写入 五、管道的特性 前言 …

功能测试--APP性能测试

功能测试--APP性能测试 内存数据查看内存测试 CPU数据查看CPU测试 流量和电量的消耗流量测试流量优化方法电量测试电量测试场景&#xff08;大&#xff09; 获取启动时间启动测试--安卓 流畅度流畅度测试 稳定性稳定性测试 内存数据查看 内存泄露:内存的曲线持续增长(增的远比减…

【vscode】vscode重命名变量后多了很多空白行

这种情况&#xff0c;一般出现在重新安装 vscode 后出现。 原因大概率是语言服务器没设置好或设置对。 以 Python 为例&#xff0c;到设置里搜索 "python.languageServer"&#xff0c;将 Python 的语言服务器设置为 Pylance 即可。

机器学习-绪论

机器学习致力于研究如何通过计算的手段、利用经验来改善系统自身的性能。在计算机系统中&#xff0c;“经验”通常以“数据”的形式存在&#xff0c;因此&#xff0c;机器学习所研究的主要内容&#xff0c;是关于在计算机上从数据中产生“模型”的算法&#xff0c;即“学习算法…

语音控制模块_雷龙发展

一 硬件原理 1&#xff0c;串口 uart串口控制模式&#xff0c;即异步传送收发器&#xff0c;通过其完成语音控制。 发送uart将来自cpu等控制设备的并行数据转换为串行形式&#xff0c;并将其串行发送到接收uart&#xff0c;接收uart然后将串行数据转换为接收数据接收设备的并行…

【MATLAB源码-第162期】基于matlab的MIMO系统的MMSE检测,软判决和硬判决误码率曲线对比。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 MIMO系统(Multiple-Input Multiple-Output&#xff0c;多输入多输出系统)是现代无线通信技术中的关键技术之一&#xff0c;它能够显著增加通信系统的容量和频谱效率&#xff0c;而不需要增加额外的带宽或发射功率。在MIMO系统…

PostgreSQL-管理-2.3-Spring项目开发对接

1 Spring Boot中如何使用 在安装好了PostgreSQL之后,下面我们尝试一下在Spring Boot中使用PostgreSQL数据库。 1.1 配置数据库连接 1、在pom.xml中引入访问PostgreSQL需要的两个重要依赖: <dependency><groupId>org.springframework.boot</groupId><…

VSCode+python单步调试库代码

VSCodepython单步调试库代码 随着VSCode版本迭代更新&#xff0c;在最新的1.87.x中&#xff0c;使用Python Debugger扩展进行调试时&#xff0c;扩展的justMyCode默认属性为true&#xff0c;不会进入库中的代码。这对debug而言不太方便&#xff0c;因此需要手动设置一下&#…

Docker 镜像源配置

目录 一、 Docker 镜像源1.1 加速域名1.2 阿里云镜像源&#xff08;推荐&#xff09; 二、Docker 镜像源配置2.1 修改配置文件2.1.1 Docker Desktop 配置2.1.2 命令行配置 2.2 重启 Docker 服务2.2.1 Docker Desktop 重启2.2.2 命令行重启 2.3 检查是否配置成功 参考资料 一、 …

windows 安装cuda 11.2过程记录

参考&#xff1a; https://blog.csdn.net/m0_45447650/article/details/123704930 https://zhuanlan.zhihu.com/p/99880204?from_voters_pagetrue 在显卡驱动被正确安装的前提下&#xff0c;在命令行里输入nvidia-smi.exe 下载CUDA Toolkit: https://developer.nvidia.com/…

SpringBoot实现邮件发送

一.准备 引入starter <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-mail</artifactId> </dependency>二.邮件发送需要的配置 因为各大邮件都有其对应安全系统&#xff0c;不是项目中想用就…

【数据结构与算法】(13):冒泡排序和快速排序

&#x1f921;博客主页&#xff1a;Code_文晓 &#x1f970;本文专栏&#xff1a;数据结构与算法 &#x1f63b;欢迎关注&#xff1a;感谢大家的点赞评论关注&#xff0c;祝您学有所成&#xff01; ✨✨&#x1f49c;&#x1f49b;想要学习更多数据结构与算法点击专栏链接查看&…

深度序列模型与自然语言处理:基于TensorFlow2实践

目录 写在前面 推荐图书 编辑推荐 内容简介 作者简介 推荐理由 写在最后 写在前面 本期博主给大家推荐一本深度学习的好书&#xff0c;对Python深度学习感兴趣的小伙伴快来看看吧&#xff01; 推荐图书 《深度序列模型与自然语言处理 基于TensorFlow2实践》 直达链接…

数据结构——串,数组和广义表详解

目录 1.串的定义 1.串的几个术语 2.案例引入 3.串的类型定义&#xff0c;存储结构及运算 1.串的顺序存储结构 代码示例&#xff1a; 2.串的链式存储结构 代码示例&#xff1a; 3.串的模式匹配算法 1.BF算法 1.BF算法设计思想 2.BF算法描述 代码示例&…

Github 2024-03-18开源项目日报Top10

根据Github Trendings的统计,今日(2024-03-18统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目7TypeScript项目3非开发语言项目1Solidity项目1《Hello 算法》:动画图解、一键运行的数据结构与算法教程 创建周期:476 天协议类型…

数据分析 | NumPy

NumPy&#xff0c;全称是 Numerical Python&#xff0c;它是目前 Python 数值计算中最重要的基础模块。NumPy 是针对多维数组的一个科学计算模块&#xff0c;这个模块封装了很多数组类型的常用操作。 使用numpy来创建数组 import numpy as npdata np.array([1, 2, 3]) print…

二叉搜索树、B-树、B+树

二叉搜索树 二叉查找树&#xff0c;也称为二叉搜索树、有序二叉树或排序二叉树&#xff0c;是指一棵空树或者具有下列性质的二叉树&#xff1a; 若任意节点的左子树不空&#xff0c;则左子树上所有节点的值均小于它的根节点的值&#xff1b;若任意节点的右子树不空&#xff0…