From fbb846f6813c6cc269c2a50b0397603a52d5b091 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Sat, 3 Jun 2023 00:25:20 +0800
Subject: [PATCH] adjust about page style

---
 src/styles/func/scrollbar.scss            | 14 +++++++++++
 src/views/kungalgame/KUNGalgame.vue       | 30 ++++++++++++-----------
 src/views/kungalgame/components/Aside.vue |  2 ++
 src/views/kungalgamer/KUNGalgamer.vue     | 12 +++++++++
 4 files changed, 44 insertions(+), 14 deletions(-)
 create mode 100644 src/styles/func/scrollbar.scss

diff --git a/src/styles/func/scrollbar.scss b/src/styles/func/scrollbar.scss
new file mode 100644
index 00000000..9746b835
--- /dev/null
+++ b/src/styles/func/scrollbar.scss
@@ -0,0 +1,14 @@
+/* KUNGalgame 通用的滚动条 */
+
+/* 滚动条的样式 */
+.kungalgame-scrollbar::-webkit-scrollbar {
+  display: inline;
+  width: 4px;
+  height: 0;
+  background-color: $kungalgame-red-2;
+  border-radius: 2px;
+}
+.kungalgame-scrollbar::-webkit-scrollbar-thumb {
+  background: $kungalgame-blue-4;
+  border-radius: 2px;
+}
diff --git a/src/views/kungalgame/KUNGalgame.vue b/src/views/kungalgame/KUNGalgame.vue
index dabc0518..4738a513 100644
--- a/src/views/kungalgame/KUNGalgame.vue
+++ b/src/views/kungalgame/KUNGalgame.vue
@@ -166,18 +166,20 @@ import Aside from './components/Aside.vue'
               >不萌记录</span
             >》
           </p>
+          <br />
+          <br />
         </div>
         <!-- 版权 -->
-        <KUNGalgameFooter
-          style="
-            width: 100%;
-            position: absolute;
-            bottom: 1%;
-            display: flex;
-            justify-content: center;
-          "
-        />
       </div>
+      <KUNGalgameFooter
+        style="
+          width: 100%;
+          position: relative;
+          bottom: -3%;
+          display: flex;
+          justify-content: center;
+        "
+      />
     </div>
   </div>
 </template>
@@ -187,24 +189,24 @@ import Aside from './components/Aside.vue'
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
-  min-width: 1000px;
-  min-height: 2700px;
+  height: 1500px;
 }
 /* 内容区容器 */
 .content-container {
   background-color: $kungalgame-trans-white-2;
-  backdrop-filter: blur(5px);
   border-radius: 7px;
   /* 固定高度 */
-  height: 2600px;
+  height: 1200px;
   width: 90%;
+  max-width: 1300px;
   /* 居中 */
-  margin: 0 auto;
+  margin: auto;
   padding: 7px;
 }
 /* 内容区 */
 .content {
   height: 100%;
+  overflow-y: scroll;
   border: 1px solid $kungalgame-blue-4;
   border-radius: 7px;
   display: flex;
diff --git a/src/views/kungalgame/components/Aside.vue b/src/views/kungalgame/components/Aside.vue
index cd6a8c23..32fb7531 100644
--- a/src/views/kungalgame/components/Aside.vue
+++ b/src/views/kungalgame/components/Aside.vue
@@ -42,6 +42,8 @@ const asideBarItem: asideBar[] = [
   height: 100%;
   flex-shrink: 0;
   border-right: 1px solid $kungalgame-blue-4;
+  position: sticky;
+  top: 0;
   /* 侧边的标题 */
   & > div {
     /* 固定高度 */
diff --git a/src/views/kungalgamer/KUNGalgamer.vue b/src/views/kungalgamer/KUNGalgamer.vue
index 6f43b866..51235d8b 100644
--- a/src/views/kungalgamer/KUNGalgamer.vue
+++ b/src/views/kungalgamer/KUNGalgamer.vue
@@ -67,4 +67,16 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
   flex-grow: 1;
   display: flex;
 }
+/* 滚动条的样式 */
+.article::-webkit-scrollbar {
+  display: inline;
+  width: 4px;
+  height: 0;
+  background-color: $kungalgame-red-2;
+  border-radius: 2px;
+}
+.article::-webkit-scrollbar-thumb {
+  background: $kungalgame-blue-4;
+  border-radius: 2px;
+}
 </style>