人员页面样式修改

src/views/enterpriseLibrary/personnel/index.vue

@@ -24,8 +24,8 @@
                     </el-select>
                 </el-form-item>
                 <el-form-item>
-                    <el-button type="primary" size="small" @click="handleQuery" class="search-btn">查询</el-button>
-                    <el-button size="small" @click="resetQuery" class="reset-btn">重置</el-button>
+                    <el-button type="primary" @click="handleQuery" class="search-btn">查询</el-button>
+                    <el-button @click="resetQuery" class="reset-btn">重置</el-button>
                 </el-form-item>
             </el-form>
         </div>
@@ -232,9 +232,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;
 }
 
 .back-container {
@@ -242,7 +243,8 @@ export default {
     justify-content: flex-end;
     align-items: center;
     margin-bottom: 20px;
-    padding: 0 20px;
+    padding: 0;
+    flex-shrink: 0;
 
     .back-btn {
         width: 98px;
@@ -264,8 +266,10 @@ export default {
 }
 
 .search-container {
-    padding: 0 20px;
+    padding: 0;
     border-radius: 8px;
+    flex-shrink: 0;
+    margin-bottom: 20px;
 
     .search-input {
         width: 300px;
@@ -312,30 +316,30 @@ export default {
 }
 
 .personnel-grid {
+    flex: 1;
     display: grid;
     grid-template-columns: repeat(5, 1fr);
-    gap: 20px;
-    margin-bottom: 30px;
-    max-height: calc(100vh - 280px);
+    gap: 24px; // 卡片之间的间距
+    padding: 20px 6px 20px 0px; // 网格内边距，右侧留出空间给滚动条
     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);
         }
     }
 }
@@ -346,10 +350,9 @@ export default {
     padding: 20px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
-    cursor: pointer;
-    min-height: 200px;
     display: flex;
     flex-direction: column;
+    min-height: 240px; // 设置最小高度，根据内容自适应增长
 
     &:hover {
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
@@ -357,12 +360,12 @@ export default {
     }
 
     &.create-card {
+        min-height: 240px;
         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;
 
@@ -380,7 +383,6 @@ export default {
         .create-text {
             font-size: 16px;
             color: #666;
-            font-weight: 500;
         }
     }
 }
@@ -402,7 +404,7 @@ export default {
 }
 
 .personnel-info {
-    margin-bottom: 15px;
+    // margin-bottom: 15px;
 
     .info-item {
         display: flex;
@@ -428,6 +430,8 @@ export default {
     gap: 8px;
     flex-wrap: wrap;
     justify-content: space-between;
+    margin-top: auto; // 将操作按钮推到底部
+    flex-shrink: 0; // 防止被压缩
 
     .action-btn {
         display: flex;
@@ -495,13 +499,10 @@ export default {
 
 .pagination-container {
     display: flex;
-    justify-content: center;
+    justify-content: flex-end;
     padding: 20px;
     border-radius: 8px;
-    margin-top: 20px;
-    position: sticky;
-    bottom: 0;
-    z-index: 10;
+    flex-shrink: 0;
 
     .el-pagination {
         .el-pagination__total {