wood/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/woodchen-ink/nezha-dash-v1.git synced 2025-07-18 17:41:56 +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>
<div className="relative flex flex-col"> <div className="relative flex flex-col">
<p className={cn("break-all font-bold tracking-tight", showFlag ? "text-xs " : "text-sm")}>{name}</p> <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> </div>
</section> </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 <section
className={cn("grid grid-cols-5 items-center gap-3", { className={cn("grid grid-cols-5 items-center gap-3", {
"lg:grid-cols-6 lg:gap-4": fixedTopServerName, "lg:grid-cols-6 lg:gap-4": fixedTopServerName,
@ -158,9 +159,10 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
</div> </div>
<div className="relative flex flex-col"> <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> <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> </div>
</section> </section>
<div className="flex items-center gap-2 lg:hidden">{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}</div>
{parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />} {parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
</Card> </Card>
) )