移动端CSS实现小程序竖向步骤条

在移动端实现小程序的竖向步条，可以使用HTML和CSS来创建。以下是一个简单的示例代码：

HTML:

<div class="step-container">
  <div class="step active">第一步</div>
  <div class="step">第二步</div>
  <div class="step">第三步</div>
  <div class="step">第四步</div>
</div>

CSS:

.step-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.step {
  width: 80%;
  height: 40px;
  line-height: 40px;
  border: 1px solid #ccc;
  text-align: center;
  color: #333;
  margin-bottom: 10px;
}
 
.active {
  color: #fff;
  background-color: #09BB07;
  border-color: #09BB07;
}

在这个示例中，.step-container 是一个竖直方向的步条容器，它使用了flexbox布局的 flex-direction: column 属性来实现垂直排列。每个步条项 .step 使用了固定的宽度和高度，并且可以通过添加 .active 类来标识当前激活的步条，从而改变其样式以反映当前进度。