fix(user): 修复用户头像未显示时的默认图标
在用户头像未提供时,添加默认的SVG图标作为占位符,提升用户体验。同时移除性别显示,简化用户信息展示。
This commit is contained in:
parent
bdb5a1128c
commit
43cfec18ab
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue