博客管理系统左边导航栏的样式不对

app.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>


<script>
export default {
  name: "App",
  components: {},
};
</script>
  
<style>
*{
    padding:0;
    margin: 0;
  }
</style>

base-view.vue

<template>
  <div>
    <el-container>
      <el-header id = "admin-header-box">顶部内容</el-header>
      <el-container>
        <!-- 侧边栏单独的抽取出组件，注册为全局的组件 -->
        <el-aside id="left-menue-list" width="200px">
          <left-menu></left-menu>
        </el-aside>
        <el-container>
          <el-main>
            <!-- 主要内容 -->
            <div class="content">
              <router-view></router-view>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>


<script>
export default {
  mounted(){
    // 动态设置侧边菜单的高度
    let leftMenueBox = document.getElementById("left-menue-list");
    let adminHeader = document.getElementById("admin-header-box");
    let dy = window.innerHeight - adminHeader.offsetHeight
    if (leftMenueBox) {
      leftMenueBox.style.height = dy + "px";
    }
  },
};
</script>


<style>
.el-header {
  background-color:dodgerblue;
  color: #333;
  text-align: center;
  line-height: 46px;
  height: 46px !important;
}


.el-aside {
  text-align: center;
  line-height: 200px;
}


.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}
</style>

left-menu.vue

<template>
  <div id="app">
   <!-- default-active 当前激活的是哪个item -->
    <el-menu default-active="2" class="el-menu-vertical-demo">
    <!-- el-menu-item是没有子节点的 -->
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <!-- el-submenu 带子节点的 -->
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航1-1</span>
        </template>
        <!-- 子导航 1-1-->
        <el-menu-item index="1-1">
          <i class="el-icon-menu"></i>
          <span slot="title">导航1-1</span>
        </el-menu-item>
        <!-- 子导航 1-2-->
        <el-menu-item index="1-2">
          <i class="el-icon-menu"></i>
          <span slot="title">导航1-1</span>
        </el-menu-item>
        <!-- 子导航 1-3-->
        <el-menu-item index="1-3">
          <i class="el-icon-menu"></i>
          <span slot="title">导航1-1</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
</div>
</template>
<script>
</script>
<style>
</style>