diff --git a/src/layout/components/Main/index copy.vue b/src/layout/components/Main/index copy.vue new file mode 100644 index 0000000..243c912 --- /dev/null +++ b/src/layout/components/Main/index copy.vue @@ -0,0 +1,63 @@ + + + + + diff --git a/src/layout/components/Main/index.vue b/src/layout/components/Main/index.vue index 243c912..3e36c1d 100644 --- a/src/layout/components/Main/index.vue +++ b/src/layout/components/Main/index.vue @@ -2,17 +2,13 @@ - -
- - - - - - - -
-
+ + + + + + +
@@ -44,20 +40,7 @@ watch(watermarkConfig, newv => { diff --git a/src/router/route-output.ts b/src/router/route-output.ts index 56d14d2..d9e2cf5 100644 --- a/src/router/route-output.ts +++ b/src/router/route-output.ts @@ -99,13 +99,12 @@ export const treeSort = (tree: Menu.MenuOptions[]) => { }); // 深层递归 - let sortAfter = tree.map((item: any) => { + return tree.map((item: any) => { if (item?.children?.length > 0) { item.children = treeSort(item.children); } return item; }); - return sortAfter; }; /** diff --git a/src/style/global-scrollbar.scss b/src/style/global-scrollbar.scss new file mode 100644 index 0000000..63f0a1b --- /dev/null +++ b/src/style/global-scrollbar.scss @@ -0,0 +1,28 @@ +// 设置滚动条的样式 +::-webkit-scrollbar { + width: 6px; +} + +// 基于 WebKit 内核的浏览器 +// 设置滚动条的样式,宽、圆角、背景颜色 +::-webkit-scrollbar-thumb { + width: 6px; + border-radius: 6px; + background-color: $color-border-2; +} +// 设置滚动条hover样式,宽、圆角、背景颜色 +::-webkit-scrollbar-thumb:hover { + width: 6px; + background-color: $color-border-3; +} + +// 设置IE/Edge浏览器滚动条的样式,与webkit内核浏览器样式相同 +::-ms-scrollbar-thumb { + width: 6px; + border-radius: 6px; + background-color: $color-border-2; +} +::-ms-scrollbar-thumb:hover { + width: 6px; + background-color: $color-border-3; +} diff --git a/src/style/global-style.scss b/src/style/global-style.scss index d3c0586..2e89a13 100644 --- a/src/style/global-style.scss +++ b/src/style/global-style.scss @@ -3,8 +3,11 @@ // 有背景色的页面 .snow-page { // margin 和 padding 边距一致,是为了保持视觉上的内外统一 - margin: $padding; + // margin: $padding; + box-sizing: border-box; + flex: 1; padding: $padding; + overflow-y: auto; background: $color-bg-1; } diff --git a/src/style/index.scss b/src/style/index.scss index 6d7eee0..1f98390 100644 --- a/src/style/index.scss +++ b/src/style/index.scss @@ -1,6 +1,7 @@ @import "@/style/global-theme.scss"; @import "@/style/global-transition.scss"; @import "@/style/global-style.scss"; +@import "@/style/global-scrollbar.scss"; @import "@/style/loading-page.scss"; @import "@/style/card-animation.scss"; @import "@/style/media/media.scss"; diff --git a/src/views/about-project/about-project.vue b/src/views/about-project/about-project.vue index e8a1e06..8129f57 100644 --- a/src/views/about-project/about-project.vue +++ b/src/views/about-project/about-project.vue @@ -11,12 +11,9 @@ {{ item.label }} - - {{ item.value }} -