diff --git a/miniprogram/src/pages/hall/index.jsx b/miniprogram/src/pages/hall/index.jsx index f22a594..e613013 100644 --- a/miniprogram/src/pages/hall/index.jsx +++ b/miniprogram/src/pages/hall/index.jsx @@ -1,4 +1,4 @@ -import { View, Text, Button, ScrollView } from '@tarojs/components'; +import { View, Text, Button, ScrollView, Image } from '@tarojs/components'; import Taro from '@tarojs/taro'; import { useState, useEffect, useCallback } from 'react'; import { hallOverview, hallTasks, hallTalents, hallJobs, hallServices } from '@/utils/hall'; @@ -150,6 +150,8 @@ function TasksPane({ mode, onMode }) { function TalentsPane({ ttype, onTtype }) { const [items, setItems] = useState(null); const [err, setErr] = useState(''); + // 头像加载失败的头像集合:回退首字母 + const [broken, setBroken] = useState({}); useEffect(() => { hallTalents({ type: ttype }).then((d) => setItems(d.items || [])).catch((e) => setErr(e.message)); }, [ttype]); @@ -162,9 +164,21 @@ function TalentsPane({ ttype, onTtype }) { {(items || []).map((t) => ( Taro.navigateTo({ url: `/pages-extra/hall-talent-detail/index?id=${t.userId}` })}> - {(t.displayName || '·').slice(0, 1)} + + {t.avatar && !broken[t.userId] ? ( + setBroken((b) => ({ ...b, [t.userId]: true }))} /> + ) : ( + {(t.displayName || '·').slice(0, 1)} + )} + - {t.displayName} · {t.talentType === 'seeker' ? '求职者' : 'OPC'} + + {t.displayName} + + {t.talentType === 'seeker' ? '求职者' : 'OPC'} + + {t.headline} {(t.fields || []).map((x) => {x})} diff --git a/miniprogram/src/styles/hall.scss b/miniprogram/src/styles/hall.scss index 4ca4126..1eeb175 100644 --- a/miniprogram/src/styles/hall.scss +++ b/miniprogram/src/styles/hall.scss @@ -78,7 +78,21 @@ /* 人才 */ .hl-talent { display: flex; gap: 20rpx; align-items: center; } .hl-avatar { width: 88rpx; height: 88rpx; border-radius: 50%; background: linear-gradient(135deg, #4d7cfe, #7a5ff0); - color: #fff; display: flex; align-items: center; justify-content: center; font-size: 34rpx; font-weight: 700; flex: none; } + color: #fff; display: flex; align-items: center; justify-content: center; font-size: 34rpx; font-weight: 700; flex: none; overflow: hidden; } +.hl-avatar-img { width: 88rpx; height: 88rpx; border-radius: 50%; background: #eef1f8; } +.hl-avatar-letter { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } + +/* 昵称行:姓名 + 身份徽章芯片 */ +.hl-tname { display: flex; align-items: center; } +.hl-badge { display: inline-flex; align-items: center; height: 32rpx; padding: 0 14rpx; margin-left: 12rpx; + border-radius: 999rpx; font-size: 20rpx; font-weight: 600; line-height: 1; flex: none; } +/* OPC 徽章:品牌渐变 + 前导光点 */ +.hl-badge--opc { background: linear-gradient(135deg, #6b8cff 0%, #9b6bff 100%); color: #fff; + box-shadow: 0 4rpx 14rpx rgba(107, 140, 255, .35); } +.hl-badge--opc::before { content: ''; width: 8rpx; height: 8rpx; border-radius: 50%; margin-right: 8rpx; + background: rgba(255, 255, 255, .9); box-shadow: 0 0 6rpx rgba(255, 255, 255, .8); } +/* 求职者徽章:中性浅灰 */ +.hl-badge--seeker { background: #f0f2f7; color: #8a93a6; border: 1rpx solid #e3e7ef; } /* 帖子 */ .hl-post { background: #fff; border-radius: 24rpx; padding: 26rpx 28rpx; margin: 0 0 20rpx;