优化个人中心页面

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