fix: 修复行程卡片间距被 last:mb-0 清零的问题
每个 SortablePlanItem 被 motion.div 包裹,last:mb-0 会对 所有 item 生效导致 mb-5 失效,移除 last:mb-0 即可。 同步优化卡片内部间距、padding、reason 加分隔线。
This commit is contained in:
@@ -197,13 +197,13 @@ function SortablePlanItem({ id, item, canEdit, onEdit }: SortablePlanItemProps)
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={setNodeRef} style={style} className="relative mb-4 last:mb-0">
|
<div ref={setNodeRef} style={style} className="relative mb-5">
|
||||||
<div className="absolute -left-6 top-3 flex h-[18px] w-[18px] items-center justify-center rounded-full bg-purple-600/20 ring-2 ring-background">
|
<div className="absolute -left-6 top-4 flex h-[18px] w-[18px] items-center justify-center rounded-full bg-purple-600/20 ring-2 ring-background">
|
||||||
<div className="h-2 w-2 rounded-full bg-purple-400" />
|
<div className="h-2 w-2 rounded-full bg-purple-400" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="rounded-xl bg-surface/80 p-3.5 ring-1 ring-border/80">
|
<div className="rounded-2xl bg-surface/80 p-4 ring-1 ring-border/80">
|
||||||
<div className="flex items-start gap-2">
|
<div className="flex items-start gap-2.5">
|
||||||
{canEdit && (
|
{canEdit && (
|
||||||
<button
|
<button
|
||||||
{...attributes}
|
{...attributes}
|
||||||
@@ -214,20 +214,20 @@ function SortablePlanItem({ id, item, canEdit, onEdit }: SortablePlanItemProps)
|
|||||||
<GripVertical size={14} />
|
<GripVertical size={14} />
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
<span className="mt-0.5 text-sm font-black text-purple-400">{item.time}</span>
|
<span className="mt-0.5 min-w-[38px] text-sm font-black text-purple-400">{item.time}</span>
|
||||||
<div className="min-w-0 flex-1">
|
<div className="min-w-0 flex-1">
|
||||||
<div className="flex items-center gap-1.5">
|
<div className="flex items-center gap-1.5">
|
||||||
<CategoryBadge category={guessCategory(item.activity)} />
|
<CategoryBadge category={guessCategory(item.activity)} />
|
||||||
<p className="truncate text-sm font-bold text-heading">{item.activity}</p>
|
<p className="truncate text-sm font-bold text-heading">{item.activity}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-1.5 flex items-center gap-1 text-[11px] text-muted">
|
<div className="mt-2 flex items-center gap-1 text-[11px] text-muted">
|
||||||
<MapPin size={10} className="shrink-0" />
|
<MapPin size={10} className="shrink-0" />
|
||||||
<span className="truncate">{item.poi}</span>
|
<span className="truncate">{item.poi}</span>
|
||||||
</div>
|
</div>
|
||||||
{item.address && (
|
{item.address && (
|
||||||
<p className="mt-0.5 truncate text-[10px] text-dim">{item.address}</p>
|
<p className="mt-1 truncate text-[10px] text-dim">{item.address}</p>
|
||||||
)}
|
)}
|
||||||
<div className="mt-2 flex items-center gap-3">
|
<div className="mt-2.5 flex items-center gap-3">
|
||||||
<span className="flex items-center gap-1 text-[10px] text-dim">
|
<span className="flex items-center gap-1 text-[10px] text-dim">
|
||||||
<Clock size={9} />
|
<Clock size={9} />
|
||||||
{formatDuration(item.duration)}
|
{formatDuration(item.duration)}
|
||||||
@@ -245,7 +245,7 @@ function SortablePlanItem({ id, item, canEdit, onEdit }: SortablePlanItemProps)
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{item.reason && (
|
{item.reason && (
|
||||||
<p className="mt-1.5 text-[10px] leading-relaxed text-dim italic">
|
<p className="mt-2.5 border-t border-border/30 pt-2 text-[10px] leading-relaxed text-dim italic">
|
||||||
{item.reason}
|
{item.reason}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
@@ -434,13 +434,13 @@ export default function BlindboxPlan({
|
|||||||
<AnimatePresence mode="wait">
|
<AnimatePresence mode="wait">
|
||||||
<motion.div
|
<motion.div
|
||||||
key={dayIndex}
|
key={dayIndex}
|
||||||
className="relative mx-auto max-w-sm pl-6"
|
className="relative mx-auto max-w-sm px-4 pb-2 pl-9"
|
||||||
initial={{ opacity: 0, x: 20 }}
|
initial={{ opacity: 0, x: 20 }}
|
||||||
animate={{ opacity: 1, x: 0 }}
|
animate={{ opacity: 1, x: 0 }}
|
||||||
exit={{ opacity: 0, x: -20 }}
|
exit={{ opacity: 0, x: -20 }}
|
||||||
transition={{ duration: 0.25 }}
|
transition={{ duration: 0.25 }}
|
||||||
>
|
>
|
||||||
<div className="absolute left-[9px] top-2 bottom-2 w-px bg-purple-500/20" />
|
<div className="absolute left-[21px] top-2 bottom-2 w-px bg-purple-500/20" />
|
||||||
|
|
||||||
<DndContext
|
<DndContext
|
||||||
key={dayIndex}
|
key={dayIndex}
|
||||||
|
|||||||
Reference in New Issue
Block a user