diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 4b53893..5f897a1 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -14,24 +14,29 @@
             white-space: nowrap;
             line-height: 48px;">商务合作</strong>
       </div>
-      <div id="">
-        <p class="itemtitle">CAL</p>
-        <p class="itemcontent">13632037777 田先生</p>
+      <div id="CAL">
+        <span class="itemtitle">CAL</span>
+        <br/>
+        <span class="itemcontent">13632037777 田先生</span>
       </div>
-      <div id="">
-        <p class="itemtitle">EMAIL</p>
-        <p class="itemcontent">Sevice@feishu.com</p>
+      <div id="EMAIL">
+        <span class="itemtitle">EMAIL</span>
+        <br/>
+        <span class="itemcontent">Sevice@feishu.com</span>
       </div>
-      <div id="">
-        <p class="itemtitle">WECHAT</p>
-        <p class="itemcontent">KDesign公众号</p>
+      <div id="WECHAT">
+        <span class="itemtitle">WECHAT</span>
+        <br/>
+        <span class="itemcontent">KDesign公众号</span>
       </div>
-      <div id="">
-        <p class="itemtitle">ADRESS</p>
-        <p class="itemcontent">北京市朝阳区崔各庄创意产业</p>
+      <div id="ADDRESS">
+        <span class="itemtitle">ADDRESS</span>
+        <br/>
+        <span class="itemcontent">北京市朝阳区崔各庄创意产业</span>
       </div>
-      <div id="">
-        <p class="itemtitle">微信扫码，添加商务同事</p>
+      <div id="QRCODE">
+        <span class="itemtitle">微信扫码，添加商务同事</span>
+        <br/>
         <img src="/QRCodeBottom.png">
       </div>
     </div>
@@ -59,41 +64,16 @@ export default {
 }
 #footercontent
 {
+  display: grid;
   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
   {
     min-height:806px;
   }
   #footercontent{
-    display: grid;
     max-width: 304px;
     min-height: 614px;
     grid-template-columns: repeat(1, 1fr);  /* 1列等分 */
@@ -112,8 +92,92 @@ export default {
     width:714px;
     min-height: 338px;
     grid-template-columns: repeat(2, 1fr);  /* 2列等分 */
-    grid-template-rows: repeat(4, 60px);   /* 2行高度120px */
+    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>
diff --git a/start.html b/start.html
new file mode 100644
index 0000000..e149a39
--- /dev/null
+++ b/start.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+
+</body>
+</html>