refactor: 简化unocss集成

src/layout/index.vue

@@ -18,6 +18,7 @@
       <n-layout style="background-color: #f5f6fb" :style="`height: calc(100% - ${useTheme.header.height}px)`">
         <AppTags v-if="useTheme.tags.visible" />
         <AppMain
+          class="cur-scroll"
           :style="{
             height: `calc(100% - ${useTheme.tags.visible ? useTheme.tags.height : 0}px)`,
             overflow: 'auto',

src/main.js

@@ -1,3 +1,4 @@
+import '@/styles/reset.css'
 import '@/styles/index.scss'
 import 'uno.css'
 

src/styles/index.scss

@@ -1,2 +1,54 @@
-@import './reset.scss';
-@import './public.scss';
+html {
+  font-size: 4px; // * 1rem = 4px  方便unocss计算：在unocss中 1字体单位 = 0.25rem，相当于 1等份 = 1px
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #f2f2f2;
+  font-family: 'Encode Sans Condensed', sans-serif;
+}
+
+/* router view transition fade-slide */
+.fade-slide-leave-active,
+.fade-slide-enter-active {
+  transition: all 0.3s;
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* 自定义滚动条样式 */
+.cur-scroll {
+  &::-webkit-scrollbar{
+    width:8px;
+    height:8px;
+  }
+  &::-webkit-scrollbar-thumb{
+    background-color: transparent;
+    border-radius:4px;
+  }
+  
+  &::-webkit-scrollbar-corner{
+    background: #f6f6f6;
+  }
+  &:hover {
+    &::-webkit-scrollbar-thumb {
+      background: #bfbfbf;
+    }
+    &::-webkit-scrollbar-thumb:hover{
+      background: #999999;
+    }
+  }
+}
+
+

src/styles/public.scss

@@ -1,42 +0,0 @@
-html {
-  font-size: 4px; // * 1rem = 4px  方便unocss计算：在unocss中 1字体单位 = 0.25rem，相当于 1等份 = 1px
-}
-
-html,
-body {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background-color: #f2f2f2;
-  font-family: 'Encode Sans Condensed', sans-serif;
-}
-
-/* router view transition fade-slide */
-.fade-slide-leave-active,
-.fade-slide-enter-active {
-  transition: all 0.3s;
-}
-
-.fade-slide-enter-from {
-  opacity: 0;
-  transform: translateX(-30px);
-}
-
-.fade-slide-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
-}
-
-/* 滚动条样式 */
-::-webkit-scrollbar {
-  width: 8px;
-  background-color: #eee;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: #c1c1c1;
-
-  &:hover {
-    background-color: #a8a8a8;
-  }
-}