Element简单的容器布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
margin-right: 20px;
margin: 10px 10px 10px 0px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
margin: 10px 0px 10px 5px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>
</head>
<body>
<div id="app">
<el-container>
<div>搜索框<input type="text"><button @click="print">搜索</button></div>
<el-header>这是顶部</el-header>
<el-container>
<el-aside width="400px" >分类管理</br>商品发布</br>商品发布</br>商品发布</br>商品发布</el-aside>
<el-main>
这是主界面
</el-main>
</el-container>
<el-footer>页脚</el-footer>
</el-container>
</el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
var vue = new Vue({
el: '#app',
data: function() {
return{
}
},
methods:{
print: function () {
}
}
})
</script>
</html>