初始化

src/components/header.vue

+<template>
+  <div class="header_box">
+    <div class="header_box_left"><img src="" alt=""><span>欢迎您：xxxxx</span></div>
+    <div class="header_box_right"><span>当前登录人数：4</span>
+      <span>&</span>
+      <span>消息</span>
+      <span>消息2</span>
+      <span>退出</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'header'
+}
+</script>
+
+<style scoped lang="scss">
+  .header_box {
+    color: #ffffff;
+    font-size: 14px;
+    height: 60px;
+    padding-left: 20px;
+    padding-right: 20px;
+    background-color: rgba(18, 35, 87, .1);
+    display: flex;
+    justify-content: space-between;
+    .header_box_left{
+      height: 60px;
+      line-height: 60px;
+    }
+    .header_box_right{
+      height: 60px;
+      line-height: 60px;
+
+    }
+  }
+</style>

src/router/modules/index.js

@@ -13,6 +13,15 @@ export default [
     component: () => import("@/views/login.vue")
   },
   {
+    path: "/mhgl",
+    name: "mhgl",
+    meta: {
+      title: "门户管理",
+      auth: "5"
+    },
+    component: () => import("@/views/mhgl/inndex.vue")
+  },
+  {
     path: "/Home",
     name: "Home",
     meta: {
@@ -21,4 +30,4 @@ export default [
     },
     component: () => import("@/views/Home.vue")
   }
-]
+]
\ No newline at end of file

src/views/Home.vue

 <template>
-  <div class="home"></div>
+  <div class="home">
+<!--    <el-container>-->
+<!--      <el-header>-->
+<!--        <header-box/>-->
+<!--      </el-header>-->
+<!--      <el-main>Main</el-main>-->
+<!--    </el-container>-->
+  </div>
 </template>
 
 <script>
+// import headerBox from '../components/header.vue'
 import { mapGetters } from "vuex";
 export default {
   name: "Home",
+  // components:{
+  //   headerBox
+  // },
   data() {
     return{}
   },
@@ -19,5 +30,6 @@ export default {
 };
 </script>
 <style lang="scss">
-
+.home{
+}
 </style>

src/views/mhgl/index.vue

+<template>
+  <div class="mhgl_box">
+    <el-container>
+      <el-header>
+        <header-box/>
+      </el-header>
+      <el-main>Main</el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import headerBox from '../../components/header.vue'
+import { mapGetters } from "vuex";
+export default {
+  components:{
+    headerBox
+  },
+  name: 'index'
+}
+</script>
+
+<style scoped lang="scss">
+  .mhgl_box {
+    width: 100%;
+    height: 100vh;
+    background-image: url("../../assets/img/bg.png");
+    background-size: 100% 100%;
+    /*background-image: url('@/assets/img/bg.png');*/
+    .el-header {
+      padding: 0;
+    }
+  }
+</style>