uniapp 手写 简易 时间轴 组件
一、案例如图
该案例设计条件：
左侧时间 和竖线、点、内容都是居中对其的，上下时间点中间要有一段距离
二、编写逻辑
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>
相关文章：
uniapp 手写 简易 时间轴 组件
一、案例如图 该案例设计条件： 左侧时间 和竖线、点、内容都是居中对其的，上下时间点中间要有一段距离 二、编写逻辑 1. 布局结构：一共三个元素，左侧是时间和黑点，中间是线条，右侧是内容 2. 样式难点&#…...
实现HttpServletRequest下多次获取流数据
HttpServletRequest下多次获取流数据 背景示例错误的尝试全局替换执行顺序 背景 众所周知request的输入流只能读取一次，不能重复读取。而在HttpServletRequest中，获取请求体数据的流（通过getInputStream()方法）默认只能被读取一…...
uviewplus在uniapp中的配置使用
版本: "uview-plus": "^3.1.45"在page.json中配置: "easycom": {"autoscan": true,"custom": {"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue","^up-(.*)": "uview-plus/componen…...
C++11 新特性之future和packaged_task
C11 新特性之future #include <iostream> #include <thread> #include <future> #include <chrono>void test(std::promise<int>& probj){std::this_thread::sleep_for(std::chrono::seconds(5));probj.set_value(20); }int main(){std::pr…...
Flutter APP下载更新
由于我做的项目不是放在APP商店（公司内部用）的，一些flutter的第三方库不合适我，我需要用的是从网上下载再安装（从服务下），网上也找了花了我好几天时间。不全又乱，这我自己做一下备份…...
Pinctrl子系统_04_Pinctrl子系统主要数据结构
引言 本节说明Pinctrl子系统中主要的数据结构，对这些数据结构有所了解，也就是对Pinctrl子系统有所了解了。 前面说过，要使用Pinctrl子系统，就需要去配置设备树。 以内核面向对象的思想，设备树可以分为两部分&#x…...
设计模式(十)：抽象工厂模式（创建型模式）
Abstract Factory，抽象工厂：提供一个创建一系列相关或相互依赖对 象的接口，而无须指定它们的具体类。 之前写过简单工厂和工厂方法模式(创建型模式)，这两种模式比较简单。 简单工厂模式其实不符合开闭原则，即对修改关闭…...
计算机网络概论01
计算机系统基础知识 基本组成 计算机系统由硬件和软件组成。 硬件由五大部分，他们分别是： 运算器 执行算数运算和逻辑运算控制器 控制cpu的工作，决定了计算机运行过程的自动化。包括指令控制逻辑、时序控制逻辑、总线控制逻辑和中断控制逻辑…...
新零售SaaS架构：订单履约系统架构设计（万字图文总结）
什么是订单履约系统？ 订单履约系统用来管理从接收客户订单到将商品送达客户手中的全过程。 它连接了上游交易（客户在销售平台下单环）和下游仓储配送（如库存管理、物流配送），确保信息流顺畅、操作协同&…...
Hive SQL 开发指南（三）优化及常见异常
在大数据领域，Hive SQL 是一种常用的查询语言，用于在 Hadoop上进行数据分析和处理。为了确保代码的可读性、维护性和性能，制定一套规范化的 Hive SQL 开发规范至关重要。本文将介绍 Hive SQL 的基础知识，并提供一些规范化的开发指…...
Spring Boot 自动装配的原理！！！
SpringBootApplication SpringBootConfiguration：标识启动类是一个IOC容器的配置类 EnableAutoConfiguration： AutoConfigurationPackage：扫描启动类所在包及子包中所有的组件，生…...
Linux运维_Bash脚本_编译安装Wayland-1.22.0
Linux运维_Bash脚本_编译安装Wayland-1.22.0 Bash (Bourne Again Shell) 是一个解释器，负责处理 Unix 系统命令行上的命令。它是由 Brian Fox 编写的免费软件，并于 1989 年发布的免费软件，作为 Sh (Bourne Shell) 的替代品。 您可以在 Linu…...
Python数字类型
文章目录 Python数字类型1. 数字类型1.1 数字类型概述1.2 整数类型1.3 浮点数类型1.4 复数 2. 数字类型的操作2.1 内置的数值运算操作符2.2 内置的数值运算函数2.3 内置的数字类型转换函数 思考与练习 Python数字类型 1. 数字类型 1.1 数字类型概述 数字是自然界计数活动的抽…...
每天一个数据分析题（一百九十六）
在多元线性回归模型的自变量选择方法中，关于向后回归法和逐步回归法的描述，以下哪些是正确的？ A. 向后回归法开始时包含所有自变量，并逐步剔除每个不显著的变量。 B. 逐步回归法结合了向前回归法和向后回归法，可以在…...
华为北向网管NCE开发教程（1）闭坑选接口协议
华为北向网管NCE开发教程（1）闭坑选接口协议 华为北向网管NCE开发教程（2）REST接口开发 华为北向网管NCE开发教程（3）CORBA协议开发 本文一是记录自己开发华为北向网管遇到的坑，二是给需要的人&…...
JavaScript极速入门-综合案例(3)
综合案例 猜数字 预期效果 代码实现 <button type"button" id"reset">重新开始一局游戏</button><br>请输入要猜的数字:<input type"text" id"number"><button type"button" id"button&q…...
RabbitMQ架构详解
文章目录 概述架构详解核心组件虚拟主机（Virtual Host）RabbitMQ 有几种广播类型 概述 RabbitMQ是⼀个高可用的消息中间件，支持多种协议和集群扩展。并且支持消息持久化和镜像队列，适用于对消息可靠性较高的场合 官网https://www.…...
编译内核错误 multiple definition of `yylloc‘
编译内核错误 # make ARCHarm CROSS_COMPILEarm-mix410-linux- uImageHOSTLD scripts/dtc/dtc /usr/bin/ld: scripts/dtc/dtc-parser.tab.o:(.bss0x10): multiple definition of yylloc; scripts/dtc/dtc-lexer.lex.o:(.bss0x0): first defined here collect2: error: ld ret…...
深度学习模型部署(四)常用模型及推理平台评估指标
判断选择什么模型，什么量化方案，什么推理框架，最基础的知识就是如何评估自己的模型以及推理平台。 模型衡量标准 衡量一个模型的最直接标准就是运算速度，但是运算速度是无法计算的，所以定义了一些间接标准来推测模型的…...
【控制台警告】npm WARN EBADENGINE Unsupported engine
今天用webpack下载几个loader依赖，爆出了三个警告，大概的意思就是本地安装的node和npm的版本不是很匹配？ 我的解决思路是： 先检查node和npm版本 然后去官网查找版本的对应 靠，官网404 Node.js (nodejs.org) 就找到…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
条件运算符
C中的三目运算符（也称条件运算符，英文：ternary operator）是一种简洁的条件选择语句，语法如下： 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true，则整个表达式的结果为“表达式1”…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时，显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...
Vue ③-生命周期 || 脚手架
生命周期 思考：什么时候可以发送初始化渲染请求？（越早越好） 什么时候可以开始操作dom？（至少dom得渲染出来） Vue生命周期： 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...
小木的算法日记-多叉树的递归/层序遍历
🌲 从二叉树到森林：一文彻底搞懂多叉树遍历的艺术 🚀 引言 你好，未来的算法大神！ 在数据结构的世界里，“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的，它…...
yaml读取写入常见错误 (‘cannot represent an object‘, 117)
错误一：yaml.representer.RepresenterError: (‘cannot represent an object’, 117) 出现这个问题一直没找到原因，后面把yaml.safe_dump直接替换成yaml.dump，确实能保存，但出现乱码： 放弃yaml.dump，又切…...
Qt的学习(一)
1.什么是Qt Qt特指用来进行桌面应用开发（电脑上写的程序）涉及到的一套技术Qt无法开发网页前端，也不能开发移动应用。 客户端开发的重要任务：编写和用户交互的界面。一般来说和用户交互的界面，有两种典型风格&…...
Qwen系列之Qwen3解读：最强开源模型的细节拆解
文章目录 1.1分钟快览2.模型架构2.1.Dense模型2.2.MoE模型 3.预训练阶段3.1.数据3.2.训练3.3.评估 4.后训练阶段S1: 长链思维冷启动S2: 推理强化学习S3: 思考模式融合S4: 通用强化学习 5.全家桶中的小模型训练评估评估数据集评估细节评估效果弱智评估和民间Arena 分析展望 如果…...
【汇编逆向系列】六、函数调用包含多个参数之多个整型-参数压栈顺序，rcx,rdx,r8,r9寄存器
从本章节开始，进入到函数有多个参数的情况，前面几个章节中介绍了整型和浮点型使用了不同的寄存器在进行函数传参，ECX是整型的第一个参数的寄存器，那么多个参数的情况下函数如何传参，下面展开介绍参数为整型时候的几种情…...