attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: main窗口滚动调整

Browse Source
This commit is contained in:
WANGFAN\wangf 2024-09-04 00:09:58 +08:00
parent f8dff50951
commit a0366d0809
5 changed files with 39 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/style/global-scrollbar.scss
View File

@ -8,21 +8,21 @@
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
width: 6px; width: 6px;
border-radius: 6px; border-radius: 6px;
background-color: $color-border-2; background-color: $color-border-3;
} }
// 设置滚动条hover样式，宽、圆角、背景颜色 // 设置滚动条hover样式，宽、圆角、背景颜色
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
width: 6px; width: 6px;
background-color: $color-border-3; background-color: $color-border-4;
} }
// 设置IE/Edge浏览器滚动条的样式，与webkit内核浏览器样式相同 // 设置IE/Edge浏览器滚动条的样式，与webkit内核浏览器样式相同
::-ms-scrollbar-thumb { ::-ms-scrollbar-thumb {
width: 6px; width: 6px;
border-radius: 6px; border-radius: 6px;
background-color: $color-border-2; background-color: $color-border-3;
} }
::-ms-scrollbar-thumb:hover { ::-ms-scrollbar-thumb:hover {
width: 6px; width: 6px;
background-color: $color-border-3; background-color: $color-border-4;
} }

6
src/style/global-style.scss
View File

@ -2,13 +2,11 @@
// 有背景色的页面 // 有背景色的页面
.snow-page { .snow-page {
// margin 和 padding 边距一致，是为了保持视觉上的内外统一
// margin: $padding;
box-sizing: border-box;
flex: 1; flex: 1;
padding: $padding; padding: $padding;
box-sizing: border-box;
overflow-y: auto; overflow-y: auto;
background: $color-bg-1; background: $color-fill-1;
} }
// 没有背景色的页面 // 没有背景色的页面

5
src/views/file-management/document-library/components/file-tree.vue
View File

@ -90,8 +90,7 @@ const sourceTree = ref(fileTreeData.tree);
} }
} }
// 修改底部横向滚动条高度 :deep(.arco-scrollbar-thumb-bar) {
:deep(.arco-scrollbar-thumb-direction-horizontal .arco-scrollbar-thumb-bar) { width: 4px;
height: 4px;
} }
</style> </style>

38
src/views/file-management/document-library/document-library.vue
View File

@ -1,25 +1,23 @@
<template> <template>
<FillPage> <div class="snow-page">
<div class="container"> <div class="container">
<div class="container-main"> <div class="left-box">
<div class="left-box"> <div class="box-title">文件库</div>
<div class="box-title">文件库</div> <a-divider margin="0" />
<a-divider margin="0" /> <FileTree class="file-tree-style" @on-node="onNode" />
<FileTree class="file-tree-style" @on-node="onNode" /> </div>
</div> <div class="right-box">
<div class="right-box"> <div class="box-title">
<div class="box-title"> <a-breadcrumb>
<a-breadcrumb> <a-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">{{ item.title }}</a-breadcrumb-item>
<a-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">{{ item.title }}</a-breadcrumb-item> <a-breadcrumb-item v-if="breadcrumb.length == 0">全部</a-breadcrumb-item>
<a-breadcrumb-item v-if="breadcrumb.length == 0">全部</a-breadcrumb-item> </a-breadcrumb>
</a-breadcrumb>
</div>
<a-divider margin="0" />
<FileTable ref="FileTableRef" class="file-table-style" />
</div> </div>
<a-divider margin="0" />
<FileTable ref="FileTableRef" class="file-table-style" />
</div> </div>
</div> </div>
</FillPage> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -36,12 +34,6 @@ const onNode = (list: any) => {
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
height: 100%;
padding: $padding;
box-sizing: border-box;
overflow: hidden;
}
.container-main {
height: 100%; height: 100%;
display: flex; display: flex;
overflow: hidden; overflow: hidden;

25
src/views/home/home.vue
View File

@ -1,13 +1,15 @@
<template> <template>
<div class="snow-page"> <div class="snow-page">
<!-- 常用功能 --> <div class="home-page">
<Shortcut /> <!-- 常用功能 -->
<!-- 第三板指标 --> <Shortcut />
<TargetBox /> <!-- 第三板指标 -->
<!-- 财务指标 --> <TargetBox />
<Finance /> <!-- 财务指标 -->
<!-- 数据图 --> <Finance />
<DataBox /> <!-- 数据图 -->
<DataBox />
</div>
</div> </div>
</template> </template>
@ -23,4 +25,9 @@ onMounted(() => {
}); });
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped>
.home-page {
padding: $padding;
background: $color-bg-1;
}
</style>