fix: 修復FlipMemoryTest翻卡組件顯示問題
- 修正翻卡容器結構,讓整個卡片翻轉而非僅內容 - 將卡片樣式從外層容器移到翻轉容器 - 增加容器高度從400px到500px以容納背面更多內容 - 為背面內容添加overflow-y-auto防止內容溢出 - 移除重複的卡片樣式,統一視覺效果 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
561e419bdd
commit
4aee37540b
|
|
@ -63,18 +63,18 @@ export const FlipMemoryTest: React.FC<FlipMemoryTestProps> = ({
|
|||
<div
|
||||
className={`card-container ${disabled ? 'pointer-events-none opacity-75' : 'cursor-pointer'}`}
|
||||
onClick={handleFlip}
|
||||
style={{ perspective: '1000px', minHeight: '400px' }}
|
||||
style={{ perspective: '1000px', minHeight: '500px' }}
|
||||
>
|
||||
<div
|
||||
className={`card transition-transform duration-600 ${isFlipped ? 'rotate-y-180' : ''}`}
|
||||
style={{ transformStyle: 'preserve-3d' }}
|
||||
className={`card bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-600 ${isFlipped ? 'rotate-y-180' : ''}`}
|
||||
style={{ transformStyle: 'preserve-3d', minHeight: '500px' }}
|
||||
>
|
||||
{/* 正面 */}
|
||||
<div
|
||||
className="card-face card-front absolute w-full h-full"
|
||||
style={{ backfaceVisibility: 'hidden' }}
|
||||
>
|
||||
<div className="bg-white rounded-xl shadow-lg p-8 h-full hover:shadow-xl transition-shadow">
|
||||
<div className="p-8 h-full">
|
||||
<div className="flex justify-between items-start mb-6">
|
||||
<h2 className="text-2xl font-bold text-gray-900">翻卡記憶</h2>
|
||||
<span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
|
||||
|
|
@ -107,7 +107,7 @@ export const FlipMemoryTest: React.FC<FlipMemoryTestProps> = ({
|
|||
className="card-face card-back absolute w-full h-full"
|
||||
style={{ backfaceVisibility: 'hidden', transform: 'rotateY(180deg)' }}
|
||||
>
|
||||
<div className="bg-white rounded-xl shadow-lg p-8 h-full">
|
||||
<div className="p-8 h-full overflow-y-auto">
|
||||
<div className="flex justify-between items-start mb-6">
|
||||
<h2 className="text-2xl font-bold text-gray-900">翻卡記憶</h2>
|
||||
<span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
|
||||
|
|
|
|||
Loading…
Reference in New Issue