|
|
@@ -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>
|