写一个个性简约风格的步骤条组件代码

以下是一个基于个性简约风格的步骤条组件的代码示例：

HTML:

<div class="step-container">
  <div class="step active">
    <span class="step-number">1</span>
    <span class="step-label">Step 1</span>
  </div>
  <div class="step">
    <span class="step-number">2</span>
    <span class="step-label">Step 2</span>
  </div>
  <div class="step">
    <span class="step-number">3</span>
    <span class="step-label">Step 3</span>
  </div>
</div>

CSS:

.step-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step.active .step-number {
  background-color: #3498db;
  color: #fff;
}

.step.active .step-label {
  color: #3498db;
}

.step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

.step-label {
  font-size: 14px;
  margin-top: 5px;
  color: #777;
}

JavaScript:

// 获取所有的步骤条元素
const steps = document.querySelectorAll('.step');

// 为每个步骤条元素添加点击事件监听器
steps.forEach((step, index) => {
  step.addEventListener('click', () => {
    // 移除所有步骤条的 active 类名
    steps.forEach((step) => {
      step.classList.remove('active');
    });
    
    // 将当前步骤及之前的步骤添加 active 类名
    for(let i = 0; i <= index; i++) {
      steps[i].classList.add('active');
    }
  });
});

这个步骤条组件采用了简约风格的设计，步骤条由一系列的步骤组成，每个步骤都有一个编号和标签。点击步骤条可以切换当前步骤及之前的步骤的状态，当前步骤和之前的步骤会显示为激活状态，后续步骤则为非激活状态。你可以根据需求自定义步骤条的样式，包括颜色、大小等