el-steps 竖向 标题和描述分别在步骤条两边

如果您想要将 `el-steps` 组件显示为竖向的步骤条，并且让步骤标题和描述分别显示在步骤条的左侧和右侧，可以使用 `slot` 来自定义步骤的内容。具体做法是在 `el-step` 中使用 `template` 标签来定义标题和描述的模板，并在模板中使用 `div` 标签来包裹标题和描述。

以下是示例代码：

<template>
  <el-steps :active="activeStep" space="100px" direction="vertical" style="height: 300px;">
    <el-step v-for="(item, index) in steps" :key="index">
      <template #title>
        <div class="step-title">{{ item.title }}</div>
      </template>
      <template #description>
        <div class="step-description">{{ item.description }}</div>
      </template>
      {{ item.content }}
    </el-step>
  </el-steps>
</template>

<script>
export default {
  data() {
    return {
      activeStep: 0,
      steps: [
        {
          title: '步骤 1',
          description: '这里是步骤 1 的描述',
          content: '这里是步骤 1 的内容',
        },
        {
          title: '步骤 2',
          description: '这里是步骤 2 的描述',
          content: '这里是步骤 2 的内容',
        },
        {
          title: '步骤 3',
          description: '这里是步骤 3 的描述',
          content: '这里是步骤 3 的内容',
        },
      ],
    };
  },
};
</script>

<style>
.step-title {
  font-weight: bold;
  margin-bottom: 10px;
}
.step-description {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}
.el-step {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-step__head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.el-step__main {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
</style>

在上面的代码中，我们在 `el-step` 中使用了 `template` 标签来定义标题和描述的模板，并分别使用了 `div` 标签来包裹标题和描述。在样式中，我们使用了 `flex` 布局来实现标题和描述分别显示在步骤条的左侧和右侧。同时，我们也设置了每个步骤的高度为 `100px`，可以根据实际情况进行调整。