fix(breadcrumb+page-header): 面包屑三元素水平中心对齐 + 缩小间距
Breadcrumb 修改:
- items-baseline → items-center(水平中心线对齐)
- Home 图标外层添加 w-5 h-5 + justify-center(固定尺寸确保居中)
- 箭头添加 shrink-0 防止被压缩
- 确保 🏠 / > / 文字 三者视觉中心在同一水平线
PageHeader 修改:
- pt-16 pb-16 → pt-8 pb-12(进一步缩小与面包屑的间距)
This commit is contained in:
@@ -14,17 +14,17 @@ interface BreadcrumbProps {
|
|||||||
|
|
||||||
export function Breadcrumb({ items }: BreadcrumbProps) {
|
export function Breadcrumb({ items }: BreadcrumbProps) {
|
||||||
return (
|
return (
|
||||||
<nav aria-label="breadcrumb" className="flex items-baseline gap-2 text-xs md:text-sm text-[#5C5C5C] py-3 md:py-4 leading-none">
|
<nav aria-label="breadcrumb" className="flex items-center gap-2 text-xs md:text-sm text-[#5C5C5C] py-3 md:py-4 leading-none">
|
||||||
<StaticLink
|
<StaticLink
|
||||||
href="/"
|
href="/"
|
||||||
className="inline-flex items-center hover:text-[#C41E3A] transition-colors"
|
className="inline-flex items-center justify-center hover:text-[#C41E3A] transition-colors w-5 h-5"
|
||||||
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-baseline">
|
<div key={index} className="flex items-center">
|
||||||
<ChevronRight className="w-3.5 h-3.5 text-[#CCCCCC] mx-1" />
|
<ChevronRight className="w-3.5 h-3.5 text-[#CCCCCC] mx-1 shrink-0" />
|
||||||
<StaticLink
|
<StaticLink
|
||||||
href={item.href}
|
href={item.href}
|
||||||
className="hover:text-[#C41E3A] transition-colors"
|
className="hover:text-[#C41E3A] transition-colors"
|
||||||
|
|||||||
@@ -31,7 +31,7 @@ export function PageHeader({ badge, title, description, className = '' }: PageHe
|
|||||||
/>
|
/>
|
||||||
<SubtleDots color="#C41E3A" count={6} />
|
<SubtleDots color="#C41E3A" count={6} />
|
||||||
|
|
||||||
<div className="container-wide relative z-10 pt-16 pb-16" ref={ref}>
|
<div className="container-wide relative z-10 pt-8 pb-12" ref={ref}>
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||||
|
|||||||
Reference in New Issue
Block a user