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