fix: 样式修改
This commit is contained in:
@@ -10,7 +10,11 @@ import { useRef } from 'react';
|
||||
|
||||
import { Empty } from '@/components/empty';
|
||||
import Recharge from '@/components/subscribe/recharge';
|
||||
import { formatDate } from '@workspace/ui/utils';
|
||||
import { Button } from '@workspace/ui/components/button';
|
||||
import { formatDate, isBrowser } from '@workspace/ui/utils';
|
||||
import { Copy } from 'lucide-react';
|
||||
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
export default function Page() {
|
||||
const t = useTranslations('wallet');
|
||||
@@ -19,45 +23,68 @@ export default function Page() {
|
||||
const totalAssets = (user?.balance || 0) + (user?.commission || 0) + (user?.gift_amount || 0);
|
||||
return (
|
||||
<>
|
||||
<Card className='mb-4'>
|
||||
<CardContent className='p-6'>
|
||||
<h2 className='text-foreground mb-4 text-2xl font-bold'>{t('assetOverview')}</h2>
|
||||
<Card className='mb-4 rounded-[40px] border border-[#D9D9D9] px-[30px] pb-[30px] pt-[20px] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'>
|
||||
<CardContent className='p-0'>
|
||||
<h2 className='mb-4 flex items-center justify-between text-xl font-bold text-[#666]'>
|
||||
<span>{t('assetOverview')}</span>
|
||||
<Recharge
|
||||
className={
|
||||
'min-w-[150px] rounded-full border-[#A8D4ED] bg-[#A8D4ED] px-[35px] py-[9px] text-center text-xl font-bold hover:bg-[#225BA9] hover:text-white'
|
||||
}
|
||||
/>
|
||||
</h2>
|
||||
<div className='mb-4'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div>
|
||||
<p className='text-sm font-medium'>{t('totalAssets')}</p>
|
||||
<p className='text-3xl font-bold'>
|
||||
<p className='text-sm font-light text-[#666]'>总资产</p>
|
||||
<p className='text-[32px] font-bold'>
|
||||
<Display type='currency' value={totalAssets} />
|
||||
</p>
|
||||
</div>
|
||||
<Recharge />
|
||||
</div>
|
||||
</div>
|
||||
<div className='grid grid-cols-1 gap-6 md:grid-cols-3'>
|
||||
<div className='bg-secondary rounded-lg p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
|
||||
<p className='text-secondary-foreground text-sm font-medium opacity-80'>
|
||||
{t('balance')}
|
||||
</p>
|
||||
<p className='text-secondary-foreground text-2xl font-bold'>
|
||||
<div className='grid grid-cols-1 gap-6 md:grid-cols-4'>
|
||||
<div className='rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
|
||||
<p className='mb-3 text-sm font-medium text-[#666] opacity-80'>账户余额</p>
|
||||
<p className='text-2xl font-bold text-[#225BA9]'>
|
||||
<Display type='currency' value={user?.balance} />
|
||||
</p>
|
||||
</div>
|
||||
<div className='bg-secondary rounded-lg p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
|
||||
<p className='text-secondary-foreground text-sm font-medium opacity-80'>
|
||||
{t('giftAmount')}
|
||||
</p>
|
||||
<p className='text-secondary-foreground text-2xl font-bold'>
|
||||
<div className='rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
|
||||
<p className='mb-3 text-sm font-medium text-[#666] opacity-80'>{t('giftAmount')}</p>
|
||||
<p className='text-2xl font-bold text-[#225BA9]'>
|
||||
<Display type='currency' value={user?.gift_amount} />
|
||||
</p>
|
||||
</div>
|
||||
<div className='bg-secondary rounded-lg p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
|
||||
<p className='text-secondary-foreground text-sm font-medium opacity-80'>
|
||||
{t('commission')}
|
||||
</p>
|
||||
<p className='text-secondary-foreground text-2xl font-bold'>
|
||||
<div className='rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
|
||||
<p className='mb-3 text-sm font-medium text-[#666] opacity-80'>{t('commission')}</p>
|
||||
<p className='text-2xl font-bold text-[#225BA9]'>
|
||||
<Display type='currency' value={user?.commission} />
|
||||
</p>
|
||||
</div>
|
||||
<div className='rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
|
||||
<p className='mb-3 flex justify-between text-sm font-medium text-[#666] opacity-80'>
|
||||
<span>返佣邀请码</span>
|
||||
<span className={'text-[#225BA9]'}>返佣详情</span>
|
||||
</p>
|
||||
<p className='flex justify-between text-2xl font-bold text-[#225BA9]'>
|
||||
<span> {user?.refer_code}</span>
|
||||
{isBrowser() && (
|
||||
<CopyToClipboard
|
||||
text={`${location?.origin}/auth?invite=${user?.refer_code}`}
|
||||
onCopy={(text, result) => {
|
||||
if (result) {
|
||||
toast.success(t('copySuccess'));
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button variant='secondary' size='sm' className='gap-2'>
|
||||
<Copy className='h-4 w-4' />
|
||||
</Button>
|
||||
</CopyToClipboard>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -72,26 +99,26 @@ export default function Page() {
|
||||
}}
|
||||
renderItem={(item) => {
|
||||
return (
|
||||
<Card className='overflow-hidden'>
|
||||
<Card className='rounded-[32px] px-[55px]'>
|
||||
<CardContent className='p-3 text-sm'>
|
||||
<ul className='grid grid-cols-2 gap-3 *:flex *:flex-col lg:grid-cols-4'>
|
||||
<li className='font-semibold'>
|
||||
<span className='text-muted-foreground'>{t('createdAt')}</span>
|
||||
<span className='text-[#225BA9]'>{t('createdAt')}</span>
|
||||
<time>{formatDate(item.created_at)}</time>
|
||||
</li>
|
||||
<li className='font-semibold'>
|
||||
<span className='text-muted-foreground'>{t('type.0')}</span>
|
||||
<span className='text-[#225BA9]'>{t('type.0')}</span>
|
||||
<span>{t(`type.${item.type}`)}</span>
|
||||
</li>
|
||||
<li className='font-semibold'>
|
||||
<span className='text-muted-foreground'>{t('amount')}</span>
|
||||
<span className='text-[#225BA9]'>{t('amount')}</span>
|
||||
<span>
|
||||
<Display type='currency' value={item.amount} />
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span className='text-muted-foreground'>{t('balance')}</span>
|
||||
<li className='font-semibold'>
|
||||
<span className='text-[#225BA9]'>{t('balance')}</span>
|
||||
<span>
|
||||
<Display type='currency' value={item.balance} />
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user