更改底部联系方式

src/App.vue

@@ -44,6 +44,9 @@ router.isReady().then(() => {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  width: 100%;
+  //裁剪多余区域
+  overflow: hidden;
 }
 #defaultcontainer{
   display: flex;

src/components/Footer.vue

@@ -24,20 +24,22 @@ export default {
   display: flex;
   background-color: black;
   width:100%;
-  align-items: center;
+  //align-items: center;
   justify-content: left;
 
   @include media-breakpoint-between(xs, md) {
-    min-height:806px;
     background-image: url('/bottom/bg_wep.png');
     padding-left: 32px;
+    padding-top: 66px;
+    padding-bottom: 66px;
   }
 
   @include media-breakpoint-between(md,xxl){
-    min-height: 759px;
     margin-top: 0px;
     background-image: url('/bottom/bg_pc.png');
     padding-left: 100px;
+    padding-top: 109px;
+    padding-bottom: 109px;
   }
 
   @include media-breakpoint-up(xxl) {
@@ -45,6 +47,8 @@ export default {
     margin-top: 0px;
     background-image: url('/bottom/bg_pc.png');
     padding-left: 256px;
+    padding-top: 109px;
+    padding-bottom: 109px;
   }
 }
 </style>

src/components/Tools/FooterContent.vue

@@ -3,6 +3,37 @@
     <div id="title" style="text-align: left">
       <strong>期待与您共创</strong>
     </div>
+    <div id="qrcontainer">
+      <div id="QRCODE">
+        <span class="itemtitle">扫码添加企业微信</span>
+        <br/>
+        <div style="display: flex; flex-direction: row;">
+          <div class="qritem">
+            <img src="/bottom/qrwecom01.png" class="qrcodeimg">
+            <span class="itemcontent">
+                项目经理
+              </span>
+          </div>
+          <div class="qritem" style="margin-right: 0px;margin-left: auto;">
+            <img src="/bottom/qrwecom02.png" class="qrcodeimg">
+            <span class="itemcontent">
+                商务经理
+              </span>
+          </div>
+        </div>
+      </div>
+      <div id="QRCODE2">
+        <span class="itemtitle">WECHAT / 公众号</span>
+        <div style="display: flex; flex-direction: row;">
+          <div class="qritem" id="wechatpublic">
+            <img src="/bottom/qrwecom03.png" class="qrcodeimg">
+            <span class="itemcontent">
+              K DESIGN Lab
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
     <div id="EMAIL">
       <span class="itemtitle">EMAIL</span>
       <br/>
@@ -13,14 +44,7 @@
     <div id="ADDRESS">
       <span class="itemtitle">ADDRESS</span>
       <br/>
-      <span class="itemcontent">北京市朝阳区华瀚龙门数字艺术创意园</span>
+      <span class="itemcontent">北京市朝阳区华瀚龙门数字艺术创意园D08</span>
-    </div>
-    <div id="QRCODE">
-      <span class="itemtitle">微信扫码，添加商务同事</span>
-      <br/>
-      <img src="/bottom/qrwecom01.png">
-      &nbsp;
-      <img src="/bottom/qrwecom02.png">
     </div>
   </div>
 </template>
@@ -35,6 +59,38 @@ export default {
 @import "node_modules/bootstrap/scss/_functions.scss";
 @import "node_modules/bootstrap/scss/_variables.scss";
 @import "node_modules/bootstrap/scss/_mixins.scss";
+.qritem{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+#wechatpublic{
+
+}
+
+#qrcontainer{
+  display: flex;
+  @include media-breakpoint-between(xs, md) {
+    flex-direction: column;
+  }
+
+  @include media-breakpoint-up(md) {
+    flex-direction: row;
+  }
+}
+
+.qrcodeimg{
+  @include media-breakpoint-between(xs, md) {
+    width: 88px;
+    height: 88px;
+  }
+
+  @include media-breakpoint-up(md) {
+    width: 100px;
+    height: 100px;
+  }
+}
 
 #footercontent
 {
@@ -42,11 +98,12 @@ export default {
   flex-direction: column;
   justify-content: flex-start;
   color:white;
+  width: 100%;
 }
 
 @include media-breakpoint-between(xs, md) {
   #footercontent{
-    max-width: 304px;
+    //max-width: 304px;
     min-height: 614px;
     grid-template-columns: repeat(1, 1fr);  /* 1列等分 */
     grid-template-rows: repeat(8,90px);   /* 8行高度120px */
@@ -57,7 +114,7 @@ export default {
 @include media-breakpoint-up(md) {
   #footercontent
   {
-    width:714px;
+    //width:714px;
     min-height: 338px;
     grid-template-columns: repeat(2, 1fr);  /* 2列等分 */
     grid-template-rows: repeat(4, 90px);   /* 4行高度120px */
@@ -81,50 +138,47 @@ export default {
     font-size: 48px;
   }
 }
-#CAL{
-  @include media-breakpoint-between(xs, md) {
-
-  }
-  @include media-breakpoint-up(md) {
-
-  }
-}
 #EMAIL{
   @include media-breakpoint-between(xs, md) {
-
+    padding-top: 24px;
   }
   @include media-breakpoint-up(md) {
-
+    padding-top: 56px;
-  }
-}
-#WECHAT{
-  @include media-breakpoint-between(xs, md) {
-
-  }
-  @include media-breakpoint-up(md) {
-
   }
 }
 #ADDRESS{
   @include media-breakpoint-between(xs, md) {
-
+    padding-top: 24px;
   }
   @include media-breakpoint-up(md) {
-
+    padding-top: 56px;
   }
 }
 #QRCODE{
+  width: 50%;
   @include media-breakpoint-between(xs, md) {
-
+    padding-top: 9px;
   }
   @include media-breakpoint-up(md) {
-
+    padding-top: 47px;
+  }
+}
+#QRCODE2{
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  @include media-breakpoint-between(xs, md) {
+    padding-top: 9px;
+    justify-content: flex-start;
+  }
+  @include media-breakpoint-up(md) {
+    padding-top: 47px;
+    justify-content: flex-end;
   }
 }
 
 .itemtitle
 {
-  width: 179px;
   overflow-wrap: break-word;
   color: rgba(255, 255, 255, 0.6);
   font-size: 16px;