Jelajahi Sumber

📱 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
t0ng7u 6 bulan lalu
induk
melakukan
43c6bbb3ad

+ 3 - 3
web/src/components/topup/InvitationCard.jsx

@@ -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'>

+ 3 - 3
web/src/components/topup/RechargeCard.jsx

@@ -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'>