style(ui): 个人中心积分统计改为卡片布局
- 剩余积分、今日消耗改为两列卡片并排展示 - 使用项目现有颜色体系(白色卡片 + 边框) - 数字旁增加单位'分' - 充值按钮移至卡片下方全宽展示
This commit is contained in:
@@ -208,29 +208,54 @@ export default function Profile() {
|
||||
|
||||
<div style={{ height: 1, background: 'var(--border-light)', margin: '0 28px' }} />
|
||||
|
||||
{/* 积分区 */}
|
||||
<div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', padding: '24px 28px' }}>
|
||||
<div style={{ display: 'flex', gap: '40px' }}>
|
||||
<div>
|
||||
<div style={{ fontSize: '13px', color: 'var(--text-secondary)', marginBottom: '8px' }}>
|
||||
{/* 积分统计卡片 */}
|
||||
<div style={{ padding: '24px 28px' }}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
|
||||
{/* 剩余积分 */}
|
||||
<div
|
||||
style={{
|
||||
background: 'var(--bg-card)',
|
||||
border: '1px solid var(--border-light)',
|
||||
borderRadius: 'var(--radius-xl)',
|
||||
padding: '20px 24px',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: 'var(--font-sm)', color: 'var(--text-secondary)', marginBottom: '12px' }}>
|
||||
剩余积分
|
||||
</div>
|
||||
<div style={{ fontSize: '32px', fontWeight: 700, color: '#36b26a', lineHeight: 1 }}>
|
||||
{balance?.balance ?? 0}
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', gap: '6px' }}>
|
||||
<span style={{ fontSize: '36px', fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1 }}>
|
||||
{balance?.balance ?? 0}
|
||||
</span>
|
||||
<span style={{ fontSize: 'var(--font-sm)', color: 'var(--text-tertiary)' }}>分</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ fontSize: '13px', color: 'var(--text-secondary)', marginBottom: '8px' }}>
|
||||
|
||||
{/* 今日消耗 */}
|
||||
<div
|
||||
style={{
|
||||
background: 'var(--bg-card)',
|
||||
border: '1px solid var(--border-light)',
|
||||
borderRadius: 'var(--radius-xl)',
|
||||
padding: '20px 24px',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: 'var(--font-sm)', color: 'var(--text-secondary)', marginBottom: '12px' }}>
|
||||
今日消耗
|
||||
</div>
|
||||
<div style={{ fontSize: '32px', fontWeight: 700, color: '#ff6b6b', lineHeight: 1 }}>
|
||||
{todayConsumed}
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', gap: '6px' }}>
|
||||
<span style={{ fontSize: '36px', fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1 }}>
|
||||
{todayConsumed}
|
||||
</span>
|
||||
<span style={{ fontSize: 'var(--font-sm)', color: 'var(--text-tertiary)' }}>分</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 充值按钮 */}
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
style={{ padding: '10px 28px', fontSize: '14px' }}
|
||||
style={{ width: '100%', marginTop: '16px', padding: '12px', fontSize: 'var(--font-base)' }}
|
||||
onClick={() => setShowRechargeModal(true)}
|
||||
>
|
||||
在线充值
|
||||
|
||||
Reference in New Issue
Block a user