fix: SplitView 左黑右白+左侧文字居中醒目

- 右侧改为纯白背景(#fff),输入框浅灰底+深色文字+青绿聚焦边框
- 左侧品牌内容从底部移至垂直居中位置
- 输入框从底线风格改为圆角卡片风格,匹配白色面板
This commit is contained in:
logan committed 2026-05-27 16:25:00 +08:00
1 parent 03bf7c92a9
commit 872c204e80
1 file changed
+26 -26
+26 -26
View File
@@ -23,24 +23,24 @@ const LATTICE_NODES = [
{ top: '52%', left: '57%', size: 5, delay: 0.35, duration: 2.5 }, { top: '52%', left: '57%', size: 5, delay: 0.35, duration: 2.5 },
]; ];
const INPUT_STYLE: React.CSSProperties = { const INPUT_STYLE_LIGHT: React.CSSProperties = {
padding: '12px 0', padding: '12px 16px',
background: 'transparent', background: '#f8fafc',
border: 'none', border: '1px solid #e2e8f0',
borderBottom: '1px solid rgba(148,163,184,0.15)', borderRadius: 10,
borderRadius: 0, color: '#1e293b',
color: '#e2e8f0',
fontSize: 14, fontSize: 14,
outline: 'none', outline: 'none',
width: '100%', width: '100%',
transition: 'border-color 0.3s', transition: 'border-color 0.3s, box-shadow 0.3s',
}; };
const LABEL_STYLE: React.CSSProperties = { const LABEL_STYLE_LIGHT: React.CSSProperties = {
display: 'block', display: 'block',
fontSize: 12, fontSize: 12,
color: 'rgba(148,163,184,0.5)', color: '#64748b',
marginBottom: 8, marginBottom: 8,
fontWeight: 500,
}; };
export default function SplitView() { export default function SplitView() {
@@ -57,8 +57,8 @@ export default function SplitView() {
width: '55%', width: '55%',
background: '#080c14', background: '#080c14',
display: 'flex', display: 'flex',
alignItems: 'flex-end', alignItems: 'center',
padding: '0 56px 80px 56px', padding: '0 56px',
}} }}
> >
{/* ── Perspective Grid ── */} {/* ── Perspective Grid ── */}
@@ -204,7 +204,7 @@ export default function SplitView() {
className="flex items-center justify-center" className="flex items-center justify-center"
style={{ style={{
width: '45%', width: '45%',
background: '#0c1017', background: '#ffffff',
padding: 48, padding: 48,
}} }}
> >
@@ -212,40 +212,40 @@ export default function SplitView() {
onSubmit={handleLogin} onSubmit={handleLogin}
style={{ width: '100%', maxWidth: 360, display: 'flex', flexDirection: 'column' }} style={{ width: '100%', maxWidth: 360, display: 'flex', flexDirection: 'column' }}
> >
<h2 style={{ fontSize: 24, fontWeight: 600, color: '#e2e8f0', marginBottom: 8 }}> <h2 style={{ fontSize: 24, fontWeight: 600, color: '#1e293b', marginBottom: 8 }}>
登录 登录
</h2> </h2>
<p style={{ color: 'rgba(148,163,184,0.6)', fontSize: 14, marginBottom: 40 }}> <p style={{ color: '#94a3b8', fontSize: 14, marginBottom: 40 }}>
访问你的工作空间 访问你的工作空间
</p> </p>
{error && <div style={{ color: '#f87171', fontSize: 13, marginBottom: 16 }}>{error}</div>} {error && <div style={{ color: '#ef4444', fontSize: 13, marginBottom: 16 }}>{error}</div>}
<div style={{ marginBottom: 28 }}> <div style={{ marginBottom: 24 }}>
<label style={LABEL_STYLE}>用户名</label> <label style={LABEL_STYLE_LIGHT}>用户名</label>
<input <input
type="text" type="text"
placeholder="请输入用户名" placeholder="请输入用户名"
value={username} value={username}
onChange={(e) => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
className="w-full" className="w-full"
style={INPUT_STYLE} style={INPUT_STYLE_LIGHT}
onFocus={(e) => { e.target.style.borderBottomColor = '#00d4aa'; }} onFocus={(e) => { e.target.style.borderColor = '#00d4aa'; e.target.style.boxShadow = '0 0 0 3px rgba(0,212,170,0.1)'; }}
onBlur={(e) => { e.target.style.borderBottomColor = 'rgba(148,163,184,0.15)'; }} onBlur={(e) => { e.target.style.borderColor = '#e2e8f0'; e.target.style.boxShadow = 'none'; }}
/> />
</div> </div>
<div style={{ marginBottom: 36 }}> <div style={{ marginBottom: 32 }}>
<label style={LABEL_STYLE}>密码</label> <label style={LABEL_STYLE_LIGHT}>密码</label>
<input <input
type="password" type="password"
placeholder="请输入密码" placeholder="请输入密码"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
className="w-full" className="w-full"
style={INPUT_STYLE} style={INPUT_STYLE_LIGHT}
onFocus={(e) => { e.target.style.borderBottomColor = '#00d4aa'; }} onFocus={(e) => { e.target.style.borderColor = '#00d4aa'; e.target.style.boxShadow = '0 0 0 3px rgba(0,212,170,0.1)'; }}
onBlur={(e) => { e.target.style.borderBottomColor = 'rgba(148,163,184,0.15)'; }} onBlur={(e) => { e.target.style.borderColor = '#e2e8f0'; e.target.style.boxShadow = 'none'; }}
/> />
</div> </div>