导航菜单

src/components/Home.vue

@@ -1,11 +1,36 @@
 <template>
   <el-container class="home-container">
     <el-header>
-      Header
+      <div>
+        <img src="../assets/images/logo-qt.png" alt="">
+        <span>后台管理系统</span>
+      </div>
       <el-button type="info" @click="logout">退出</el-button>
     </el-header>
     <el-container>
-      <el-aside width="200px">Aside</el-aside>
+      <el-aside width="200px">
+        <el-menu
+          background-color="#313743"
+          text-color="#fff"
+          active-text-color="#ffd04b">
+          <el-submenu index="1">
+            <!-- 一级菜单模板 -->
+            <template slot="title">
+              <!--图标-->
+              <i class="el-icon-location"></i>
+              <!--文本-->
+              <span>导航一</span>
+            </template>
+            <!--二级菜单-->
+            <el-menu-item index="1-4-1">
+              <!--图标-->
+              <i class="el-icon-location"></i>
+              <!--文本-->
+              <span>导航一</span>
+            </el-menu-item>
+          </el-submenu>
+        </el-menu>
+      </el-aside>
       <el-main>Main</el-main>
     </el-container>
   </el-container>
@@ -30,6 +55,23 @@ export default {
   }
   .el-header{
     background-color: #363D40;
+    display: flex;
+    justify-content: space-between;
+    padding-left: 0;
+    align-items: center;
+    color: #ffffff;
+    font-size: 20px;
+    div {
+      display: flex;
+      align-items: center;
+      img {
+        width: 40px;
+        height: 40px;
+      }
+      span{
+        margin-left: 15px;
+      }
+    }
   }
   .el-aside{
     background-color: #313743;