即将更改布局，特此保存

src/components/ContactUs.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "ContactUs"
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Footer.vue

@@ -1,6 +1,39 @@
 <template>
   <div id="footerroot" class="container-fluid">
     <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="">
+        <p class="itemtitle">CAL</p>
+        <p class="itemcontent">13632037777 田先生</p>
+      </div>
+      <div id="">
+        <p class="itemtitle">EMAIL</p>
+        <p class="itemcontent">Sevice@feishu.com</p>
+      </div>
+      <div id="">
+        <p class="itemtitle">WECHAT</p>
+        <p class="itemcontent">KDesign公众号</p>
+      </div>
+      <div id="">
+        <p class="itemtitle">ADRESS</p>
+        <p class="itemcontent">北京市朝阳区崔各庄创意产业</p>
+      </div>
+      <div id="">
+        <p class="itemtitle">微信扫码，添加商务同事</p>
+        <img src="/QRCodeBottom.png">
+      </div>
     </div>
   </div>
 </template>
@@ -18,25 +51,53 @@ export default {
 
 #footerroot
 {
+  display: flex;
   background-color: black;
   width:100%;
+  align-items: center;
   justify-content: center;
 }
 #footercontent
 {
+  color:white;
+}
 
+.itemtitle
+{
+  width: 179px;
+  height: 60px;
+  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;
+  height: 60px;
+  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;
 }
 
 @include media-breakpoint-between(xs, md) {
   #footerroot
   {
-    background-color: black;
+    min-height:806px;
-    width:100%;
-    justify-content: center;
-    height:806px;
   }
-  #footercontent
+  #footercontent{
-  {
+    display: grid;
+    max-width: 304px;
+    min-height: 614px;
+    grid-template-columns: repeat(1, 1fr);  /* 1列等分 */
+    grid-template-rows: repeat(8,minmax(60px,1fr));   /* 8行高度120px */
 
   }
 }
@@ -44,15 +105,14 @@ export default {
 @include media-breakpoint-up(md) {
   #footerroot
   {
-    background-color: black;
+    min-height: 759px;
-    width:100%;
-    justify-content: center;
-    height: 759px;
   }
   #footercontent
   {
-    width:1912px;
+    width:714px;
-    align-content: center;
+    min-height: 338px;
+    grid-template-columns: repeat(2, 1fr);  /* 2列等分 */
+    grid-template-rows: repeat(4, 60px);   /* 2行高度120px */
   }
 }
 

vite.config.js

@@ -6,6 +6,10 @@ import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  server: {
+    host: '0.0.0.0',
+    port: 8991
+  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))