style: 优化登录页登录方式切换 Tab 样式

将白色背景切换改为下划线 Tab 样式,选中态使用紫色文字+底边框,辨识度更高。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Your Name 2026-02-09 18:56:48 +08:00
parent d4081345f7
commit 45c6c034e0

View File

@ -161,14 +161,14 @@ function LoginForm() {
</div>
{/* 登录方式切换 */}
<div className="flex bg-bg-elevated rounded-xl p-1 border border-border-subtle">
<div className="flex gap-4 border-b border-border-subtle">
<button
type="button"
onClick={() => { setLoginMode('password'); setError('') }}
className={`flex-1 py-2.5 rounded-lg text-sm font-medium transition-all ${
className={`pb-3 text-sm font-medium transition-all border-b-2 ${
loginMode === 'password'
? 'bg-white text-text-primary shadow-sm'
: 'text-text-tertiary hover:text-text-secondary'
? 'border-accent-indigo text-accent-indigo'
: 'border-transparent text-text-tertiary hover:text-text-secondary'
}`}
>
@ -176,10 +176,10 @@ function LoginForm() {
<button
type="button"
onClick={() => { setLoginMode('code'); setError('') }}
className={`flex-1 py-2.5 rounded-lg text-sm font-medium transition-all ${
className={`pb-3 text-sm font-medium transition-all border-b-2 ${
loginMode === 'code'
? 'bg-white text-text-primary shadow-sm'
: 'text-text-tertiary hover:text-text-secondary'
? 'border-accent-indigo text-accent-indigo'
: 'border-transparent text-text-tertiary hover:text-text-secondary'
}`}
>