mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-16 02:11:48 +08:00
99 lines
2.1 KiB
Vue
99 lines
2.1 KiB
Vue
<template>
|
|
<div class="common-layout">
|
|
<el-container>
|
|
<el-header>Header</el-header>
|
|
<el-main>Main</el-main>
|
|
</el-container>
|
|
|
|
<el-container>
|
|
<el-header>Header</el-header>
|
|
<el-main>Main</el-main>
|
|
<el-footer>Footer</el-footer>
|
|
</el-container>
|
|
|
|
<el-container>
|
|
<el-aside width="200px">Aside</el-aside>
|
|
<el-main>Main</el-main>
|
|
</el-container>
|
|
|
|
<el-container>
|
|
<el-header>Header</el-header>
|
|
<el-container>
|
|
<el-aside width="200px">Aside</el-aside>
|
|
<el-main>Main</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
|
|
<el-container>
|
|
<el-header>Header</el-header>
|
|
<el-container>
|
|
<el-aside width="200px">Aside</el-aside>
|
|
<el-container>
|
|
<el-main>Main</el-main>
|
|
<el-footer>Footer</el-footer>
|
|
</el-container>
|
|
</el-container>
|
|
</el-container>
|
|
|
|
<el-container>
|
|
<el-aside width="200px">Aside</el-aside>
|
|
<el-container>
|
|
<el-header>Header</el-header>
|
|
<el-main>Main</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
|
|
<el-container>
|
|
<el-aside width="200px">Aside</el-aside>
|
|
<el-container>
|
|
<el-header>Header</el-header>
|
|
<el-main>Main</el-main>
|
|
<el-footer>Footer</el-footer>
|
|
</el-container>
|
|
</el-container>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.common-layout {
|
|
.el-header,
|
|
.el-footer {
|
|
background-color: #b3c0d1;
|
|
color: var(--el-text-color-primary);
|
|
text-align: center;
|
|
line-height: 60px;
|
|
}
|
|
|
|
.el-footer {
|
|
line-height: 60px;
|
|
}
|
|
|
|
.el-aside {
|
|
background-color: #d3dce6;
|
|
color: var(--el-text-color-primary);
|
|
text-align: center;
|
|
line-height: 200px;
|
|
}
|
|
|
|
.el-main {
|
|
background-color: #e9eef3;
|
|
color: var(--el-text-color-primary);
|
|
text-align: center;
|
|
line-height: 160px;
|
|
}
|
|
|
|
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>
|