css实现圆点竖向步骤条

         <div class="steps-container" v-if="reInvoiceProcesses.length">
            <div :class="index===0?'step active':'step'" v-for="(item, index) in reInvoiceProcesses" :key="index" class="historyBox" >
              <div class="dot"></div>
              <div class="content"> <div class="time">{{ `${item.time}` }}</div>  <div class="hbItem">{{ `${item.processType}` }}</div>
              <div v-if="item.failReason" class="note">{{ item.failReason }}</div></div>
              <div class="line"></div>
            </div>
          </div>

.steps-container {
  position: relative;
  padding-left: 30px; /* 圆点与内容间距 */
}

.step {
  position: relative;
  padding: 15px 0;
}

.dot {
  width: 6px;
  height: 6px;
  background: #e0e0e0;
  border-radius: 50%;
  position: absolute;
  left: -23px; /* 对齐左侧 */
  top: 30%;
  transform: translateY(-50%);
  z-index: 2;
}

.line {
  position: absolute;
  left: -21px; /* 对齐圆点中心 */
  top: 40px; /* 圆点直径 + 边距 */
  bottom: -15px;
  width: 2px;
  background: #e0e0e0;
  z-index: 1;
}

/* 最后一步隐藏竖线 */
.step:last-child .line {
  display: none;
}

/* 激活状态 */
.step.active .dot {
  background: #007bff;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.2);
}
.step.active .line {
  // background: linear-gradient(to bottom, #007bff 50%, #e0e0e0 50%);
}