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) 就找到…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
JavaSec-RCE
简介 RCE(Remote Code Execution)，可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景：Groovy代码注入 Groovy是一种基于JVM的动态语言，语法简洁，支持闭包、动态类型和Java互操作性，…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明：server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet： https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
什么是库存周转？如何用进销存系统提高库存周转率？
你可能听说过这样一句话： “利润不是赚出来的，是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业，很多企业看着销售不错，账上却没钱、利润也不见了，一翻库存才发现： 一堆卖不动的旧货…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 （忘了有没有这步了 估计有） 刷机程序 和 镜像 就不提供了。要刷的时…...
苍穹外卖--缓存菜品
1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得，如果用户端访问量比较大，数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据，减少数据库查询操作。 缓存逻辑分析： ①每个分类下的菜品保持一份缓存数据…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）
笔记整理：刘治强，浙江大学硕士生，研究方向为知识图谱表示学习，大语言模型 论文链接：http://arxiv.org/abs/2407.16127 发表会议：ISWC 2024 1. 动机 传统的知识图谱补全（KGC）模型通过…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
PL0语法，分析器实现！
简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...