feat(frontend): 统一页面视觉与轻量动效

This commit is contained in:
2026-08-30 20:13:29 +08:00
parent 2c84a98474
commit ef03a8f745
17 changed files with 275 additions and 94 deletions
+4 -3
View File
@@ -50,10 +50,11 @@ async function remove(task: TaskItem) {
</template>
<style scoped>
.task-list { display: grid; gap: var(--space-md); }
.task-list { display: grid; gap: var(--space-md); width: min(100%, 980px); margin-inline: auto; }
.task-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-md); }
.status-check { width: 26px; height: 26px; border: 2px solid var(--color-border-default); border-radius: var(--radius-full); }
.status-check.done { border-color: var(--color-success); background: var(--color-success); color: white; }
.status-check { width: 28px; height: 28px; border: 2px solid var(--color-border-default); border-radius: var(--radius-full); transition: border-color var(--motion-fast), background-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast); }
.status-check:hover { border-color: var(--color-success); transform: scale(1.06); }
.status-check.done { border-color: var(--color-success); background: var(--color-success); color: white; box-shadow: 0 3px 10px color-mix(in srgb, var(--color-success) 24%, transparent); }
.task-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); }
.task-content p { margin: var(--space-xs) 0; }
.task-content .subtle { display: flex; flex-wrap: wrap; gap: var(--space-md); }