fix: 头像和名字不统一问题

src/hooks/useElement.ts

@@ -48,7 +48,7 @@ export const useElementStyle = (element: any, person: IPersonConfig, index: numb
     if (person.department || person.identity) {
         element.children[2].innerHTML = `${person.department ? person.department : ''}<br/>${person.identity ? person.identity : ''}`
     }
-
+    element.children[3].src = person.avatar
     return element
 }
 

src/style/style.scss

@@ -36,11 +36,9 @@
         right: 0;
         bottom: 0;
         z-index: 1;
-        img {
-            width: 140px !important;
-            height: auto !important;
-            object-fit: cover;
-        }
+        width: 140px !important;
+        height: auto !important;
+        object-fit: cover;
     }
 }
 
@@ -90,10 +88,8 @@
         right: 0;
         bottom: 0;
         z-index: 1;
-        img {
-            width: 280px !important;
-            height: auto !important;
-            object-fit: cover;
-        }
+        width: 280px !important;
+        height: auto !important;
+        object-fit: cover;
     }
 }

src/types/storeType.ts

@@ -4,6 +4,7 @@ export interface IPersonConfig {
     name: string;
     department: string;
     identity: string;
+    avatar: string;
     isWin: boolean;
     x: number;
     y: number

src/views/Home/index.vue

@@ -131,14 +131,12 @@ const init = () => {
         detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].identity}`;
         element.appendChild(detail);
 
-        const avatar = document.createElement('div');
+        const avatar = document.createElement('img');
         avatar.className = 'card-avatar';
-        const img = document.createElement('img');
-        img.src = tableData.value[i].avatar;
-        img.alt = 'avatar';
-        img.style.width = '140px';
-        img.style.height = '140px';
-        avatar.appendChild(img);
+        avatar.src = tableData.value[i].avatar;
+        avatar.alt = 'avatar';
+        avatar.style.width = '140px';
+        avatar.style.height = '140px';
         element.appendChild(avatar);
 
         element = useElementStyle(element, tableData.value[i], i, patternList.value, patternColor.value, cardColor.value, cardSize.value, textSize.value)