vue手写竖直步骤条

vue手写竖直步骤条

先看效果图：

css部分：

html部分：

 <div id="app">
      <div>
        <div class="li1" v-for="(item,index) in list" :key="index">
          <div v-if="item.status===2">
            <div class="node node1">{{item.node}}div>
            <div class="borderLeft borderLeft1">div>
          div>
          <div v-else-if="item.status===0">
            <div class="node node2">{{item.node}}div>
            <div class="borderLeft borderLeft1">div>
          div>
          <div v-else>
            <div class="node">{{item.node}}div>
            <div class="borderLeft">div>
          div>
          <div class="two">
            <div class="name">{{item.name}}div>
            <div class="time">{{item.time}}div>
          div>
          <div class="advice">{{item.advice}}div>
        div>
      div>
    div>

js部分：

 <script>
      var app = new Vue({
        el: "#app",
        data: {
          list: [
            {
              node: "起草节点",
              name: "张三",
              time: "12:00",
              status: 1,
              advice: "",
            },
            {
              node: "起草节点",
              name: "张三",
              time: "12:00",
              status: 1,
              advice: "",
            },
            {
              node: "计划组",
              name: "小红",
              time: "12:00",
              status: 2,
              advice: "审批意见：不通过",
            },
            {
              node: "负责人",
              name: "",
              time: "",
              status: 0,
              advice: "",
            },
            {
              node: "审批结束",
              name: "",
              time: "",
              status: 0,
              advice: "",
            },
          ],
        },
      });
    </script>