78 lines
3.6 KiB
Handlebars
78 lines
3.6 KiB
Handlebars
{{!--
|
||
通用档案卡片组件
|
||
功能：根据 primary_tag.slug="teacher-profile" 自动切换 Faculty(蓝) 或 Student(绿) 样式
|
||
--}}
|
||
|
||
<a href="{{url}}" class="group relative block bg-white rounded-2xl overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 h-full flex flex-col">
|
||
|
||
{{!-- 1. 图片区域 --}}
|
||
<div class="aspect-[3/4] relative overflow-hidden bg-gray-50 flex-shrink-0">
|
||
{{#if feature_image}}
|
||
<img
|
||
src="{{img_url feature_image size="m"}}"
|
||
alt="{{title}}"
|
||
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||
loading="lazy"
|
||
/>
|
||
{{else}}
|
||
{{!-- 无图时的占位图标 --}}
|
||
<div class="w-full h-full flex items-center justify-center text-5xl opacity-20 bg-gray-200">
|
||
{{#match primary_tag.slug "=" "teacher-profile"}}👨🏫{{else}}🎓{{/match}}
|
||
</div>
|
||
{{/if}}
|
||
|
||
{{!-- 左上角悬浮身份标签 --}}
|
||
<div class="absolute top-3 left-3 z-10">
|
||
{{#match primary_tag.slug "=" "teacher-profile"}}
|
||
<span class="px-2.5 py-1 bg-blue-600 text-white text-[10px] font-black rounded-lg shadow-md uppercase tracking-wider">Teacher</span>
|
||
{{else}}
|
||
<span class="px-2.5 py-1 bg-emerald-500 text-white text-[10px] font-black rounded-lg shadow-md uppercase tracking-wider">Student</span>
|
||
{{/match}}
|
||
</div>
|
||
</div>
|
||
|
||
{{!-- 2. 信息内容区域 --}}
|
||
<div class="p-5 flex-1 flex flex-col {{#match primary_tag.slug "=" "teacher-profile"}}bg-slate-50/50{{else}}bg-white{{/match}}">
|
||
|
||
{{!-- 姓名标题 --}}
|
||
<div class="mb-2">
|
||
<h4 class="text-xl font-bold text-gray-900 group-hover:text-blue-600 transition-colors truncate">
|
||
{{title}}
|
||
</h4>
|
||
</div>
|
||
|
||
{{!-- 摘要/头衔展示 --}}
|
||
<div class="flex-1">
|
||
{{#if custom_excerpt}}
|
||
<p class="text-sm text-gray-500 line-clamp-2 italic leading-relaxed">
|
||
{{#match primary_tag.slug "=" "teacher-profile"}}
|
||
<span class="not-italic font-medium text-blue-600/70">Position:</span>
|
||
{{else}}
|
||
“
|
||
{{/match}}
|
||
{{custom_excerpt}}
|
||
{{#match primary_tag.slug "!==" "teacher-profile"}}”{{/match}}
|
||
</p>
|
||
{{/if}}
|
||
</div>
|
||
|
||
{{!-- 底部元数据栏 --}}
|
||
<div class="flex items-center justify-between mt-5 pt-4 border-t border-gray-100/80">
|
||
{{!-- 分类/学科标签 --}}
|
||
<span class="text-[11px] font-bold text-gray-400 flex items-center gap-2 uppercase tracking-tight">
|
||
{{#if primary_tag}}
|
||
<span class="w-2 h-2 rounded-full {{#match primary_tag.slug "=" "teacher-profile"}}bg-blue-500 animate-pulse{{else}}bg-emerald-500{{/match}}"></span>
|
||
{{primary_tag.name}}
|
||
{{else}}
|
||
<span class="w-2 h-2 rounded-full bg-gray-300"></span>
|
||
档案库
|
||
{{/if}}
|
||
</span>
|
||
|
||
{{!-- 悬浮出现的动作提示 --}}
|
||
<span class="text-[11px] text-blue-600 font-black opacity-0 group-hover:opacity-100 transition-all transform translate-x-2 group-hover:translate-x-0">
|
||
PROFILE →
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</a> |