完成cover页

src/App.vue

@@ -1,6 +1,8 @@
 <template>
   <div id="app">
-    <div id="nav">
+    <div
+      class="nav"
+    >
       <router-link to="/">
         CoverPage
       </router-link> |
@@ -64,6 +66,11 @@ export default {
 </script>
 
 <style>
+.nav {
+  position: fixed;
+  top: 0;
+}
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

src/views/AppCover.vue

@@ -1,5 +1,26 @@
 <template>
-  <div class="app-cover" />
+  <div class="app-cover">
+    <img
+      class="top-image"
+      src="@/assets/image/cover-page-top.png"
+      alt=""
+    >
+    <img
+      class="title"
+      src="@/assets/image/cover-page-title.png"
+      alt=""
+    >
+    <img
+      class="museum-logo"
+      src="@/assets/image/museum-logo.png"
+      alt=""
+    >
+    <img
+      class="our-logo"
+      src="@/assets/image/our-logo.png"
+      alt=""
+    >
+  </div>
 </template>
 
 <script>
@@ -9,11 +30,11 @@ export default {
   components: {
   },
   mounted() {
-    // setTimeout(() => {
-    //   this.$router.replace({
-    //     name: 'Home'
-    //   })
-    // }, 2000)
+    setTimeout(() => {
+      this.$router.replace({
+        name: 'Home'
+      })
+    }, 2000)
   },
 }
 </script>
@@ -22,3 +43,32 @@ export default {
 .app-cover {
 }
 </style>
+
+<style lang="less" scoped>
+.top-image {
+  width: 100vw;
+  height: 39.2237vh;
+  object-fit: cover;
+  object-position: center bottom;
+}
+.title {
+  position: fixed;
+  height: 44.894vh;
+  width: auto;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 13.069vh;
+}
+.museum-logo {
+  position: fixed;
+  left: 2.28rem;
+  bottom: 6.547vh;
+  height: 3.438vh;
+}
+.our-logo {
+  position: fixed;
+  right: 2.28rem;
+  bottom: 6.547vh;
+  height: 3.438vh;
+}
+</style>