style(wel): 增加面板等高布局样式优化
- 为图表区左右面板添加flex布局实现等高效果 - 为下方区左右面板添加flex布局实现等高效果 - 在metric-card内添加内容区自动撑满的flex样式 - 优化了.el-col和.panel的布局结构和弹性属性
This commit is contained in:
@@ -411,6 +411,34 @@ export default {
|
|||||||
.wel-metrics {
|
.wel-metrics {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 图表区:左右面板等高 */
|
||||||
|
.wel-charts {
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
.el-col {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
> .panel {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 下方区:左右面板等高 */
|
||||||
|
.wel-bottom {
|
||||||
|
.el-col {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
> .panel {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.metric-card {
|
.metric-card {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
@@ -478,6 +506,14 @@ export default {
|
|||||||
padding: 18px 20px;
|
padding: 18px 20px;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||||
|
|
||||||
|
// 当面板在 flex 列容器中时,内容区自动撑满
|
||||||
|
.trend,
|
||||||
|
.donut-wrap,
|
||||||
|
.bar-list,
|
||||||
|
.alert-list {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.panel__head {
|
.panel__head {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
Reference in New Issue
Block a user