css垂直时间线高度自适应

一、html

<view class="address card"><underlineVue title="地址信息"></underlineVue><view class="address-info info"> <!-- info设置伪元素时间线向下的 --><view class="address-since">起</view><view class="address-xxdz xxdz">{{orderDetail.qsdxxdz}}</view></view><view class="address-info mdd">  <!-- mdd设置伪元素时间线 --><view class="address-orders">目</view><view class="address-xxdz">{{orderDetail.mddxxdz}}</view></view></view>

二、css（scss）

<style scoped lang="scss">.address {padding: 20rpx;margin-bottom: 30rpx;&-info {display: flex;margin-top: 20rpx;position: relative;z-index: 2;}.info {&:before {content: ''; // 必须设置内容，否则伪元素不会显示position: absolute;top: 0; // 从父容器的顶部开始bottom: 0; // 延伸到父容器的底部left: 24rpx; // 根据需要调整位置width: 1rpx; // 线条的宽度border-left: 1rpx dashed #595F67; // 使用边框来创建虚线效果}}.mdd {&:before {content: ''; // 必须设置内容，否则伪元素不会显示position: absolute;top: -16rpx; // 从父容器的顶部开始height: 20rpx;left: 24rpx; // 根据需要调整位置width: 1rpx; // 线条的宽度border-left: 1rpx dashed #595F67; // 使用边框来创建虚线效果}}&-since {width: 36rpx;height: 36rpx;padding: 10rpx;color: #fff;background: #1E33F2;border-radius: 8rpx;display: flex;align-items: center;z-index: 2;}&-orders {width: 36rpx;height: 36rpx;padding: 10rpx;color: #fff;background: #FF8938;border-radius: 8rpx;display: flex;align-items: center;z-index: 2;}&-xxdz {color: #595F67;margin-left: 10rpx;padding-bottom: 30rpx;}.xxdz {border-bottom: 1rpx solid #D0D3D8;}}
<style>