背景图效果实现

src/App.vue

@@ -29,6 +29,16 @@
     <transition :name="transitionName">
       <router-view />
     </transition>
+    <img
+      class="background-image"
+      src="@/assets/image/bg.png"
+      alt="background"
+    >
+    <img
+      class="background-image-text"
+      src="@/assets/image/bg-text.png"
+      alt="background"
+    >
   </div>
 </template>
 
@@ -99,4 +109,25 @@ export default {
 .slide-to-next-page-leave-active {
   transition: top 1s;
 }
+
+.background-image {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  object-fit: cover;
+  width: 100vw;
+  height: 100vh;
+  z-index: -2;
+}
+.background-image-text {
+  position: fixed;
+  left: 10%;
+  top: 10%;
+  object-fit: contain;
+  width: 80vw;
+  height: 80vh;
+  z-index: -1;
+}
 </style>

src/views/AppCover.vue

@@ -1,11 +1,5 @@
 <template>
-  <div class="app-cover">
-    <img
-      class="app-cover-image"
-      src="@/assets/image/cover.png"
-      alt="app cover"
-    >
-  </div>
+  <div class="app-cover" />
 </template>
 
 <script>
@@ -15,27 +9,16 @@ export default {
   components: {
   },
   mounted() {
-    setTimeout(() => {
-      this.$router.replace({
-        name: 'Home'
-      })
-    }, 2000)
+    // setTimeout(() => {
+    //   this.$router.replace({
+    //     name: 'Home'
+    //   })
+    // }, 2000)
   },
 }
 </script>
 
 <style lang="less" scoped>
 .app-cover {
-  .app-cover-image {
-    position: fixed;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    width: 100vw;
-    height: 100vh;
-    object-fit: cover;
-    object-position: center bottom;
-  }
 }
 </style>