add:layout

src/App.vue

@@ -1,16 +1,20 @@
 <template>
-  <div style="height:100%;width:100%;">
+  <div>
     <header-container/>
-    <div class="main-container">
-      <router-view/>
+    <div class="container-wrapper">
+      <slot>
+        <div class="main-container">
+          <router-view/>
+        </div>
+      </slot>
     </div>
     <footer-container/>
   </div>
 </template>
 
 <script>
-import HeaderContainer from '@/components/commons/Header'
-import FooterContainer from '@/components/commons/Footer'
+import HeaderContainer from '@/components/commons/Header2.0'
+import FooterContainer from '@/components/commons/Footer2.0'
 import {getCurrentUser, storageGet, storageSave} from '@/js/index'
 
 export default {

src/components/commons/Footer.vue

@@ -1,68 +1,67 @@
 <template>
   <div class="footer-nav">
-    <div class="container">
-      <nav class="pull-left">
-        <ul>
-          <li>
-            <a href="#">商务合作</a>
-          </li>
-          &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
-          <li>
-            <a href="#">关于众测</a>
-          </li>
-          &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
-          <li>
-            <a href="#">友情链接</a>
-          </li>
-          &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
-          <li>
-            <a href="#">用户协议</a>
-          </li>
-          &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
-           <li>
-            <a href="#">隐私政策</a>
-          </li>
-        </ul>
-      </nav>
-      <div class="copyright pull-right">
-        ©{{time}}
-        <a target="_blank" href="http://www.beian.miit.gov.cn">  粤ICP备09019504号</a>
-      </div>
+    <nav class="pull-left">
+      <ul>
+        <li>
+          <a href="#">商务合作</a>
+        </li>
+        &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+        <li>
+          <a href="#">关于众测</a>
+        </li>
+        &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+        <li>
+          <a href="#">友情链接</a>
+        </li>
+        &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+        <li>
+          <a href="#">用户协议</a>
+        </li>
+        &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+        <li>
+          <a href="#">隐私政策</a>
+        </li>
+      </ul>
+    </nav>
+    <div class="copyright pull-right">
+      ©{{time}}
+      <a target="_blank" href="http://www.beian.miit.gov.cn"> 粤ICP备09019504号</a>
     </div>
   </div>
 </template>
 
 <script>
-export default {
-  name: "footer-container",
-  data() {
-    return {
-      time: new Date().getFullYear()
-    };
-  }
-};
+  export default {
+    name: "footer-container",
+    data() {
+      return {
+        time: new Date().getFullYear()
+      };
+    }
+  };
 </script>
 
 <style scoped>
-.footer-nav {
-    background-color:#f0f0f0;
+  .footer-nav {
+    background-color: #f0f0f0;
     padding: 15px 0;
     text-align: center;
     display: flex;
     font-size: 1.2rem;
     color: #666;
-}
-.footer-nav ul{
+  }
+
+  .footer-nav ul {
     margin-bottom: 0;
     padding: 0;
     list-style: none;
-}
+  }
 
-.footer-nav ul li {
+  .footer-nav ul li {
     display: inline-block;
-}
+  }
 
-.footer-nav ul li a {
+  .footer-nav ul li a {
     color: inherit;
     padding: 5px;
     font-weight: 500;
@@ -70,13 +69,14 @@ export default {
     border-radius: 3px;
     position: relative;
     display: block;
-}
+  }
 
-.footer-nav .copyright {
+  .footer-nav .copyright {
     padding: 5px 0;
-    color:#333;
-}
-.copyright a{
-    color:#666;
-}
+    color: #333;
+  }
+
+  .copyright a {
+    color: #666;
+  }
 </style>

src/components/commons/Footer2.0.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="footer-nav">
+    <div class="container">
+      <el-row style="height: 120px">
+        <el-col :span="5" class="nav-logo-block">
+          <div class="nav-title-wrapper">
+            <img src="../../assets/img/logo-white.png" alt="logo" class="nav-logo">
+            <div class="nav-title">
+              标准驱动的集成化众测服务<br/>
+              平台及示范应用
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="19" style="padding-left: 15%">
+          <div class="copyright-block pull-left" style="margin: 12px 0">
+            版权所有 © 信息产品及科技服务集成化众测服务平台研发与应用项目组<br/>
+            京ICP备xxxxxxx号　文保网安备xxxxxxx<br/>
+            电话：86-10-xxxxxxxx　传真：86-10-xxxxxxx<br/>
+            电子邮箱：xxx@xxxxxxx.com
+          </div>
+          <div class="code-block pull-right">
+            <img src="../../assets/img/QRcode.png" alt="QRcode" class="mooctest-code" style="width: 110px;height: 110px;display: block">
+            <div style="width: 110px;text-align: center">官方微信公众号</div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "Footer2.0"
+  }
+</script>
+
+<style scoped>
+  .footer-nav{
+    height: 120px;
+    background:rgba(47,48,48,1);
+    color: white;
+    padding: 30px 0;
+    font-size: 14px;
+    font-family:Source Han Sans CN;
+  }
+  .nav-title{
+    display: inline-block;
+  }
+  .nav-logo{
+    height: 40px;
+    width: 40px;
+    margin-right: 10px;
+  }
+  .nav-logo-block{
+    border-right: 1px solid white;
+    padding: 10px 0;
+    margin: 20px 0
+  }
+  .copyright-block , .code-block{
+    display: inline-block;
+  }
+</style>

src/components/commons/Header2.0.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="header-nav">
+    <div class="container">
+        <div class="nav-location pull-left">
+          <i class="el-icon-location-outline" style="margin-right: 5px"></i>
+          <span style="line-height: 34px">广州</span>
+        </div>
+        <div class="nav-list pull-right">
+          <ul>
+            <li>
+              <a href="#">请登录</a>
+            </li>
+            &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+            <li>
+              <a href="#">免费注册</a>
+            </li>
+            &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+            <li>
+              <a href="#">我的众测</a>
+            </li>
+            &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+            <li>
+              <a href="#">机构入驻</a>
+            </li>
+            &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+            <li>
+              <a href="#">客服中心</a>
+            </li>
+          </ul>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "Header2.0"
+  }
+</script>
+
+<style scoped>
+  .header-nav {
+    padding: 15px 0;
+    text-align: center;
+    display: flex;
+    font-size: 16px;
+    color: white;
+    /*height:58px;*/
+    background:rgba(47,48,48,1);
+  }
+  .header-nav ul{
+    margin-bottom: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .header-nav ul li {
+    display: inline-block;
+  }
+
+  .header-nav ul li a {
+    color: inherit;
+    padding: 5px;
+    font-weight: 500;
+    text-transform: uppercase;
+    border-radius: 3px;
+    position: relative;
+    display: block;
+  }
+
+  .header-nav .copyright {
+    padding: 5px 0;
+    color:#333;
+  }
+  .copyright a{
+    color:#666;
+  }
+</style>

src/style/main.scss

@@ -65,25 +65,25 @@ a {
 
 @media (min-width: 576px) {
     .container {
-        max-width:540px
+      width: 80%;
     }
 }
 
 @media (min-width: 768px) {
     .container {
-        max-width:720px
+        width: 80%;
     }
 }
 
 @media (min-width: 992px) {
     .container {
-        max-width:960px
+      width: 80%;
     }
 }
 
 @media (min-width: 1200px) {
     .container {
-        max-width:1140px
+      width: 80%;
     }
 }