html
<view class="record">
<view class="record_list">
<view class="record_line">
<view class="dot"></view>
<view class="line"></view>
</view>
<view class="record_con">
<view class="record_time">2021/12/13 12:00:00</view>
<view class="record_txt">佛手柑橘处理了《流程审批系统2.0》有BUG报错该条工单。佛手柑橘处理了《流程审批系统2.0》有BUG报 错该条工单。佛手柑橘处理了《流程审批系统2.0》有BUG报错该条工单。</view>
</view>
</view>
<view class="record_list">
<view class="record_line">
<view class="dot"></view>
<view class="line" v-if="false"></view>
</view>
<view class="record_con">
<view class="record_time">2021/12/13 12:00:00</view>
<view class="record_txt">佛手柑橘处理了《流程审批系统2.0》有BUG报错该条工单。</view>
</view>
</view>
</view>
css
<style scoped lang="scss">
.record{
padding:132rpx 48rpx 40rpx;
background:#f6f6f6;
min-height:100vh;
box-sizing: border-box;
.record_list{
display: flex;
.record_line{
.dot{
width: 24rpx;
height: 24rpx;
border: 1px solid #D60011;
border-radius: 50%;
position:relative;
&::after{
content:'';
display: block;
width: 12rpx;
height: 12rpx;
background: #D60011;
border-radius: 50%;
position:absolute;
top:6rpx;
left:6rpx;
}
}
.line{
width: 2rpx;
background-color: #D60011;
margin:0 auto;
height: calc(100% - 26rpx);
}
}
.record_con{
margin-left:20rpx;
padding-bottom:32rpx;
.record_time{
color: #666666;
font-size:24rpx;
font-weight: 400;
}
.record_txt{
margin-top:18rpx;
width: 580rpx;
background: #FFFFFF;
border-radius: 8rpx;
padding:32rpx;
box-sizing: border-box;
font-size:28rpx;
font-weight: 400;
color:#111;
}
}
}
}
</style>
效果
