adjust about page style

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;
+}

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;

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 {
     /* 固定高度 */

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>