feat: 抽奖增加用户头像显示

src/components/DaiysuiTable/index.vue

@@ -44,7 +44,7 @@ const actionsColumns = computed<any[]>(() => {
                 <tr class="hover" v-for="item in data" :key="item.id">
                     <th>{{ item.id }}</th>
                     <td v-for="(column, index) in dataColumns" :key="index">
-                        <span v-if="column.formatValue">{{ column.formatValue(item) }}</span>
+                        <span v-if="column.formatValue" v-html="column.formatValue(item)"></span>
                         <span v-else>{{ item[column.props] }}</span>
                     </td>
                     <!-- action -->

src/style/style.scss

@@ -4,8 +4,9 @@
     user-select: none;
     .card-id {
         position: absolute;
-        top: 20px;
+        top: 10px;
         right: 20px;
+        z-index: 2;
     }
 
     .card-name {
@@ -17,6 +18,7 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        z-index: 2;
     }
 
     .card-detail {
@@ -24,12 +26,26 @@
         left: 0;
         right: 0;
         bottom: 15px;
+        z-index: 2;
+    }
+
+    .card-avatar{
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1;
+        img {
+            width: 140px !important;
+            height: auto !important;
+            object-fit: cover;
+        }
     }
 }
 
 .lucky-element-card {
     cursor: default;
-    text-align: center;
     &::before {
         background-color: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100%);
         border: 1px solid linear-gradient(-45deg, #e81cff 0%, #40c9ff 100%);
@@ -39,9 +55,12 @@
         position: absolute;
         top: 20px;
         right: 20px;
+        z-index: 2;
     }
 
     .card-name {
+        text-align: center;
+        z-index: 2;
         position: absolute;
         top: 40px;
         left: 0px;
@@ -59,6 +78,22 @@
         position: absolute;
         left: 0;
         right: 0;
+        text-align: center;
+        z-index: 2;
         bottom: 15px;
     }
+
+    .card-avatar{
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1;
+        img {
+            width: 280px !important;
+            height: auto !important;
+            object-fit: cover;
+        }
+    }
 }

src/views/Config/Person/PersonAll.vue

@@ -87,6 +87,13 @@ const tableColumns = [
         label: '姓名',
         props: 'name',
     },
+    {
+        label: '头像',
+        props: 'avatar',
+        formatValue(row: any) {
+            return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-';
+        }
+    },
     {
         label: '部门',
         props: 'department',

src/views/Config/Person/PersonAlready.vue

@@ -33,6 +33,13 @@ const tableColumnsList = [
         label: '姓名',
         props: 'name',
     },
+    {
+        label: '头像',
+        props: 'avatar',
+        formatValue(row: any) {
+            return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-';
+        }
+    },
     {
         label: '部门',
         props: 'department',
@@ -69,6 +76,13 @@ const tableColumnsDetail = [
         label: '姓名',
         props: 'name',
     },
+    {
+        label: '头像',
+        props: 'avatar',
+        formatValue(row: any) {
+            return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-';
+        }
+    },
     {
         label: '部门',
         props: 'department',

src/views/Home/index.vue

@@ -131,6 +131,16 @@ const init = () => {
         detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].identity}`;
         element.appendChild(detail);
 
+        const avatar = document.createElement('div');
+        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);
+        element.appendChild(avatar);
+
         element = useElementStyle(element, tableData.value[i], i, patternList.value, patternColor.value, cardColor.value, cardSize.value, textSize.value)
         const object = new CSS3DObject(element);
         object.position.x = Math.random() * 4000 - 2000;