搞搞搞搞个大新闻

src/router/index.js

@@ -14,7 +14,7 @@ const routes = [
     path: '/draw',
     name: 'DrawView',
     component: DrawView,
-  }
+  },
 ]
 
 const router = createRouter({

src/views/DrawView.vue

@@ -27,16 +27,15 @@
     />
     <StepView6
       v-if="curStepIdx === 5"
-      :required-tool-list="currentStepInfo.toolIdxList"
     />
 
     <tool-list
-      v-show="workState === 'init'"
+      v-show="workState === 'init' && curStepIdx !== 5"
       class="tool-list"
       :current-step-info="currentStepInfo"
     />
     <button
-      v-show="workState === 'done'"
+      v-show="workState === 'done' && curStepIdx !== 5"
       class="next"
       @click="onClickNext"
     >
@@ -66,7 +65,7 @@ const {
 inject('$uaInfo')
 inject('$env')
 
-const curStepIdx = ref(3)
+const curStepIdx = ref(5)
 
 const currentStepInfo = computed(() => {
   return config.stepList[curStepIdx.value]
@@ -81,78 +80,6 @@ function onClickNext() {
 }
 </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;

src/views/StepView1.vue

@@ -65,6 +65,7 @@ watch(workState, (vNew) => {
     top: 0;
     width: 100%;
     height: 100%;
+    object-fit: contain;
   }
   >video{
     position: absolute;
@@ -72,6 +73,7 @@ watch(workState, (vNew) => {
     top: 0;
     width: 100%;
     height: 100%;
+    object-fit: contain;
   }
 }
 </style>

src/views/StepView2.vue

@@ -81,6 +81,7 @@ watch(workState, (vNew) => {
     top: 0;
     width: 100%;
     height: 100%;
+    object-fit: contain;
   }
   >.copying-paper-bottom{
     position: absolute;
@@ -89,6 +90,7 @@ watch(workState, (vNew) => {
     width: 70%;
     height: 70%;
     background-color: rgba(31, 74, 114, 1);
+    object-fit: contain;
   }
   >img.original-paint{
     position: absolute;
@@ -96,6 +98,7 @@ watch(workState, (vNew) => {
     top: 10%;
     width: 70%;
     height: 70%;
+    object-fit: contain;
   }
   >.copying-paper-top{
     position: absolute;
@@ -104,6 +107,7 @@ watch(workState, (vNew) => {
     width: 70%;
     height: 70%;
     background-color: rgba(0, 0, 0, 0.25);
+    object-fit: contain;
   }
   >video{
     position: absolute;
@@ -111,6 +115,7 @@ watch(workState, (vNew) => {
     top: 0;
     width: 94%;
     height: 97%;
+    object-fit: contain;
   }
 }
 </style>

src/views/StepView5.vue

@@ -1,15 +1,19 @@
 <template>
   <div class="working-area">
     <img
-      class="effect effect-begin"
-      src="@/assets/images/step-1-init.png"
+      class="rubber-board"
+      src="@/assets/images/step-3-init.png"
       alt=""
       draggable="false"
     >
+    <div
+      v-show="toolList[7].selected && workState === 'init'"
+      class="paper"
+    />
     <video
       v-show="workState === 'working' || workState === 'done'"
       ref="videoRef"
-      src="@/assets/videos/step-1.mp4"
+      src="@/assets/videos/step-5.mp4"
       playsinline
       webkit-playsinline="true"
       muted
@@ -59,19 +63,27 @@ watch(workState, (vNew) => {
   transform: translate(-50%, -50%);
   width: calc(328 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
-  >img.effect{
+  >img.rubber-board{
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
   }
+  >.paper{
+    position: absolute;
+    left: -2.5%;
+    top: -2.5%;
+    width: 97%;
+    height: 97.5%;
+    background-color: #fff;
+  }
   >video{
     position: absolute;
     left: 0;
     top: 0;
-    width: 100%;
-    height: 100%;
+    width: 97%;
+    height: 98%;
   }
 }
 </style>

src/views/StepView6.vue

@@ -1,13 +1,39 @@
 <template>
-  <div>
-    setp1!!!!
+  <div class="working-area">
+    <img
+      class="effect"
+      src="@/assets/images/step-6-init.png"
+      alt=""
+      draggable="false"
+    >
   </div>
 </template>
 
 <script setup>
+import { ref, computed, watch } from "vue"
+import { toolList, selectedToolNum, workState } from "@/store/index.js"
 
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
 </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%;
+    object-fit: contain;
+  }
+}
 </style>

src/views/StepView7.vue

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