From 0acf4e869c310891d2e6c4cefd7d2112da8d65de Mon Sep 17 00:00:00 2001
From: zhcnyuyang <yyydm@qq.com>
Date: Sat, 24 May 2025 03:49:42 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=80=E6=9C=89=E9=97=AE=E9=A2=98=E5=85=A8?=
 =?UTF-8?q?=E9=83=A8=E8=A7=A3=E5=86=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ContactUs.vue           |  2 +
 src/components/Footer.vue              |  2 +
 src/components/Tools/FooterContent.vue | 76 +++++++++++++++++++++++---
 3 files changed, 71 insertions(+), 9 deletions(-)

diff --git a/src/components/ContactUs.vue b/src/components/ContactUs.vue
index c775520..c55b331 100644
--- a/src/components/ContactUs.vue
+++ b/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;
   }
 }
 
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index a9080b8..3c2ab41 100644
--- a/src/components/Footer.vue
+++ b/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;
   }
diff --git a/src/components/Tools/FooterContent.vue b/src/components/Tools/FooterContent.vue
index 784c755..fb62940 100644
--- a/src/components/Tools/FooterContent.vue
+++ b/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{
-  display: flex;
-  flex-direction: column;
-  width: 50%;
+#QRCODE2 {
+   display: flex;
+   flex-direction: column;
+   width: 50%; // 您已有的样式
+
+   @include media-breakpoint-between(xs, md) {
+     padding-top: 9px;           // 您已有的样式
+     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) {
-    padding-top: 9px;
-    justify-content: flex-start;
+    justify-content: flex-start; // 子元素 (#wechatpublic) 左对齐 (保持不变)
   }
   @include media-breakpoint-up(md) {
-    padding-top: 47px;
-    justify-content: flex-end;
+    justify-content: center;
+  }
+}
+
+// 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; // 文本居中对齐 (新调整)
   }
 }