mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-11 00:38:36 +08:00
96 lines
2.1 KiB
Vue
96 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 scoped>
|
|
.common-layout .el-header,
|
|
.common-layout .el-footer {
|
|
background-color: #b3c0d1;
|
|
color: var(--el-text-color-primary);
|
|
text-align: center;
|
|
line-height: 60px;
|
|
}
|
|
.common-layout .el-footer {
|
|
line-height: 60px;
|
|
}
|
|
|
|
.common-layout .el-aside {
|
|
background-color: #d3dce6;
|
|
color: var(--el-text-color-primary);
|
|
text-align: center;
|
|
line-height: 200px;
|
|
}
|
|
|
|
.common-layout .el-main {
|
|
background-color: #e9eef3;
|
|
color: var(--el-text-color-primary);
|
|
text-align: center;
|
|
line-height: 160px;
|
|
}
|
|
|
|
.common-layout > .el-container {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.common-layout .el-container:nth-child(5) .el-aside,
|
|
.common-layout .el-container:nth-child(6) .el-aside {
|
|
line-height: 260px;
|
|
}
|
|
|
|
.common-layout .el-container:nth-child(7) .el-aside {
|
|
line-height: 320px;
|
|
}
|
|
</style>
|