主要流程已打通

src/views/DrawView.vue

@@ -41,6 +41,15 @@
     >
       下一步
     </button>
+    <div
+      v-show="curStepIdx === 5"
+      class="btn-group"
+    >
+      <button @click="onClickReplay">
+        重新体验
+      </button>
+      <button>分享</button>
+    </div>
   </div>
 </template>
 
@@ -78,6 +87,14 @@ function onClickNext() {
     item.selected = false
   })
 }
+
+function onClickReplay() {
+  workState.value = 'init'
+  curStepIdx.value = 0
+  toolList.value.forEach((item) => {
+    item.selected = false
+  })
+}
 </script>
 
 <style lang="less" scoped>
@@ -132,5 +149,36 @@ function onClickNext() {
     background-repeat: no-repeat;
     background-position: center center;
   }
+  >.btn-group{
+    position: absolute;
+    bottom: calc(52 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    >button{
+      flex: 0 0 auto;
+      font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: Source Han Serif CN-Bold, Source Han Serif CN;
+      font-weight: bold;
+      color: #484238;
+      line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+    }
+    >button:first-of-type{
+      background-image: url(@/assets/images/btn-long-dark.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      width: calc(186 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+    >button:last-of-type{
+      background-image: url(@/assets/images/btn-short-bright.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      width: calc(144 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+    }
+  }
 }
 </style>