diff --git a/src/views/enterpriseLibrary/enterprise/index.vue b/src/views/enterpriseLibrary/enterprise/index.vue index 3b36c3d..af443c0 100644 --- a/src/views/enterpriseLibrary/enterprise/index.vue +++ b/src/views/enterpriseLibrary/enterprise/index.vue @@ -4,9 +4,6 @@
-
- -
@@ -23,7 +20,7 @@
- +
@@ -247,7 +244,10 @@ export default { .app-container { padding: 20px; background: linear-gradient( 180deg, #F1F6FF 20%, #E5EFFF 100%); - min-height: calc(100vh - 85px); + height: calc(100vh - 85px); + display: flex; + flex-direction: column; + overflow: hidden; } .page-header { @@ -264,6 +264,7 @@ export default { .search-container { padding: 0 20px; border-radius: 8px; + flex-shrink: 0; .search-content { display: flex; @@ -323,30 +324,30 @@ export default { } .enterprise-grid { + flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); - gap: 20px; - margin-bottom: 30px; - max-height: calc(100vh - 280px); + gap: 24px; // 卡片之间的间距 + padding: 20px 26px 20px 20px; // 网格内边距,右侧留出空间给滚动条 overflow-y: auto; - padding: 10px; + overflow-x: hidden; + align-items: start; // 卡片从顶部对齐,根据内容自适应高度 - /* 自定义滚动条样式 */ + // 自定义滚动条样式 &::-webkit-scrollbar { - width: 8px; + width: 6px; } &::-webkit-scrollbar-track { - background: #f1f1f1; - border-radius: 4px; + background: transparent; } &::-webkit-scrollbar-thumb { - background: #c1c1c1; - border-radius: 4px; + background: rgba(0, 0, 0, 0.2); + border-radius: 3px; &:hover { - background: #a8a8a8; + background: rgba(0, 0, 0, 0.3); } } } @@ -357,6 +358,9 @@ export default { padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; + display: flex; + flex-direction: column; + min-height: 280px; // 设置最小高度,但允许根据内容自适应增长 &:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); @@ -364,15 +368,14 @@ export default { } &.create-card { + min-height: 288px; border: 2px dashed #ddd; display: flex; flex-direction: column; align-items: center; justify-content: center; - min-height: 200px; cursor: pointer; transition: all 0.3s ease; - &:hover { border-color: #409EFF; background: #f0f8ff; @@ -422,7 +425,7 @@ export default { } .enterprise-info { - margin-bottom: 15px; + // margin-bottom: 15px; .info-item { display: flex; @@ -493,6 +496,8 @@ export default { gap: 8px; flex-wrap: wrap; justify-content: space-between; + margin-top: auto; // 将操作按钮推到底部 + flex-shrink: 0; // 防止被压缩 > div { display: flex; @@ -575,15 +580,12 @@ export default { .pagination-container { display: flex; - justify-content: center; + justify-content: flex-end; // background: #fff; padding: 20px; border-radius: 8px; // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - margin-top: 20px; - position: sticky; - bottom: 0; - z-index: 10; + flex-shrink: 0; .el-pagination { .el-pagination__total {