<template>
  <div class="step">
    <el-steps direction="vertical" :active="stapesDate.length">
      <el-step v-for="i in stapesDate" :title="i.activityName">
        <template #description>
          <div class="direction">时间:{{ i.endTime }}</div>
          <div class="direction">分配人:{{ i.assigneeName }}</div>
          <div class="direction">任务备注:{{ i.comment }}</div>
        </template>
      </el-step>
    </el-steps>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const stapesDate = ref([
  {
    activityName: 'xxxx',
    endTime: '2023-10-24',
    assigneeName: 'xxxx',
    comment: 'xxx',
  },
  {
    activityName: 'xxxx',
    endTime: '2023-10-24',
    assigneeName: 'xxxx',
    comment: 'xxx',
  },
]);
onMounted(() => {});
</script>

<style lang="scss" scoped>
.step {
  padding-left: 30px;
}
</style>