fix: SplitView 左黑右白+左侧文字居中醒目
- 右侧改为纯白背景(#fff),输入框浅灰底+深色文字+青绿聚焦边框 - 左侧品牌内容从底部移至垂直居中位置 - 输入框从底线风格改为圆角卡片风格,匹配白色面板
This commit is contained in:
1 parent
03bf7c92a9
commit
872c204e80
1 file changed
+26
-26
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user