uniapp 手写 简易 时间轴 组件

news/2024/4/21 12:48:40/文章来源:https://blog.csdn.net/tengyuxin/article/details/136479134

一、案例如图

该案例设计条件:

左侧时间 和竖线、点、内容都是居中对其的,上下时间点中间要有一段距离

二、编写逻辑

1. 布局结构:一共三个元素,左侧是时间和黑点,中间是线条,右侧是内容

2. 样式难点:让子元素撑满父元素高度,通过给父元素 align-items: stretch;


如何让内容居中对其?

答:以左侧为例子,左侧高度为父元素高度,它里有开始时间、结束时间、黑点,只需要设置 justify-content: center;aligns-item:center;右侧同理

如何让线条line边长,让上下内容有一段距离?

答:只能单独设置一个div,让它的样式与 线的样式相同,有一个高度,用来隔开一段距离(暂时想到这个方法,有点麻烦)

三、代码案例(没时间一步一步去写如何思考的,太忙了,赶着开发)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>盛满父元素高度</title><style>.father {display: flex;flex-direction: row;align-items: stretch;}.son1 {background-color: yellowgreen;width: 4px;padding: 60px 0; /* 通过padding 让线条变长,使上下模块产生距离 */margin: 0 10px;}.son2 {width: 200px;background-color: #d3e3fd;display: flex;justify-content: center;align-items: center;}.circle {width: 8px;height: 8px;border-radius: 50%;background-color: #000;position: relative;left: 47px;}.time {width: 40px;display: flex;flex-direction: column;justify-content: center;}.jianxi{background-color: yellowgreen;width: 4px;margin: 0 10px;height: 20px;position: relative;left: 40px;}</style></head><body><div class="father"><div class="time"><div>9:30</div><div class="circle"></div><div>9:45</div></div><div class="son1"></div><div class="son2">这是子元素son2,它里面有很多内容,可以撑起一个高度</div></div><div class="jianxi"></div><div class="father"><div class="time"><div>10:30</div><div class="circle"></div><div>10:45</div></div><div class="son1"></div><div class="son2">这是子元素son2,它里面有很多内容,可以撑起一个高度,这是子元素son2,它里面有很多内容,可以撑起一个高度这是子元素son2,它里面有很多内容,可以撑起一个高度</div></div></body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

换手机后日记不见了怎么恢复?换手机日记内容同步方法

曾经&#xff0c;我使用的是一款苹果手机&#xff0c;这部手机陪伴了我整整3年。随着时间的推移&#xff0c;手机内存不够用成为了我面临的一个大问题&#xff0c;因此我决定更换一部新手机——这次我选择了OPPO品牌。在更换手机的过程中&#xff0c;我利用手机搬家软件一键同步…

Flutter使用auto_updater实现windows/mac桌面应用版本升级功能

因为windows应用一般大家都是从网上下载的&#xff0c;后期版本肯定会更新&#xff0c;那用flutter开发windows应用&#xff0c;怎么实现应用内版本更新功能了&#xff1f;可以使用auto_updater库&#xff0c; 这个插件允许 Flutter 桌面 应用自动更新自己 (基于 sparkle 和 wi…

【三维重建】VastGaussian:用于大场景重建的大3D Gaussian(CVPR 2024)

题目&#xff1a;VastGaussian: Vast 3D Gaussians for Large Scene Reconstruction 来源&#xff1a;清华大学&#xff1b;华为诺亚&#xff1b;中国科学院 链接&#xff1a;https://vastgaussian.github.io/ 总结&#xff1a;VastGaussian&#xff1a;基于3D GS的分块优化重…

mysql数据库(下)

目录 约束 约束的概念和分类 1、约束的概念&#xff1a; 2、约束的分类 1、主键约束 2、默认约束 3、非空约束 4、唯一约束 5、外键约束 约束 约束的概念和分类 1、约束的概念&#xff1a; 约束时作用于表中列上的规则&#xff0c;用于限制加入表的数据约束的存在保证…

【网站项目】105校园车辆管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

SHARE 100M PRO:航测领域的多面手

在无人机航测领域&#xff0c;SHARE 100M PRO单镜头航测相机以其1.02亿像素的中画幅传感器和创新技术&#xff0c;正在重塑倾斜摄影的精度和效率。这款相机不仅在城市规划和土地管理中发挥着重要作用&#xff0c;还在环境监测、基础设施建设、农业管理等多个航测领域展现出其卓…

自编C++题目——几点了.easy ver

题目难度 入门 题目描述 一个老外用一口不流利的中文问你&#xff1a;“Xian zai ji dian le?”你看了一眼表&#xff0c;知道了现在是&#xff0c;你准备用这样的形式写在纸上&#xff1a; Now is m past/to h. 如果你看不懂&#xff0c;举个例子&#xff1a; 当h10&#…

treeview控件的应用

1.分类 treeview控件的基本应用&#xff0c;可以用于商品分类、文件分类等等。 2.辅助决策 treeview可以组成决策树&#xff0c;用来帮助人们做选择。比如说今天中午吃什么菜&#xff1f; 如果我来选择的话&#xff0c;那就是&#xff1a;不吃辣-鲁菜-糖醋鲤鱼。 3.求解算…

C# OpenCvSharp DNN Yolov8-OBB 旋转目标检测

目录 效果 模型信息 项目 代码 下载 C# OpenCvSharp DNN Yolov8-OBB 旋转目标检测 效果 模型信息 Model Properties ------------------------- date&#xff1a;2024-02-26T08:38:44.171849 description&#xff1a;Ultralytics YOLOv8s-obb model trained on runs/DOT…

【MySQL系列 05】Schema 与数据类型优化

良好的数据库 schema 设计和合理的数据类型选择是 SQL 获得高性能的基石。 一、选择优化的数据类型 MySQL 支持的数据类型非常多&#xff0c;选择正确的数据类型对于获得高性能至关重要。不管存储哪种类型的数据&#xff0c;下面几个简单的原则都有助于做出更好的选择。 1. …

MySQL学习笔记(一)数据库事务隔离级别与多版本并发控制(MVCC)

一、数据库事务隔离级别 数据库事务的隔离级别有4种&#xff0c;由低到高分别为Read uncommitted &#xff08;读未提交&#xff09;、Read committed&#xff08;读提交&#xff09; 、Repeatable read&#xff08;可重复读&#xff09; 、Serializable &#xff08;串行化&a…

项目解决方案:多地5G蓄能电站的视频监控联网系统设计方案

目 录 一、前言 二、系统架构设计 1、系统架构设计说明 2、系统拓扑图 三、关键技术 1. 5G支持技术 2. 视频图像处理技术 3. 数据融合与分析技术 四、功能特点 1. 高效可靠 2. 实时监测 3. 远程控制 4. 故障预测 五、应用前景 一、前言 随着能源…

关于手机是否支持h264的问题的解决方案

目录 现象 原理 修改内容 现象 开始以为是手机不支持h264的编码 。机器人chatgpt一通乱扯。 后来检查了下手机&#xff0c;明显是有h264嘛。 终于搞定&#xff0c;不枉凌晨三点起来思考 原理 WebRTC 默认使用的视频编码器是VP8和VP9&#xff0c;WebRTC内置了这两种编码器…

继深圳后,重庆与鸿蒙展开原生应用开发合作

截至2023年底&#xff0c;开源鸿蒙开源社区已有250多家生态伙伴加入&#xff0c;开源鸿蒙项目捐赠人达35家&#xff0c;通过开源鸿蒙兼容性测评的伙伴达173个&#xff0c;累计落地230余款商用设备&#xff0c;涵盖金融、教育、智能家居、交通、数字政府、工业、医疗等各领域。 …

每日一题 — 和为t的两个数

LCR 179. 查找总价格为目标值的两个商品 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 代码&#xff1a; public int[] twoSum(int[] price, int target) {int left 0;int right price.length - 1;while(left < right){//每一次都重新计算和int sum price[…

Python和Google Colab进行卫星图像二维小波变化和机器学习

2D 小波分解是图像处理中的一种流行技术,使用不同的滤波器将图像分解为不同的频率分量(“近似”和“细节”系数)。该技术对于各种图像处理任务特别有用,例如压缩、去噪、特征提取和边缘检测。 在本文中,我们将演示如何在 Google Colab 中使用 Python 下载高分辨率样本卫星…

[Electron]中的Notification通知

Electron中的Notification Notification 用来创建OS(操作系统)桌面通知 静态方法 Notification.isSupported() 返回 boolean - 当前系统是否支持桌面通知 const notification new Notification([options]) 实例方法 notification.show() 显示通知 notification.close…

基于Pytorch搭建分布式训练环境

Pytorch系列 文章目录 Pytorch系列前言一、DDP是什么二、DPP原理terms、nodes 和 ranks等相关术语解读DDP 的局限性为什么要选择 DDP 而不是 DP代码演示1. 在一个单 GPU 的 Node 上进行训练&#xff08;baseline&#xff09;2. 在一个多 GPU 的 Node 上进行训练临门一脚&#x…

微信开发者工具 vim 键位绑定

问题&#xff1a;如标题 解决&#xff1a; 最上边点击设置&#xff0c;找到编辑器设置 点击更多编辑器设置&#xff0c;然后会弹出设置这个页面 搜索 vim &#xff0c;并点击 一直往下边滑动&#xff0c;找到 setting.json 然后加入这段代码&#xff1a; "vim.insertM…

Java安全 CC链3分析

Java安全 CC链3分析 cc链3介绍前置知识类加载类加载的方法例1.forName例2.getSystemClassLoader总结 javassist模块 cc链3分析TemplatesImpl类demo2TrAXFilter类InstantiateTransformer类 最终exp基于LazyMap链基于TransformedMap链 cc链3介绍 cc链3的后半部分与cc链1相同&…