refactor: refactor the homepage

Author: NicholasCui

.env.development

@@ -13,6 +13,7 @@
     "@types/lodash": "^4.14.159",
     "core-js": "^3.6.5",
     "element-ui": "^2.13.2",
+    "font-awesome": "^4.7.0",
     "graphql-request": "^2.0.0",
     "lodash": "^4.17.15",
     "swiper": "^5.4.5",

.env.production

@@ -36,16 +36,18 @@ export default {
   }
 
   body {
-    background: #fff;    font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
+    background: #f0f2f5;
+    font-family: Microsoft YaHei, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
   #app {
-    color: #000;
+    color: #101010;
+    min-width: 900px;
   }
 
    main {
-    margin: 0 auto;
+     min-height: 100vh;
   }
 </style>

package.json

@@ -1,12 +1,50 @@
 <template>
-    <footer class="footer" :class="{mobile: this.device === 'mobile'}">
-        <p class="footer__copyright">
-            706文化传播有限公司 版权所有 Copyright 2012-2020 All Rights Reserved
+  <footer class="footer">
+    <div class="footer__list">
+      <div class="item col-3">
+        <p class="item__title">
+          官方团队
         </p>
-        <p class="footer__icp">
-            京ICP证03157号｜京ICP备11043884号｜京公网安备110105023734号
+        <div class="item__list">
+          <p class="name">706行政</p>
+          <p class="name">706同学社</p>
+          <p class="name">706线上沙龙</p>
+          <p class="name">706上海</p>
+          <p class="name">706深圳</p>
+          <p class="name">706系统开发</p>
+          <p class="name">706成都</p>
+          <p class="name">706广州</p>
+        </div>
+      </div>
+      <div class="item col-2">
+        <p class="item__title">
+          合作伙伴
         </p>
-    </footer>
+        <div class="item__list">
+          <p class="name">知乎</p>
+          <p class="name">Bilibili</p>
+          <p class="name">微师</p>
+          <p class="name">Someet</p>
+          <p class="name">喜马拉雅</p>
+          <p class="name">围炉</p>
+        </div>
+      </div>
+      <div class="item col-1">
+        <p class="item__title">
+          服务与支持
+        </p>
+        <div class="item__list">
+          <p class="name">联系我们</p>
+          <p class="name">商务合作</p>
+          <p class="name">获得帮助</p>
+        </div>
+      </div>
+    </div>
+    <div class="footer__copyright">
+      <p>706文化传播有限公司 版权所有 Copyright 2012-2020 All Rights Reserved</p>
+      <p>京ICP证03157号｜京ICP备11043884号｜京公网安备110105023734号</p>
+    </div>
+  </footer>
 </template>
 
 <script>
@@ -23,19 +61,60 @@ export default {
 </script>
 
 <style scoped lang="less">
-    .footer {
-        padding: 40px 0 30px 0;
-        font-size: 13px;
-        text-align: center;
-        background: #000;
-        color: #fff;
+  .footer {
+    padding-bottom: 14px;
+    border-top: 2px solid #0B800B;
+    background: #333333;
 
-        &__copyright {
-            margin-bottom: 5px;
-        }
+    &__content {
+      max-width: 1200px;
+    }
 
-        &.mobile {
-            font-size: 9px;
+    &__list {
+      display: flex;
+      width: 757px;
+      padding: 0 32px;
+      box-sizing: border-box;
+      margin: 0 auto;
+      font-size: 12px;
+      line-height: 17px;
+      color: #D7D7D7;
+      .col-1 {
+        flex: 1 1;
+      }
+      .col-2 {
+        flex: 2 1;
+      }
+      .col-3 {
+        flex: 3 1;
+      }
+      .item {
+        padding: 0 32px;
+        &__title {
+          margin-bottom: 6px;
+          padding: 15px 0 9px 5px;
+          font-size: 13px;
+          border-bottom: 1px solid #fff;
+        }
+        &__list {
+          display: flex;
+          flex-wrap: wrap;
+          .name {
+            width: 77px;
+            padding-left: 5px;
+            height: 18px;
+            line-height: 18px;
+          }
         }
+      }
     }
+
+    &__copyright {
+      margin-top: 17px;
+      font-size: 10px;
+      line-height: 17px;
+      text-align: center;
+      color: #6B6B6B;
+    }
+  }
 </style>