[JavaScript知识库]vue手写竖直步骤条

vue手写竖直步骤条

先看效果图：

css部分：

    <style>
      #app {
        margin-left: 8px;
      }

      .li1 {
        list-style: none;
        box-sizing: border-box;
        padding-left: 20px;
        position: relative;
      }

      .borderLeft {
        width: 2px;
        height: 100%;
        background-color: #0091ff;
        position: absolute;
        top: 11.225px;
        bottom: 0;
        left: -1px;
      }

      .borderLeft1 {
        background-color: #e6e6e6;
      }

      .node::before {
        z-index: 1;
        content: "";
        background-color: #0091ff;
        width: 20px;
        height: 20px;
        color: #fff;
        position: absolute;
        border-radius: 50%;
        left: 0;
        top: 11.225px;
        transform: translate(-50%, -50%);
      }

      .node {
        font-size: 16px;
        line-height: 22.5px;
        font-weight: 500;
        color: #20a0ff;
      }

      .node1 {
        color: #ff3b30;
      }

      .node1::before {
        background-color: #ff3b30;
      }

      .node2 {
        color: #000;
      }

      .node2::before {
        background-color: #e6e6e6;
        width: 10px;
        height: 10px;
      }

      .name {
        width: 50px;
        padding: 10px 40px 20px 0;
        color: #333333;
      }

      .time {
        color: #666666;
        font-size: 15px;
      }

      .two {
        display: flex;
        align-items: baseline;
      }

      .advice {
        font-size: 14px;
        color: #999999;
        padding-bottom: 20px;
      }

      .li1:last-child .borderLeft {
        display: none;
      }
    </style>

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>