优化个人中心页面

This commit is contained in:
2026-04-11 13:30:32 +08:00
parent 12fd0558d9
commit 6af789dd83
@@ -622,34 +622,46 @@
'color: deeppink' : '')"></span>
</h4>
{{-- VIP + 在职职务:强制一行显示 --}}
{{-- VIP + 在职职务:合并成一个胶囊,保证同一行 --}}
<div x-show="userInfo.vip?.Name || userInfo.position_name"
style="display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
flex-wrap: nowrap; white-space: nowrap; overflow: hidden;">
style="margin-top: 6px;">
{{-- VIP 标签 --}}
<div x-show="userInfo.vip?.Name"
style="display: inline-flex; align-items: center; gap: 4px;
width: fit-content; padding: 2px 10px;
background: #fff7ed; border: 1px solid #fdba74;
border-radius: 999px; font-size: 11px;
color: #ea580c; font-weight: bold;
flex: 0 0 auto; white-space: nowrap;">
<span style="font-size: 12px;" x-text="userInfo.vip?.Icon"></span>
<span x-text="userInfo.vip?.Name"></span>
</div>
<span style="display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 10px;
border-radius: 999px;
white-space: nowrap;
width: fit-content;
max-width: 100%;
font-size: 11px;
font-weight: bold;
background: #faf5ff;
border: 1px solid #d8b4fe;
color: #7c3aed;">
{{-- 在职职务标签 --}}
<div x-show="userInfo.position_name"
style="display: inline-flex; align-items: center; gap: 4px;
width: fit-content; padding: 2px 10px;
background: #f3e8ff; border: 1px solid #d8b4fe;
border-radius: 999px; font-size: 11px;
color: #7c3aed; font-weight: bold;
flex: 0 0 auto; white-space: nowrap;">
<span x-text="userInfo.position_icon || '🎖️'" style="font-size: 12px;"></span>
<span x-text="(userInfo.department_name ? userInfo.department_name + ' · ' : '') + userInfo.position_name"></span>
</div>
{{-- VIP --}}
<template x-if="userInfo.vip?.Name">
<span style="display: inline-flex; align-items: center; gap: 4px; color: #ea580c;">
<span x-text="userInfo.vip?.Icon || '👑'" style="font-size: 12px;"></span>
<span x-text="userInfo.vip?.Name"></span>
</span>
</template>
{{-- 分隔符:只有 VIP 和职务都存在时显示 --}}
<template x-if="userInfo.vip?.Name && userInfo.position_name">
<span style="color: #c4b5fd;">|</span>
</template>
{{-- 职务 --}}
<template x-if="userInfo.position_name">
<span style="display: inline-flex; align-items: center; gap: 4px; color: #7c3aed;">
<span x-text="userInfo.position_icon || '🎖️'" style="font-size: 12px;"></span>
<span x-text="(userInfo.department_name ? userInfo.department_name + ' · ' : '') + userInfo.position_name"></span>
</span>
</template>
</span>
</div>
<div style="font-size: 11px; color: #999; margin-top: 4px;">