wood/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/woodchen-ink/nezha-dash-v1.git synced 2025-07-18 09:31:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: refactor billing info display on mobile

Browse Source
This commit is contained in:
hamster1963 2024-12-21 19:58:43 +08:00
parent f2bc5fe211
commit 612a63be97
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/ServerCard.tsx
View File

@ -60,10 +60,11 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
</div>
<div className="relative flex flex-col">
<p className={cn("break-all font-bold tracking-tight", showFlag ? "text-xs " : "text-sm")}>{name}</p>
{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
<div className="hidden lg:block">{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}</div>
</div>
</section>
<div className="flex flex-col sm:items-start items-center gap-2">
<div className="flex items-center gap-2 -mt-2 lg:hidden">{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}</div>
<div className="flex flex-col lg:items-start items-center gap-2">
<section
className={cn("grid grid-cols-5 items-center gap-3", {
"lg:grid-cols-6 lg:gap-4": fixedTopServerName,
@ -158,9 +159,10 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
</div>
<div className="relative flex flex-col">
<p className={cn("break-all font-bold tracking-tight max-w-[108px]", showFlag ? "text-xs" : "text-sm")}>{name}</p>
{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
<div className="hidden lg:block">{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}</div>
</div>
</section>
<div className="flex items-center gap-2 lg:hidden">{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}</div>
{parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
</Card>
)