style: 设置密码弹窗标题与输入框改为同行布局
- 标签左对齐(60px 宽度),输入框右侧自适应 - 错误提示也跟随缩进对齐
This commit is contained in:
@@ -95,12 +95,24 @@ export default function SetPasswordModal({
|
||||
marginBottom: '16px',
|
||||
};
|
||||
|
||||
const labelStyle: React.CSSProperties = {
|
||||
display: 'block',
|
||||
const rowStyle: React.CSSProperties = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '12px',
|
||||
};
|
||||
|
||||
const rowLabelStyle: React.CSSProperties = {
|
||||
fontSize: '13px',
|
||||
fontWeight: 500,
|
||||
color: 'var(--text-secondary)',
|
||||
marginBottom: '6px',
|
||||
width: '60px',
|
||||
flexShrink: 0,
|
||||
textAlign: 'right',
|
||||
};
|
||||
|
||||
const rowInputWrapStyle: React.CSSProperties = {
|
||||
flex: 1,
|
||||
position: 'relative',
|
||||
};
|
||||
|
||||
const errorStyle: React.CSSProperties = {
|
||||
@@ -153,8 +165,9 @@ export default function SetPasswordModal({
|
||||
<div>
|
||||
{hasPassword && (
|
||||
<div style={fieldStyle}>
|
||||
<label style={labelStyle}>旧密码</label>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div style={rowStyle}>
|
||||
<label style={rowLabelStyle}>旧密码</label>
|
||||
<div style={rowInputWrapStyle}>
|
||||
<input
|
||||
type={showOld ? 'text' : 'password'}
|
||||
placeholder="请输入旧密码"
|
||||
@@ -192,13 +205,15 @@ export default function SetPasswordModal({
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<div style={errorStyle} />
|
||||
</div>
|
||||
<div style={{ ...errorStyle, paddingLeft: '72px' }} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={fieldStyle}>
|
||||
<label style={labelStyle}>新密码</label>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div style={rowStyle}>
|
||||
<label style={rowLabelStyle}>新密码</label>
|
||||
<div style={rowInputWrapStyle}>
|
||||
<input
|
||||
type={showNew ? 'text' : 'password'}
|
||||
placeholder="至少6位字符"
|
||||
@@ -236,12 +251,14 @@ export default function SetPasswordModal({
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<div style={errorStyle}>{pwdTooShort ? '密码至少需要6位' : ''}</div>
|
||||
</div>
|
||||
<div style={{ ...errorStyle, paddingLeft: '72px' }}>{pwdTooShort ? '密码至少需要6位' : ''}</div>
|
||||
</div>
|
||||
|
||||
<div style={fieldStyle}>
|
||||
<label style={labelStyle}>确认密码</label>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div style={rowStyle}>
|
||||
<label style={rowLabelStyle}>确认密码</label>
|
||||
<div style={rowInputWrapStyle}>
|
||||
<input
|
||||
type={showConfirm ? 'text' : 'password'}
|
||||
placeholder="再次输入新密码"
|
||||
@@ -279,7 +296,8 @@ export default function SetPasswordModal({
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<div style={errorStyle}>{pwdMismatch ? '两次输入的密码不一致' : ''}</div>
|
||||
</div>
|
||||
<div style={{ ...errorStyle, paddingLeft: '72px' }}>{pwdMismatch ? '两次输入的密码不一致' : ''}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user