From 303aa75fd6967b059f14d468a6685f0432cf85c9 Mon Sep 17 00:00:00 2001
From: Hooray Hu <304327508@qq.com>
Date: Fri, 5 May 2023 23:38:57 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=20`PageHeader`?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PageHeader/index.vue | 21 ++++++---------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/src/components/PageHeader/index.vue b/src/components/PageHeader/index.vue
index 47cf0dba..c0bc2638 100644
--- a/src/components/PageHeader/index.vue
+++ b/src/components/PageHeader/index.vue
@@ -14,7 +14,7 @@ const slots = useSlots()
 </script>
 
 <template>
-  <div class="header">
+  <div class="page-header">
     <div class="main">
       <div class="title">
         {{ title }}
@@ -32,18 +32,19 @@ const slots = useSlots()
 </template>
 
 <style lang="scss" scoped>
-.header {
+.page-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 20px;
   margin-bottom: 20px;
   padding: 16px 20px;
   background-color: var(--g-app-bg);
   transition: background-color 0.3s;
 
   .main {
-    flex: 1;
-    margin-right: 20px;
+    flex: 1 1 70%;
 
     .title {
       font-size: 22px;
@@ -65,17 +66,7 @@ const slots = useSlots()
 
   .sub {
     flex: none;
-  }
-}
-
-[data-mode="mobile"] {
-  .header {
-    flex-direction: column;
-
-    .main {
-      margin-right: auto;
-      margin-bottom: 20px;
-    }
+    margin-left: auto;
   }
 }
 </style>