isoftstone/lc_frontend
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI优化

Browse Source
This commit is contained in:
chenlin
2026-01-08 11:26:10 +08:00
parent f909230546
commit 56c9a547c9
5 changed files with 81 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/views/screen/components/OverviewPanel.vue
View File

@@ -19,9 +19,11 @@
<div class="top-card-right">
<div class="top-card-right-item">
<img width="18px" src="@/assets/images/v2_rel0n8.png" />
<span>正式员工</span>
<div class="type-number-wrapper" style="margin-left: 2vw">
<div>
<img width="18px" src="@/assets/images/v2_rel0n8.png" />
<span>正式员工</span>
</div>
<div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
<span class="type-number" v-for="(digit, index) in formalEmployeeDigits" :key="index">
{{ digit }}
</span>
@@ -30,9 +32,11 @@
</div>
<div class="top-card-right-item">
<img width="18px" src="@/assets/images/v2_rel0n23.png" />
<span>外协人员</span>
<div class="type-number-wrapper" style="margin-left: 1vw">
<div>
<img width="18px" src="@/assets/images/v2_rel0n23.png" />
<span>外协人员</span>
</div>
<div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
<span class="type-number" v-for="(digit, index) in externalStaffDigits" :key="index">
{{ digit }}
</span>
@@ -41,9 +45,11 @@
</div>
<div class="top-card-right-item">
<img width="18px" src="@/assets/images/24508_654.png" />
<span>访客</span>
<div class="type-number-wrapper">
<div>
<img width="18px" src="@/assets/images/24508_654.png" />
<span>访客</span>
</div>
<div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
<span class="type-number" v-for="(digit, index) in visitorDigits" :key="index">
{{ digit }}
</span>
@@ -87,6 +93,17 @@ const formalEmployeeDigits = computed(() => String(props.formalEmployeeCount).sp
const externalStaffDigits = computed(() => String(props.externalStaffCount).split('').map(Number))
const visitorDigits = computed(() => String(props.visitorCount).split('').map(Number))
// 计算数字区域的最大宽度
// 每个数字框宽度 14px，gap 2px
const maxNumberWidth = computed(() => {
const formalLen = formalEmployeeDigits.value.length
const externalLen = externalStaffDigits.value.length
const visitorLen = visitorDigits.value.length
const maxLen = Math.max(formalLen, externalLen, visitorLen)
// 宽度 = 数字个数 * 14px + (数字个数 - 1) * 2px
return maxLen > 0 ? maxLen * 14 + (maxLen - 1) * 2 : 0
})
// 图表引用
const barChartOption = ref({
legend: {
@@ -243,17 +260,25 @@ onMounted(() => {
.top-card-right-item {
display: flex;
align-items: center;
column-gap: 5px;
padding: 0 10px;
font-size: 0.7rem;
color: #fff;
> :first-child {
display: flex;
align-items: center;
column-gap: 5px;
width: 100px;
}
.type-number-wrapper {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 2px;
font-size: 0.8rem;
color: #fff;
margin-left: 8px;
.type-number {
display: inline-block;
@@ -268,6 +293,10 @@ onMounted(() => {
transition: all 0.3s ease;
}
}
> span:last-child {
margin-left: 4px;
}
}
}
}