又tm改需求

src/components/StartUp.vue

@@ -12,7 +12,7 @@
         alt=""
         draggable="false"
       >
-      <span>进入学习</span>
+      <span>开&ensp;始</span>
     </button>
     <video
       ref="startup-video"
@@ -77,9 +77,8 @@ export default {
   z-index: 10;
   >button.begin {
     position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
+    right: 5vh;
+    bottom: 5vh;
     font-size: 0;
     z-index: 1;
     >img {
@@ -91,12 +90,12 @@ export default {
       top: 50%;
       transform: translate(-50%, -50%);
       color: #fff;
-      font-size: 34px;
+      font-size: 40px;
       letter-spacing: 5px;
       font-family: 'FZShaoEr-M11-Regular';
     }
     &:hover {
-      transform: translate(-50%, -50%) scale(1.1);
+      transform: scale(1.1);
     }
   }
   >video {

src/main.js

@@ -71,6 +71,7 @@ window.addEventListener('resize', () => {
 const bgAudio = new Audio(require('@/assets/audios/bg.mp3'))
 bgAudio.loop = true
 app.config.globalProperties.$bgAudio = bgAudio
+window.bgAudio = bgAudio
 
 app.use(store)
   .use(router)

src/router/index.js

@@ -64,11 +64,20 @@ const router = createRouter({
   routes
 })
 
-// router.beforeEach((to, from) => {
-//   // 生产环境下强制每次都从首页进入
-//   if (process.env.NODE_ENV === 'production' && !from.name && to.name !== 'HomeView') {
-//     return '/'
-//   }
-// })
+router.beforeEach((to, from) => {
+  // 生产环境下强制每次都从首页进入
+  if (process.env.NODE_ENV === 'production' && !from.name && to.name !== 'HomeView') {
+    return '/'
+  }
+
+  // 只在一级、二级页面播放背景音乐
+  if (from.name) {
+    if (to.name === 'HomeView' || to.name === 'Level2') {
+      window.bgAudio.play()
+    } else {
+      window.bgAudio.pause()
+    }
+  }
+})
 
 export default router

src/store/index.js

@@ -22,7 +22,7 @@ function resetGameProgress() {
 
 export default createStore({
   state: {
-    hasPlayedStartupVideo: process.env.VUE_APP_CLI_MODE === 'dev' ? true : false,
+    hasPlayedStartupVideo: process.env.VUE_APP_CLI_MODE === 'dev' ? false : false,
     hasPlayedGameRule: false,
     gameProgress: localStorage.getItem('HuiZhouGuJianZhuProgress') ? JSON.parse(localStorage.getItem('HuiZhouGuJianZhuProgress')) : resetGameProgress()
   },

src/views/BuildTown.vue

@@ -14,12 +14,6 @@
           top: `calc(${item.top} / ${windowSizeWhenDesign} * ${unit})`,
           left: `calc(${item.left} / ${windowSizeWhenDesign} * ${unit})`,
         }"
-        @click="$router.push({
-          name: 'JagsawGame',
-          query: {
-            sceneL2Idx: item.idxInConfig,
-          }
-        })"
       >
         <img
           class=""
@@ -53,6 +47,7 @@
           class="step"
         >
           <button
+            v-click-audio
             :class="{
               done: gameProgress.buildProgress >= idx
             }"

src/views/Home.vue

@@ -112,6 +112,7 @@
 <script>
 import { onMounted, onUnmounted, watch, ref, reactive, computed } from "vue"
 import StartUp from "@/components/StartUp.vue"
+import useWindowSizeAdaptor from '@/useFunctions/useWindowSizeAdaptor.js'
 
 export default {
   name: 'HomeView',
@@ -123,7 +124,7 @@ export default {
     function computeLabelsPos() {
       labelPosList.value = []
       for (const iterator of menu) {
-        labelPosList.value.push(utils.mapPosFromDraftToWindow(iterator.pos))
+        labelPosList.value.push(utils.mapPosFromDraftToWindow(iterator.pos, 'contain'))
       }
       console.log(labelPosList)
     }
@@ -138,10 +139,14 @@ export default {
     const isHideMenu = ref(true)
     const menu = reactive(config.sceneTree)
 
+    const { windowSizeWhenDesign, unit } = useWindowSizeAdaptor()
+
     return {
       labelPosList,
       isHideMenu,
       menu,
+      windowSizeWhenDesign,
+      unit,
     }
   },
   data() {
@@ -190,14 +195,15 @@ export default {
     top: 0;
     width: 100%;
     height: 100%;
-    object-fit: cover;
+    object-fit: contain;
   }
   >.lion-male {
     position: absolute;
-    width: 219px;
-    height: 206px;
-    left: 78px;
-    bottom: 48px;
+    width: calc(260 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    height: calc(246 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    left: calc(78 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    bottom: calc(48 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    z-index: 6;
     >img {
       position: absolute;
       left: 0;
@@ -211,24 +217,21 @@ export default {
   }
   >.lion-female {
     position: absolute;
-    width: 150px;
-    height: 193px;
+    width: calc(150 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    height: calc(193 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     right: 0;
-    top: 129px;
+    top: calc(129 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    z-index: 6;
     >img {
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
-      z-index: 6;
     }
     &:hover {
-      width: calc(150px * 1.1);
-      height: calc(193px * 1.1);
-    }
-    @media only screen and (max-height: 630px){
-      top: 100px;
+      width: calc(150 * 1.1 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      height: calc(193 * 1.1 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     }
   }
   >menu {
@@ -322,7 +325,7 @@ export default {
     // font-family: FZShaoEr-M11-Regular, FZShaoEr-M11;
     // font-weight: 400;
     font-family: Source Han Sans CN-Bold, Source Han Sans CN;
-    font-weight: bold;
+    // font-weight: bold;
     color: #2D241D;
     writing-mode: vertical-lr;
     display: flex;
@@ -330,17 +333,10 @@ export default {
     align-items: center;
     z-index: 3;
     >div {
-      // transform: translateX(-1px);
-      transform: translateX(-3px);
+      transform: translateX(calc(-3 / v-bind('windowSizeWhenDesign') * v-bind('unit')));
     }
     &:hover {
       transform: scale(1.1);
-      // color: #D11414;
-      // background-image: url(@/assets/images/label-bg-active.png);
-      // transform: translateX(-1px);
-      // >div {
-      //   transform: initial;
-      // }
     }
   }
 }

src/views/Learn.vue

@@ -73,14 +73,6 @@ export default {
     ...mapMutations([
     ]),
   },
-  beforeRouteEnter(to, from, next) {
-    next((vm) => {
-      vm.$bgAudio.pause()
-    })
-  },
-  beforeRouteLeave() {
-    this.$bgAudio.play()
-  }
 }
 </script>
 

src/views/Level2.vue

@@ -35,6 +35,7 @@
 </template>
 
 <script>
+
 export default {
   name: 'Level2View',
   data() {
@@ -87,7 +88,7 @@ export default {
     top: 0;
     width: 100%;
     height: 100%;
-    object-fit: cover;
+    object-fit: contain;
   }
   >menu {
     position: absolute;

src/views/Level3.vue

@@ -53,7 +53,7 @@
         class="lion"
         :src="require(`@/assets/images/lion-${sceneInfo.lionGender}-${isLionWalking ? 'walking' : 'speaking'}.gif`)"
         :style="{
-          left: isLionWalking ? '' : '20px',
+          left: isLionWalking ? '' : `calc(20 / ${windowSizeWhenDesign} * ${unit}`,
         }"
         alt=""
         draggable="false"
@@ -67,8 +67,18 @@
 </template>
 
 <script>
+import useWindowSizeAdaptor from '@/useFunctions/useWindowSizeAdaptor.js'
+
 export default {
   name: 'Level3View',
+  setup() {
+    const { windowSizeWhenDesign, unit } = useWindowSizeAdaptor()
+
+    return {
+      windowSizeWhenDesign,
+      unit,
+    }
+  },
   data() {
     return {
       isLionWalking: true,
@@ -201,7 +211,7 @@ export default {
   }
   .lion-wrapper {
     position: absolute;
-    bottom: 50px;
+    bottom: calc(50 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     width: 0;
     height: 0;
     animation-name: walk;
@@ -212,32 +222,32 @@ export default {
       position: absolute;
       left: 0;
       bottom: 0;
-      height: 340px;
+      height: calc(340 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     }
     >.speach-text-wrapper {
       position: absolute;
-      left: calc(326px + 20px);
-      bottom: 34px;
-      width: 576px;
-      height: 380px;
+      left: calc(346 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      bottom: calc(34 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      width: calc(576 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      height: calc(380 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
       background-image: url(@/assets/images/speach-text-wrapper.png);
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center center;
-      padding-top: 90px;
-      padding-left: 100px;
-      padding-right: 90px;
-      padding-bottom: 210px;
+      padding-top: calc(90 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      padding-left: calc(100 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      padding-right: calc(90 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      padding-bottom: calc(210 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     }
   }
 }
 
 @keyframes walk {
   0% {
-    left: -300px;
+    left: calc(-300 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
   }
   100% {
-    left: 0px;
+    left: calc(0 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
   }
 }
 </style>

src/views/Watch.vue

@@ -152,14 +152,6 @@ export default {
     ...mapMutations([
     ]),
   },
-  beforeRouteEnter(to, from, next) {
-    next((vm) => {
-      vm.$bgAudio.pause()
-    })
-  },
-  beforeRouteLeave() {
-    this.$bgAudio.play()
-  }
 }
 </script>