尼玛

.eslintrc.js

@@ -51,5 +51,6 @@ module.exports = {
     utils: true,
     useSizeAdapt: true,
     defineProps: true,
+    defineEmits: true,
   }
 }

src/App.vue

@@ -1,22 +1,10 @@
 <template>
-  <div class="app-view">
-    <h1>{{ title }}</h1>
-    <progress-comp
-      class="progress"
-      :cur-idx="curStep"
-    />
-    <div class="test" />
-    <router-view />
-
-    <tool-list class="tool-list" />
-  </div>
+  <router-view />
 </template>
 
 <script setup>
 // import { onClickOutside } from '@vueuse/core'
 import { computed, inject, ref } from 'vue'
-import ProgressComp from "@/components/ProgressComp.vue"
-import ToolList from "@/components/ToolList.vue"
 
 const {
   windowSizeInCssForRef,
@@ -25,13 +13,6 @@ const {
 
 inject('$uaInfo')
 inject('$env')
-
-const curStep = ref(0)
-
-const title = computed(() => {
-  return config.stepList[curStep.value].name
-})
-
 </script>
 
 <style lang="less">
@@ -104,50 +85,4 @@ input, textarea {
 // .viewer-backdrop {
 //   background-color: rgba(0, 0, 0, 90%) !important;
 // }
-</style>
-
-<style lang="less" scoped>
-.app-view{
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-image: url(/src/assets/images/bg.jpg);
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center center;
-  >h1{
-    position: absolute;
-    top: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
-    left: 50%;
-    transform: translateX(-50%);
-    font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    font-family: Source Han Serif CN-Bold, Source Han Serif CN;
-    font-weight: bold;
-    color: #FFFFFF;
-    line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-  }
-  >.progress{
-    position: absolute;
-    left: 50%;
-    top: calc(64 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    width: calc(328 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
-    transform: translateX(-50%);
-  }
-  >.test{
-    position: absolute;
-    left: 50%;
-    top: calc(314 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    transform: translate(-50%, -50%);
-    width: calc(328 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
-    background-color: #fff;
-  }
-  >.tool-list{
-    position: absolute;
-    width: 100%;
-    bottom: 34px;
-  }
-}
 </style>

src/components/ToolList.vue

@@ -1,67 +1,70 @@
 <template>
   <div class="tool-list">
-    <ul
-      ref="toolListEl"
-      @scroll="onToolListElScroll"
-      @touchmove.prevent
-    >
-      <li
-        v-for="toolItem in toolList"
-        :key="toolItem.name"
+    <h3>请在下方选择正确的工具（{{ selectedToolNum }}/{{ requiredToolList.length }}）</h3>
+    <div class="wrapper">
+      <ul
+        ref="toolListEl"
+        @scroll="onToolListElScroll"
       >
-        <div
-          class="tool-frame"
-          :class="{
-            active: toolItem.selected,
-          }"
+        <!-- @touchmove.prevent -->
+        <li
+          v-for="(toolItem, idx) in toolList"
+          :key="toolItem.name"
+          @click="onClickToolItem(idx)"
         >
-          <img
-            class=""
+          <div
+            class="tool-frame"
             :class="{
               active: toolItem.selected,
             }"
-            :src="toolItem.url"
-            alt=""
-            draggable="false"
           >
-        </div>
-        <span
-          class="tool-name"
-          :class="{
-            active: toolItem.selected,
-          }"
-        >{{ toolItem.name }}</span>
-      </li>
-    </ul>
-    <button
-      v-show="isShowLeftArrow"
-      class="arrow-left"
-      @click="onClickLeftArrow"
-    >
-      <img
-        class=""
-        src="@/assets/images/arrow-left.png"
-        alt=""
-        draggable="false"
+            <img
+              class=""
+              :class="{active: toolItem.selected,
+              }"
+              :src="toolItem.url"
+              alt=""
+              draggable="false"
+            >
+          </div>
+          <span
+            class="tool-name"
+            :class="{
+              active: toolItem.selected,
+            }"
+          >{{ toolItem.name }}</span>
+        </li>
+      </ul>
+      <button
+        v-show="isShowLeftArrow"
+        class="arrow-left"
+        @click="onClickLeftArrow"
       >
-    </button>
-    <button
-      v-show="isShowRightArrow"
-      class="arrow-right"
-      @click="onClickRightArrow"
-    >
-      <img
-        class=""
-        src="@/assets/images/arrow-right.png"
-        alt=""
-        draggable="false"
+        <img
+          class=""
+          src="@/assets/images/arrow-left.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+      <button
+        v-show="isShowRightArrow"
+        class="arrow-right"
+        @click="onClickRightArrow"
       >
-    </button>
+        <img
+          class=""
+          src="@/assets/images/arrow-right.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, watch } from "vue"
+import { ref, watch, computed } from "vue"
 import penUrl from '@/assets/images/pen.png'
 import knifeUrl from '@/assets/images/knife.png'
 import paintUrl from '@/assets/images/paint.png'
@@ -71,6 +74,14 @@ import copyingPaperUrl from '@/assets/images/copying-paper.png'
 import rubberBoardUrl from '@/assets/images/rubber-board.png'
 import engravingPaperUrl from '@/assets/images/engraving-paper.png'
 
+const props = defineProps(['requiredToolList'])
+const emit = defineEmits(['all-selected'])
+
+const requiredToolList = computed(() => {
+  return props.requiredToolList
+})
+
+
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
@@ -79,7 +90,7 @@ const {
 const toolList = ref([
   {
     name: '笔',
-    selected: true,
+    selected: false,
     url: penUrl,
   },
   {
@@ -119,6 +130,24 @@ const toolList = ref([
   },
 ])
 
+const selectedToolNum = computed(() => {
+  return toolList.value.filter((item) => {
+    return item.selected
+  }).length
+})
+
+watch(selectedToolNum, (vNew) => {
+  if (vNew === requiredToolList.value.length) {
+    emit('all-selected')
+  }
+})
+
+watch(requiredToolList, () => {
+  toolList.value.forEach((item) => {
+    item.selected = false
+  })
+})
+
 const toolListEl = ref(null)
 const isShowLeftArrow = ref(false)
 const isShowRightArrow = ref(true)
@@ -140,82 +169,107 @@ function onClickLeftArrow() {
 function onClickRightArrow() {
   toolListEl.value.scrollLeft += toolListEl.value.scrollWidth / 8
 }
+
+function onClickToolItem(idx) {
+  if (requiredToolList.value.includes(idx)) {
+    if (toolList.value[idx].selected === false) {
+      toolList.value[idx].selected = true
+      window.alert('选择正确')
+    }
+  } else {
+    window.alert('您拿错工具了~请重新选择')
+  }
+}
+
 </script>
 
 <style lang="less" scoped>
 .tool-list{
-  >ul{
-    display: flex;
-    overflow: auto;
-    &::-webkit-scrollbar { height: 0; };
-    >li{
-      flex: 0 0 auto;
-      display: inline-block;
-      text-align: center;
-      margin-right: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
-      >.tool-frame{
-        width: calc(83 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        height: calc(83 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        background: rgba(255,255,255,0.3);
-        border-radius: 2px 2px 2px 2px;
-        border: 1px solid #FFFFFF;
-        margin-bottom: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
-        position: relative;
-        >img{
-          position: absolute;
-          left: 0;
-          bottom: 0;
-          width: 100%;
-          height: 100%;
+  >h3{
+    text-align: center;
+    font-size: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #FFFFFF;
+    line-height: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    margin-bottom: calc(9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  >.wrapper{
+    position: relative;
+    >ul{
+      display: flex;
+      overflow: auto;
+      padding-top: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      &::-webkit-scrollbar { height: 0; };
+      >li{
+        flex: 0 0 auto;
+        display: inline-block;
+        text-align: center;
+        margin-right: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+        >.tool-frame{
+          width: calc(83 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          height: calc(83 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          background: rgba(255,255,255,0.3);
+          border-radius: 2px 2px 2px 2px;
+          border: 1px solid #FFFFFF;
+          margin-bottom: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+          position: relative;
+          >img{
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100%;
+          }
+          >img.active{
+            width: 125%;
+            height: 125%;
+          }
         }
-        >img.active{
-          width: 125%;
-          height: 125%;
+        >.tool-frame.active{
+          border: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) solid #FFE096;
+        }
+        >span{
+          font-size: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+          font-weight: 400;
+          color: #FFFFFF;
+          line-height: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+        >span.active{
+          font-size: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+          font-weight: bold;
+          color: #FFE096;
+          line-height: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         }
       }
-      >.tool-frame.active{
-        border: 4px solid #FFE096;
-      }
-      >span{
-        font-size: 14px;
-        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-        font-weight: 400;
-        color: #FFFFFF;
-        line-height: 16px;
+      >li:first-of-type{
+        margin-left: calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
       }
-      >span.active{
-        font-size: 14px;
-        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
-        font-weight: bold;
-        color: #FFE096;
-        line-height: 16px;
+      >li:last-of-type{
+        margin-right: calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
       }
     }
-    >li:first-of-type{
-      margin-left: calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
-    }
-    >li:last-of-type{
-      margin-right: calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
-    }
-  }
-  >button.arrow-left{
-    position: absolute;
-    left: calc(8 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
-    top: calc(42.5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    transform: translateY(-50%);
-    height: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
-    >img{
-      height: 100%;
+    >button.arrow-left{
+      position: absolute;
+      left: calc(8 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+      top: 50%;
+      transform: translateY(-50%);
+      height: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+      >img{
+        height: 100%;
+      }
     }
-  }
-  >button.arrow-right{
-    position: absolute;
-    right: calc(8 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    top: calc(42.5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    transform: translateY(-50%);
-    height: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
-    >img{
-      height: 100%;
+    >button.arrow-right{
+      position: absolute;
+      right: calc(8 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      top: 50%;
+      transform: translateY(-50%);
+      height: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+      >img{
+        height: 100%;
+      }
     }
   }
 }

src/config.js

@@ -2,21 +2,30 @@ export default {
   stepList: [
     {
       name: '完成线稿',
+      toolIdxList: [0],
     },
     {
       name: '将线稿复写至胶板上',
+      toolIdxList: [5, 6],
+      hasToolOrder: false,
     },
     {
       name: '雕刻胶版',
+      toolIdxList: [1],
     },
     {
       name: '用滚筒将颜料铺平',
+      toolIdxList: [2, 3],
+      hasToolOrder: true,
     },
     {
       name: '蒙上版画纸，用木蘑菇压实',
+      toolIdxList: [4, 7],
+      hasToolOrder: true,
     },
     {
       name: '完成转印',
+      toolIdxList: [],
     },
   ]
 }

src/router/index.js

@@ -1,12 +1,6 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import StartView from "@/views/StartView.vue"
-import StepOne from "@/views/StepOne.vue"
-import StepTwo from "@/views/StepTwo.vue"
-import StepThree from "@/views/StepThree.vue"
-import StepFour from "@/views/StepFour.vue"
-import StepFive from "@/views/StepFive.vue"
-import StepSix from "@/views/StepSix.vue"
-import StepSeven from "@/views/StepSeven.vue"
+import DrawView from "@/views/DrawView.vue"
 
 // import store from '@/store/index.js'
 
@@ -17,40 +11,10 @@ const routes = [
     component: StartView,
   },
   {
-    path: '/step-one',
-    name: 'StepOne',
-    component: StepOne,
-  },
-  {
-    path: '/step-two',
-    name: 'StepTwo',
-    component: StepTwo,
-  },
-  {
-    path: '/step-three',
-    name: 'StepThree',
-    component: StepThree,
-  },
-  {
-    path: '/step-four',
-    name: 'StepFour',
-    component: StepFour,
-  },
-  {
-    path: '/step-five',
-    name: 'StepFive',
-    component: StepFive,
-  },
-  {
-    path: '/step-six',
-    name: 'StepSix',
-    component: StepSix,
-  },
-  {
-    path: '/step-seven',
-    name: 'StepSeven',
-    component: StepSeven,
-  },
+    path: '/draw',
+    name: 'DrawView',
+    component: DrawView,
+  }
 ]
 
 const router = createRouter({

src/views/DrawView.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="draw-view">
+    <h1>{{ currentStepInfo.name }}</h1>
+    <progress-comp
+      class="progress"
+      :cur-idx="curStepIdx"
+    />
+    <StepView1
+      v-if="curStepIdx === 0"
+      :can-work="canWork"
+      @work-begin="onWorkBegin"
+      @done="onWorkDone"
+    />
+    <StepView2
+      v-if="curStepIdx === 1"
+      :can-work="canWork"
+      @work-begin="onWorkBegin"
+      @done="onWorkDone"
+    />
+    <StepView3
+      v-if="curStepIdx === 2"
+      :can-work="canWork"
+      @work-begin="onWorkBegin"
+      @done="onWorkDone"
+    />
+    <StepView4
+      v-if="curStepIdx === 3"
+      :can-work="canWork"
+      @work-begin="onWorkBegin"
+      @done="onWorkDone"
+    />
+    <StepView5
+      v-if="curStepIdx === 4"
+      :can-work="canWork"
+      @work-begin="onWorkBegin"
+      @done="onWorkDone"
+    />
+    <StepView6
+      v-if="curStepIdx === 5"
+      :can-work="canWork"
+      @work-begin="onWorkBegin"
+      @done="onWorkDone"
+    />
+
+    <tool-list
+      v-show="workState === 'init'"
+      class="tool-list"
+      :required-tool-list="currentStepInfo.toolIdxList"
+      @all-selected="onAllToolSelected"
+    />
+    <button
+      v-show="workState === 'done'"
+      class="next"
+      @click="onClickNext"
+    >
+      下一步
+    </button>
+  </div>
+</template>
+
+<script setup>
+// import { onClickOutside } from '@vueuse/core'
+import { computed, inject, ref, nextTick } from 'vue'
+import ProgressComp from "@/components/ProgressComp.vue"
+import ToolList from "@/components/ToolList.vue"
+import StepView1 from "@/views/StepView1.vue"
+import StepView2 from "@/views/StepView2.vue"
+import StepView3 from "@/views/StepView3.vue"
+import StepView4 from "@/views/StepView4.vue"
+import StepView5 from "@/views/StepView5.vue"
+import StepView6 from "@/views/StepView6.vue"
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+inject('$uaInfo')
+inject('$env')
+
+const curStepIdx = ref(0)
+
+const currentStepInfo = computed(() => {
+  return config.stepList[curStepIdx.value]
+})
+
+function onAllToolSelected() {
+  canWork.value = true
+}
+
+const canWork = ref(false)
+const workState = ref('init') // init, working, done
+function onWorkBegin() {
+  workState.value = 'working'
+}
+function onWorkDone() {
+  console.log('done!!!')
+  workState.value = 'done'
+}
+
+function onClickNext() {
+  workState.value = 'init'
+  curStepIdx.value++
+  canWork.value = false
+}
+</script>
+
+<style lang="less">
+// html, body {
+//   overscroll-behavior: none;
+//   overflow: hidden;
+// }
+
+* {
+  user-select: none;
+  -webkit-touch-callout: none;
+}
+
+#app {
+  height: 100%;
+}
+
+// 360浏览器不支持not()
+input, textarea {
+  user-select: initial;
+}
+
+// 字体
+// @font-face {
+//   font-family: 'Source Han Serif CN';
+//   src: url('@/assets/style/SourceHanSerifCN-Regular.otf');
+// }
+// @font-face {
+//   font-family: 'Source Han Serif CN-Bold';
+//   src: url('@/assets/style/SourceHanSerifCN-Bold.otf');
+// }
+// i {
+//   font-style: italic;
+// }
+
+// 滚动条
+// ::-webkit-scrollbar { background: #dddecc; width: 0.3rem; height: 0.3rem; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+// ::-webkit-scrollbar-thumb { background: #828a5b; border-radius: 0.15rem; }
+// ::-webkit-scrollbar-corner { background: #dddecc; }
+
+// vue组件过渡效果
+.fade-out-leave-active {
+  transition: opacity 1s;
+}
+.fade-out-leave-to {
+  opacity: 0;
+}
+
+// 不断渐变显隐 animation
+.animation-show-hide {
+  animation: show-hide 1.8s infinite;
+}
+@keyframes show-hide {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+// // vue-viewer
+// .viewer-container {
+//   background-color: rgba(0, 0, 0, 80%) !important;
+// }
+// 或者
+// .viewer-backdrop {
+//   background-color: rgba(0, 0, 0, 90%) !important;
+// }
+</style>
+
+<style lang="less" scoped>
+.draw-view{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url(/src/assets/images/bg.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  >h1{
+    position: absolute;
+    top: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    font-family: Source Han Serif CN-Bold, Source Han Serif CN;
+    font-weight: bold;
+    color: #FFFFFF;
+    line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  >.progress{
+    position: absolute;
+    left: 50%;
+    top: calc(64 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: calc(328 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+    transform: translateX(-50%);
+  }
+  >.tool-list{
+    position: absolute;
+    width: 100%;
+    bottom: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  >button.next{
+    position: absolute;
+    left: 50%;
+    bottom: calc(87 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translateX(-50%);
+    width: calc(187 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+    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'));
+    text-shadow: 0px -1px 1px #FFF2AC;
+    height: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+    background-image: url(@/assets/images/btn-short-bright.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+}
+</style>

src/views/StartView.vue

@@ -13,7 +13,7 @@
       draggable="false"
     >
     <div class="btn-group">
-      <button @click="$router.push({name: 'StepOne'})">
+      <button @click="$router.push({name: 'DrawView'})">
         体验版画过程
       </button>
       <button>分享</button>

src/views/StepOne.vue

@@ -1,14 +0,0 @@
-<template>
-  <div />
-</template>
-
-<script setup>
-const {
-  windowSizeInCssForRef,
-  windowSizeWhenDesignForRef,
-} = useSizeAdapt()
-</script>
-
-<style lang="less" scoped>
-
-</style>

src/views/StepTwo.vue

@@ -1,12 +0,0 @@
-<template>
-  <div>
-    setp1!!!!
-  </div>
-</template>
-
-<script setup>
-</script>
-
-<style lang="less" scoped>
-
-</style>

src/views/StepView1.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="working-area">
+    <img
+      class="effect effect-begin"
+      src="@/assets/images/step-0-final.png"
+      alt=""
+      draggable="false"
+    >
+    <video
+      v-show="state === 'working' || state === 'done'"
+      ref="videoRef"
+      src="@/assets/videos/step-1.mp4"
+      playsinline
+      webkit-playsinline="true"
+      muted
+      @ended="state = 'done'"
+    />
+    <!-- <img
+      v-show="state === 'done'"
+      class="effect effect-begin"
+      src="@/assets/images/step-1-final.png"
+      alt=""
+      draggable="false"
+    > -->
+  </div>
+</template>
+
+<script setup>
+import { watchArray } from "@vueuse/core"
+import { ref, computed, watch } from "vue"
+
+const props = defineProps(['canWork'])
+const emit = defineEmits(['work-begin', 'done'])
+const videoRef = ref(null)
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const state = ref('init') // init, working, done
+watch(state, (vNew) => {
+  if (vNew === 'working') {
+    emit('work-begin')
+    videoRef.value.play()
+  } else if (vNew === 'done') {
+    console.log('emitting done...')
+    emit('done')
+  }
+})
+
+
+const canWork = computed(() => {
+  return props.canWork
+})
+watch(canWork, (vNew) => {
+  if (vNew) {
+    setTimeout(() => {
+      state.value = 'working'
+    }, 500)
+  }
+})
+
+</script>
+
+<style lang="less" scoped>
+.working-area{
+  position: absolute;
+  left: 50%;
+  top: calc(314 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  transform: translate(-50%, -50%);
+  width: calc(328 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+  >img.effect{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+  >video{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/StepView2.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="working-area">
+    <!-- <img
+      v-show="isRubberBoardSelected"
+      class="effect effect-2"
+      src="@/assets/images/rubber-board-big.png"
+      alt=""
+      draggable="false"
+    > -->
+    <img
+      class="effect effect-1"
+      src="@/assets/images/step-1-final.png"
+      alt=""
+      draggable="false"
+    >
+
+    <video
+      v-show="state === 'working' || state === 'done'"
+      ref="videoRef"
+      src="@/assets/videos/step-2.mp4"
+      playsinline
+      webkit-playsinline="true"
+      muted
+      @ended="state = 'done'"
+    />
+  </div>
+</template>
+
+<script setup>
+import { watchArray } from "@vueuse/core"
+import { ref, computed, watch } from "vue"
+
+const props = defineProps(['canWork'])
+const emit = defineEmits(['work-begin', 'done'])
+const videoRef = ref(null)
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const state = ref('init') // init, working, done
+watch(state, (vNew) => {
+  if (vNew === 'working') {
+    emit('work-begin')
+    videoRef.value.play()
+  } else if (vNew === 'done') {
+    console.log('emitting done...')
+    emit('done')
+  }
+})
+
+
+const canWork = computed(() => {
+  return props.canWork
+})
+watch(canWork, (vNew) => {
+  if (vNew) {
+    setTimeout(() => {
+      state.value = 'working'
+    }, 500)
+  }
+})
+
+</script>
+
+<style lang="less" scoped>
+.working-area{
+  position: absolute;
+  left: 50%;
+  top: calc(314 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  transform: translate(-50%, -50%);
+  width: calc(328 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+  >img.effect{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+  >video{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>