写一个element UI风格的步骤条组件html代码

以下是一个基本的Element UI风格的步骤条组件的HTML代码示例：

<template>
  <div class="step-bar">
    <el-steps :active="activeStep" align-center>
      <el-step v-for="(step, index) in steps" :key="index" :title="step.title"></el-step>
    </el-steps>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeStep: 0, // 当前激活的步骤
      steps: [
        { title: '步骤一' },
        { title: '步骤二' },
        { title: '步骤三' }
      ]
    };
  }
};
</script>

<style scoped>
.step-bar {
  margin: 20px;
}
</style>

在上述代码中，我们使用Element UI的el-steps组件来创建步骤条。active属性用于指定当前激活的步骤，align-center属性用于居中对齐步骤。使用v-for指令遍历steps数组来渲染每一个步骤，el-step组件的title属性用于显示步骤的标题。

你可以在data中定义activeStep来控制当前激活的步骤，steps数组用于定义所有的步骤。

最后，我们使用scoped属性将样式限定在组件的范围内，并设置了一个简单的外边距样式。你可以根据需要自定义样式