首页开发

src/styles/normalize.scss

@@ -358,3 +358,8 @@ template {
   height: 100%;
   color: #fff;
 }
+ul,li{
+  padding:0;
+  margin:0;
+  list-style:none;
+}

src/views/home/components/empennage/index.vue

@@ -0,0 +1,48 @@
+<!-- 尾部链接 -->
+<template>
+  <div calss="footer">
+    <ul>
+      <li><a href="http://www.sac.gov.cn/">国家标准化管理委员会</a></li>
+      <li><a href="http://www.sac.gov.cn/">全国标准公共服务平台</a></li>
+      <li><a href="http://www.sac.gov.cn/">国家标准全文公开</a></li>
+      <li><a href="http://www.sac.gov.cn/">全国汽车标准化技术委员会</a></li>
+      <li><a href="http://www.sac.gov.cn/">交通运输标准化信息平台</a></li>
+      <li><a href="http://www.sac.gov.cn/">工信部装备工业发展中心</a></li>
+      <li><a href="http://www.sac.gov.cn/">中华人民共和国生态环境部</a></li>
+      <li><a href="">更多链接></a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Empennage',
+    components: {},
+    mixins: [],
+    data() {
+      return {}
+    },
+    computed: {},
+    watch: {},
+    mounted() {},
+    methods: {},
+  }
+</script>
+
+<style lang="scss" scoped>
+  .footer {
+    height: 40px;
+    ul {
+      display: flex;
+      line-height: 40px;
+      text-align: center;
+      li {
+        flex: 1;
+      }
+      li:hover {
+        color: blue;
+        text-decorationn: underline;
+      }
+    }
+  }
+</style>

src/views/home/components/navMenu/index.vue

@@ -66,11 +66,11 @@
   .nav-menu {
     margin-bottom: 10px;
     .top {
-      margin-bottom: 20px;
       display: flex;
+      margin-bottom: 20px;
       .menu-item {
-        margin-right: 10px;
         flex: 1;
+        margin-right: 10px;
         height: 50px;
         line-height: 50px;
         text-align: center;
@@ -91,8 +91,8 @@
           flex: 1;
           line-height: 100px;
           text-align: center;
-          border: 1px solid #ddd;
           margin-right: 10px;
+          border: 1px solid #ddd;
           &:last-child {
             margin-right: 0;
           }

src/views/home/index.vue

@@ -15,10 +15,10 @@
         <search-group></search-group>
         <div class="main-left-wrap">
           <el-tabs v-model="activeName" @tab-click="handleTabClick">
-            <el-tab-pane label="资料中心" name="information">
+            <el-tab-pane class="tabtitle" label="资料中心" name="information">
               <information></information>
             </el-tab-pane>
-            <el-tab-pane label="我的动态" name="dynamic">
+            <el-tab-pane calss="tabtitle" label="我的动态" name="dynamic">
               <dynamic></dynamic>
             </el-tab-pane>
           </el-tabs>
@@ -29,6 +29,11 @@
         <todo-list></todo-list>
       </div>
     </div>
+    <div calss="home_footer">
+      <div class="footer">
+        <Empennage></Empennage>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -38,10 +43,14 @@
   import dynamic from './components/dynamic'
   import navMenu from './components/navMenu'
   import todoList from './components/todoList'
+  import Empennage from 'views/home/components/empennage'
+  // import empennage from 'views/home/components/empennage'
 
   export default {
     name: 'Home',
     components: {
+      Empennage,
+      // empennage,
       searchGroup,
       information,
       dynamic,
@@ -105,22 +114,29 @@
       }
     }
     .home_main {
+      display: flex;
       height: 77vh;
       padding: 10px 0;
       margin-top: 16px;
-      display: flex;
       .left_wrapper {
         display: flex;
-        border: 1px solid #ddd;
         flex: 1;
-        margin-right: 10px;
         flex-direction: column;
+        margin-right: 10px;
+        border: 1px solid #ddd;
+        .tabtitle {
+          ::v-deep {
+            .el-tabs__item {
+              font-size: 40px;
+            }
+          }
+        }
       }
       .right_wrapper {
-        width: 550px;
-        height: 100%;
         display: flex;
         flex-direction: column;
+        width: 550px;
+        height: 100%;
       }
       .search-condition {
         display: block;
@@ -129,5 +145,9 @@
         }
       }
     }
+    .footer {
+      height: 40px;
+      border: 1px solid #ddd;
+    }
   }
 </style>