@@ -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 {