feat: 公共底部切图完成

src/assets/css/_reset.scss

@@ -8,6 +8,7 @@ html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,img {
 
 html,body,#app{
     height: 100%;
+    background: #F0F5FA;
 }
 
 body{

src/components/layout/footer.vue

 <template>
-    <footer>
-        <div style="color:yellow;">©Copyright 2020 江北新区</div>
-    </footer>
+  <div class="foot">
+    <div class="container">
+      <div class="row foot-top">
+        <div class="col-lg-2">
+          <div class="foot-cate">咨询电话</div>
+          <div class="zxdh">
+            <img src="../../assets/image/foot/dianhua.png" alt="" />
+          </div>
+        </div>
+        <div class="col-lg-7">
+          <div class="foot-cate">友情链接</div>
+          <div class="row link">
+            <div class="col-lg-4">国家市场监督管理总局</div>
+            <div class="col-lg-4">国家市场监督管理总局</div>
+            <div class="col-lg-4">国家市场监督管理总局</div>
+            <div class="col-lg-4">国家市场监督管理总局</div>
+            <div class="col-lg-4">国际物品编码组织(GS1)成员网站</div>
+          </div>
+        </div>
+        <div class="col-lg-3">
+          <div class="row">
+            <div class="col qrcode">
+              <div class="foot-cate">官方微信</div>
+              <div class="qrcode_img">
+                <img src="../../assets/image/foot/weixin.png" alt="" />
+              </div>
+            </div>
+            <div class="col qrcode">
+              <div class="foot-cate">官方微信</div>
+              <div class="qrcode_img">
+                <img src="../../assets/image/foot/weixin.png" alt="" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="foot-line"></div>
+      <div class="row foot-middle">
+        <div class="col-lg-1">语言</div>
+        <div class="col col-lg-1 checked">简体中文</div>
+        <div class="col col-lg-1">English</div>
+      </div>
+      <div class="foot-line"></div>
+      <div class="row foot-bottom">
+        <div class="col-lg-2">版权所有：中国物品编码中心</div>
+        <div class="col-lg-4">
+          京ICP备11036137号-10 | 京公网安备11010102001434号
+        </div>
+        <div class="col-lg-6">地址：北京市东城区安定门外大街138号皇</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-    export default {
-        data() {
-            return {
-            }
-        },
-        computed:{
-        },
-        methods: {
-        },
-        mounted() {
-        },
-        created(){
-        }
-    }
+export default {
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+  mounted() {},
+  created() {},
+};
 </script>
 
 <style lang="scss">
 </style>
+<style lang="scss" scoped>
+.foot {
+  background: #fff;
+  .foot-cate {
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #0e2c6b;
+    font-size: 16px;
+    margin-bottom: 10px;
+    margin-top: 30px;
+  }
+  .foot-line {
+    height: 1px;
+    background: rgba(14, 44, 107, 0.13);
+    box-shadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.04);
+  }
+  .foot-top{
+      padding-bottom: 20px;
+  }
+  .foot-middle {
+    padding: 20px 0;
+    .checked{
+        color: #F26335;
+    }
+  }
+  .foot-bottom{
+    padding: 20px 0;
+  }
+  .link {
+    div {
+      line-height: 30px;
+    }
+  }
+  .qrcode {
+    text-align: center;
+  }
+}
+</style>

src/components/layout/header/index.vue

@@ -128,6 +128,9 @@ export default {
 </script>
 
 <style lang="scss">
+.navbar{
+    background: #fff;
+  }
 .gs-header-nav {
 
   .navbar-nav-wrap {
@@ -157,6 +160,7 @@ export default {
       margin: 0 16px;
     }
   }
+  
 
   .navbar-toggler {
     padding: .5rem .5rem

src/components/main.vue

@@ -8,10 +8,11 @@
 
 <script>
 import Header from "./layout/header/index.vue";
-// import Footer from "./layout/footer.vue"
+import Footer from "./layout/footer.vue"
 export default {
   components: {
     Header,
+    Footer,
   },
   data() {
     return {