From 310e7d4338097fd8d1808f5b9295dd9a8b87e905 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Wed, 4 Dec 2024 18:06:28 +0800
Subject: [PATCH] style: network display

---
 README.md                                     |  2 +-
 .../ClientComponents/ServerOverviewClient.tsx | 28 +++++++++----------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 00e641f..d7364e8 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@
 
 > [!CAUTION]
 > 此为 V0 兼容版本，与 V1 内置版本功能上可能有所不同
-> 
+>
 > V0 | V1 版本 issue 请在当前仓库发起
 
 > [!TIP]
diff --git a/app/(main)/ClientComponents/ServerOverviewClient.tsx b/app/(main)/ClientComponents/ServerOverviewClient.tsx
index cacfa4b..7df36ae 100644
--- a/app/(main)/ClientComponents/ServerOverviewClient.tsx
+++ b/app/(main)/ClientComponents/ServerOverviewClient.tsx
@@ -175,29 +175,29 @@ export default function ServerOverviewClient() {
             },
           )}
         >
-          <CardContent className="flex h-full items-center relative px-3 py-1 pr-0 sm:px-6 sm:py-3">
+          <CardContent className="flex h-full items-center relative px-6 py-3">
             <section className="flex flex-col gap-1 w-full">
               <div className="flex items-center w-full justify-between">
                 <p className="text-sm font-medium md:text-base">
                   {t("network")}
                 </p>
-                <section className="flex flex-row z-[999] bg-white/80 dark:bg-black/80 backdrop-blur-sm sm:items-center items-start pr-2 sm:pr-0 gap-1 ml-auto">
-                  <p className="sm:text-[12px] text-[10px]   text-nowrap font-medium">
-                    ↑{formatBytes(data?.total_out_bandwidth || 0)}
-                  </p>
-                  <p className="sm:text-[12px] text-[10px]  text-nowrap font-medium">
-                    ↓{formatBytes(data?.total_in_bandwidth || 0)}
-                  </p>
-                </section>
               </div>
               {data?.result ? (
                 <>
-                  <section className="flex flex-row mt-1.5 -mr-1 sm:items-center items-start gap-1">
-                    <p className="sm:text-[12px] flex items-center text-[10px] text-nowrap font-semibold">
-                      <ArrowUpCircleIcon className="size-3 mr-0.5 sm:mb-[1.1px]" />
+                  <section className="flex items-start flex-row z-[999] pr-2 sm:pr-0 gap-1">
+                    <p className="sm:text-[12px] text-[10px] text-blue-800 dark:text-blue-400   text-nowrap font-medium">
+                      ↑{formatBytes(data?.total_out_bandwidth)}
+                    </p>
+                    <p className="sm:text-[12px] text-[10px]  text-purple-800 dark:text-purple-400  text-nowrap font-medium">
+                      ↓{formatBytes(data?.total_in_bandwidth)}
+                    </p>
+                  </section>
+                  <section className="flex flex-col sm:flex-row -mr-1 sm:items-center items-start gap-1">
+                    <p className="text-[11px] flex items-center text-nowrap font-semibold">
+                      <ArrowUpCircleIcon className="size-3 mr-0.5 sm:mb-[1px]" />
                       {formatBytes(data?.total_out_speed)}/s
                     </p>
-                    <p className="sm:text-[12px] flex items-center text-[10px] text-nowrap font-semibold">
+                    <p className="text-[11px] flex items-center  text-nowrap font-semibold">
                       <ArrowDownCircleIcon className="size-3 mr-0.5" />
                       {formatBytes(
                         data?.total_in_speed,
@@ -206,7 +206,7 @@ export default function ServerOverviewClient() {
                   </section>
                 </>
               ) : (
-                <div className="flex h-6 items-center">
+                <div className="flex h-[38px] items-center">
                   <Loader visible={true} />
                 </div>
               )}