fix(user): 优化我的订单角标样式和0值显示
- 角标位置从 top-0 right-2 调整为 -top-1 -right-1,使小红点更贴近右上角边缘 - 角标尺寸改为 min-w-[16px] h-4 并固定字体大小,保证单数字圆形,多数字椭圆形 - 0 的判断改用 Number(item.count) > 0,防止后端字符串形式的 "0" 被误判显示 - 0 数量时角标不再渲染,避免显示多余的“0”数字
This commit is contained in:
@@ -277,10 +277,10 @@ const UserPage: React.FC = () => {
|
||||
>
|
||||
<Text className='text-xl mb-1'>{item.icon}</Text>
|
||||
<Text className='text-xs text-gray-600'>{item.label}</Text>
|
||||
{/* 数量角标 */}
|
||||
{item.count && item.count > 0 && (
|
||||
<View className='absolute top-0 right-2 bg-red-500 text-white text-xs rounded-full min-w-4 h-4 flex items-center justify-center px-1'>
|
||||
{item.count > 99 ? '99+' : item.count}
|
||||
{/* 数量角标:紧贴图标右上角;为 0 时不渲染 */}
|
||||
{item.count && Number(item.count) > 0 && (
|
||||
<View className='absolute -top-1 -right-1 bg-red-500 text-white rounded-full min-w-[16px] h-4 px-1 flex items-center justify-center' style={{ fontSize: '10px', lineHeight: '12px' }}>
|
||||
{Number(item.count) > 99 ? '99+' : item.count}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
Reference in New Issue
Block a user