2
0
Эх сурвалжийг харах

将用人方小程序人才头像从图片改为姓名首字

- 添加姓名首字头像CSS样式,支持多种颜色
- 替换首页、人才列表页、人才详情页中所有人才头像
- 使用不同颜色区分不同人才:张明(蓝)、李小红(绿)、王强(紫)、赵琳(橙)

🤖 Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
yourname 6 өдөр өмнө
parent
commit
3eb3d7b81e
1 өөрчлөгдсөн 33 нэмэгдсэн , 14 устгасан
  1. 33 14
      yongren.html

+ 33 - 14
yongren.html

@@ -67,6 +67,30 @@
             border-radius: 50%;
             object-fit: cover;
         }
+        .name-avatar {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            font-weight: bold;
+            color: white;
+            margin-right: 12px;
+        }
+        .name-avatar.blue {
+            background-color: #3b82f6;
+        }
+        .name-avatar.green {
+            background-color: #10b981;
+        }
+        .name-avatar.purple {
+            background-color: #8b5cf6;
+        }
+        .name-avatar.orange {
+            background-color: #f59e0b;
+        }
         .progress-bar {
             height: 6px;
             border-radius: 3px;
@@ -246,8 +270,7 @@
                             <div class="space-y-3">
                                 <!-- 人才卡片1 -->
                                 <div class="person-card card bg-white p-4 flex items-center">
-                                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" 
-                                         class="avatar mr-3" alt="人才头像">
+                                    <div class="name-avatar blue">张</div>
                                     <div class="flex-1">
                                         <div class="flex justify-between items-start">
                                             <div>
@@ -270,8 +293,7 @@
                                 
                                 <!-- 人才卡片2 -->
                                 <div class="person-card card bg-white p-4 flex items-center">
-                                    <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" 
-                                         class="avatar mr-3" alt="人才头像">
+                                    <div class="name-avatar green">李</div>
                                     <div class="flex-1">
                                         <div class="flex justify-between items-start">
                                             <div>
@@ -382,8 +404,7 @@
                             <div class="space-y-3">
                                 <!-- 人才卡片1 -->
                                 <div class="person-card card bg-white p-4 flex items-center">
-                                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" 
-                                         class="avatar mr-3" alt="人才头像">
+                                    <div class="name-avatar blue">张</div>
                                     <div class="flex-1">
                                         <div class="flex justify-between items-start">
                                             <div>
@@ -401,8 +422,7 @@
                                 
                                 <!-- 人才卡片2 -->
                                 <div class="person-card card bg-white p-4 flex items-center">
-                                    <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" 
-                                         class="avatar mr-3" alt="人才头像">
+                                    <div class="name-avatar green">李</div>
                                     <div class="flex-1">
                                         <div class="flex justify-between items-start">
                                             <div>
@@ -420,8 +440,7 @@
                                 
                                 <!-- 人才卡片3 -->
                                 <div class="person-card card bg-white p-4 flex items-center">
-                                    <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" 
-                                         class="avatar mr-3" alt="人才头像">
+                                    <div class="name-avatar purple">王</div>
                                     <div class="flex-1">
                                         <div class="flex justify-between items-start">
                                             <div>
@@ -439,8 +458,7 @@
                                 
                                 <!-- 人才卡片4 -->
                                 <div class="person-card card bg-white p-4 flex items-center">
-                                    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" 
-                                         class="avatar mr-3" alt="人才头像">
+                                    <div class="name-avatar orange">赵</div>
                                     <div class="flex-1">
                                         <div class="flex justify-between items-start">
                                             <div>
@@ -499,8 +517,9 @@
                         <div class="gradient-bg text-white p-5">
                             <div class="flex justify-between items-start">
                                 <div class="flex items-center">
-                                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" 
-                                         class="w-16 h-16 rounded-full border-2 border-white mr-4" alt="个人头像">
+                                    <div class="w-16 h-16 rounded-full border-2 border-white mr-4 flex items-center justify-center bg-blue-500 text-white text-2xl font-bold">
+                                        张
+                                    </div>
                                     <div>
                                         <h2 class="text-xl font-bold">张明</h2>
                                         <p class="text-sm opacity-80">肢体残疾 · 三级 · 在职</p>