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