完成第二页

src/App.vue

@@ -36,11 +36,6 @@
       src="@/assets/image/bg.png"
       alt="background"
     >
-    <img
-      class="background-image-text"
-      src="@/assets/image/bg-text.png"
-      alt="background"
-    >
   </div>
 </template>
 
@@ -128,13 +123,4 @@ export default {
   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/assets/style/reset.css

@@ -56,5 +56,5 @@ button {
 }
 
 html {
-  font-size: 5.4701vw;
+  font-size: 2.5276vh;
 }

src/views/AppCover.vue

@@ -20,6 +20,11 @@
       src="@/assets/image/our-logo.png"
       alt=""
     >
+    <img
+      class="background-image-text"
+      src="@/assets/image/bg-text.png"
+      alt="background"
+    >
   </div>
 </template>
 
@@ -40,11 +45,6 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.app-cover {
-}
-</style>
-
-<style lang="less" scoped>
 .top-image {
   width: 100vw;
   height: 39.2237vh;
@@ -71,4 +71,13 @@ export default {
   bottom: 6.547vh;
   height: 3.438vh;
 }
+.background-image-text {
+  position: fixed;
+  left: 10%;
+  top: 10%;
+  object-fit: contain;
+  width: 80vw;
+  height: 80vh;
+  z-index: -1;
+}
 </style>

src/views/Home.vue

@@ -1,11 +1,45 @@
 <template>
   <div
     ref="hammer-target"
-    class="home"
+    class="home-page"
   >
-    <h1>
-      This is the Home page
-    </h1>
+    <img
+      class="council"
+      src="@/assets/image/international-council-of-museums.png"
+      alt=""
+    >
+    <h2>国际博物馆日</h2>
+    <h3>2022/5/18</h3>
+    <img
+      class="title"
+      src="@/assets/image/博物馆的力量.png"
+      alt=""
+    >
+    <div class="slide-tip">
+      <div class="slide-tip_text">
+        向<br>下<br>滑<br>动
+      </div>
+      <img
+        class="slide-tip_image"
+        src="@/assets/image/下拉.png"
+        alt=""
+      >
+    </div>
+    <img
+      class="museum-logo"
+      src="@/assets/image/museum-logo.png"
+      alt=""
+    >
+    <img
+      class="our-logo"
+      src="@/assets/image/our-logo.png"
+      alt=""
+    >
+    <img
+      class="background-image-text"
+      src="@/assets/image/bg-text.png"
+      alt="background"
+    >
   </div>
 </template>
 
@@ -31,9 +65,74 @@ export default {
 </script>
 
 <style lang="less" scoped>
-h1 {
-  display: block;
-  height: 100px;
-  background: red;
+.home-page {
+  position: relative;
+  text-align: center;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  .council {
+    position: absolute;
+    left: 2.28rem;
+    top: 6.598vh;
+    height: 3.387vh;
+  }
+  h2 {
+    margin-top: 17.214vh;
+    font-size: 1.25rem;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    color: #13357E;
+  }
+  h3 {
+    margin-top: 0.34rem;
+    font-size: 1.13rem;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    color: #13357E;
+  }
+  .title {
+    position: absolute;
+    top: 33.721vh;
+    height: 27.250vh;
+    display: block;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .slide-tip {
+    position: absolute;
+    bottom: 17.299vh;
+    left: 50%;
+    transform: translateX(-50%s);
+    font-size: 2.370vh;
+    font-family: Adobe Heiti Std;
+    color: #13357E;
+    .slide-tip_image {
+      height: 2.330vh;
+      margin-top: 1.5vh;
+    }
+  }
+  .museum-logo {
+    position: absolute;
+    left: 2.28rem;
+    bottom: 6.547vh;
+    height: 3.438vh;
+  }
+  .our-logo {
+    position: absolute;
+    right: 2.28rem;
+    bottom: 6.547vh;
+    height: 3.438vh;
+  }
+  .background-image-text {
+    position: absolute;
+    left: 10%;
+    top: 10%;
+    object-fit: contain;
+    width: 80vw;
+    height: 80vh;
+    z-index: -1;
+  }
 }
+
 </style>