更新

src/layout/layout-part/heads.vue

@@ -1,8 +1,17 @@
 <template>
   <div id="heads">
     <el-row>
-      <el-col :span="24">
-        头部
+      <el-col :span="24" class="heads">
+        <el-col :span="12" class="left">
+          <el-image :src="afterInfo.logo"></el-image>
+          <span>{{ afterInfo.title }}</span>
+        </el-col>
+        <el-col :span="12" class="right">
+          <span>绑定微信</span>
+          <span>修改密码</span>
+          <span>账号名称</span>
+          <span>退出登录</span>
+        </el-col>
       </el-col>
     </el-row>
   </div>
@@ -15,7 +24,12 @@ export default {
   props: {},
   components: {},
   data: function() {
-    return {};
+    return {
+      afterInfo: {
+        logo: require('@/assets/logo.png'),
+        title: '管理后台',
+      },
+    };
   },
   created() {},
   methods: {},
@@ -31,4 +45,37 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.left {
+  padding: 0 20px;
+  .el-image {
+    float: left;
+    width: 50px;
+    height: 50px;
+    margin: 5px 0 0 0;
+  }
+  span {
+    height: 64px;
+    line-height: 60px;
+    font-size: 30px;
+    color: #fff;
+    padding: 0 10px;
+    text-shadow: cornflowerblue 3px 3px 3px;
+    font-family: cursive;
+  }
+}
+.right {
+  float: right;
+  padding: 0 20px;
+  text-align: right;
+  height: 63px;
+  line-height: 63px;
+  span {
+    border-right: 1px solid #000;
+    padding: 0 15px;
+  }
+  span:last-child {
+    border-right: 0;
+  }
+}
+</style>

src/layout/layout-part/menus.vue

@@ -2,7 +2,16 @@
   <div id="menus">
     <el-row>
       <el-col :span="24">
-        菜单
+        <el-menu :default-active="$route.path" background-color="#353852" text-color="#ffffff" active-text-color="#409eff" router>
+          <el-menu-item index="/">
+            <i class="el-icon-menu"></i>
+            <span slot="title">首页</span>
+          </el-menu-item>
+          <el-menu-item index="/home/index">
+            <i class="el-icon-setting"></i>
+            <span slot="title">导航四</span>
+          </el-menu-item>
+        </el-menu>
       </el-col>
     </el-row>
   </div>
@@ -18,7 +27,14 @@ export default {
     return {};
   },
   created() {},
-  methods: {},
+  methods: {
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+  },
   computed: {
     ...mapState(['user']),
     pageTitle() {
@@ -31,4 +47,12 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+// .el-menu-vertical-demo:not(.el-menu--collapse) {
+//   width: 200px;
+//   min-height: 400px;
+// }
+/deep/.el-menu {
+  border-right: none;
+}
+</style>

src/layout/main-layout.vue

@@ -48,15 +48,17 @@ export default {
   background-repeat: no-repeat;
 }
 .heads {
-  border: 1px solid cyan;
   padding: 0;
+  // background-color: #409eff8f;
+  background-color: #ffffff9f;
+  border-bottom: 1px solid #000;
 }
 .menus {
   min-height: 905px;
-  border: 1px solid blue;
+  background: rgb(53, 56, 82);
 }
 .main {
   min-height: 905px;
-  border: 1px solid red;
+  background-color: #ffffff;
 }
 </style>