uniapp 手写 简易 时间轴 组件

一、案例如图

该index.php/tags-41973.html" >���例设计条件：

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

二、编写逻辑

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

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

如何让内容居中对其？

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

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

答：只能单独设置一个p，让它的样式与 线的样式相同，有一个高度，用来隔开一段距离（暂时想到这个方法，有点麻烦）

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

                  盛满父元素高度          .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;      }                          9:30                9:45                  这是子元素son2，它里面有很多内容，可以撑起一个高度                          10:30                10:45                          这是子元素son2，它里面有很多内容，可以撑起一个高度,这是子元素son2，它里面有很多内容，可以撑起一个高度这是子元素son2，它里面有很多内容，可以撑起一个高度