diff --git a/src/views/bussiness-data/bussiness.vue b/src/views/bussiness-data/bussiness.vue index dcc7abf..2e6b855 100644 --- a/src/views/bussiness-data/bussiness.vue +++ b/src/views/bussiness-data/bussiness.vue @@ -143,19 +143,22 @@ - - - -
- + +
+
+ 文件列表 ({{ fileList.length }}) +
+
+ +
@@ -336,7 +339,7 @@
-
+
@@ -2629,6 +2634,7 @@ onMounted(() => { background: var(--color-bg-1); min-height: 0; max-height: calc(100vh - 120px); + position: relative; } .file-card { @@ -2640,6 +2646,7 @@ onMounted(() => { position: relative; height: 100%; overflow: hidden; + padding-bottom: 80px; /* 为分页器留出空间 */ } /* 表格容器 */ @@ -2654,7 +2661,7 @@ onMounted(() => { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); margin-bottom: 0; min-height: 300px; - max-height: calc(100vh - 300px); + max-height: calc(100vh - 380px); /* 调整高度为分页器留出空间 */ } /* 表头行样式 */ @@ -3100,14 +3107,65 @@ onMounted(() => { } /* 分页样式 */ -.pagination-container, .file-pagination { - margin-top: 16px; - text-align: right; - padding: 0 16px 16px; -} - -.file-pagination { +.pagination-container { + position: absolute; + bottom: 0; + left: 0; + right: 0; + background: var(--color-bg-1); + padding: 16px 24px; border-top: 1px solid var(--color-border); + display: flex; + justify-content: flex-end; + align-items: center; + z-index: 10; + box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06); + margin-top: 0; + + .arco-pagination { + margin: 0; + + .arco-pagination-item { + border-radius: 6px; + margin: 0 4px; + transition: all 0.2s ease; + + &:hover { + border-color: var(--color-primary); + color: var(--color-primary); + } + + &.arco-pagination-item-active { + background: var(--color-primary); + border-color: var(--color-primary); + color: white; + } + } + + .arco-pagination-prev, + .arco-pagination-next { + border-radius: 6px; + transition: all 0.2s ease; + + &:hover { + border-color: var(--color-primary); + color: var(--color-primary); + } + } + + .arco-pagination-size-changer { + margin-left: 16px; + } + + .arco-pagination-jumper { + margin-left: 16px; + } + + .arco-pagination-total { + color: var(--color-text-2); + font-size: 14px; + } + } } @@ -3530,9 +3588,29 @@ onMounted(() => { 100% { transform: translateX(100%); } } +/* 文件头部容器样式 */ +.file-header-container { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; + padding: 16px 0; +} + +.file-title { + display: flex; + align-items: center; +} + +.file-list-title { + font-size: 16px; + font-weight: 600; + color: var(--color-text-1); + margin: 0; +} + /* 文件搜索样式 */ .file-search-container { - margin: 16px 0; display: flex; align-items: center; gap: 12px; @@ -3601,55 +3679,7 @@ onMounted(() => { border-top-color: var(--color-primary); } -/* 文件分页样式 */ -.file-pagination { - position: sticky; - bottom: 0; - left: 0; - right: 0; - margin-top: 16px; - padding: 16px 0; - display: flex; - justify-content: center; - border-top: 1px solid var(--color-border); - background: var(--color-bg-1); - flex-shrink: 0; - z-index: 10; - - .arco-pagination { - .arco-pagination-total { - color: var(--color-text-2); - font-size: 14px; - } - - .arco-pagination-item { - border-radius: 6px; - transition: all 0.2s ease; - - &:hover { - border-color: var(--color-primary); - color: var(--color-primary); - } - - &.arco-pagination-item-active { - background: var(--color-primary); - border-color: var(--color-primary); - color: white; - } - } - - .arco-pagination-prev, - .arco-pagination-next { - border-radius: 6px; - transition: all 0.2s ease; - - &:hover { - border-color: var(--color-primary); - color: var(--color-primary); - } - } - } -} + /* 树形文件夹结构 */ .folder-tree-container {