1f313f18cd
Former-commit-id: 584a9329d7868d9e9aac27af8bb8548899f6bb6a [formerly 584a9329d7868d9e9aac27af8bb8548899f6bb6a [formerly 584a9329d7868d9e9aac27af8bb8548899f6bb6a [formerly 584a9329d7868d9e9aac27af8bb8548899f6bb6a [formerly d9f7b6d61f9bca4dd01d9bdeaa3e05689a4c957b [formerly 685176322dd7a7c07d9adc1afe718ac8769c6e2b]]]]] Former-commit-id: 88308a03ec90c920658d225ca92d3d44329ae488 Former-commit-id: 658fe4466da6dfac5fca7f4d4f587300c297a6f4 Former-commit-id: e2f583b6a7c845b26d5713ab54427c1a30eae7c0 [formerly 7f060c7800831c725cce856ac0b97e64e8dc7df3] Former-commit-id: b4a0e21cd492e0c91637c94e9ab9cbf7e896c52d Former-commit-id: 52a1a9c80a6951a0341fbfe6ca6c748dae876747 Former-commit-id: 508b9083504c48c021f3664bd2f398aacce556f3 Former-commit-id: 5885f81448c937e04528c45ea8bd74f72dac37a9 Former-commit-id: e0337459e2f83705c4cf519840fd9532ed2a43e0
94 lines
2.0 KiB
Vue
94 lines
2.0 KiB
Vue
<template>
|
|
<d2-container>
|
|
|
|
<el-container class="d2-mb">
|
|
<el-header>顶栏</el-header>
|
|
<el-main>主体</el-main>
|
|
</el-container>
|
|
|
|
<el-container class="d2-mb">
|
|
<el-header>顶栏</el-header>
|
|
<el-main>主体</el-main>
|
|
<el-footer>底栏</el-footer>
|
|
</el-container>
|
|
|
|
<el-container class="d2-mb">
|
|
<el-aside width="200px">侧边栏</el-aside>
|
|
<el-main>主体</el-main>
|
|
</el-container>
|
|
|
|
<el-container class="d2-mb">
|
|
<el-header>顶栏</el-header>
|
|
<el-container>
|
|
<el-aside width="200px">侧边栏</el-aside>
|
|
<el-main>主体</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
|
|
<el-container class="d2-mb">
|
|
<el-header>顶栏</el-header>
|
|
<el-container>
|
|
<el-aside width="200px">侧边栏</el-aside>
|
|
<el-container>
|
|
<el-main>主体</el-main>
|
|
<el-footer>底栏</el-footer>
|
|
</el-container>
|
|
</el-container>
|
|
</el-container>
|
|
|
|
<el-container class="d2-mb">
|
|
<el-aside width="200px">侧边栏</el-aside>
|
|
<el-container>
|
|
<el-header>顶栏</el-header>
|
|
<el-main>主体</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
|
|
<el-container>
|
|
<el-aside width="200px">侧边栏</el-aside>
|
|
<el-container>
|
|
<el-header>顶栏</el-header>
|
|
<el-main>主体</el-main>
|
|
<el-footer>底栏</el-footer>
|
|
</el-container>
|
|
</el-container>
|
|
|
|
</d2-container>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.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;
|
|
}
|
|
|
|
.el-main {
|
|
background-color: #E9EEF3;
|
|
color: #333;
|
|
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>
|