demo
/
ts-bigscreen-vue
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

整体布局优化

This commit is contained in:
JenniferW 2025-09-08 15:58:14 +08:00
parent 9e8a9d518d
commit 363b3c998e
1 changed files with 9 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/BigScreen.vue
View File

@ -38,14 +38,14 @@
<OpenShare class="component-container" />
</div>
<!-- 3. 第三行：数据仓库（内容较多）+ 数据质量检测（左右布局） -->
<!-- 3. 第三行：数据仓库（内容较多） -->
<div class="dashboard-row third-row">
<div class="dashboard-col left-col">
<DataWarehouse class="component-container" />
</div>
<div class="dashboard-col right-col">
<DataQuality class="component-container" />
</div>
<DataWarehouse class="component-container" />
</div>
<!-- 4. 第四行：数据源 -->
<div class="dashboard-row fourth-row">
<DataQuality class="component-container" />
</div>
</div>
</div>
@ -137,21 +137,9 @@ export default {
// 第一、三行：独占一行（内容较多，需全屏宽度）
&.first-row,
&.second-row {
width: 100%;
}
// 第一行：左右两列布局
&.second-row,
&.third-row {
flex-direction: row;
gap: 20px;
.dashboard-col {
flex: 1; // 两列等宽
display: flex;
flex-direction: column;
gap: 12px;
}
width: 100%;
}
}