修复一堆bug

src/App.vue

@@ -31,5 +31,6 @@ body{
   margin: 0 auto;
   overflow: hidden;
   position: relative;
+  max-width: 500px;
 }
 </style>

src/components/About.vue

@@ -25,12 +25,23 @@
         >四维看看</a
       >
       <a href="https://www.cgaii.com/#/" class="txt">中德人工智能研究院</a>
-            <div style="margin-top: 60px" class="xian"></div>
+      <div style="margin-top: 60px" class="xian"></div>
     </div>
 
     <div class="logo">
-      <img src="../assets/images/about1.png" alt="" />
-      <img src="../assets/images/about.png" alt="" />
+      <img
+        src="../assets/images/about1.png"
+        alt=""
+        style="margin-right: 10px"
+      />
+      <img src="../assets/images/about.png" alt="" @click="isShow = true" />
+    </div>
+    <div class="show" v-show="isShow">
+      <img src="../assets/images/erweima1.jpg" alt="">
+      <img style="height:315px; margin-top: 20px;" src="../assets/images/erweima2.png" alt="">
+      <div class="close" @click="isShow = false">
+        <img src="../assets/images/close.png" alt="">
+      </div>
     </div>
   </div>
 </template>
@@ -44,7 +55,10 @@ export default {
   components: {},
   data() {
     //这里存放数据
-    return {};
+    return {
+      //控制大二维码的显示和隐藏
+      isShow: false,
+    };
   },
   //监听属性 类似于data概念
   computed: {},
@@ -66,6 +80,33 @@ export default {
 };
 </script>
 <style  scoped>
+.close {
+  position: absolute;
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80px;
+  height: 80px;
+}
+.close img {
+  width: 100%;
+  height: 100%;
+}
+.show {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.8);
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  z-index: 9999;
+}
+.show>img {
+  margin-top: 60px;
+  width: 251px;
+  height: 250px;
+
+}
 .xian {
   width: 100%;
   height: 2px;
@@ -80,7 +121,7 @@ export default {
 }
 .About {
   position: relative;
-  width: 100vw;
+  width: 100%;
   background-color: rgba(0, 0, 0, 0.9);
   padding-top: 30px;
 }

src/components/AllWall.vue

@@ -42,7 +42,7 @@ export default {
 <style  scoped>
 .AllWall {
   position: relative;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   background: url("../assets/images/AllWall/bac.png") no-repeat;
   background-size: 100% 100%;

src/components/AllWallbut.vue

@@ -242,6 +242,8 @@ export default {
   left: 50%;
   transform: translateX(-50%);
   width: 18.9rem;
+  max-width:302px;
+  max-height: 68px;
   height: 4.3rem;
   /* background: linear-gradient(180deg, #D16914, transparent);
   border-radius: 6px;*/

src/components/GuideButton.vue

@@ -165,19 +165,20 @@ export default {
 }
 #mainbutton {
   position: absolute;
-  top:5.6rem;
+  top:0px;
   left: 50%;
   transform: translateX(-50%);
-  width: 18.9rem;
-  height: 4.3rem;
+  width: 302px;
+  height: 68px;
+
   /* background: linear-gradient(180deg, #D16914, transparent);
   border-radius: 6px;*/
 }
 .arrow{
     position: inherit;
-    top:30%;
-    right:1.7rem;
-    width:1.2rem;
+    top:20px;
+    right:30px;
+    width:19px;
 }
 .arrow.arrowDown{
     transform-origin: center;
@@ -185,8 +186,9 @@ export default {
 
 }
 .exbutton{
-    width:18.9rem;
+    width:302px;
     opacity: 0.8;
+
 }
 div.button-text{
     position:absolute;
@@ -196,7 +198,7 @@ div.button-text{
     text-align: center;
     font-weight: normal;
     color: #ffffff;
-    font-size: 1rem;
+    font-size: 16px;
     font-family: "Microsoft YaHei", "serif";
     opacity: 1;
 }
@@ -205,20 +207,20 @@ div.black-text{
 }
 #cloud-exhibition{
     position: absolute;
-    top:2.8rem;
+    top:-47px;
     left: 50%;
     transform: translateX(-50%);
-    width: 18.9rem;
-    height: 4.3rem;
+    width: 302px;
+    height: 68px;
     z-index:999;
 }
 #old-exhibition{
     position: absolute;
-    top:0;
+    top:-92px;
     left: 50%;
     transform: translateX(-50%);
-    width: 18.9rem;
-    height: 4.3rem;
+    width: 302px;
+    height: 68px;
     z-index:999;
 }
 #old-exhibition1,#old-exhibition2 {
@@ -240,20 +242,21 @@ a{
 
 #front{
     position: absolute;
-    top:4.9rem;
+    top:-7px;
     left: 50%;
     transform: translateX(-50%);
-    width:18.1rem;
+    width:280px;
+
 }
 #front img{
     width:100%;
 }
 #back{
     position: absolute;
-    top:4.25rem;
+    top:-15px;
     left: 50%;
     transform: translateX(-50%);
-    width:16.2rem;
+    width:248px;
 }
 #back img{
     width:100%;

src/components/GuidePage.vue

@@ -147,7 +147,7 @@ export default {
   z-index: 9999;
   position: absolute;
   bottom: 0;
-  width: 100vw;
+  width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.93);
 }
@@ -174,7 +174,7 @@ export default {
   height: 100%;
 }
 .bac {
-  padding-top: 5.75rem;
+  padding-top: 60px;
 }
 .bac > div {
   display: flex;
@@ -191,7 +191,7 @@ export default {
   width: 90%;
 }
 #guide {
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   background: url("../assets/images/AllWall/page.jpg") no-repeat;
   background-size: 100% 100%;
@@ -205,30 +205,27 @@ export default {
 #contact {
   z-index: 999;
   position: fixed;
-  right: 0.5rem;
-  top: 1rem;
-  width: 3.6rem;
-  height: 3.6rem;
+  right: 10px;
+  top: 15px;
+  width: 50px;
+  height: 50px;
 }
-@media screen and (min-width: 780px) {
+@media screen and (min-width: 500px) {
   #contact {
-    position: absolute;
-    right: 0.5rem;
-    top: 1rem;
-    width: 3.6rem;
-    height: 3.6rem;
+  right: 50%;
+  transform: translateX(235px);
   }
 }
 #contactButton {
-  width: 3.6rem;
-  height: 3.6rem;
+  width: 50px;
+  height: 50px;
 }
 #info {
   position: absolute;
-  right: 1rem;
-  top: 3.6rem;
-  width: 20.7rem;
-  height: 27.3rem;
+  right: 20px;
+  top: 50px;
+  width: 320px;
+  height: 430px;
 }
 #contactInfo {
   width: 100%;
@@ -237,74 +234,73 @@ export default {
 }
 #phone {
   position: absolute;
-  top: 2rem;
+  top: 25px;
   left: 50%;
   transform: translateX(-50%);
-  width: 13.3rem;
-  height: 4.4rem;
+  width: 210px;
+  height: 70px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 #info .contact-title {
-  width: 9.8rem;
-  height: 1.3rem;
-  font-size: 1rem;
+  width: 153px;
+  height: 20px;
+  font-size: 16px;
   font-family: Microsoft YaHei;
   font-weight: 400;
   color: #d06814;
   opacity: 1;
 }
 .contact-content {
+  margin: 3px 0;
   position: relative;
-  left: 2.5rem;
+  left: 35px;
   color: #ffffff;
-  font-size: 0.9rem;
+  font-size: 15px;
   text-align: left;
 }
 #email {
   position: absolute;
-  top: 11rem;
+  top: 170px;
   left: 50%;
   transform: translateX(-50%);
-  width: 13.3rem;
-  height: 3.1rem;
+  width: 210px;
+  height: 50px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 div.qrcode {
-  width: 4.6rem;
-  height: 4.6rem;
+  margin: 20px 0 0 39px;
+  width: 80px;
+  height: 80px;
 }
 .qrcode > img {
-  position: relative;
   width: 100%;
-  left: 2.5rem;
-  top: 1.3rem;
 }
 
 #weChat {
   position: absolute;
-  top: 18rem;
+  top: 280px;
   left: 50%;
   transform: translateX(-50%);
-  width: 13.3rem;
+  width: 210px;
 }
 img.img-contact {
-  width: 1.4rem;
-  height: 1.4rem;
+  width: 20px;
+  height: 20px;
   vertical-align: sub;
-  margin-right: 0.3rem;
+  margin-right: 10px;
   pointer-events: none;
 }
 
 #guide-button {
   position: absolute;
-  bottom: 2rem;
+  bottom: 15px;
   left: 50%;
-  width: 18.9rem;
-  height: 9.4rem;
+  width: 300px;
+  height: 68px;
   transform: translateX(-50%);
 }
 </style>

src/components/International.vue

@@ -60,7 +60,7 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 </script>
 <style  scoped>
 .International {
-    width: 100vw;
+    width: 100%;
     height: 100vh;
 }
 .txt {

src/components/RenCulture.vue

@@ -92,7 +92,7 @@ export default {
 </script>
 <style scoped>
 .RenCulture {
-  width: 100vw;
+  width: 100%;
 }
 .txt {
   margin-top: 60px;
@@ -107,9 +107,11 @@ export default {
   justify-content: space-around;
 }
 .conten a {
+  overflow: hidden;
   display: inline-block;
 }
 .conten img {
+  object-fit: cover;
   width: 100%;
   height: 100%;
 }

src/components/Tradition.vue

@@ -79,6 +79,7 @@ export default {
 .swiper-slide {
   width: 20.4rem;
   height: 23.7rem;
+  max-height: 500px;
   display: flex;
   justify-content: center;
   align-content: center;

src/view/Home.vue

@@ -56,18 +56,18 @@ export default {
 <style scoped>
 #posters {
     position: relative;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   padding-top: 80px;
 }
 .bigbac {
-  width: 100vw;
+  width: 100%;
   height: 2920px;
   background: url("../assets/images/bigbac.jpg") no-repeat;
   background-size: 100% 100%;
 }
 #iframe-container {
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   overflow: hidden;
 }