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