shiyue/ittoview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: optimize performance practice options on mobile

Browse Source
This commit is contained in:
ittoview
2026-05-15 17:22:48 +01:00
parent cb0af5eba4
commit 53706bb3e4
1 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/PerformanceDomainPracticePage.tsx
View File

@@ -344,7 +344,7 @@ export default function PerformanceDomainPracticePage() {
onClick={() => handleSelect(domain.id)}
disabled={optionDisabled}
className={clsx(
'relative flex h-[112px] flex-col gap-2 overflow-hidden rounded-xl border bg-white p-3 text-left shadow-sm transition-colors dark:bg-gray-800',
'relative flex h-16 items-center justify-center overflow-hidden rounded-xl border bg-white p-1 text-center shadow-sm transition-colors dark:bg-gray-800 sm:h-[112px] sm:flex-col sm:items-stretch sm:justify-start sm:gap-2 sm:p-3 sm:text-left',
'border-gray-100 hover:border-indigo-200 hover:bg-indigo-50/40 dark:border-gray-700 dark:hover:border-indigo-700 dark:hover:bg-indigo-950/20',
optionDisabled && 'cursor-default hover:bg-white dark:hover:bg-gray-800',
shouldKeepDisabled && 'bg-gray-50 opacity-55 dark:bg-gray-800/70',
@@ -354,7 +354,7 @@ export default function PerformanceDomainPracticePage() {
'border-rose-300 bg-rose-50 shadow-[inset_0_0_0_2px_rgba(251,113,133,0.65)] dark:border-rose-600 dark:bg-rose-950/30 dark:shadow-[inset_0_0_0_2px_rgba(244,63,94,0.45)]'
)}
>
<div className="flex items-center gap-3">
<div className="hidden items-center gap-3 sm:flex">
<div
className={clsx(
'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-white',
@@ -374,7 +374,11 @@ export default function PerformanceDomainPracticePage() {
</div>
</div>
<div>
<div className="text-2xl font-bold leading-none text-gray-900 dark:text-white sm:hidden">
{domain.name.charAt(0)}
</div>
<div className="hidden sm:block">
{(() => {
const activeProgress = progress.scope === 'expectedGoal' ? expectedGoalProgress : keyPointProgress
const activeLabel = progress.scope === 'expectedGoal' ? '目标' : '要点'
@@ -430,15 +434,15 @@ export default function PerformanceDomainPracticePage() {
})()}
</div>
<div className="pointer-events-none absolute right-3 top-3 flex h-5 w-12 items-center justify-end">
<div className="pointer-events-none absolute right-1 top-1 flex h-4 w-8 items-center justify-end sm:right-3 sm:top-3 sm:h-5 sm:w-12">
{isCorrectSelected && (
<CheckCircle2 className="text-emerald-500" size={18} />
<CheckCircle2 className="text-emerald-500" size={16} />
)}
{isWrongSelected && (
<XCircle className="text-rose-500" size={18} />
<XCircle className="text-rose-500" size={16} />
)}
{shouldHighlightCorrect && !isCorrectSelected && (
<span className="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300">
<span className="rounded-full bg-emerald-100 px-1.5 py-0.5 text-[10px] font-medium text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300 sm:px-2 sm:text-xs">
正确
</span>
)}
@@ -633,7 +637,7 @@ export default function PerformanceDomainPracticePage() {
</div>
</section>
<section className="grid gap-3 sm:grid-cols-2">
<section className="grid grid-cols-4 gap-2 sm:grid-cols-2 sm:gap-3">
{performanceDomains.map((domain) => renderOptionButton(domain.id))}
</section>
</div>