📱 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:
t0ng7u
2025-08-23 03:36:18 +08:00
parent def4d16c73
commit 43c6bbb3ad
2 changed files with 6 additions and 6 deletions

View File

@@ -89,7 +89,7 @@ const InvitationCard = ({
<div className='grid grid-cols-3 gap-6 mt-4'> <div className='grid grid-cols-3 gap-6 mt-4'>
{/* 待使用收益 */} {/* 待使用收益 */}
<div className='text-center'> <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)} {renderQuota(userState?.user?.aff_quota || 0)}
</div> </div>
<div className='flex items-center justify-center text-sm'> <div className='flex items-center justify-center text-sm'>
@@ -100,7 +100,7 @@ const InvitationCard = ({
{/* 总收益 */} {/* 总收益 */}
<div className='text-center'> <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)} {renderQuota(userState?.user?.aff_history_quota || 0)}
</div> </div>
<div className='flex items-center justify-center text-sm'> <div className='flex items-center justify-center text-sm'>
@@ -111,7 +111,7 @@ const InvitationCard = ({
{/* 邀请人数 */} {/* 邀请人数 */}
<div className='text-center'> <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} {userState?.user?.aff_count || 0}
</div> </div>
<div className='flex items-center justify-center text-sm'> <div className='flex items-center justify-center text-sm'>

View File

@@ -109,7 +109,7 @@ const RechargeCard = ({
<div className='grid grid-cols-3 gap-6 mt-4'> <div className='grid grid-cols-3 gap-6 mt-4'>
{/* 当前余额 */} {/* 当前余额 */}
<div className='text-center'> <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)} {renderQuota(userState?.user?.quota)}
</div> </div>
<div className='flex items-center justify-center text-sm'> <div className='flex items-center justify-center text-sm'>
@@ -120,7 +120,7 @@ const RechargeCard = ({
{/* 历史消耗 */} {/* 历史消耗 */}
<div className='text-center'> <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)} {renderQuota(userState?.user?.used_quota)}
</div> </div>
<div className='flex items-center justify-center text-sm'> <div className='flex items-center justify-center text-sm'>
@@ -131,7 +131,7 @@ const RechargeCard = ({
{/* 请求次数 */} {/* 请求次数 */}
<div className='text-center'> <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} {userState?.user?.request_count || 0}
</div> </div>
<div className='flex items-center justify-center text-sm'> <div className='flex items-center justify-center text-sm'>