页面更新

src/components/AllWall.vue

@@ -33,6 +33,7 @@ export default {
   width: 100vw;
   height: 100vh;
   background: url("../assets/images/AllWall/bac.png") no-repeat;
+  background-size: 100% 100%;
 }
 .size {
   display: flex;
@@ -46,7 +47,7 @@ export default {
 }
 #guide-button {
   position: absolute;
-  bottom: 185px;
+  bottom: 11rem;
   left: 50%;
   transform: translateX(-50%);
 }

src/components/GuideButton.vue

@@ -216,7 +216,7 @@ div.black-text{
 }
 #old-exhibition1,#old-exhibition2 {
     position: absolute;
-    top:-6vh;
+    top:-5.6rem;
     left: 50%;
     transform: translateX(-50%);
     width: 18.9rem;
@@ -224,7 +224,7 @@ div.black-text{
     z-index:999;
 }
 #old-exhibition2 {
-    top: -12vh;
+    top: -2.8rem;
 }
 a{
     text-decoration: none;

src/components/GuidePage.vue

@@ -1,5 +1,16 @@
 <template>
   <div id="guide" @click="openContactInfo">
+    <div class="bac">
+      <div class="one">
+        <img src="../assets/images/page1.png" alt="">
+      </div>
+      <div class="tow">
+        <img src="../assets/images/page2.png" alt="">
+      </div>
+      <div class="three">
+        <img src="../assets/images/page3.png" alt="">
+      </div>
+    </div>
     <!-- <img id="background1" src="@/assets/images/background.png" /> -->
     <div id="contact">
       <img
@@ -91,6 +102,20 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+.bac{
+  padding-top: 5.75rem;
+}
+.bac>div {
+  display: flex;
+  justify-content: center;
+}
+.one>img {
+  width: 80%;
+}.tow>img {
+  width: 70%;
+}.three>img {
+  width: 90%;
+}
 #guide {
   width: 100vw;
   height: 100vh;
@@ -202,7 +227,7 @@ img.img-contact {
 
 #guide-button {
   position: absolute;
-  top: 33rem;
+  bottom: 2rem;
   left: 50%;
   width: 18.9rem;
   height: 9.4rem;

src/components/Tradition.vue

@@ -64,6 +64,8 @@ export default {
 
 <style scoped>
 .swiper-container {
+  max-width: 400px;
+  max-height: 550px;
   position: absolute;
   top: 60%;
   left: 50%;
@@ -82,6 +84,9 @@ export default {
   align-content: center;
 }
 .swiper-slide  img {
+    max-width: 350px;
+  max-height: 500px;
+
   width: 16.7rem;
   height: 23.7rem;
 }