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

fix: emphasize current practice card

Browse Source
This commit is contained in:
ittoview
2026-05-11 09:45:20 +01:00
parent fdc2097f67
commit a80fa715c3
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/ProcessPurposePracticePage.tsx
View File

@@ -464,10 +464,10 @@ export default function ProcessPurposePracticePage() {
</div> </div>
</div> </div>
<main className="mx-auto flex min-h-0 w-full max-w-5xl flex-1 flex-col gap-4 overflow-hidden px-4 py-6"> <main className="mx-auto flex min-h-0 w-full max-w-5xl flex-1 flex-col gap-3 overflow-hidden px-4 pb-4 pt-3">
<div <div
ref={deckScrollRef} ref={deckScrollRef}
className="min-h-0 flex-1 space-y-4 overflow-y-auto overscroll-contain pr-1 scroll-smooth" className="min-h-0 flex-1 space-y-3 overflow-y-auto overscroll-contain pr-1 scroll-smooth"
> >
<AnimatePresence initial={false}> <AnimatePresence initial={false}>
{visibleQuestionCards.map(({ item, index }) => { {visibleQuestionCards.map(({ item, index }) => {
@@ -480,18 +480,18 @@ export default function ProcessPurposePracticePage() {
layout layout
initial={{ opacity: 0, y: 24, scale: 0.98 }} initial={{ opacity: 0, y: 24, scale: 0.98 }}
animate={{ animate={{
opacity: isCurrent ? 1 : 0.72, opacity: isCurrent ? 1 : 0.62,
y: 0, y: 0,
scale: isCurrent ? 1 : 0.985, scale: isCurrent ? 1 : 0.975,
}} }}
exit={{ opacity: 0, y: -16, scale: 0.98 }} exit={{ opacity: 0, y: -16, scale: 0.98 }}
transition={{ duration: 0.28, ease: 'easeOut' }} transition={{ duration: 0.28, ease: 'easeOut' }}
className={`rounded-2xl border bg-white p-6 shadow-sm transition-all duration-200 dark:bg-gray-800 ${ className={`rounded-2xl border bg-white p-6 transition-all duration-200 dark:bg-gray-800 ${
isCurrent && correctFeedback isCurrent && correctFeedback
? 'border-green-300 ring-2 ring-green-100 dark:border-green-700 dark:ring-green-900/40' ? 'border-green-300 shadow-lg shadow-green-100/70 ring-2 ring-green-100 dark:border-green-700 dark:shadow-none dark:ring-green-900/40'
: isCurrent : isCurrent
? 'border-gray-200 dark:border-gray-700' ? 'border-blue-200 shadow-lg shadow-blue-100/70 ring-1 ring-blue-100 dark:border-blue-800 dark:shadow-none dark:ring-blue-900/30'
: 'border-gray-100 dark:border-gray-800' : 'border-gray-100 shadow-sm dark:border-gray-800'
}`} }`}
> >
<div className="mb-4 flex min-h-9 flex-wrap items-center justify-between gap-3"> <div className="mb-4 flex min-h-9 flex-wrap items-center justify-between gap-3">
@@ -532,7 +532,7 @@ export default function ProcessPurposePracticePage() {
<p <p
className={`leading-9 text-gray-900 dark:text-gray-100 ${ className={`leading-9 text-gray-900 dark:text-gray-100 ${
isCurrent ? 'text-xl' : 'text-base' isCurrent ? 'text-2xl font-medium' : 'text-base'
}`} }`}
> >
{item.purpose} {item.purpose}
@@ -549,7 +549,7 @@ export default function ProcessPurposePracticePage() {
initial={{ opacity: 0, y: 12 }} initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 0.58, y: 0 }} animate={{ opacity: 0.58, y: 0 }}
transition={{ duration: 0.25 }} transition={{ duration: 0.25 }}
className="pointer-events-none shrink-0 rounded-2xl border border-dashed border-gray-200 bg-white/70 p-5 shadow-sm blur-[0.4px] dark:border-gray-700 dark:bg-gray-800/55" className="pointer-events-none shrink-0 rounded-2xl border border-dashed border-gray-200 bg-white/60 p-4 shadow-sm blur-[0.4px] dark:border-gray-700 dark:bg-gray-800/50"
> >
<div className="mb-3 inline-flex rounded-full bg-gray-100 px-3 py-1 text-sm font-medium text-gray-500 dark:bg-gray-700/70 dark:text-gray-300"> <div className="mb-3 inline-flex rounded-full bg-gray-100 px-3 py-1 text-sm font-medium text-gray-500 dark:bg-gray-700/70 dark:text-gray-300">
第 {progress.currentIndex + 2} / {totalCount} 题 第 {progress.currentIndex + 2} / {totalCount} 题