<template>
  <div class="content flex-layout">
    <div class="flex-row all-box">
      <div>
        <el-menu
          :router="true"
          default-active="/userList"
          class="el-menu-vertical-demo"
        >
          <el-menu-item index="/userList">
            <i class="el-icon-menu"></i>
            <span slot="title">User List</span>
          </el-menu-item>
          <el-menu-item index="/roleList">
            <i class="el-icon-document"></i>
            <span slot="title">Role List</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div style="flex: 1;padding :20px">
        <router-view />
      </div>
    </div>
  </div>
</template>
<style scoped>
.all-box {
     padding: 30px;
  background: #fff;
  box-shadow: 4px 4px 6px 2px rgb(0 0 0 / 3%);
  height: 100%;
}
.el-menu-vertical-demo {
  border-right: 0px;
}
.left {
  width: 240px;
}
</style>
