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) 就找到…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...
3.3.1_1 检错编码（奇偶校验码）
从这节课开始，我们会探讨数据链路层的差错控制功能，差错控制功能的主要目标是要发现并且解决一个帧内部的位错误，我们需要使用特殊的编码技术去发现帧内部的位错误，当我们发现位错误之后，通常来说有两种解决方案。第一…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装： 下载安装DevEco Studio 4.0（支持HarmonyOS 5）配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化： ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中，新增了一个本地验证码接口 /code，使用函数式路由（RouterFunction）和 Hutool 的 Circle…...
初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...
在Ubuntu24上采用Wine打开SourceInsight
1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...
C++.OpenGL （14/64）多光源（Multiple Lights）
多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...
Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换
目录 关键点 技术实现1 技术实现2 摘要： 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式（自动驾驶、人工驾驶、远程驾驶、主动安全），并通过实时消息推送更新车…...
从 GreenPlum 到镜舟数据库：杭银消费金融湖仓一体转型实践
作者：吴岐诗，杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言：融合数据湖与数仓的创新之路 在数字金融时代，数据已成为金融机构的核心竞争力。杭银消费金…...