root/nezha_dash
1
0
Fork 0
mirror of https://github.com/hamster1963/nezha-dash.git synced 2025-04-24 21:10:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: Optimize styles for specific width

Browse Source
This commit is contained in:
Loongphy 2024-09-29 10:35:36 +08:00
parent 92497c62f5
commit c610b88f81
2 changed files with 11 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/ServerCard.tsx
View File

@ -59,51 +59,43 @@ export default function ServerCard({
<ServerCardPopover status={props.status} host={props.host} /> <ServerCardPopover status={props.status} host={props.host} />
</PopoverContent> </PopoverContent>
</Popover> </Popover>
<section className={"grid grid-cols-5 items-center gap-3"}> <section className={"grid grid-cols-[1fr_1fr_1fr_auto_auto] items-center gap-3 md:gap-1 md-820:gap-3"}>
<div className={"flex w-14 flex-col"}> <div className={"flex min-w-14 flex-col"}>
{" "}
{/* 设置固定宽度 */}
<p className="text-xs text-muted-foreground">{t("CPU")}</p> <p className="text-xs text-muted-foreground">{t("CPU")}</p>
<div className="flex items-center text-xs font-semibold"> <div className="flex items-center text-xs font-semibold">
{cpu.toFixed(2)}% {cpu.toFixed(2)}%
</div> </div>
<ServerUsageBar value={cpu} /> <ServerUsageBar value={cpu} />
</div> </div>
<div className={"flex w-14 flex-col"}> <div className={"flex min-w-14 flex-col"}>
{" "}
{/* 设置固定宽度 */}
<p className="text-xs text-muted-foreground">{t("Mem")}</p> <p className="text-xs text-muted-foreground">{t("Mem")}</p>
<div className="flex items-center text-xs font-semibold"> <div className="flex items-center text-xs font-semibold">
{mem.toFixed(2)}% {mem.toFixed(2)}%
</div> </div>
<ServerUsageBar value={mem} /> <ServerUsageBar value={mem} />
</div> </div>
<div className={"flex w-14 flex-col"}> <div className={"flex min-w-14 flex-col"}>
{" "}
{/* 设置固定宽度 */}
<p className="text-xs text-muted-foreground">{t("STG")}</p> <p className="text-xs text-muted-foreground">{t("STG")}</p>
<div className="flex items-center text-xs font-semibold"> <div className="flex items-center text-xs font-semibold">
{stg.toFixed(2)}% {stg.toFixed(2)}%
</div> </div>
<ServerUsageBar value={stg} /> <ServerUsageBar value={stg} />
</div> </div>
<div className={"flex w-14 flex-col"}> <div className={"flex flex-col"}>
{" "}
{/* 设置固定宽度 */}
<p className="text-xs text-muted-foreground">{t("Upload")}</p> <p className="text-xs text-muted-foreground">{t("Upload")}</p>
<div className="flex items-center text-xs font-semibold"> <div className="flex items-center text-xs font-semibold">
{formattedUpSpeed.value} {formattedUpSpeed.value}
{formattedUpSpeed.unit} {formattedUpSpeed.unit}
</div> </div>
<div className="h-[3px]" />
</div> </div>
<div className={"flex w-14 flex-col"}> <div className={"flex flex-col"}>
{" "}
{/* 设置固定宽度 */}
<p className="text-xs text-muted-foreground">{t("Download")}</p> <p className="text-xs text-muted-foreground">{t("Download")}</p>
<div className="flex items-center text-xs font-semibold"> <div className="flex items-center text-xs font-semibold">
{formattedDownSpeed.value} {formattedDownSpeed.value}
{formattedDownSpeed.unit} {formattedDownSpeed.unit}
</div> </div>
<div className="h-[3px]" />
</div> </div>
</section> </section>
</Card> </Card>

3
tailwind.config.ts
View File

@ -19,6 +19,9 @@ const config = {
}, },
}, },
extend: { extend: {
screens: {
'md-820': '820px',
},
fontFamily: { fontFamily: {
sans: ["var(--font-sans)", ...fontFamily.sans], sans: ["var(--font-sans)", ...fontFamily.sans],
}, },