.

src/App.vue

@@ -1,40 +1,41 @@
 <template>
     <div id="app">
         <el-container class="el-container-iot">
-            <el-menu default-active="1-4-1" class="el-menu-vertical-iot" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
-                <h1>IOT DC3</h1>
-                <el-submenu index="1">
-                    <template slot="title">
-                        <i class="el-icon-cpu"></i>
-                        <span slot="title">设备管理</span>
-                    </template>
-                    <el-menu-item>设备接入</el-menu-item>
-                    <el-menu-item>设备解析</el-menu-item>
-                </el-submenu>
-                <el-submenu index="2">
-                    <template slot="title">
-                        <i class="el-icon-odometer"></i>
-                        <span slot="title">数据管理</span>
-                    </template>
-                    <el-menu-item>测点配置</el-menu-item>
-                    <el-menu-item>数据监控</el-menu-item>
-                </el-submenu>
-                <el-submenu index="3">
-                    <template slot="title">
-                        <i class="el-icon-video-camera-solid"></i>
-                        <span slot="title">媒体管理</span>
-                    </template>
-                    <el-menu-item>视频管理</el-menu-item>
-                    <el-menu-item>图片管理</el-menu-item>
-                </el-submenu>
-            </el-menu>
+            <el-aside width="180px">
+                <el-menu default-active="1-1" class="el-menu-vertical-iot" @open="handleOpen" @close="handleClose">
+                    <h1 class="h1-iot">IOT DC3</h1>
+                    <el-submenu index="1">
+                        <template slot="title">
+                            <i class="el-icon-cpu"></i>
+                            <span slot="title">设备管理</span>
+                        </template>
+                        <el-menu-item index="1-1">设备接入</el-menu-item>
+                        <el-menu-item>设备解析</el-menu-item>
+                    </el-submenu>
+                    <el-submenu index="2">
+                        <template slot="title">
+                            <i class="el-icon-odometer"></i>
+                            <span slot="title">数据管理</span>
+                        </template>
+                        <el-menu-item>测点配置</el-menu-item>
+                        <el-menu-item>数据监控</el-menu-item>
+                    </el-submenu>
+                    <el-submenu index="3">
+                        <template slot="title">
+                            <i class="el-icon-video-camera-solid"></i>
+                            <span slot="title">媒体管理</span>
+                        </template>
+                        <el-menu-item>视频管理</el-menu-item>
+                        <el-menu-item>图片管理</el-menu-item>
+                    </el-submenu>
+                </el-menu>
+            </el-aside>
+
             <el-container>
                 <el-header>
-                    <el-radio-group v-model="isCollapse">
-                        <el-radio-button :label="false">展开</el-radio-button>
-                        <el-radio-button :label="true">收起</el-radio-button>
-                    </el-radio-group>
+                    你好
                 </el-header>
+
                 <el-main>
                     <router-view/>
                 </el-main>
@@ -61,16 +62,22 @@
         color: #2c3e50;
     }
 
+    .h1-iot {
+        text-align: center;
+    }
+
     .el-container-iot {
         height: 100%;
     }
 
     .el-menu-vertical-iot {
         height: 100%;
+        text-align: left;
+        display: inline-block;
     }
 
     .el-menu-vertical-iot:not(.el-menu--collapse) {
-        width: 200px;
+        width: 179px;
     }
 </style>