🎨 电脑、人员管理界面修改

src/views/employee-information/components/InfoCard.vue

@@ -81,8 +81,8 @@ onMounted(() => {
   <el-card class="flex-grow" style="border: none" :body-style="{ padding: '0px' }">
 		<el-card v-loading="loading" class="card-container" shadow="never" style="border: none">
 			<el-row :gutter="20">
-				<el-col v-for="(item, index) in tableOptions.data" :key="index" :lg="6" :md="8" :sm="8" :xl="4" :xs="12" class="my-2.5">
-          <el-card class="item-card" shadow="hover" :body-style="{ padding: '20px 20px 5px 20px' }">
+        <el-col v-for="(item, index) in tableOptions.data" :key="index" :lg="4" :md="6" :sm="8" :xl="4" :xs="12" class="my-2.5">
+        <el-card class="item-card" shadow="hover" :body-style="{ padding: '20px 20px 5px 20px' }">
           <div class="image-wrapper">
 							<el-image :src="getImageUrl(item.images)" alt="电脑图片" class="card-image">
 								<template #error>
@@ -94,11 +94,11 @@ onMounted(() => {
 						</div>
 						<hr style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)" />
 						<div class="card-content">
-							<div>
+              <div class="text-wrapper">
 								<span style="color: #808d97; font-weight: 500">姓名: </span>
 								<span style="font-weight: 500">{{ item.name }}</span>
 							</div>
-							<div>
+              <div class="text-wrapper">
 								<span style="color: #808d97; font-weight: 500">部门: </span>
 								<span style="font-weight: 500">{{ item.department }}</span>
 							</div>
@@ -154,6 +154,17 @@ onMounted(() => {
 .card-content {
   padding-top: 10px;
   font-size: 14px;
+  max-height: 60px; /* 根据需要设置最大高度 */
+  overflow: hidden; /* 隐藏超出部分 */
+  text-overflow: ellipsis; /* 省略号效果 */
+  display: -webkit-box; /* 适用于多行文本处理 */
+  -webkit-box-orient: vertical; /* 垂直排列 */
+}
+
+.text-wrapper {
+  white-space: nowrap; /* 不换行 */
+  overflow: hidden; /* 隐藏超出部分 */
+  text-overflow: ellipsis; /* 省略号效果 */
 }
 
 .image-wrapper {