fix(breadcrumb): 修复移动端面包屑垂直对齐问题

根本原因:元素padding不一致导致高度差异
- Home图标: p-1.5 → 高度28px
- 文字链接: py-1 → 高度22px
- 结果:垂直不对齐,看起来"歪"

修复内容:
- 移除所有不对称的padding
- 统一使用gap-2间距
- 箭头颜色从#E5E5E5改为#CCCCCC(更可见)
- 箭头大小调整为w-3.5 h-3.5
This commit is contained in:
张翔
2026-04-23 12:12:13 +08:00
parent ed780e5762
commit 22842843a2
+4 -4
View File
@@ -14,20 +14,20 @@ interface BreadcrumbProps {
export function Breadcrumb({ items }: BreadcrumbProps) { export function Breadcrumb({ items }: BreadcrumbProps) {
return ( return (
<nav aria-label="breadcrumb" className="flex items-center gap-1.5 text-xs md:text-sm text-[#5C5C5C] py-3 md:py-4"> <nav aria-label="breadcrumb" className="flex items-center gap-2 text-xs md:text-sm text-[#5C5C5C] py-3 md:py-4">
<StaticLink <StaticLink
href="/" href="/"
className="inline-flex items-center hover:text-[#C41E3A] transition-colors p-1.5 rounded" className="inline-flex items-center hover:text-[#C41E3A] transition-colors"
aria-label="返回首页" aria-label="返回首页"
> >
<Home className="w-4 h-4" /> <Home className="w-4 h-4" />
</StaticLink> </StaticLink>
{items.map((item, index) => ( {items.map((item, index) => (
<div key={index} className="flex items-center"> <div key={index} className="flex items-center">
<ChevronRight className="w-4 h-4 text-[#E5E5E5] mx-0.5" /> <ChevronRight className="w-3.5 h-3.5 text-[#CCCCCC] mx-1" />
<StaticLink <StaticLink
href={item.href} href={item.href}
className="hover:text-[#C41E3A] transition-colors px-1.5 py-1 rounded" className="hover:text-[#C41E3A] transition-colors"
> >
{item.label} {item.label}
</StaticLink> </StaticLink>