更新数字人形象卡片的头像图片源并优化卡片样式,将随机图片替换为icons8的3D图标,同时调整卡片高度和图片展示效果

This commit is contained in:
WUSIJIAN
2026-01-09 15:25:01 +08:00
parent f6283609ba
commit 8e60b009a4

View File

@@ -103,7 +103,7 @@ const mockData: AvatarItem[] = [
{ {
id: 1, id: 1,
name: '商务男性形象', name: '商务男性形象',
avatar: 'https://picsum.photos/300/400?random=1', avatar: 'https://img.icons8.com/3d-fluency/512/businessman.png',
description: '专业商务风格的男性数字人形象,适合企业宣传', description: '专业商务风格的男性数字人形象,适合企业宣传',
type: '真人形象', type: '真人形象',
status: 1, status: 1,
@@ -112,7 +112,7 @@ const mockData: AvatarItem[] = [
{ {
id: 2, id: 2,
name: '甜美女性形象', name: '甜美女性形象',
avatar: 'https://picsum.photos/300/400?random=2', avatar: 'https://img.icons8.com/3d-fluency/512/businesswoman.png',
description: '甜美可爱的女性数字人形象,适合直播带货', description: '甜美可爱的女性数字人形象,适合直播带货',
type: '真人形象', type: '真人形象',
status: 1, status: 1,
@@ -121,7 +121,7 @@ const mockData: AvatarItem[] = [
{ {
id: 3, id: 3,
name: '卡通男孩形象', name: '卡通男孩形象',
avatar: 'https://picsum.photos/300/400?random=3', avatar: 'https://img.icons8.com/3d-fluency/512/boy.png',
description: '活泼可爱的卡通男孩形象,适合儿童教育', description: '活泼可爱的卡通男孩形象,适合儿童教育',
type: '卡通形象', type: '卡通形象',
status: 1, status: 1,
@@ -130,7 +130,7 @@ const mockData: AvatarItem[] = [
{ {
id: 4, id: 4,
name: '知性女性形象', name: '知性女性形象',
avatar: 'https://picsum.photos/300/400?random=4', avatar: 'https://img.icons8.com/3d-fluency/512/teacher.png',
description: '知性优雅的女性数字人形象,适合知识讲解', description: '知性优雅的女性数字人形象,适合知识讲解',
type: '真人形象', type: '真人形象',
status: 0, status: 0,
@@ -139,7 +139,7 @@ const mockData: AvatarItem[] = [
{ {
id: 5, id: 5,
name: '科技机器人形象', name: '科技机器人形象',
avatar: 'https://picsum.photos/300/400?random=5', avatar: 'https://img.icons8.com/3d-fluency/512/robot-2.png',
description: '未来科技风格的机器人形象,适合科技产品', description: '未来科技风格的机器人形象,适合科技产品',
type: '3D形象', type: '3D形象',
status: 1, status: 1,
@@ -147,10 +147,10 @@ const mockData: AvatarItem[] = [
}, },
{ {
id: 6, id: 6,
name: '古风女性形象', name: '客服助手形象',
avatar: 'https://picsum.photos/300/400?random=6', avatar: 'https://img.icons8.com/3d-fluency/512/customer-support.png',
description: '古典优雅的古风女性形象,适合文化传播', description: '专业友好的客服助手形象,适合在线客服场景',
type: '真人形象', type: '3D形象',
status: 1, status: 1,
createdAt: '2024-01-10 08:30:00', createdAt: '2024-01-10 08:30:00',
}, },
@@ -250,13 +250,23 @@ onMounted(() => {
.avatar-image { .avatar-image {
position: relative; position: relative;
width: 100%; width: 100%;
height: 200px; height: 220px;
overflow: hidden; overflow: hidden;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
img { img {
width: 100%; width: 160px;
height: 100%; height: 160px;
object-fit: cover; object-fit: contain;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
transition: transform 0.3s ease;
}
&:hover img {
transform: scale(1.1);
} }
.avatar-overlay { .avatar-overlay {