tangweijie/xlcp-frontend
1
0
Fork 0
Code Issues 6 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(dashboard): 修改中间区域为对称布局（上1下2排列）

Browse Source 
- 左侧：累计服刑天数（上1）+ 累计违规次数、累计表扬次数（下2）
- 右侧：剩余刑期天数（上1）+ 累计扣分次数、累计加分次数（下2）
- 调整CSS样式（top-field高度50%）
- 确保左右布局对称美观

参考计划: .sisyphus/plans/dashboard-center-update.md 布局要求
This commit is contained in:
tangweijie 2026-01-27 11:13:39 +08:00
parent 9a3044147b
commit a65d4e9280
1 changed files with 28 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/views/Dashboard/Index.vue
View File

@ -10,36 +10,40 @@
<div class="dashboard-content-top-center">
<div class="gauge-container">
<div class="dashboard-content-top-center-data">
<!-- 左侧区域：3个字段纵向排列 -->
<div class="info-field-item">
<!-- 左侧区域：上1下2排列 -->
<div class="info-field-item top-field">
<div class="field-label">累计服刑天数</div>
<div class="field-value">{{ servedDays }}</div>
</div>
<div class="info-field-item">
<div class="field-label">累计违规次数</div>
<div class="field-value">{{ violationCount }}</div>
</div>
<div class="info-field-item">
<div class="field-label">累计表扬次数</div>
<div class="field-value">{{ praiseCount }}</div>
<div class="card-row">
<div class="info-field-item">
<div class="field-label">累计违规次数</div>
<div class="field-value">{{ violationCount }}</div>
</div>
<div class="info-field-item">
<div class="field-label">累计表扬次数</div>
<div class="field-value">{{ praiseCount }}</div>
</div>
</div>
</div>
<div class="dashboard-content-top-center-center">
<GaugeChart :height="'240px'" :value="gaugeValue" :name="gaugeName" />
</div>
<div class="dashboard-content-top-center-data">
<!-- 右侧区域：3个字段纵向排列 -->
<div class="info-field-item">
<!-- 右侧区域：上1下2排列 -->
<div class="info-field-item top-field">
<div class="field-label">剩余刑期天数</div>
<div class="field-value">{{ remainingDays }}</div>
</div>
<div class="info-field-item">
<div class="field-label">累计扣分次数</div>
<div class="field-value">{{ penaltyCount }}</div>
</div>
<div class="info-field-item">
<div class="field-label">累计加分次数</div>
<div class="field-value">{{ rewardCount }}</div>
<div class="card-row">
<div class="info-field-item">
<div class="field-label">累计扣分次数</div>
<div class="field-value">{{ penaltyCount }}</div>
</div>
<div class="info-field-item">
<div class="field-label">累计加分次数</div>
<div class="field-value">{{ rewardCount }}</div>
</div>
</div>
</div>
</div>
@ -615,6 +619,12 @@ onUnmounted(() => {
}
}
// 顶部字段样式（用于上1下2布局中的顶部字段）
.top-field {
height: 50%;
width: 100%;
}
// 字段标签样式
.field-label {
font-size: 14px;