页面跳转时弄个过渡

.env.dev

@@ -1,3 +1,3 @@
-CLI_MODE=dev
+VUE_APP_CLI_MODE=dev
 NODE_ENV=development
 PUBLIC_PATH=/

.env.prod

@@ -1,3 +1,3 @@
-CLI_MODE=prod
+VUE_APP_CLI_MODE=prod
 NODE_ENV=production
 PUBLIC_PATH=./

.env.test

@@ -1,3 +1,3 @@
-CLI_MODE=test
+VUE_APP_CLI_MODE=test
 NODE_ENV=production
 PUBLIC_PATH=./

src/App.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="comp-root">
-    <router-view />
+    <!-- <router-view /> -->
+    <router-view v-slot="{ Component }">
+      <transition
+        name="my"
+      >
+        <component
+          :is="Component"
+        />
+      </transition>
+    </router-view>
     <button
       v-if="$route.name !== 'HomeView'"
       class="back"
@@ -75,6 +84,19 @@ export default {
 // ::-webkit-scrollbar-corner { background: #dddecc; }
 
 // vue组件过渡效果
+.my-enter-active {
+  transition: opacity 2s;
+}
+.my-leave-active {
+  transition: opacity 2s;
+}
+.my-enter-from {
+  opacity: 0;
+}
+.my-leave-to {
+  opacity: 0;
+}
+
 .fade-out-leave-active {
   transition: opacity 1s;
 }

src/store/index.js

@@ -2,7 +2,7 @@ import { createStore } from 'vuex'
 
 export default createStore({
   state: {
-    hasPlayedStartupVideo: false,
+    hasPlayedStartupVideo: process.env.VUE_APP_CLI_MODE === 'dev' ? true : false,
   },
   getters: {
   },

src/views/Bag.vue

@@ -32,6 +32,9 @@ export default {
 
 <style lang="less" scoped>
 .home {
+  position: absolute;
+  left: 0;
+  top: 0;
   width: 100%;
   height: 100%;
 }

src/views/BuildTown.vue

@@ -32,6 +32,9 @@ export default {
 
 <style lang="less" scoped>
 .home {
+  position: absolute;
+  left: 0;
+  top: 0;
   width: 100%;
   height: 100%;
 }

src/views/Home.vue

@@ -138,13 +138,15 @@ export default {
 
 <style lang="less" scoped>
 .home {
+  position: absolute;
+  left: 0;
+  top: 0;
   width: 100%;
   height: 100%;
   background-image: url(@/assets/images/bg-home.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
-  position: relative;
   >.lion-male {
     position: absolute;
     width: 219px;

src/views/JagsawGame.vue

@@ -32,6 +32,9 @@ export default {
 
 <style lang="less" scoped>
 .home {
+  position: absolute;
+  left: 0;
+  top: 0;
   width: 100%;
   height: 100%;
 }

src/views/Level2.vue

@@ -72,7 +72,9 @@ export default {
 
 <style lang="less" scoped>
 .level-2 {
-  position: relative;
+  position: absolute;
+  left: 0;
+  top: 0;
   width: 100%;
   height: 100%;
   background-size: cover;

src/views/Level3.vue

@@ -106,7 +106,9 @@ export default {
 
 <style lang="less" scoped>
 .level-3 {
-  position: relative;
+  position: absolute;
+  left: 0;
+  top: 0;
   width: 100%;
   height: 100%;
   background-size: cover;

src/views/Watch.vue

@@ -106,8 +106,8 @@ export default {
   }
   >.bag-wrapper {
     position: absolute;
-    right: 11vw;
-    bottom: 41px;
+    right: -28px;
+    bottom: 140px;
     >img.jigsaw {
       position: absolute;
       width: 60px;

vue.config.js

@@ -9,7 +9,7 @@ process.env.VUE_APP_UPDATE_TIME = time
 
 module.exports = defineConfig({
   publicPath: process.env.PUBLIC_PATH,
-  productionSourceMap: process.env.CLI_MODE === 'prod' ? false : true,
+  productionSourceMap: process.env.VUE_APP_CLI_MODE === 'prod' ? false : true,
   // transpileDependencies: true, // 默认false，表示babel-loader 会忽略所有 node_modules 中的文件
   configureWebpack: {
     module: {