feat: 更新样式和功能,优化徽章、登录页面和文章页面的布局,增强可访问性和用户体验
This commit is contained in:
@@ -11,7 +11,7 @@ const badgeVariants = cva(
|
||||
default: 'border-primary/20 bg-primary/10 text-primary',
|
||||
secondary: 'border-border bg-secondary text-secondary-foreground',
|
||||
outline: 'border-border/80 bg-background/60 text-muted-foreground',
|
||||
success: 'border-emerald-500/20 bg-emerald-500/12 text-emerald-600',
|
||||
success: 'border-emerald-300 bg-emerald-100 text-emerald-900',
|
||||
warning: 'border-amber-500/20 bg-amber-500/12 text-amber-700',
|
||||
danger: 'border-rose-500/20 bg-rose-500/12 text-rose-600',
|
||||
},
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
--card-foreground: oklch(0.18 0.02 255);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.18 0.02 255);
|
||||
--primary: oklch(0.57 0.17 255);
|
||||
--primary-foreground: oklch(0.98 0.01 255);
|
||||
--primary: oklch(0.5 0.16 255);
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
--secondary: oklch(0.94 0.02 220);
|
||||
--secondary-foreground: oklch(0.28 0.03 250);
|
||||
--muted: oklch(0.95 0.01 250);
|
||||
@@ -20,7 +20,7 @@
|
||||
--border: oklch(0.9 0.01 250);
|
||||
--input: oklch(0.91 0.01 250);
|
||||
--ring: oklch(0.57 0.17 255);
|
||||
--success: oklch(0.72 0.16 160);
|
||||
--success: oklch(0.63 0.14 160);
|
||||
--warning: oklch(0.81 0.16 78);
|
||||
--radius: 1.15rem;
|
||||
}
|
||||
|
||||
@@ -21,7 +21,10 @@ export function LoginPage({
|
||||
const [password, setPassword] = useState('admin123')
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center px-4 py-10">
|
||||
<main
|
||||
className="flex min-h-screen items-center justify-center px-4 py-10"
|
||||
aria-labelledby="admin-login-title"
|
||||
>
|
||||
<div className="grid w-full max-w-5xl gap-6 lg:grid-cols-[1.1fr_0.9fr]">
|
||||
<Card className="overflow-hidden border-primary/12 bg-gradient-to-br from-card via-card to-primary/5">
|
||||
<CardHeader className="space-y-4">
|
||||
@@ -57,7 +60,7 @@ export function LoginPage({
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-3">
|
||||
<CardTitle id="admin-login-title" className="flex items-center gap-3">
|
||||
<span className="flex h-11 w-11 items-center justify-center rounded-2xl border border-primary/20 bg-primary/10 text-primary">
|
||||
<LockKeyhole className="h-5 w-5" />
|
||||
</span>
|
||||
@@ -119,6 +122,6 @@ export function LoginPage({
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user