kdofficial/src/components/Tools/FooterContent.vue

<template>
  <div id="footercontent">
    <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="qrwecom01" class="qrcodeimg">
            <span class="itemcontent">
                项目经理
              </span>
          </div>
          <div class="qritem" style="margin-right: 0px;margin-left: auto;">
            <img :src="qrwecom02" 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="qrwecom03" class="qrcodeimg">
            <span class="itemcontent">
              K DESIGN Lab
            </span>
          </div>
        </div>
      </div>
    </div>
    <div id="EMAIL">
      <span class="itemtitle">EMAIL</span>
      <br/>
      <span class="itemcontent">
<!--        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">
      <span class="itemtitle">ADDRESS</span>
      <br/>
      <span class="itemcontent">北京市朝阳区华瀚龙门数字艺术创意园D08</span>
    </div>
  </div>
</template>

<script>
import qrwecom01 from "@/assets/bottom/qrwecom01.png";
import qrwecom02 from "@/assets/bottom/qrwecom02.png";
import qrwecom03 from "@/assets/bottom/qrwecom03.png";
export default {
  name: "FooterContent",
  data() {
    return {
      qrwecom01,
      qrwecom02,
      qrwecom03
    };
  }
}
</script>

<style scoped lang="scss">
@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
{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color:white;
  width: 100%;
  //裁剪多余区域
  overflow: hidden;
}

@include media-breakpoint-between(xs, md) {
  #footercontent{
    //max-width: 304px;
    min-height: 614px;
    grid-template-columns: repeat(1, 1fr);  /* 1列等分 */
    grid-template-rows: repeat(8,90px);   /* 8行高度120px */

  }
}

@include media-breakpoint-up(md) {
  #footercontent
  {
    //width:714px;
    min-height: 338px;
    grid-template-columns: repeat(2, 1fr);  /* 2列等分 */
    grid-template-rows: repeat(4, 90px);   /* 4行高度120px */
  }
}

#title{
  width: 112px;
  height: 48px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 48px;
  @include media-breakpoint-between(xs, md) {
    font-size: 24px;
  }
  @include media-breakpoint-up(md) {
    font-size: 48px;
  }
}
#EMAIL{
  @include media-breakpoint-between(xs, md) {
    padding-top: 24px;
  }
  @include media-breakpoint-up(md) {
    padding-top: 56px;
  }
}
#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; // 垂直方向：子元素顶部对齐
     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) {
    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; // 文本居中对齐 (新调整)
  }
}

.itemtitle
{
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  font-family: PingFangSC-Regular;
  font-weight: normal;
  text-align: left;
  line-height: 30px;
}
.itemcontent
{
  width: 198px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 20px;
  font-family: PingFangSC-Regular;
  font-weight: normal;
  text-align: left;
  line-height: 30px;
}

</style>