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 {
width: 6px;
border-radius: 6px;
background-color: $color-border-2;
background-color: $color-border-3;
}
// 设置滚动条hover样式，宽、圆角、背景颜色
::-webkit-scrollbar-thumb:hover {
width: 6px;
background-color: $color-border-3;
background-color: $color-border-4;
}
// 设置IE/Edge浏览器滚动条的样式，与webkit内核浏览器样式相同
::-ms-scrollbar-thumb {
width: 6px;
border-radius: 6px;
background-color: $color-border-2;
background-color: $color-border-3;
}
::-ms-scrollbar-thumb:hover {
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 {
// margin 和 padding 边距一致，是为了保持视觉上的内外统一
// margin: $padding;
box-sizing: border-box;
flex: 1;
padding: $padding;
box-sizing: border-box;
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-direction-horizontal .arco-scrollbar-thumb-bar) {
height: 4px;
:deep(.arco-scrollbar-thumb-bar) {
width: 4px;
}
</style>

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

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

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

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