jettcheng1018
/
dramaling-vocab-learning
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: 優化統計卡片文字字體大小 

改進詞彙難度統計卡片的可讀性：
• 將標籤文字從 text-xs sm:text-sm 調整為 text-sm sm:text-base
• 提升「太簡單啦」、「重點學習」、「有點挑戰」、「慣用語」的字體大小
• 保持響應式設計，手機端14px，桌面端16px
• 改善用戶體驗和視覺平衡

🚀 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
鄭沛軒 2025-09-23 02:40:21 +08:00
parent 0e04a9bbfa
commit a2c2ada8a9
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/app/generate/page.tsx
View File

@ -393,25 +393,25 @@ function GenerateContent() {
{/* 簡單詞彙卡片 */} {/* 簡單詞彙卡片 */}
<div className="bg-gray-50 border border-dashed border-gray-300 rounded-lg p-3 sm:p-4 text-center"> <div className="bg-gray-50 border border-dashed border-gray-300 rounded-lg p-3 sm:p-4 text-center">
<div className="text-xl sm:text-2xl font-bold text-gray-600 mb-1">{vocabularyStats.simpleCount}</div> <div className="text-xl sm:text-2xl font-bold text-gray-600 mb-1">{vocabularyStats.simpleCount}</div>
<div className="text-gray-600 text-xs sm:text-sm font-medium">太簡單啦</div> <div className="text-gray-600 text-sm sm:text-base font-medium">太簡單啦</div>
</div> </div>
{/* 適中詞彙卡片 */} {/* 適中詞彙卡片 */}
<div className="bg-green-50 border border-green-200 rounded-lg p-3 sm:p-4 text-center"> <div className="bg-green-50 border border-green-200 rounded-lg p-3 sm:p-4 text-center">
<div className="text-xl sm:text-2xl font-bold text-green-700 mb-1">{vocabularyStats.moderateCount}</div> <div className="text-xl sm:text-2xl font-bold text-green-700 mb-1">{vocabularyStats.moderateCount}</div>
<div className="text-green-700 text-xs sm:text-sm font-medium">重點學習</div> <div className="text-green-700 text-sm sm:text-base font-medium">重點學習</div>
</div> </div>
{/* 艱難詞彙卡片 */} {/* 艱難詞彙卡片 */}
<div className="bg-orange-50 border border-orange-200 rounded-lg p-3 sm:p-4 text-center"> <div className="bg-orange-50 border border-orange-200 rounded-lg p-3 sm:p-4 text-center">
<div className="text-xl sm:text-2xl font-bold text-orange-700 mb-1">{vocabularyStats.difficultCount}</div> <div className="text-xl sm:text-2xl font-bold text-orange-700 mb-1">{vocabularyStats.difficultCount}</div>
<div className="text-orange-700 text-xs sm:text-sm font-medium">有點挑戰</div> <div className="text-orange-700 text-sm sm:text-base font-medium">有點挑戰</div>
</div> </div>
{/* 片語與俚語卡片 */} {/* 片語與俚語卡片 */}
<div className="bg-blue-50 border border-blue-200 rounded-lg p-3 sm:p-4 text-center"> <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 sm:p-4 text-center">
<div className="text-xl sm:text-2xl font-bold text-blue-700 mb-1">{vocabularyStats.idiomCount}</div> <div className="text-xl sm:text-2xl font-bold text-blue-700 mb-1">{vocabularyStats.idiomCount}</div>
<div className="text-blue-700 text-xs sm:text-sm font-medium">慣用語</div> <div className="text-blue-700 text-sm sm:text-base font-medium">慣用語</div>
</div> </div>
</div> </div>
)} )}