<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="element_ui/index.css">
<style>
body {
margin:0px;
}
.is-vertical {
height: 100vh;
}
.top {
height: calc(100vh - 80px) ;
}
.el-aside {
background-color: yellow;
}
.log-header {
display: flex;
justify-content:flex-start;
align-items: center;
height: 64px;
margin:0 20px;
border-bottom: 1px solid red;
}
.el-scrollbar__wrap {
margin-right: 0px !important;
margin-bottom: 0px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
</style>
</head>
<body>
<div id="app">
<el-container>
<el-container direction="horizontal" class="top">
<el-aside width="220px">
<div class="log-header">
<div class="log" style="margin-right: 5px;">log</div>
<div class="title">title</div>
</div>
<el-scrollbar style="height: calc(100vh - 115px );width:100%">
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">导航一</span>
</template>
<el-menu-item-group>
<span slot="title">分组一</span>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<span slot="title">选项4</span>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
<el-menu-item index="5">
<i class="el-icon-setting"></i>
<span slot="title">导航5</span>
</el-menu-item>
<el-menu-item index="6">
<i class="el-icon-setting"></i>
<span slot="title">导航6</span>
</el-menu-item>
<el-menu-item index="7">
<i class="el-icon-setting"></i>
<span slot="title">7</span>
</el-menu-item>
</el-menu>
</el-scrollbar>
</el-aside>
<el-main>
sdsadasdsa
</el-main>
</el-container>
<el-footer height="50px">底部</el-footer>
</el-container>
</div>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<script src="js/vue-router.min.js"></script>
<!-- import JavaScript -->
<script src="element_ui/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { visible: false }
}
})
</script>
</body>
</html>
