From 155c3e247b210379faff57cb7385c5eee044f6f9 Mon Sep 17 00:00:00 2001
From: CHENZL <zlong5568863@qq.com>
Date: Mon, 5 Jun 2023 11:19:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E6=9D=A1=E6=A0=B7=E5=BC=8F=20(#84)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/AppMain.vue | 24 +++++++++++++++++-------
 src/styles/index.scss             |  3 +++
 src/styles/mixins.scss            | 22 ++++++++++++++++++++++
 3 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 105bf4a..473c3aa 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -13,17 +13,21 @@ const key = computed(() => {
 
 <template>
   <section class="app-main">
-    <router-view v-slot="{ Component }">
-      <transition name="el-fade-in" mode="out-in">
-        <keep-alive :include="tagsViewStore.cachedViews">
-          <component :is="Component" :key="key" />
-        </keep-alive>
-      </transition>
-    </router-view>
+    <div class="app-scrollbar">
+      <router-view v-slot="{ Component }">
+        <transition name="el-fade-in" mode="out-in">
+          <keep-alive :include="tagsViewStore.cachedViews">
+            <component :is="Component" :key="key" />
+          </keep-alive>
+        </transition>
+      </router-view>
+    </div>
   </section>
 </template>
 
 <style lang="scss" scoped>
+@import "@/styles/mixins.scss";
+
 .app-main {
   min-height: calc(100vh - var(--v3-navigationbar-height));
   width: 100%;
@@ -32,6 +36,12 @@ const key = computed(() => {
   background-color: var(--v3-body-bg-color);
 }
 
+.app-scrollbar {
+  height: 100%;
+  overflow: auto;
+  @include scrollbar;
+}
+
 .fixed-header + .app-main {
   padding-top: var(--v3-navigationbar-height);
   height: 100vh;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 92fd550..c2d90c0 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -8,6 +8,8 @@
 @import "./vxe-table.scss";
 // 注册多主题
 @import "./theme/register.scss";
+// mixin
+@import "./mixins.scss";
 
 // 业务页面几乎都应该在根元素上挂载 class="app-container"，以保持页面美观
 .app-container {
@@ -25,6 +27,7 @@ body {
   -webkit-font-smoothing: antialiased;
   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial,
     sans-serif;
+  @include scrollbar();
 }
 
 #app {
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
index 24902e6..b207420 100644
--- a/src/styles/mixins.scss
+++ b/src/styles/mixins.scss
@@ -5,3 +5,25 @@
     clear: both;
   }
 }
+
+@mixin scrollbar {
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px; // 也要兼容 height 样式
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 16px;
+    background-color: #d6d7d9;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: #c0c3c5;
+  }
+  &::-webkit-scrollbar-thumb:active {
+    background-color: #acafb2;
+  }
+  &::-webkit-scrollbar-button {
+    background: transparent;
+    height: 10px;
+  }
+}