From 861261a9699dbffe4a6942e1d90a29a631226b43 Mon Sep 17 00:00:00 2001
From: hi2hi <code@hi2hi.cc>
Date: Wed, 4 Dec 2024 14:09:02 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E6=B7=BB=E5=8A=A0=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E7=B1=BB=E4=BB=A5=E4=BC=98=E5=8C=96=E5=A4=B4=E9=83=A8?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=EF=BC=8C=E5=A2=9E=E5=BC=BA=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E5=99=A8=E7=8A=B6=E6=80=81=E6=98=BE=E7=A4=BA=E7=9A=84=E5=93=8D?=
 =?UTF-8?q?=E5=BA=94=E5=BC=8F=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/header.vue | 42 ++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/src/layout/components/header.vue b/src/layout/components/header.vue
index 157b3fb..5280029 100644
--- a/src/layout/components/header.vue
+++ b/src/layout/components/header.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="layout-header"
+    :class="headerClass"
     :style="headerStyle"
   >
     <div class="layer-header-container">
@@ -232,6 +233,20 @@ const serverStat = computed(() => {
 
 const title = ref(config.nazhua.title);
 
+const headerClass = computed(() => {
+  const classes = [];
+  if (route.name === 'ServerDetail') {
+    classes.push('layout-header--detail');
+  }
+  if (showServerStat) {
+    classes.push('layout-header--show-server-stat');
+  }
+  if (showServerCount) {
+    classes.push('layout-header--show-server-count');
+  }
+  return classes;
+});
+
 function toHome() {
   if (route.name !== 'Home') {
     router.push({
@@ -257,6 +272,12 @@ onMounted(() => {
   backdrop-filter: saturate(50%) blur(3px);
   box-shadow: 0 2px 4px rgba(#000, 0.2);
 
+  &--show-server-stat {
+    @media screen and (max-width: 450px) {
+      padding-top: 10px;
+    }
+  }
+
   .site-name {
     line-height: calc(var(--layout-header-height) - 20px);
     font-size: 24px;
@@ -316,6 +337,27 @@ onMounted(() => {
 
   .server-stat-group {
     min-width: 160px;
+
+    @media screen and (max-width: 450px) {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      height: 28px;
+      padding: 0 20px;
+      display: flex;
+      align-items: center;
+      flex-direction: row-reverse;
+      gap: 10px;
+
+      .server-stat-label {
+        display: none;
+      }
+
+      .server-stat-content {
+        gap: 10px;
+      }
+    }
   }
 
   .server-stat {