- 外层 .template > .el-container: flex-direction: column (顶栏全宽独行) - 内层 .template > .el-container > .el-container: flex-direction: row (侧边栏+内容水平) - el-aside height: calc(100vh - 60px - 24px) 减去上下 margin - el-aside top: calc(60px + 12px) 对齐顶栏下方间距
This commit is contained in:
@@ -26,21 +26,31 @@ html, body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ============ 布局容器 ============ */
|
/* ============ 布局容器 ============ */
|
||||||
.el-container {
|
/* 外层容器:垂直排列(顶栏 + 下方内容) */
|
||||||
|
.template > .el-container {
|
||||||
|
flex-direction: column !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
|
min-height: 100vh !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 内层容器:水平排列(侧边栏 + 主内容) */
|
||||||
|
.template > .el-container > .el-container {
|
||||||
|
flex-direction: row !important;
|
||||||
|
flex: 1 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============ 侧边栏 ============ */
|
/* ============ 侧边栏 ============ */
|
||||||
.el-aside {
|
.el-aside {
|
||||||
background: #FFFFFF !important;
|
background: #FFFFFF !important;
|
||||||
border-right: none !important;
|
border-right: none !important;
|
||||||
height: calc(100vh - 60px) !important;
|
height: calc(100vh - 60px - 24px) !important;
|
||||||
position: sticky !important;
|
position: sticky !important;
|
||||||
top: 60px !important;
|
top: calc(60px + 12px) !important;
|
||||||
margin: 12px 0 12px 12px !important;
|
margin: 12px 0 12px 12px !important;
|
||||||
border-radius: 16px !important;
|
border-radius: 16px !important;
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
|
box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
|
||||||
overflow: hidden !important;
|
overflow-y: auto !important;
|
||||||
|
overflow-x: hidden !important;
|
||||||
z-index: 10 !important;
|
z-index: 10 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user