fix(user): 修复用户头像未显示时的默认图标

在用户头像未提供时,添加默认的SVG图标作为占位符,提升用户体验。同时移除性别显示,简化用户信息展示。
This commit is contained in:
dzq 2025-05-10 15:41:06 +08:00
parent bdb5a1128c
commit 43cfec18ab
1 changed files with 13 additions and 2 deletions

View File

@ -60,10 +60,21 @@ watch(
<el-col v-for="(item, index) in dataList" :key="item.id" :xs="24" :sm="12" :md="8" :lg="6">
<el-card class="user-card">
<div class="card-content">
<el-avatar :size="60" :src="item.avatar" fit="cover" shape="square" class="avatar" />
<el-avatar :size="60" :src="item.avatar" fit="cover" shape="square" class="avatar">
<template v-if="!item.avatar">
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- 浅灰圆形背景 -->
<circle cx="50" cy="50" r="48" fill="#f5f5f5" stroke="#e0e0e0" stroke-width="1" />
<!-- 中灰人形图标 -->
<circle cx="50" cy="40" r="12" fill="#9e9e9e" />
<!-- 修改后的身体部分 - 矩形躯干 -->
<rect x="40" y="52" width="20" height="30" rx="2" fill="#9e9e9e" />
</svg>
</template>
</el-avatar>
<div class="user-info">
<div class="name">{{ item.name }}</div>
<div class="gender">性别{{ item.gender === '1' ? '男' : item.gender === '2' ? '女' : '' }}</div>
<!-- <div class="gender">性别{{ item.gender === '1' ? '男' : item.gender === '2' ? '女' : '' }}</div> -->
<div class="create-time">创建时间{{ item.createTimeStr }}</div>
<div class="balance">余额¥{{ item.balance?.toFixed(2) }}</div>
</div>