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) 就找到…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源（HTML/CSS/图片等），响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址，提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
（十）学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端，同时完善学生端的构建。本次工作主要包括： 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
【位运算】消失的两个数字（hard）
消失的两个数字（hard） 题⽬描述：解法（位运算）：Java 算法代码：更简便代码 题⽬链接：⾯试题 17.19. 消失的两个数字 题⽬描述： 给定⼀个数组，包含从 1 到 N 所有…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指：像函数调用/返回一样轻量地完成任务切换。 举例说明： 当你在程序中写一个函数调用： funcA() 然后 funcA 执行完后返回&…...
【解密LSTM、GRU如何解决传统RNN梯度消失问题】
解密LSTM与GRU：如何让RNN变得更聪明？ 在深度学习的世界里，循环神经网络（RNN）以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而，传统RNN存在的一个严重问题——梯度消失&#…...
Java 加密常用的各种算法及其选择
在数字化时代，数据安全至关重要，Java 作为广泛应用的编程语言，提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景，有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
C++.OpenGL （10/64）基础光照（Basic Lighting）
基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）
升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点，但无自动故障转移能力，Master宕机后需人工切换，期间消息可能无法读取。Slave仅存储数据，无法主动升级为Master响应请求ÿ…...
Device Mapper 机制
Device Mapper 机制详解 Device Mapper（简称 DM）是 Linux 内核中的一套通用块设备映射框架，为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程，并配以详细的…...
GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器（ADC），支持8kHz~96kHz采样率，集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器，适用于高保真音频采集场景。 2. 核心特性 高精度：24位分辨率，…...