主体库页面修改

src/views/enterpriseLibrary/enterprise/index.vue

@@ -4,9 +4,6 @@
     <!-- 搜索区域 -->
     <div class="search-container">
       <div class="search-content">
-        <div class="search-left">
-          <!-- <h2 class="page-title">投标人主体库</h2> -->
-        </div>
         <div class="search-right">
           <el-form :model="queryParams" ref="queryForm" :inline="true">
             <el-form-item prop="enterpriseName">
@@ -23,7 +20,7 @@
       </div>
     </div>
 
-    <!-- 企业卡片网格 -->
+    <!-- 企业卡片网格（可滚动） -->
     <div class="enterprise-grid">
       <!-- 新建企业卡片 -->
       <div class="enterprise-card create-card" @click="handleAdd" v-hasPermi="['enterpriseLibrary:enterprise:add']">
@@ -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;
+  gap: 24px; // 卡片之间的间距
-  margin-bottom: 30px;
+  padding: 20px 26px 20px 20px; // 网格内边距，右侧留出空间给滚动条
-  max-height: calc(100vh - 280px);
   overflow-y: auto;
-  padding: 10px;
+  overflow-x: hidden;
+  align-items: start; // 卡片从顶部对齐，根据内容自适应高度
 
-  /* 自定义滚动条样式 */
+  // 自定义滚动条样式
   &::-webkit-scrollbar {
-    width: 8px;
+    width: 6px;
   }
 
   &::-webkit-scrollbar-track {
-    background: #f1f1f1;
+    background: transparent;
-    border-radius: 4px;
   }
 
   &::-webkit-scrollbar-thumb {
-    background: #c1c1c1;
+    background: rgba(0, 0, 0, 0.2);
-    border-radius: 4px;
+    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;
+  flex-shrink: 0;
-  position: sticky;
-  bottom: 0;
-  z-index: 10;
 
   .el-pagination {
     .el-pagination__total {