Browse Source

增加全局样式

caner 2 years ago
parent
commit
ff9318a993
2 changed files with 47 additions and 23 deletions
  1. 45 0
      src/assets/global-style.scss
  2. 2 23
      src/pages/App.vue

+ 45 - 0
src/assets/global-style.scss

@@ -0,0 +1,45 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  user-select: none;
+  font-style: normal;
+
+  /* 设置滚动条的宽度和背景色 */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    background-color: transparent;
+  }
+
+  /* 设置滚动条轨道的样式 */
+  ::-webkit-scrollbar-track {
+    border-radius: 10px;
+  }
+
+  /* 设置滚动条滑块的样式 */
+  ::-webkit-scrollbar-thumb {
+    background-color: #030E25;
+    border-radius: 10px;
+  }
+
+  /* 设置滚动条角落的样式 */
+  ::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+}
+
+.n-select {
+  .n-base-selection {
+    border: 1px solid #5689F0;
+
+    .n-base-selection-label {
+      height: 100%;
+      background: rgba(86, 137, 240, 0.298);
+
+      .n-base-selection-input__content {
+        color: #fff;
+      }
+    }
+  }
+}

+ 2 - 23
src/pages/App.vue

@@ -18,29 +18,8 @@ import useStore from './store/index'
 import { computed } from 'vue'
 import { computed } from 'vue'
 import { zhCN, dateZhCN } from 'naive-ui'
 import { zhCN, dateZhCN } from 'naive-ui'
 import Theme from '@/assets/naive-theme'
 import Theme from '@/assets/naive-theme'
+import '@/assets/global-style.scss'
 const store = useStore()
 const store = useStore()
 const show = computed(() => store.loading)
 const show = computed(() => store.loading)
 const themeOverrides = Theme
 const themeOverrides = Theme
-</script>
-<style lang="scss">
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  user-select: none;
-  font-style: normal;
-}
-
-.n-select {
-  .n-base-selection {
-    border: 1px solid #5689F0;
-    .n-base-selection-label {
-      height: 100%;
-      background: rgba(86, 137, 240, 0.298);
-      .n-base-selection-input__content{
-        color: #fff;
-      }
-    }
-  }
-}
-</style>
+</script>