当前位置: 首页 > news >正文

使用css实现时间线布局(TimeLine)

前言

在使用uni-app开发微信小程序过程中,遇到了时间轴布局,由于每项的内容高度不一致,使用uniapp自带的扩展组件uni-steps,样式布局无法对齐竖线,于是自己造轮子,完成特殊的布局。显示效果如下:

 

 

实现

实现这种布局,有两种实现方式,

第一种:使用css伪类实现;

第二种:使用纯css实现。

具体演示代码

第一种方式:使用css伪类实现。效果如图一

1、样式文件

<style scoped lang="scss">
.timeline{margin: 64rpx auto 0rpx auto;position: relative;width: 100%;&:before{background-color: #6DD1C9;content: '';margin-left: -1rpx;position: absolute;top: 0rpx;left: 14rpx;width: 2rpx;bottom: -250rpx;height: calc(100% - 47rpx);}.timeline-event{position: relative;}.timeline-event-copy {padding: 32rpx 24rpx;position: relative;top: -47rpx;left: 42rpx;width: 536rpx;background-color: #FFFFFF;margin-bottom: 20rpx;border-radius: 20rpx;}.timeline-event-icon{background-color: #ffffff00;outline: 0rpx solid #FF0000;display: block;margin: 0rpx 0rpx 0rpx 0rpx;position: absolute;top: 0rpx;left: 0rpx;width: 28rpx;height: 28rpx;}.timeline-event-thumbnail{color: #38254D;font-weight: bold;font-size: 30rpx;display: inline-flex;width: 100%;margin-bottom: 0rpx;align-items: center;justify-content: space-between;}.timeline-event-content{display: flex;flex-direction: column;margin-top: 20rpx;margin-bottom: 20rpx;text{font-size: 26rpx;color: #574966;line-height: 40rpx;}.btn{align-self: flex-end;font-size: 26rpx;color: #F06245;line-height: 60rpx;text-align: center;margin-top: -40rpx;width: 140rpx;height: 60rpx;border: 1rpx solid #F06245;border-radius: 30rpx;}}
}
</style>

2、布局文件

<view class="timeline"><block v-for="(item,index) in 4" :key="index"><view class="timeline-event"><image class="timeline-event-icon" src="/static/record/table.png"></image><view class="timeline-event-copy"><view class="timeline-event-thumbnail">4月22日(周二) 18:00-19:00</view><view class="timeline-event-content"><text>教练:David Beckham</text><text>地点:西沙群岛 · 永兴岛</text><text>教室:A教室</text><view v-if="index==0" class="btn">取消请假</view></view></view></view></block>
</view>

第二种方式:使用纯css实现。效果如图二

1、样式文件

<style lang="scss">
.timeline-list{margin: 32rpx;font-size: 28rpx;list-style: none;
}
.timeline-item:last-child .timeline-item_tail {display: none;
}
.timeline-item{position: relative;padding-bottom: 20rpx;
}
.timeline-item_tail{position: absolute;left: 4rpx;height: 100%;border-left: 2rpx solid rgba(109, 209, 201, 0.3);
}.timeline-item_node{position: absolute;background-color: #FFFFFF;border-radius: 50%;display: flex;justify-content: center;align-items: center;left: -12rpx;width: 22rpx;height: 22rpx;background: #fff;border:6rpx solid #6DD1C9;
}
.timeline-item_wrapper{position: relative;padding: 32rpx 24rpx;left: 42rpx;top: -32rpx;background-color: #ffffff;border-radius: 20rpx;width: 600rpx;
}
.timeline-item_timestamp{color: #38254D;font-weight: bold;font-size: 30rpx;    line-height: 32rpx;
}
.timeline-item_content{display: flex;flex-direction: column;margin-top: 20rpx;margin-bottom: 20rpx;text{font-size: 26rpx;color: #574966;line-height: 40rpx;}.btn{align-self: flex-end;font-size: 26rpx;color: #F06245;line-height: 60rpx;text-align: center;margin-top: -40rpx;width: 140rpx;height: 60rpx;border: 1rpx solid #F06245;border-radius: 30rpx;}
}
</style>

2、布局文件

<view class="timeline-list"><block  v-for="(item, index) in 3" :key="index"><view class="timeline-item"><view class="timeline-item_tail"></view><view class="timeline-item_node"></view><view class="timeline-item_wrapper"><view class="timeline-item_timestamp">4月22日(周二) 18:00-19:00</view><view class="timeline-item_content"><text>教练:David Beckham</text><text>地点:西沙群岛 · 永兴岛</text><text>教室:A教室</text><view v-if="index==0" class="btn">取消请假</view></view></view></view></block>
</view>

ps:使用方式1,无法隐藏最后一项的时间线,而第二种方式,可以随时控制每一项的时间线。个人推荐第二种方式。

相关文章:

使用css实现时间线布局(TimeLine)

前言 在使用uni-app开发微信小程序过程中&#xff0c;遇到了时间轴布局&#xff0c;由于每项的内容高度不一致&#xff0c;使用uniapp自带的扩展组件uni-steps&#xff0c;样式布局无法对齐竖线&#xff0c;于是自己造轮子&#xff0c;完成特殊的布局。显示效果如下&#xff1…...

深入浅出 栈和队列(附加循环队列、双端队列)

栈和队列 一、栈 概念与特性二、Stack 集合类及模拟实现1、Java集合中的 Stack2、Stack 模拟实现 三、栈、虚拟机栈、栈帧有什么区别&#xff1f;四、队列 概念与特性五、Queue集合类及模拟实现1、Queue的底层结构&#xff08;1&#xff09;顺序结构&#xff08;2&#xff09;链…...

前端基础(二)

前言&#xff1a;前端开发框架——Vue框架学习。 准备工作&#xff1a;添加Vue devtools扩展工具 具体可查看下面的这篇博客 添加vue devtools扩展工具添加后F12不显示Vue图标_MRJJ_9的博客-CSDN博客 Vue官方学习文档 Vue.js - 渐进式 JavaScript 框架 | Vue.js MVVM M…...

ORB-SLAM2学习笔记7之System主类和多线程

文章目录 0 引言1 整体框架1.1 整体流程 2 System主类2.1 成员函数2.2 成员变量 3 多线程3.1 ORB-SLAM2中的多线程3.2 加锁 0 引言 ORB-SLAM2是一种基于特征的视觉SLAM&#xff08;Simultaneous Localization and Mapping&#xff09;系统&#xff0c;它能够从单个、双目或RBG…...

gin的占位符:和通配符*

1、用法 在 Gin 路由中&#xff0c;可以使用一个通配符&#xff08;*&#xff09;或一个占位符&#xff08;:&#xff09;来捕获 URL 的一部分。 r.GET("/royal/:id", func(c *gin.Context) {id : c.Param("id")//fmt.Println("into :id")c.Str…...

【量化课程】08_2.深度学习量化策略基础实战

文章目录 1. 深度学习简介2. 常用深度学习模型架构2.1 LSTM 介绍2.2 LSTM在股票预测中的应用 3. 模块分类3.1 卷积层3.2 池化层3.3 全连接层3.4 Dropout层 4. 深度学习模型构建5. 策略实现 1. 深度学习简介 深度学习是模拟人脑进行分析学习的神经网络。 2. 常用深度学习模型架…...

12-数据结构-数组、矩阵、广义表

数组、矩阵、广义表 目录 数组、矩阵、广义表 一、数组 二.矩阵 三、广义表 一、数组 这一章节理解基本概念即可。数组要看清其实下标是多少&#xff0c;并且二维数组&#xff0c;存取数据&#xff0c;要先看清楚是按照行存还是按列存&#xff0c;按行则是正常一行一行的去读…...

Idea 反编译jar包

实际项目中&#xff0c;有时候会需要更改jar包源码来达到业务需求&#xff0c;本文章将介绍一下如何通过Idea来进行jar反编译 1、Idea安装decompiler插件 2、找到decompiler插件文件夹 decompiler插件文件夹路径为&#xff1a;idea安装路径/plugins/java-decompiler/lib 3、…...

【Git】安装以及基本操作

目录 一、初识Git二、 在Linux底下安装Git一&#xff09;centOS二&#xff09;Ubuntu 三、 Git基本操作一&#xff09; 创建本地仓库二&#xff09;配置本地仓库三&#xff09;认识工作区、暂存区、版本库四&#xff09;添加文件五&#xff09;查看.git文件六&#xff09;修改文…...

Spring创建Bean的过程(2)

上一节介绍了Spring创建过程中的两个重要的接口&#xff0c;那么它们在创建Bean的过程中起到了什么作用呢&#xff1f;接下来请看&#xff1a; Spring有三种方式寻找 xml 配置文件&#xff0c;根据 xml 文件内容来构建 ApplicationContext&#xff0c;分别为ClassPathXmlAppli…...

Linux 终端操作命令(2)内部命令

Linux 终端操作命令 也称Shell命令&#xff0c;是用户与操作系统内核进行交互的命令解释器&#xff0c;它接收用户输入的命令并将其传递给操作系统进行执行&#xff0c;可分为内部命令和外部命令。内部命令是Shell程序的一部分&#xff0c;而外部命令是独立于Shell的可执行程序…...

【Git】大大大问题之syntax error near unexpected token `(‘ 的错误解决办法

话不多说&#xff0c;先上图&#xff1a; 如图&#xff0c;因为在linux环境里&#xff0c;文件路径中含有括号&#xff08;&#xff09;&#xff0c;因此报错&#xff01; 解决办法 等同于 &#xff1a;linux下解决bash: syntax error near unexpected token (’ 的错误&am…...

Flink源码之TaskManager启动流程

从启动命令flink-daemon.sh可以看出TaskManger入口类为org.apache.flink.runtime.taskexecutor.TaskManagerRunner TaskManagerRunner::main TaskManagerRunner::runTaskManagerProcessSecurely TaskManagerRunner::runTaskManager //构造TaskManagerRunner并调用start()方法 …...

加入微软MCPP有什么优势?

目录 专业认可 技术支持 销售和市场推广支持 培训和认证 业务机会和合作伙伴网络...

leetcode做题笔记78子集

给你一个整数数组 nums &#xff0c;数组中的元素 互不相同 。返回该数组所有可能的子集&#xff08;幂集&#xff09;。 解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 思路一&#xff1a;回溯 void backtracking(int* nums, int numsSize, int** res, int* ret…...

Skywalking-9.6.0系列之本地源码编译并启动

Skywalking相信有很多人使用过&#xff0c;通过容器或者下载安装包进行安装的&#xff0c;今天从源代码角度&#xff0c;拉取、构建、启动。 官方文档步骤简洁明了&#xff0c;我这边会结合自己遇到的一些问题做出总结。 当前构建资源版本&#xff1a; MAC 10.15.7IDEA 2021.…...

proteus结合keil-arm编译器构建STM32单片机项目进行仿真

proteus是可以直接创建设计图和源码的&#xff0c;但是源码编译它需要借助keil-arm编译器&#xff0c;也就是我们安装keil-mdk之后自带的编译器。 下面给出一个完整的示例&#xff0c;主要是做一个LED灯闪烁的效果。 新建工程指定路径&#xff0c;Schematic,PCB layout都选择默…...

第五十三天

●剪辑——Pr 剪辑(Film editing)&#xff0c;即将影片制作中所拍摄的大量素材&#xff0c;经过选择、取舍、分解与组接&#xff0c;最终完成一个连贯流畅、含义明确、主题鲜明并有艺术感染力的作品。 •线性编辑 将素材按时间顺序连接成新的连续画面的技术 •非线性编辑 …...

gorm基本操作

一、gorm安装 1.下载gorm go get -u gorm.io/gorm //gorm框架 go get -u gorm.io/driver/mysql //驱动2.mysql准备工作 mysql> create database godb; mysql> grant all on *.* to admin% identified by golang123!; mysql> flush privileges;3.导入gorm框架 impo…...

华为OD机试 - 排队游戏(Java JS Python)

题目描述 新来的老师给班里的同学排一个队。 每个学生有一个影力值。 一些学生是刺头,不会听老师的话,自己选位置,非刺头同学在剩下的位置按照能力值从小到大排。 对于非刺头同学,如果发现他前面有能力值比自己高的同学,他不满程度就增加,增加的数量等于前面能力值比…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

招商蛇口 | 执笔CID,启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

绕过 Xcode?使用 Appuploader和主流工具实现 iOS 上架自动化

iOS 应用的发布流程一直是开发链路中最“苹果味”的环节&#xff1a;强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说&#xff0c;这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发&#xff08;例如 Flutter、React Na…...

规则与人性的天平——由高考迟到事件引发的思考

当那位身着校服的考生在考场关闭1分钟后狂奔而至&#xff0c;他涨红的脸上写满绝望。铁门内秒针划过的弧度&#xff0c;成为改变人生的残酷抛物线。家长声嘶力竭的哀求与考务人员机械的"这是规定"&#xff0c;构成当代中国教育最尖锐的隐喻。 一、刚性规则的必要性 …...