随手拍改造完成

src/components/AiStep/AiStep.vue

@@ -0,0 +1,79 @@
+<template>
+  <section class="AiStep flex start" :class="{active:!!index&&active==index}">
+    <div class="leftPane mar-r32">
+      <div class="num" v-text="stepIndex"/>
+      <div v-if="!isLast" class="stepLine fill"/>
+    </div>
+    <div class="fill">
+      <slot/>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiStep",
+  inject: ['activeStep'],
+  props: {
+    index: {default: null},
+  },
+  computed: {
+    active: v => v.activeStep,
+    stepIndex: v => {
+      const index = v.$parent.items.findIndex(e => e == v._uid)
+      return index > -1 ? index + 1 : ""
+    },
+    isLast: v => v.$parent.items.length == v.stepIndex
+  },
+  created() {
+    this.$parent.items.splice(this.index, 0, this._uid)
+  },
+  destroyed() {
+    const index = this.$parent.items.findIndex(e => e == this._uid)
+    this.$parent.items.splice(index, 1)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiStep {
+  width: 100%;
+  font-size: 28px;
+  position: relative;
+
+  .leftPane {
+    width: 32px;
+
+    .num {
+      color: #333;
+      height: 32px;
+      width: 32px;
+      font-size: 28px;
+      line-height: 32px;
+      text-align: center;
+      border: 4px solid #CCCCCC;
+      border-radius: 50%;
+    }
+
+    .stepLine {
+      position: absolute;
+      top: 40px;
+      bottom: 0;
+      width: 4px;
+      left: 20px;
+      transform: translateX(-50%);
+      background: #eee;
+    }
+  }
+
+  &.active {
+    .leftPane {
+      .num {
+        background: #26f;
+        border-color: #26f;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>