所有问题全部解决

src/components/ContactUs.vue

@@ -43,12 +43,14 @@ export default {
   @include media-breakpoint-between(xs, md) {
     background-image: url('/bottom/bg_wep.png');
     padding-left: 32px;
+    padding-right: 32px;
     margin-top: 120px;
   }
 
   @include media-breakpoint-up(md) {
     background-image: url('/bottom/bg_pc.png');
     padding-left: 100px;
+    padding-right: 100px;
   }
 }
 

src/components/Footer.vue

@@ -30,6 +30,7 @@ export default {
   @include media-breakpoint-between(xs, md) {
     background-image: url('/bottom/bg_wep.png');
     padding-left: 32px;
+    padding-right: 32px;
     padding-top: 66px;
     padding-bottom: 66px;
   }
@@ -38,6 +39,7 @@ export default {
     margin-top: 0px;
     background-image: url('/bottom/bg_pc.png');
     padding-left: 100px;
+    padding-right: 100px;
     padding-top: 109px;
     padding-bottom: 109px;
   }

src/components/Tools/FooterContent.vue

@@ -38,7 +38,17 @@
       <span class="itemtitle">EMAIL</span>
       <br/>
       <span class="itemcontent">
-        kdbd@kdesign.top&nbsp;商务<br/>kdhr@kdesign.top&nbsp; 招聘
+<!--        kdbd@kdesign.top&nbsp;商务<br/>kdhr@kdesign.top&nbsp; 招聘-->
+        <table>
+          <tr>
+            <td style="width: 60px;">kdbd@kdesign.top</td>
+            <td style="width: 50px;">商务</td>
+          </tr>
+          <tr>
+            <td style="width: 60px;">kdhr@kdesign.top</td>
+            <td style="width: 50px;">招聘</td>
+          </tr>
+        </table>
       </span>
     </div>
     <div id="ADDRESS">
@@ -99,6 +109,8 @@ export default {
   justify-content: flex-start;
   color:white;
   width: 100%;
+  //裁剪多余区域
+  overflow: hidden;
 }
 
 @include media-breakpoint-between(xs, md) {
@@ -163,17 +175,63 @@ export default {
     padding-top: 47px;
   }
 }
-#QRCODE2{
+#QRCODE2 {
    display: flex;
    flex-direction: column;
-  width: 50%;
+   width: 50%; // 您已有的样式
+
    @include media-breakpoint-between(xs, md) {
-    padding-top: 9px;
+     padding-top: 9px;           // 您已有的样式
-    justify-content: flex-start;
+     justify-content: flex-start; // 垂直方向：子元素顶部对齐
+     align-items: flex-start;     // 水平方向：子元素左对齐 (保持不变)
+   }
+
+   @include media-breakpoint-up(md) {
+     padding-top: 47px;           // 您已有的样式
+     justify-content: flex-end;   // 垂直方向：子元素底部对齐 (如果您希望垂直也居中，可改为 center)
+     align-items: center;       // 水平方向：子元素居中对齐 (新调整)
+   }
+ }
+
+#QRCODE2 > div {
+
+  @include media-breakpoint-between(xs, md) {
+    justify-content: flex-start; // 子元素 (#wechatpublic) 左对齐 (保持不变)
   }
   @include media-breakpoint-up(md) {
-    padding-top: 47px;
+    justify-content: center;
-    justify-content: flex-end;
+  }
+}
+
+// 3. 调整 #QRCODE2 内部 .itemtitle 的文本对齐
+#QRCODE2 .itemtitle {
+  // .itemtitle 全局默认 text-align: left
+
+  @include media-breakpoint-between(xs, md) {
+    text-align: left; // 明确保持左对齐 (保持不变)
+  }
+  @include media-breakpoint-up(md) {
+    text-align: center; // 文本居中对齐 (新调整)
+  }
+}
+
+#QRCODE2 .qritem { // 这会影响到 #wechatpublic
+  @include media-breakpoint-between(xs, md) {
+    align-items: flex-start; // 内部子元素 (img, span.itemcontent) 水平左对齐 (保持不变)
+  }
+  @include media-breakpoint-up(md) {
+    align-items: center;   // 内部子元素 (img, span.itemcontent) 水平居中对齐 (新调整)
+  }
+}
+
+#QRCODE2 .qritem .itemcontent { // 这会影响到 #wechatpublic 内部的 .itemcontent
+  // .itemcontent 全局默认 text-align: left
+
+  @include media-breakpoint-between(xs, md) {
+    text-align: left; // 明确保持左对齐 (保持不变)
+  }
+  @include media-breakpoint-up(md) {
+    text-align: center; // 文本居中对齐 (新调整)
   }
 }