需求变更

src/components/GameRule.vue

@@ -2,9 +2,10 @@
   <div class="game-rule">
     <div class="modal">
       <div class="text-wrap">
-        <p>1. 每完成一节课，即可获得一块碎片</p>
-        <p>2. 收集碎片完成拼图游戏，解锁章节图纸</p>
-        <p>3. 解锁所有章节图纸，建设古镇</p>
+        <p>1.课程的六个章节分别对应六个拼图游戏。</p>
+        <p>2.通过学习每课“看一看”和“学一学”中的视频，可以获得游戏碎片。</p>
+        <p>3.集齐每章节全部游戏碎片，即看完章节下全部课程视频，可以解锁该章拼图游戏。</p>
+        <p>4.完成所有章节拼图游戏，可以建设整个徽州小镇。</p>
       </div>
       <button
         v-click-audio
@@ -54,6 +55,8 @@ export default {
     align-items: center;
     padding-top: 19vh;
     padding-bottom: 4.5vh;
+    padding-left: 6vh;
+    padding-right: 6vh;
     >.text-wrap {
       font-size: 3.33vh;
       font-family: Source Han Sans CN-Bold, Source Han Sans CN;

src/components/StartUp.vue

@@ -8,11 +8,10 @@
     >
       <img
         class=""
-        src="@/assets/images/btn-startup-bg.png"
+        src="@/assets/images/btn-begin.png"
         alt=""
         draggable="false"
       >
-      <span>开&ensp;始</span>
     </button>
     <video
       ref="startup-video"
@@ -36,9 +35,18 @@
 </template>
 
 <script>
+import useWindowSizeAdaptor from '@/useFunctions/useWindowSizeAdaptor.js'
+
 export default {
   name: 'StartUp',
   emits: ['begin', 'over'],
+  setup() {
+    const { windowSizeWhenDesign, unit } = useWindowSizeAdaptor()
+    return {
+      windowSizeWhenDesign,
+      unit,
+    }
+  },
   data() {
     return {
       isBeginVideo: false,
@@ -82,20 +90,9 @@ export default {
     position: absolute;
     right: 5vh;
     bottom: 5vh;
-    font-size: 0;
     z-index: 1;
     >img {
-      height: 100px;
-    }
-    >span {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      color: #fff;
-      font-size: 40px;
-      letter-spacing: 5px;
-      font-family: 'FZShaoEr-M11-Regular';
+      width: calc(60 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     }
     &:hover {
       transform: scale(1.1);

src/views/Bag.vue

@@ -47,9 +47,10 @@
         alt=""
         class="title"
       >
-      <p>每完成一节课，即可获得一块碎片</p>
-      <p>收集碎片完成拼图游戏，解锁章节图纸</p>
-      <p>解锁所有章节图纸，建设古镇</p>
+      <p>课程的六个章节分别对应六个拼图游戏。</p>
+      <p>通过学习每课“看一看”和“学一学”中的视频，可以获得游戏碎片。</p>
+      <p>集齐每章节全部游戏碎片，即看完章节下全部课程视频，可以解锁该章拼图游戏。</p>
+      <p>完成所有章节拼图游戏，可以建设整个徽州小镇。</p>
       <button
         v-click-audio
         class="build"

src/views/Learn.vue

@@ -2,9 +2,18 @@
   <div
     class="learn-comp"
   >
+    <Teleport
+      to="body"
+    >
+      <transition name="fade-in-out">
+        <GameRule
+          v-if="!hasPlayedGameRule && isShowMask"
+        />
+      </transition>
+    </Teleport>
     <video
-      src=""
-      autoplay
+      ref="video"
+      :src="($route.query.sceneIdxLevel2 === '1' && $route.query.sceneIdxLevel3 === '0') ? require(`@/assets/videos/learn-${$route.query.sceneIdxLevel2}-${$route.query.sceneIdxLevel3}.mp4`) : ``"
       controls
       :style="{
         left: videoLeft + 'px',
@@ -18,9 +27,13 @@
 
 <script>
 import { onMounted, onUnmounted, watch, ref, reactive, computed } from "vue"
+import GameRule from "@/components/GameRule.vue"
 
 export default {
   name: 'HomeView',
+  components: {
+    GameRule,
+  },
   setup() {
     const videoLeft = ref(0)
     const videoTop = ref(0)
@@ -59,13 +72,38 @@ export default {
   },
   data() {
     return {
+      isShowMask: false, // 不用这个的话，蒙层的显示会没有渐变效果。
     }
   },
   computed: {
     ...mapState([
+      'hasPlayedGameRule',
     ]),
   },
+  watch: {
+    hasPlayedGameRule: {
+      handler(vNew) {
+        if (vNew) {
+          setTimeout(() => {
+            this.$refs.video.play()
+          }, 1000)
+        }
+      }
+    }
+  },
   mounted() {
+    if (!this.hasPlayedGameRule) {
+      setTimeout(() => {
+        this.isShowMask = true
+      }, 0)
+    } else {
+      setTimeout(() => {
+        this.$refs.video.play()
+      }, 1000)
+    }
+  },
+  beforeUnmount() {
+    this.$refs.video.pause()
   },
   unmounted() {
   },

src/views/Watch.vue

@@ -12,7 +12,8 @@
       </transition>
     </Teleport>
     <video
-      src=""
+      ref="video"
+      :src="($route.query.sceneIdxLevel2 === '1' && $route.query.sceneIdxLevel3 === '0') ? require(`@/assets/videos/watch-${$route.query.sceneIdxLevel2}-${$route.query.sceneIdxLevel3}.mp4`) : ``"
       controls
       :style="{
         left: videoLeft + 'px',
@@ -139,13 +140,31 @@ export default {
       'hasPlayedGameRule',
     ]),
   },
+  watch: {
+    hasPlayedGameRule: {
+      handler(vNew) {
+        if (vNew) {
+          setTimeout(() => {
+            this.$refs.video.play()
+          }, 1000)
+        }
+      }
+    }
+  },
   mounted() {
     if (!this.hasPlayedGameRule) {
       setTimeout(() => {
         this.isShowMask = true
       }, 0)
+    } else {
+      setTimeout(() => {
+        this.$refs.video.play()
+      }, 1000)
     }
   },
+  beforeUnmount() {
+    this.$refs.video.pause()
+  },
   unmounted() {
   },
   methods: {