ui: 缩小房间页卡片和操作按钮,适配小屏手机

This commit is contained in:
2026-02-25 14:51:12 +08:00
parent 4f164fecdf
commit 30d5ad5ff2
2 changed files with 6 additions and 6 deletions
+5 -5
View File
@@ -14,20 +14,20 @@ export default function ActionButtons({
disabled, disabled,
}: ActionButtonsProps) { }: ActionButtonsProps) {
return ( return (
<div className="relative z-10 flex items-center justify-center gap-8 pb-8 pt-4"> <div className="relative z-10 flex items-center justify-center gap-6 pb-5 pt-3">
<motion.button <motion.button
className="flex h-16 w-16 items-center justify-center rounded-full bg-white shadow-lg shadow-rose-200/50 ring-1 ring-rose-100 disabled:opacity-40" className="flex h-13 w-13 items-center justify-center rounded-full bg-white shadow-lg shadow-rose-200/50 ring-1 ring-rose-100 disabled:opacity-40"
whileTap={{ scale: 0.85 }} whileTap={{ scale: 0.85 }}
whileHover={{ scale: 1.08 }} whileHover={{ scale: 1.08 }}
onClick={() => onAction("left")} onClick={() => onAction("left")}
disabled={disabled} disabled={disabled}
aria-label="Nope" aria-label="Nope"
> >
<X size={30} className="text-rose-500" strokeWidth={3} /> <X size={26} className="text-rose-500" strokeWidth={3} />
</motion.button> </motion.button>
<motion.button <motion.button
className="flex h-16 w-16 items-center justify-center rounded-full bg-white shadow-lg shadow-emerald-200/50 ring-1 ring-emerald-100 disabled:opacity-40" className="flex h-13 w-13 items-center justify-center rounded-full bg-white shadow-lg shadow-emerald-200/50 ring-1 ring-emerald-100 disabled:opacity-40"
whileTap={{ scale: 0.85 }} whileTap={{ scale: 0.85 }}
whileHover={{ scale: 1.08 }} whileHover={{ scale: 1.08 }}
onClick={() => onAction("right")} onClick={() => onAction("right")}
@@ -35,7 +35,7 @@ export default function ActionButtons({
aria-label="Like" aria-label="Like"
> >
<Heart <Heart
size={28} size={24}
className="fill-emerald-500 text-emerald-500" className="fill-emerald-500 text-emerald-500"
strokeWidth={2.5} strokeWidth={2.5}
/> />
+1 -1
View File
@@ -359,7 +359,7 @@ export default function SwipeDeck({
)} )}
<div className="relative flex flex-1 items-center justify-center px-4"> <div className="relative flex flex-1 items-center justify-center px-4">
<div className="relative h-[70vh] w-full max-w-sm"> <div className="relative h-[60vh] w-full max-w-sm">
{currentIndex === 0 && !resolvedMatchId && guideVisible && ( {currentIndex === 0 && !resolvedMatchId && guideVisible && (
<SwipeGuide onDismiss={() => setGuideVisible(false)} /> <SwipeGuide onDismiss={() => setGuideVisible(false)} />
)} )}