feat: 商家卡片支持多图展示,点击左右切换带 crossfade 过渡
- Restaurant.image 改为 images: string[],API 层从高德取最多 5 张图 - RestaurantCard 新增 ImageGallery:点击图片左右区域切换、顶部圆点指示器、 左右箭头提示、首次查看时文字引导气泡(2.5s 自动消失) - 图片切换使用 crossfade 动画(旧图渐隐 280ms),过渡平滑 - MatchResult / Profile 页面兼容新旧数据格式,无图时条件渲染
This commit is contained in:
@@ -134,12 +134,14 @@ function RunnerUpCard({
|
||||
rel="noopener noreferrer"
|
||||
className="flex gap-3 rounded-xl bg-white/10 p-2.5 backdrop-blur-sm transition-colors hover:bg-white/20"
|
||||
>
|
||||
<img
|
||||
src={restaurant.image}
|
||||
alt={restaurant.name}
|
||||
className="h-16 w-16 shrink-0 rounded-lg object-cover"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
{restaurant.images?.[0] && (
|
||||
<img
|
||||
src={restaurant.images[0]}
|
||||
alt={restaurant.name}
|
||||
className="h-16 w-16 shrink-0 rounded-lg object-cover"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
)}
|
||||
<div className="flex min-w-0 flex-1 flex-col justify-center">
|
||||
<p className="truncate text-sm font-bold text-white">
|
||||
{restaurant.name}
|
||||
@@ -348,12 +350,14 @@ export default function MatchResult({
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ type: "spring", stiffness: 180, damping: 18, delay: 0.5 }}
|
||||
>
|
||||
<img
|
||||
src={restaurant.image}
|
||||
alt={restaurant.name}
|
||||
className="h-44 w-full object-cover"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
{restaurant.images?.[0] && (
|
||||
<img
|
||||
src={restaurant.images[0]}
|
||||
alt={restaurant.name}
|
||||
className="h-44 w-full object-cover"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
)}
|
||||
<div className="p-4">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<h2 className="text-lg font-bold leading-tight text-zinc-900">
|
||||
|
||||
Reference in New Issue
Block a user