固定 Header 到顶部，自定义 css 避免出现白色背景

web/src/components/PublicHeader.tsx

@@ -61,7 +61,7 @@ const PublicHeader = () => {
 
     return (
         <>
-            <header className="border-b border-cyan-900/50 bg-[#05050a]/80 backdrop-blur-xl sticky top-0  z-40">
+            <header className="border-b border-cyan-900/50 bg-[#05050a]/80 backdrop-blur-xl fixed top-0 left-0 right-0 z-40">
                 <div className="max-w-7xl mx-auto px-4 h-20 flex items-center justify-between">
                     <div className="flex items-center gap-8">
                         <Link to={'/'}>

web/src/pages/Public/ServerList.tsx

@@ -321,7 +321,7 @@ const ServerList = () => {
 
                                         {/* Network */}
                                         <td className="p-4 font-mono align-top">
-                                            <div className="flex flex-col gap-1.5 text-[10px] text-cyan-500 mb-3">
+                                            <div className="flex flex-col gap-1.5 text-[10px] text-cyan-500 mb-1.5">
                                                 <span className="flex items-center gap-2 text-emerald-400/80">
                                                     <ArrowDown className="w-3 h-3"/>
                                                     <span>IN: {formatSpeed(download)}</span>

web/src/pages/PublicLayout.tsx

@@ -2,9 +2,52 @@ import {Outlet} from 'react-router-dom';
 import PublicHeader from '../components/PublicHeader';
 import PublicFooter from '../components/PublicFooter';
 
+const globalStyles = `
+    /* 防止滚动时出现白色背景 */
+    html, body {
+        background-color: #05050a;
+    }
+    
+    /* 整体滚动条 */
+    ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+    
+    /* 滚动条轨道 */
+    ::-webkit-scrollbar-track {
+        background: #0a0a0f;
+        border-radius: 4px;
+    }
+    
+    /* 滚动条滑块 */
+    ::-webkit-scrollbar-thumb {
+        background: #1e1e28;
+        border-radius: 4px;
+        border: 1px solid #2a2a35;
+    }
+    
+    /* 滚动条滑块悬停 */
+    ::-webkit-scrollbar-thumb:hover {
+        background: #2a2a38;
+    }
+    
+    /* 滚动条角落 */
+    ::-webkit-scrollbar-corner {
+        background: #05050a;
+    }
+    
+    /* Firefox 滚动条 */
+    * {
+        scrollbar-width: thin;
+        scrollbar-color: #1e1e28 #0a0a0f;
+    }
+`;
+
 const PublicLayout = () => {
     return (
         <div className="min-h-screen bg-[#05050a] text-slate-200 flex flex-col relative overflow-x-hidden">
+            <style>{globalStyles}</style>
             {/* 背景网格效果 */}
             <div
                 className="fixed inset-0 pointer-events-none bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:30px_30px] opacity-20 z-0"></div>
@@ -12,8 +55,8 @@ const PublicLayout = () => {
             <div
                 className="fixed top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[300px] bg-cyan-600/10 blur-[120px] rounded-full pointer-events-none z-0"></div>
 
-            <div className="relative z-10 flex flex-col min-h-screen">
-                <PublicHeader/>
+            <PublicHeader/>
+            <div className="relative z-10 flex flex-col min-h-screen pt-[81px]">
                 <main className="flex-1">
                     <Outlet/>
                 </main>