📱 fix(ui/topup): make stats numbers responsive on mobile
Reduce KPI font size on small screens to prevent overlapping of large numbers while preserving the desktop layout. Changes: - InvitationCard.jsx: use `text-base sm:text-2xl` for pending earnings, total earnings, and invite count. - RechargeCard.jsx: use `text-base sm:text-2xl` for current balance, historical usage, and request count. Impact: - Visual-only; no behavioral changes. - Desktop/tablet unchanged. - Lint passes. Files: - web/src/components/topup/InvitationCard.jsx - web/src/components/topup/RechargeCard.jsx
This commit is contained in:
@@ -89,7 +89,7 @@ const InvitationCard = ({
|
||||
<div className='grid grid-cols-3 gap-6 mt-4'>
|
||||
{/* 待使用收益 */}
|
||||
<div className='text-center'>
|
||||
<div className='text-2xl font-bold mb-2' style={{ color: 'white' }}>
|
||||
<div className='text-base sm:text-2xl font-bold mb-2' style={{ color: 'white' }}>
|
||||
{renderQuota(userState?.user?.aff_quota || 0)}
|
||||
</div>
|
||||
<div className='flex items-center justify-center text-sm'>
|
||||
@@ -100,7 +100,7 @@ const InvitationCard = ({
|
||||
|
||||
{/* 总收益 */}
|
||||
<div className='text-center'>
|
||||
<div className='text-2xl font-bold mb-2' style={{ color: 'white' }}>
|
||||
<div className='text-base sm:text-2xl font-bold mb-2' style={{ color: 'white' }}>
|
||||
{renderQuota(userState?.user?.aff_history_quota || 0)}
|
||||
</div>
|
||||
<div className='flex items-center justify-center text-sm'>
|
||||
@@ -111,7 +111,7 @@ const InvitationCard = ({
|
||||
|
||||
{/* 邀请人数 */}
|
||||
<div className='text-center'>
|
||||
<div className='text-2xl font-bold mb-2' style={{ color: 'white' }}>
|
||||
<div className='text-base sm:text-2xl font-bold mb-2' style={{ color: 'white' }}>
|
||||
{userState?.user?.aff_count || 0}
|
||||
</div>
|
||||
<div className='flex items-center justify-center text-sm'>
|
||||
|
||||
@@ -109,7 +109,7 @@ const RechargeCard = ({
|
||||
<div className='grid grid-cols-3 gap-6 mt-4'>
|
||||
{/* 当前余额 */}
|
||||
<div className='text-center'>
|
||||
<div className='text-2xl font-bold mb-2' style={{ color: 'white' }}>
|
||||
<div className='text-base sm:text-2xl font-bold mb-2' style={{ color: 'white' }}>
|
||||
{renderQuota(userState?.user?.quota)}
|
||||
</div>
|
||||
<div className='flex items-center justify-center text-sm'>
|
||||
@@ -120,7 +120,7 @@ const RechargeCard = ({
|
||||
|
||||
{/* 历史消耗 */}
|
||||
<div className='text-center'>
|
||||
<div className='text-2xl font-bold mb-2' style={{ color: 'white' }}>
|
||||
<div className='text-base sm:text-2xl font-bold mb-2' style={{ color: 'white' }}>
|
||||
{renderQuota(userState?.user?.used_quota)}
|
||||
</div>
|
||||
<div className='flex items-center justify-center text-sm'>
|
||||
@@ -131,7 +131,7 @@ const RechargeCard = ({
|
||||
|
||||
{/* 请求次数 */}
|
||||
<div className='text-center'>
|
||||
<div className='text-2xl font-bold mb-2' style={{ color: 'white' }}>
|
||||
<div className='text-base sm:text-2xl font-bold mb-2' style={{ color: 'white' }}>
|
||||
{userState?.user?.request_count || 0}
|
||||
</div>
|
||||
<div className='flex items-center justify-center text-sm'>
|
||||
|
||||
Reference in New Issue
Block a user