fix: 统一卡片高度 - PersonCard 和 WithSpouse 卡片均设 min-h-[177px]
PersonCard(无配偶)原高 177px,WithSpouse(有配偶)原高 153px, 同行混排时高度不齐导致错行感。两种卡片统一最小高度 177px, WithSpouse 内容区域垂直居中。
This commit is contained in:
@@ -223,7 +223,7 @@ function PersonCard({
|
|||||||
<div
|
<div
|
||||||
data-member-id={member.id}
|
data-member-id={member.id}
|
||||||
className={cn(
|
className={cn(
|
||||||
"family-node-card relative flex flex-col items-center p-4 transition-all duration-300 cursor-pointer w-[140px]",
|
"family-node-card relative flex flex-col items-center p-4 transition-all duration-300 cursor-pointer w-[140px] min-h-[177px] justify-center",
|
||||||
// 现代简约中国风 - 圆角卡片
|
// 现代简约中国风 - 圆角卡片
|
||||||
"rounded-xl",
|
"rounded-xl",
|
||||||
"hover:scale-[1.03] hover:-translate-y-1",
|
"hover:scale-[1.03] hover:-translate-y-1",
|
||||||
@@ -553,7 +553,7 @@ export function FamilyNode({
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"relative rounded-xl overflow-hidden transition-all duration-300",
|
"relative rounded-xl overflow-hidden transition-all duration-300 min-h-[177px] flex flex-col",
|
||||||
"shadow-[0_4px_20px_rgba(0,0,0,0.08)] hover:shadow-[0_12px_40px_rgba(0,0,0,0.15)]",
|
"shadow-[0_4px_20px_rgba(0,0,0,0.08)] hover:shadow-[0_12px_40px_rgba(0,0,0,0.15)]",
|
||||||
"hover:scale-[1.02] hover:-translate-y-1",
|
"hover:scale-[1.02] hover:-translate-y-1",
|
||||||
isCardHighlighted
|
isCardHighlighted
|
||||||
@@ -586,7 +586,7 @@ export function FamilyNode({
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 内容区域 */}
|
{/* 内容区域 */}
|
||||||
<div className="p-3 pt-1 flex gap-3">
|
<div className="p-3 pt-1 flex gap-3 flex-1 items-center justify-center">
|
||||||
{/* 主成员 */}
|
{/* 主成员 */}
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user