搞搞搞

src/App.vue

@@ -27,7 +27,17 @@
 </template>
 
 <script>
+import useWindowSizeAdaptor from '@/useFunctions/useWindowSizeAdaptor.js'
+
 export default {
+  setup() {
+    const { windowSizeWhenDesign, unit } = useWindowSizeAdaptor()
+
+    return {
+      windowSizeWhenDesign,
+      unit,
+    }
+  },
   mounted() {
   }
 }
@@ -39,13 +49,20 @@ export default {
   width: 100%;
   >button.back {
     position: fixed;
-    width: 70px;
-    height: 72px;
-    right: 30px;
-    bottom: 70px;
+    width: calc(70 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    height: calc(72 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    right: calc(30 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    bottom: calc(70 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     &:hover {
       transform: scale(1.1);
     }
+    >img{
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
   }
   >.bg-music {
     display: none;

src/components/StartUp.vue

@@ -3,6 +3,10 @@
     <button
       v-show="!isBeginVideo"
       v-click-audio
+      :style="{
+        left: beginBtnPos.x + 'px',
+        top: beginBtnPos.y + 'px',
+      }"
       class="begin"
       @click="onClickBeginVideo"
     >
@@ -36,15 +40,22 @@
 
 <script>
 import useWindowSizeAdaptor from '@/useFunctions/useWindowSizeAdaptor.js'
-
+import { reactive } from "vue"
 export default {
   name: 'StartUp',
   emits: ['begin', 'over'],
   setup() {
     const { windowSizeWhenDesign, unit } = useWindowSizeAdaptor()
+
+    const beginBtnPos = reactive(utils.mapPosFromDraftToWindow({
+      x: 1850,
+      y: 630,
+    }, 'contain'))
+
     return {
       windowSizeWhenDesign,
       unit,
+      beginBtnPos,
     }
   },
   data() {
@@ -91,8 +102,10 @@ export default {
     right: 5vh;
     bottom: 5vh;
     z-index: 1;
+    width: calc(40 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    height: fit-content;
     >img {
-      width: calc(60 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      width: 100%;
     }
     &:hover {
       transform: scale(1.1);

src/config.js

@@ -7,10 +7,10 @@ export default {
         y: 273,
       },
       level2MenuStyle: {
-        paddingTop: '70px',
-        right: '200px',
-        width: '324px',
-        height: '378px',
+        paddingTop: '70',
+        right: '200',
+        width: '324',
+        height: '378',
       },
       children: [
         {
@@ -52,10 +52,10 @@ export default {
         y: 414,
       },
       level2MenuStyle: {
-        paddingTop: '70px',
-        right: '200px',
-        width: '324px',
-        height: '378px',
+        paddingTop: '70',
+        right: '200',
+        width: '324',
+        height: '378',
       },
       children: [
         {
@@ -92,10 +92,10 @@ export default {
         y: 591,
       },
       level2MenuStyle: {
-        paddingTop: '56px',
-        right: '200px',
-        width: '454px',
-        height: '370px',
+        paddingTop: '56',
+        right: '200',
+        width: '454',
+        height: '370',
       },
       children: [
         {
@@ -137,10 +137,10 @@ export default {
         y: 355,
       },
       level2MenuStyle: {
-        paddingTop: '66px',
-        left: '200px',
-        width: '358px',
-        height: '378px',
+        paddingTop: '66',
+        left: '200',
+        width: '358',
+        height: '378',
       },
       children: [
         {
@@ -175,10 +175,10 @@ export default {
         y: 657,
       },
       level2MenuStyle: {
-        paddingTop: '70px',
-        left: '200px',
-        width: '324px',
-        height: '378px',
+        paddingTop: '70',
+        left: '200',
+        width: '324',
+        height: '378',
       },
       children: [
         {
@@ -213,10 +213,10 @@ export default {
         y: 446,
       },
       level2MenuStyle: {
-        paddingTop: '80px',
-        left: '200px',
-        width: '438px',
-        height: '174px',
+        paddingTop: '80',
+        left: '200',
+        width: '438',
+        height: '174',
       },
       children: [
         {

src/store/index.js

@@ -26,7 +26,7 @@ function resetGameProgress() {
 export default createStore({
   state: {
     hasPlayedStartupVideo: process.env.VUE_APP_CLI_MODE === 'dev' ? false : false,
-    hasPlayedGameRule: false,
+    hasPlayedGameRule: true, // 新需求：不显示弹窗
     hasLionSpoke: false,
     gameProgress: localStorage.getItem(`HuiZhouGuJianZhuProgress-v${process.env.VUE_APP_VERSION}`) ? JSON.parse(localStorage.getItem(`HuiZhouGuJianZhuProgress-v${process.env.VUE_APP_VERSION}`)) : resetGameProgress()
   },

src/views/Learn.vue

@@ -81,15 +81,15 @@ export default {
     ]),
   },
   watch: {
-    hasPlayedGameRule: {
-      handler(vNew) {
-        if (vNew) {
-          setTimeout(() => {
-            this.$refs.video.play()
-          }, 1000)
-        }
-      }
-    }
+    // hasPlayedGameRule: {
+    //   handler(vNew) {
+    //     if (vNew) {
+    //       setTimeout(() => {
+    //         this.$refs.video.play()
+    //       }, 1000)
+    //     }
+    //   }
+    // }
   },
   mounted() {
     if (!this.hasPlayedGameRule) {
@@ -97,9 +97,9 @@ export default {
         this.isShowMask = true
       }, 0)
     } else {
-      setTimeout(() => {
-        this.$refs.video.play()
-      }, 1000)
+      // setTimeout(() => {
+      //   this.$refs.video.play()
+      // }, 1000)
     }
   },
   beforeUnmount() {

src/views/Level2.vue

@@ -12,7 +12,11 @@
     <menu
       :style="{
         backgroundImage: `url(${getMenuBgImgUrl()})`,
-        ...sceneInfo.level2MenuStyle,
+        paddingTop: `calc(${sceneInfo.level2MenuStyle.paddingTop} / ${windowSizeWhenDesign} * ${unit})`,
+        right: sceneInfo.level2MenuStyle.right ? `calc(${sceneInfo.level2MenuStyle.right} / ${windowSizeWhenDesign} * ${unit})` : '',
+        left: sceneInfo.level2MenuStyle.left ? `calc(${sceneInfo.level2MenuStyle.left} / ${windowSizeWhenDesign} * ${unit})` : '',
+        width: `calc(${sceneInfo.level2MenuStyle.width} / ${windowSizeWhenDesign} * ${unit})`,
+        height: `calc(${sceneInfo.level2MenuStyle.height} / ${windowSizeWhenDesign} * ${unit})`,
       }"
     >
       <div
@@ -35,9 +39,27 @@
 </template>
 
 <script>
+import useWindowSizeAdaptor from '@/useFunctions/useWindowSizeAdaptor.js'
+import { reactive } from "vue"
+import { useRoute, useRouter } from "vue-router"
+
 
 export default {
   name: 'Level2View',
+  setup() {
+    const route = useRoute()
+    const router = useRouter()
+
+    const { windowSizeWhenDesign, unit } = useWindowSizeAdaptor()
+
+    const sceneInfo = config.sceneTree[Number(route.query.sceneIdx)]
+
+    return {
+      windowSizeWhenDesign,
+      unit,
+      sceneInfo,
+    }
+  },
   data() {
     return {
     }
@@ -45,9 +67,6 @@ export default {
   computed: {
     ...mapState([
     ]),
-    sceneInfo() {
-      return config.sceneTree[Number(this.$route.query.sceneIdx)]
-    },
   },
   mounted() {
   },
@@ -97,14 +116,14 @@ export default {
     background-repeat: no-repeat;
     background-position: center center;
     >.menu-item {
-      height: 94px;
-      font-size: 38px;
+      height: calc(94 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      font-size: calc(38 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
       font-family: FZShaoEr-M11-Regular, FZShaoEr-M11;
       font-weight: 400;
       color: #2D241D;
       line-height: 1.3;
       cursor: pointer;
-      margin-bottom: 15px;
+      margin-bottom: calc(15 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
       display: flex;
       justify-content: center;
       align-items: center;

src/views/Level3.vue

@@ -178,6 +178,9 @@ export default {
     getMenuBgImgUrl() {
       return require(`@/assets/images/bg-menu-level3-length${this.sceneInfo.name.split(' ').join('').length}.png`)
     },
+    onclickRecord() {
+
+    },
   },
 }
 </script>
@@ -301,13 +304,13 @@ export default {
       padding-bottom: calc(210 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
       >.speach-text {
         height: 100%;
-        font-size: 16px;
+        font-size: calc(16 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
         line-height: 1.3;
         font-family: Source Han Sans CN-Regular, Source Han Sans CN;
         font-weight: 400;
         color: #2D241D;
         overflow: auto;
-        padding-right: 8px;
+        padding-right: calc(8 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
       }
     }
   }

src/views/TravelRecord.vue

@@ -2,13 +2,13 @@
   <div
     class="travel-record"
   >
-    <img
-      class="book"
-      src="@/assets/images/book-record.png"
-      alt=""
-      draggable="false"
-      @click="onClickBook"
-    >
+    <video
+      ref="video"
+      class="record-video"
+      :src="($route.query.sceneIdxLevel2 === '1' && $route.query.sceneIdxLevel3 === '0') ? require(`@/assets/videos/lion-travel-${$route.query.sceneIdxLevel2}-${$route.query.sceneIdxLevel3}.mp4`) : ``"
+      autoplay
+      @click="onClickVideo"
+    />
   </div>
 </template>
 
@@ -27,6 +27,9 @@ export default {
   },
   mounted() {
   },
+  beforeUnmount() {
+    this.$refs.video.pause()
+  },
   unmounted() {
   },
   methods: {
@@ -37,6 +40,13 @@ export default {
         message: '敬请期待',
         type: 'warning',
       })
+    },
+    onClickVideo() {
+      if (this.$refs.video.paused || this.$refs.video.ended) {
+        this.$refs.video.play()
+      } else {
+        this.$refs.video.pause()
+      }
     }
   },
 }
@@ -53,15 +63,13 @@ export default {
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
-  >img.book {
-    max-height: 90%;
-    max-width: 90%;
-    object-fit: contain;
+  >video{
     position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    cursor: pointer;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #000;
   }
 }
 </style>

src/views/Watch.vue

@@ -133,6 +133,7 @@ export default {
   data() {
     return {
       isShowMask: false, // 不用这个的话，蒙层的显示会没有渐变效果。
+      isShowRecordVideo: true,
     }
   },
   computed: {
@@ -141,15 +142,15 @@ export default {
     ]),
   },
   watch: {
-    hasPlayedGameRule: {
-      handler(vNew) {
-        if (vNew) {
-          setTimeout(() => {
-            this.$refs.video.play()
-          }, 1000)
-        }
-      }
-    }
+    // hasPlayedGameRule: {
+    //   handler(vNew) {
+    //     if (vNew) {
+    //       setTimeout(() => {
+    //         this.$refs.video.play()
+    //       }, 1000)
+    //     }
+    //   }
+    // }
   },
   mounted() {
     if (!this.hasPlayedGameRule) {
@@ -157,9 +158,9 @@ export default {
         this.isShowMask = true
       }, 0)
     } else {
-      setTimeout(() => {
-        this.$refs.video.play()
-      }, 1000)
+      // setTimeout(() => {
+      //   this.$refs.video.play()
+      // }, 1000)
     }
   },
   beforeUnmount() {