将底部栏内容单拎出来

src/components/Footer.vue

@@ -1,3 +1,7 @@
+<script setup>
+import FooterContent from './components/Tools/FooterContent.vue'
+</script>
+
 <template>
   <div id="footerroot" class="container-fluid">
     <div id="footercontent">

src/components/Tools/FooterContent.vue

@@ -0,0 +1,165 @@
+<template>
+  <div id="footercontent">
+    <div id="title" style="text-align: left">
+      <strong style="
+            width: 112px;
+            height: 48px;
+            overflow-wrap: break-word;
+            color: rgba(255, 255, 255, 1);
+            font-size: 28px;
+            font-family: PingFangSC-Medium;
+            font-weight: 500;
+            text-align: left;
+            white-space: nowrap;
+            line-height: 48px;">商务合作</strong>
+    </div>
+    <div id="CAL">
+      <span class="itemtitle">CAL</span>
+      <br/>
+      <span class="itemcontent">13632037777 田先生</span>
+    </div>
+    <div id="EMAIL">
+      <span class="itemtitle">EMAIL</span>
+      <br/>
+      <span class="itemcontent">Sevice@feishu.com</span>
+    </div>
+    <div id="WECHAT">
+      <span class="itemtitle">WECHAT</span>
+      <br/>
+      <span class="itemcontent">KDesign公众号</span>
+    </div>
+    <div id="ADDRESS">
+      <span class="itemtitle">ADDRESS</span>
+      <br/>
+      <span class="itemcontent">北京市朝阳区崔各庄创意产业</span>
+    </div>
+    <div id="QRCODE">
+      <span class="itemtitle">微信扫码，添加商务同事</span>
+      <br/>
+      <img src="/QRCodeBottom.png">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "FooterContent"
+}
+</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";
+
+#footercontent
+{
+  display: grid;
+  color:white;
+}
+
+@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{
+  @include media-breakpoint-between(xs, md) {
+    grid-column: 1;
+    grid-row: 1;
+  }
+  @include media-breakpoint-up(md) {
+    grid-column: 1;
+    grid-row: 1;
+  }
+}
+#CAL{
+  @include media-breakpoint-between(xs, md) {
+    grid-column: 1;
+    grid-row: 2;
+  }
+  @include media-breakpoint-up(md) {
+    grid-column: 1;
+    grid-row: 2;
+  }
+}
+#EMAIL{
+  @include media-breakpoint-between(xs, md) {
+    grid-column: 1;
+    grid-row: 3;
+  }
+  @include media-breakpoint-up(md) {
+    grid-column: 1;
+    grid-row: 3;
+  }
+}
+#WECHAT{
+  @include media-breakpoint-between(xs, md) {
+    grid-column: 1;
+    grid-row: 4;
+  }
+  @include media-breakpoint-up(md) {
+    grid-column: 1;
+    grid-row: 4;
+  }
+}
+#ADDRESS{
+  @include media-breakpoint-between(xs, md) {
+    grid-column: 1;
+    grid-row: 5;
+  }
+  @include media-breakpoint-up(md) {
+    grid-column: 2;
+    grid-row: 2;
+  }
+}
+#QRCODE{
+  @include media-breakpoint-between(xs, md) {
+    grid-column: 1;
+    grid-row: 6;
+  }
+  @include media-breakpoint-up(md) {
+    grid-column: 2;
+    grid-row: 3 / span 2;
+  }
+}
+
+.itemtitle
+{
+  width: 179px;
+  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>