fix: 样式修改
Some checks failed
Publish Release Assets / Publish Release Assets (push) Has been cancelled
Some checks failed
Publish Release Assets / Publish Release Assets (push) Has been cancelled
This commit is contained in:
parent
e020a53020
commit
330a8c128b
@ -71,7 +71,7 @@ const SubscribeCard = (props: SubscribeCardProps) => {
|
||||
{t('totalTraffic')}
|
||||
</p>
|
||||
<p className='text-xs font-medium text-[#0F2C53] sm:text-base'>
|
||||
{userSubscribeData?.token ? (
|
||||
{userSubscribeData?.status === 1 ? (
|
||||
<Display
|
||||
type='traffic'
|
||||
value={userSubscribeData.traffic}
|
||||
@ -87,7 +87,7 @@ const SubscribeCard = (props: SubscribeCardProps) => {
|
||||
{t('nextResetDays')}
|
||||
</p>
|
||||
<p className='text-xs font-medium text-[#0F2C53] sm:text-base'>
|
||||
{userSubscribeData?.token ? (
|
||||
{userSubscribeData?.status === 1 ? (
|
||||
<>
|
||||
{userSubscribeData.reset_time
|
||||
? differenceInDays(new Date(userSubscribeData.reset_time), new Date())
|
||||
@ -103,7 +103,7 @@ const SubscribeCard = (props: SubscribeCardProps) => {
|
||||
{t('expirationDays')}
|
||||
</p>
|
||||
<p className='text-xs font-medium text-[#0F2C53] sm:text-base'>
|
||||
{userSubscribeData?.token ? (
|
||||
{userSubscribeData?.status === 1 ? (
|
||||
<>
|
||||
{userSubscribeData.expire_time
|
||||
? differenceInDays(new Date(userSubscribeData.expire_time), new Date()) ||
|
||||
@ -120,11 +120,13 @@ const SubscribeCard = (props: SubscribeCardProps) => {
|
||||
|
||||
{/* 订阅链接 */}
|
||||
<div className='relative rounded-[26px] bg-[#EAEAEA] p-2 sm:p-4'>
|
||||
<div className='absolute inset-0 z-40 flex h-full w-full items-center justify-center rounded-[26px] border-4 border-[#D9D9D9] bg-white/50 backdrop-blur-[1px]'>
|
||||
<AiroButton variant={'primary'} asChild>
|
||||
<Link href={'/subscribe'}>{t('buySubscriptionNow')}</Link>
|
||||
</AiroButton>
|
||||
</div>
|
||||
{userSubscribeData?.status !== 1 && (
|
||||
<div className='absolute inset-0 z-40 flex h-full w-full items-center justify-center rounded-[26px] border-4 border-[#D9D9D9] bg-white/50 backdrop-blur-[1px]'>
|
||||
<AiroButton variant={'primary'} asChild>
|
||||
<Link href={'/subscribe'}>{t('buySubscriptionNow')}</Link>
|
||||
</AiroButton>
|
||||
</div>
|
||||
)}
|
||||
<div className='mb-3 flex flex-wrap justify-between gap-4'>
|
||||
{props.protocol.length > 1 && (
|
||||
<Tabs
|
||||
|
||||
@ -41,11 +41,13 @@ const platforms: (keyof API.ApplicationPlatform)[] = [
|
||||
export default function Content() {
|
||||
const t = useTranslations('dashboard');
|
||||
|
||||
const { data: userSubscribe = [], refetch } = useQuery({
|
||||
const { data: userSubscribe = {}, refetch } = useQuery({
|
||||
queryKey: ['queryUserSubscribe'],
|
||||
queryFn: async () => {
|
||||
const { data } = await queryUserSubscribe();
|
||||
return data.data?.list || [];
|
||||
const activeList = data.data?.list?.filter((v) => v.status === 1);
|
||||
|
||||
return activeList[0] ?? {};
|
||||
},
|
||||
});
|
||||
|
||||
@ -204,7 +206,7 @@ export default function Content() {
|
||||
</div>
|
||||
|
||||
<SubScribeCard
|
||||
userSubscribeData={userSubscribe?.[0] || {}}
|
||||
userSubscribeData={userSubscribe}
|
||||
protocol={data?.protocol || []}
|
||||
refetch={refetch}
|
||||
/>
|
||||
@ -223,7 +225,7 @@ export default function Content() {
|
||||
|
||||
<div className='mb-3 sm:mb-3.5'>
|
||||
<span className='text-2xl font-medium text-[#091B33]'>
|
||||
{userSubscribe?.length > 0 && userSubscribe[0]?.status === 1 && orderData
|
||||
{userSubscribe?.status === 1 && orderData
|
||||
? orderData?.quantity === 1
|
||||
? t('annualMonthPlanUser')
|
||||
: t('annualYearPlanUser')
|
||||
@ -252,7 +254,7 @@ export default function Content() {
|
||||
<h3 className='flex items-center justify-between text-[#666666]'>
|
||||
<div className={'flex items-center justify-between'}>
|
||||
<span className={'text-base font-medium sm:text-xl'}>{t('planStatus')}</span>
|
||||
{userSubscribe?.length > 0 && userSubscribe?.[0]?.status === 1 ? (
|
||||
{userSubscribe?.status === 1 ? (
|
||||
<span className={'ml-2.5 rounded-full bg-[#A8D4ED] px-2 text-[8px] text-white'}>
|
||||
{t('inEffect')}
|
||||
</span>
|
||||
@ -266,20 +268,20 @@ export default function Content() {
|
||||
className={
|
||||
'border-0 bg-transparent p-0 text-sm font-normal text-[#225BA9] shadow-none outline-0 hover:bg-transparent'
|
||||
}
|
||||
id={userSubscribe?.[0]?.id || 0}
|
||||
replacement={userSubscribe?.[0]?.subscribe.replacement}
|
||||
id={userSubscribe?.id || 0}
|
||||
replacement={userSubscribe?.subscribe?.replacement}
|
||||
/>
|
||||
</h3>
|
||||
</div>
|
||||
<div>
|
||||
<div className='mt-1 text-xs font-light text-[#666666] sm:text-sm'>
|
||||
{t('planExpirationTime')}
|
||||
{formatDate(userSubscribe?.[0]?.expire_time, false) || t('None')}
|
||||
{formatDate(userSubscribe?.expire_time, false) || t('None')}
|
||||
</div>
|
||||
<div className='mb-3 mt-1 sm:mb-5'>
|
||||
<span className='text-2xl font-medium text-[#091B33]'>
|
||||
{userSubscribe?.[0]?.subscribe.name ? (
|
||||
userSubscribe?.[0]?.subscribe.name
|
||||
{userSubscribe?.subscribe?.name ? (
|
||||
userSubscribe?.subscribe?.name
|
||||
) : (
|
||||
<span className={'text-[#848484]'}>{t('noPlanAvailable')}</span>
|
||||
)}
|
||||
@ -289,12 +291,12 @@ export default function Content() {
|
||||
<div className='flex items-center gap-2'>
|
||||
<span className='text-xs sm:text-sm'>{t('availableDevices')}</span>
|
||||
<div className='flex gap-2'>
|
||||
{Array.from({ length: userSubscribe?.[0]?.subscribe.device_limit || 6 }).map(
|
||||
{Array.from({ length: userSubscribe?.subscribe?.device_limit || 6 }).map(
|
||||
(_, index) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={`h-2.5 w-2.5 rounded-full sm:h-4 sm:w-4 ${index < (userSubscribe?.[0]?.subscribe.device_limit || 0) > 1 ? 'bg-[#225BA9]' : 'bg-[#D9D9D9]'}`}
|
||||
className={`h-2.5 w-2.5 rounded-full sm:h-4 sm:w-4 ${index < (userSubscribe?.subscribe?.device_limit || 0) > 1 ? 'bg-[#225BA9]' : 'bg-[#D9D9D9]'}`}
|
||||
></div>
|
||||
);
|
||||
},
|
||||
@ -303,25 +305,25 @@ export default function Content() {
|
||||
</div>
|
||||
<span className='text-xs font-light sm:text-sm'>
|
||||
{t('online')}
|
||||
{data?.online_device || 0}/{userSubscribe?.[0]?.subscribe.device_limit || 0}
|
||||
{data?.online_device || 0}/{userSubscribe?.subscribe?.device_limit || 0}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className='mb-1 flex items-center justify-between font-light'>
|
||||
<span className='text-xs sm:text-sm'>
|
||||
{t('usedTrafficTotalTraffic')}
|
||||
{userSubscribe?.[0]?.subscribe.device_limit ? (
|
||||
{userSubscribe?.subscribe?.device_limit ? (
|
||||
<>
|
||||
<Display
|
||||
type='traffic'
|
||||
value={userSubscribe?.[0]?.upload + userSubscribe?.[0]?.download}
|
||||
unlimited={!userSubscribe?.[0]?.traffic}
|
||||
value={userSubscribe?.upload + userSubscribe?.download}
|
||||
unlimited={!userSubscribe?.traffic}
|
||||
/>
|
||||
/
|
||||
<Display
|
||||
type='traffic'
|
||||
value={userSubscribe?.[0]?.traffic || 0}
|
||||
unlimited={!userSubscribe?.[0]?.traffic}
|
||||
value={userSubscribe?.traffic || 0}
|
||||
unlimited={!userSubscribe?.traffic}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
@ -330,12 +332,18 @@ export default function Content() {
|
||||
</span>
|
||||
<span className='text-xs sm:text-sm'>
|
||||
{t('remaining')}
|
||||
{100 -
|
||||
Math.round(
|
||||
(((userSubscribe?.[0]?.upload || 0) + (userSubscribe?.[0]?.download || 0)) /
|
||||
(userSubscribe?.[0]?.traffic || 1)) *
|
||||
100,
|
||||
)}
|
||||
{userSubscribe?.status === 1 ? (
|
||||
<>
|
||||
{100 -
|
||||
Math.round(
|
||||
(((userSubscribe?.upload || 0) + (userSubscribe?.download || 0)) /
|
||||
(userSubscribe?.traffic || 1)) *
|
||||
100,
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
0
|
||||
)}
|
||||
%
|
||||
</span>
|
||||
</div>
|
||||
@ -343,7 +351,7 @@ export default function Content() {
|
||||
<div
|
||||
className={'h-full rounded-[20px] bg-[#225BA9]'}
|
||||
style={{
|
||||
width: `${Math.round((((userSubscribe?.[0]?.upload || 0) + (userSubscribe?.[0]?.download || 0)) / (userSubscribe?.[0]?.traffic || 1)) * 100)}%`,
|
||||
width: `${Math.round((((userSubscribe?.upload || 0) + (userSubscribe?.download || 0)) / (userSubscribe?.traffic || 1)) * 100)}%`,
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user