vue自定义步骤行程条

<template>
  <div>
    <div class=" steps">
      <div class=" stepsRightBox">
        <!-- 跟随的样式 -->
        <div class="stepsLine">
          <!-- 圆点,可以改为图片 -->
          <i></i>
          <!-- 虚线,可以改为实线 -->
          <div></div>
        </div>
        <!-- 右边,用于写内容 -->
        <div class="stepsRight">
          哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
     
     };
</script>

<style lang="less">
.steps {
     
     
  padding: 0 20px;
  margin-top: 42px;
  // 实现思路,大盒子嵌套竖线与文字内容放入
  // 竖线百分百,利用文字内容撑开的高度,为了超出内容高度
  // 所以在内容高度价格外边距延长
  .stepsRightBox {
     
     
    display: flex;
    .stepsRight {
     
     
      width: 100%;
      margin-bottom: 20px;//这个用于样式线条延长
      padding: 16px 20px;
      font-size: 24px;
      font-weight: 400;
      color: #666666;
      border-radius: 8px;
      background: #eef7fe;
    }
    .stepsLine {
     
     
      margin-right: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      // 圆点
      i {
     
     
        width: 14px;
        height: 14px;
        background: #3f87e3;
        border-radius: 50%;
        display: block;
      }
      div {
     
     
       // 竖线
        margin-top: 10px;
        height: 100%;
        border-left: 2px dotted #3f87e3;//可以改为实线或者其他颜色
      }
    }
  }
}
</style>

效果