From 21e0d86fcd2de241ca25b9c82fd79f7e6e9d47f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E4=BC=A0=E9=BE=99?= <zclzone@outlook.com>
Date: Mon, 2 May 2022 17:39:31 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20app-main=20=E5=BC=83=E7=94=A8naive?=
 =?UTF-8?q?=20ui=E8=99=9A=E6=8B=9F=E6=BB=9A=E5=8A=A8=E6=9D=A1=EF=BC=8C?=
 =?UTF-8?q?=E6=94=B9=E6=88=90=E8=87=AA=E5=AE=9A=E4=B9=89=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/index.vue         | 10 ++++------
 src/styles/public.scss       | 14 ++++++++++++++
 src/views/error-page/404.vue |  7 +------
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/layout/index.vue b/src/layout/index.vue
index bad04b7..edeb3e0 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -8,13 +8,11 @@
         <AppHeader />
       </n-layout-header>
 
-      <n-layout
-        style="background-color: #f5f6fb"
-        :style="`height: calc(100% - ${useTheme.header.height}px)`"
-        :native-scrollbar="false"
-      >
+      <n-layout style="background-color: #f5f6fb" :style="`height: calc(100% - ${useTheme.header.height}px)`">
         <AppTags v-if="useTheme.tags.visible" />
-        <AppMain />
+        <AppMain
+          :style="{ height: `calc(100% - ${useTheme.tags.visible ? useTheme.tags.height : 0}px)`, overflow: 'auto' }"
+        />
       </n-layout>
     </n-layout>
   </n-layout>
diff --git a/src/styles/public.scss b/src/styles/public.scss
index 1b5c2fb..cca21ab 100644
--- a/src/styles/public.scss
+++ b/src/styles/public.scss
@@ -26,3 +26,17 @@ body {
   opacity: 0;
   transform: translateX(30px);
 }
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 8px;
+  background-color: #eee;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #c1c1c1;
+
+  &:hover {
+    background-color: #a8a8a8;
+  }
+}
diff --git a/src/views/error-page/404.vue b/src/views/error-page/404.vue
index 3c9ee35..7aaf1d3 100644
--- a/src/views/error-page/404.vue
+++ b/src/views/error-page/404.vue
@@ -18,14 +18,9 @@ const { replace } = useRouter()
 
 <style lang="scss" scoped>
 .page-404 {
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-
-  position: absolute;
-  top: 50px;
-  bottom: 50px;
-  left: 0;
-  right: 0;
 }
 </style>