480 lines
34 KiB
HTML
480 lines
34 KiB
HTML
{% extends 'base.html' %}
|
|
{% load custom_filters %}
|
|
|
|
{% block content %}
|
|
<!-- 时间线区域 -->
|
|
<div class="w-full max-w-5xl mx-auto p-6">
|
|
<div class="relative py-8">
|
|
<!-- 时间线背景 -->
|
|
<div class="absolute top-1/2 left-0 right-0 h-1 bg-gradient-to-r from-emerald-400 via-blue-500 to-amber-400 rounded-full transform -translate-y-1/2 shadow-sm"></div>
|
|
|
|
<div class="relative z-10 flex justify-between items-center gap-6">
|
|
<!-- 第一个卡片 - 最初活动 -->
|
|
<div class="w-[calc(50%-2.5rem)] group">
|
|
<div class="bg-white rounded-2xl shadow-lg overflow-hidden transition-all duration-500 hover:shadow-2xl hover:-translate-y-2 border border-emerald-100">
|
|
<div class="h-1.5 bg-gradient-to-r from-emerald-400 to-teal-500"></div>
|
|
<div class="p-6 flex flex-col h-full">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-emerald-100 text-emerald-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</span>
|
|
<span class="text-xs font-bold text-emerald-600 uppercase tracking-wider">最初活动</span>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2 text-gray-800 group-hover:text-emerald-700 transition-colors">{{ earliest_act.branch }}{{ earliest_act.name }}</h3>
|
|
<p class="text-sm text-gray-600 mb-4 line-clamp-3">
|
|
{{ earliest_act.description }}
|
|
</p>
|
|
<div class="mt-auto pt-3 border-t border-emerald-100">
|
|
<span class="inline-flex items-center text-xs font-medium text-emerald-700 bg-emerald-50 px-3 py-1.5 rounded-full">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="mr-1.5 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
{{ earliest_act.start_time|format_chinese_full_date }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 中间的箭头 -->
|
|
<div class="flex-shrink-0 bg-white rounded-full p-4 shadow-lg z-20 border-2 border-blue-100 hover:scale-110 transition-transform duration-300">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- 第二个卡片 - 最后活动 -->
|
|
<div class="w-[calc(50%-2.5rem)] group">
|
|
<div class="bg-white rounded-2xl shadow-lg overflow-hidden transition-all duration-500 hover:shadow-2xl hover:-translate-y-2 border border-amber-100">
|
|
<div class="h-1.5 bg-gradient-to-r from-amber-400 to-orange-500"></div>
|
|
<div class="p-6 flex flex-col h-full">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-amber-100 text-amber-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</span>
|
|
<span class="text-xs font-bold text-amber-600 uppercase tracking-wider">最后活动</span>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2 text-gray-800 group-hover:text-amber-700 transition-colors">{{ latest_act.branch }}{{ latest_act.name }}</h3>
|
|
<p class="text-sm text-gray-600 mb-4 line-clamp-3">
|
|
{{ latest_act.description }}
|
|
</p>
|
|
<div class="mt-auto pt-3 border-t border-amber-100">
|
|
<span class="inline-flex items-center text-xs font-medium text-amber-700 bg-amber-50 px-3 py-1.5 rounded-full">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="mr-1.5 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
{{ latest_act.start_time|format_chinese_full_date }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 装饰元素 -->
|
|
<div class="absolute top-1/2 left-0 w-6 h-6 bg-gradient-to-br from-emerald-400 to-emerald-600 rounded-full transform -translate-y-1/2 -translate-x-1/2 border-4 border-white shadow-lg"></div>
|
|
<div class="absolute top-1/2 right-0 w-6 h-6 bg-gradient-to-br from-amber-400 to-orange-500 rounded-full transform -translate-y-1/2 translate-x-1/2 border-4 border-white shadow-lg"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 统计表格 -->
|
|
<div class="w-full max-w-5xl mx-auto p-6">
|
|
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-100">
|
|
<div class="px-6 py-4 bg-gradient-to-r from-blue-600 via-blue-700 to-indigo-700">
|
|
<h2 class="text-lg font-bold text-white flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
分支机构活动统计
|
|
</h2>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full border-collapse">
|
|
<thead>
|
|
<tr class="bg-gradient-to-r from-slate-50 to-gray-100 border-b-2 border-blue-200">
|
|
<th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
|
|
<div class="flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
|
</svg>
|
|
分支机构名称
|
|
<span class="text-xs font-normal text-gray-500 normal-case">(新建-搬迁-装修)</span>
|
|
</div>
|
|
</th>
|
|
<th class="px-6 py-4 text-right text-sm font-bold text-gray-700 uppercase tracking-wider">
|
|
<div class="flex items-center justify-end gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
|
</svg>
|
|
活动总数
|
|
</div>
|
|
</th>
|
|
<th class="px-6 py-4 text-right text-sm font-bold text-gray-700 uppercase tracking-wider">
|
|
<div class="flex items-center justify-end gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
进行中
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100">
|
|
{% for item in branches %}
|
|
<tr class="{% if forloop.counter|divisibleby:2 %}bg-slate-50/50{% else %}bg-white{% endif %} hover:bg-blue-50 transition-colors duration-200 group">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<a href="{% url 'branch-detail' item.branch.pk %}"
|
|
class="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium text-gray-700 bg-gray-100 hover:bg-blue-600 hover:text-white transition-all duration-200 group-hover:shadow-md">
|
|
{{ item.branch.name }}
|
|
</a>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right">
|
|
<span class="inline-flex items-center justify-center min-w-[2rem] px-2.5 py-1 rounded-full text-sm font-semibold {% if item.total_count > 0 %}bg-blue-100 text-blue-700{% else %}bg-gray-100 text-gray-500{% endif %}">
|
|
{{ item.total_count }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right">
|
|
<span class="inline-flex items-center justify-center min-w-[2rem] px-2.5 py-1 rounded-full text-sm font-semibold {% if item.onging_count > 0 %}bg-green-100 text-green-700{% else %}bg-gray-100 text-gray-500{% endif %}">
|
|
{{ item.onging_count }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
<!-- 总计行 -->
|
|
<tr class="bg-gradient-to-r from-blue-50 to-indigo-50 border-t-2 border-blue-200">
|
|
<td class="px-6 py-4 whitespace-nowrap font-bold text-gray-800">
|
|
<div class="flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
|
</svg>
|
|
总计 ({{ total_branch_count }} 个分支机构)
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right">
|
|
<span class="inline-flex items-center justify-center min-w-[2.5rem] px-3 py-1.5 rounded-full text-base font-bold bg-blue-600 text-white shadow-md">
|
|
{{ total_activities }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right">
|
|
<span class="inline-flex items-center justify-center min-w-[2.5rem] px-3 py-1.5 rounded-full text-base font-bold {% if ongoing_activities_count > 0 %}bg-green-500 text-white{% else %}bg-gray-400 text-white{% endif %} shadow-md">
|
|
{{ ongoing_activities_count }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 分隔线 -->
|
|
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-purple-400 to-transparent"></div>
|
|
|
|
<!-- 事件列表 -->
|
|
<div class="w-full max-w-5xl mx-auto p-6">
|
|
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-purple-100">
|
|
<div class="px-6 py-4 bg-gradient-to-r from-purple-600 via-purple-700 to-indigo-700">
|
|
<h2 class="text-lg font-bold text-white flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
事件列表
|
|
<span class="ml-auto text-sm font-normal bg-white/20 px-3 py-1 rounded-full">{{ ongoing_events|length }} 个事件</span>
|
|
</h2>
|
|
</div>
|
|
<div class="divide-y divide-gray-100">
|
|
{% for event in ongoing_events %}
|
|
<div class="p-5 hover:bg-purple-50/50 transition-colors duration-200 group">
|
|
<div class="flex flex-col sm:flex-row sm:items-start gap-4">
|
|
<!-- 时间轴标记 -->
|
|
<div class="flex-shrink-0 flex flex-col items-center">
|
|
<div class="w-10 h-10 rounded-full {% if not event.end_time %}bg-gradient-to-br from-red-400 to-red-600{% else %}bg-gradient-to-br from-purple-400 to-purple-600{% endif %} flex items-center justify-center text-white shadow-md">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<!-- 内容 -->
|
|
<div class="flex-grow min-w-0">
|
|
<div class="flex flex-wrap items-center gap-2 mb-2">
|
|
<h3 class="text-lg font-bold {% if not event.end_time %}text-red-700{% else %}text-gray-800{% endif %} group-hover:text-purple-700 transition-colors">
|
|
{{ event.name }}{% if not event.end_time %}<span class="ml-2 text-sm font-medium text-red-500 bg-red-100 px-2 py-0.5 rounded-full">进行中</span>{% endif %}
|
|
</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600 mb-3 line-clamp-2">{{ event.description }}</p>
|
|
<div class="flex flex-wrap items-center gap-4 text-xs text-gray-500">
|
|
<span class="inline-flex items-center gap-1 bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
{{ event.start_time|date:"Y年m月d日" }}
|
|
</span>
|
|
{% if event.end_time %}
|
|
<span class="inline-flex items-center gap-1 bg-green-50 text-green-700 px-2.5 py-1 rounded-full">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
{{ event.end_time|date:"Y年m月d日" }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="mt-3 text-sm text-gray-600">
|
|
{% with branch_count=event.branches.count %}
|
|
{% if branch_count == all_branch_count %}
|
|
<span class="inline-flex items-center gap-1 text-purple-700 bg-purple-50 px-2.5 py-1 rounded-full">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
|
</svg>
|
|
涉及：全辖分支机构
|
|
</span>
|
|
{% elif branch_count == 1 %}
|
|
<span class="inline-flex items-center gap-1 text-blue-700 bg-blue-50 px-2.5 py-1 rounded-full">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
|
</svg>
|
|
涉及：{{ event.branches.first.name }}
|
|
</span>
|
|
{% elif branch_count > 1 %}
|
|
<span class="inline-flex items-center gap-1 text-blue-700 bg-blue-50 px-2.5 py-1 rounded-full">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
|
</svg>
|
|
涉及：{{ event.branches.all.0.name }}、{{ event.branches.all.1.name }}等{{ branch_count }}个营业部
|
|
</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center gap-1 text-gray-500 bg-gray-100 px-2.5 py-1 rounded-full">
|
|
涉及：暂无
|
|
</span>
|
|
{% endif %}
|
|
{% endwith %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="p-8 text-center text-gray-500">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-3 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
暂无事件
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 分隔线 -->
|
|
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-orange-400 to-transparent"></div>
|
|
|
|
<!-- 活动中的列表 -->
|
|
<div class="w-full max-w-5xl mx-auto p-6">
|
|
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-orange-100">
|
|
<div class="px-6 py-4 bg-gradient-to-r from-orange-500 via-orange-600 to-red-600">
|
|
<h2 class="text-lg font-bold text-white flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
进行中的活动
|
|
<span class="ml-auto text-sm font-normal bg-white/20 px-3 py-1 rounded-full">{{ ongoing_activities|length }} 个活动</span>
|
|
</h2>
|
|
</div>
|
|
<div class="divide-y divide-gray-100">
|
|
{% for huodong in ongoing_activities %}
|
|
<div class="p-5 hover:bg-orange-50/50 transition-colors duration-200 group">
|
|
<div class="flex flex-col sm:flex-row sm:items-start gap-4">
|
|
<!-- 状态标记 -->
|
|
<div class="flex-shrink-0">
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-red-400 to-red-600 flex items-center justify-center text-white shadow-md">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<!-- 内容 -->
|
|
<div class="flex-grow min-w-0">
|
|
<div class="flex flex-wrap items-center gap-2 mb-2">
|
|
<a href="{% url 'branch-detail' huodong.branch.pk %}"
|
|
class="inline-flex items-center px-2.5 py-1 rounded-lg text-sm font-medium bg-orange-100 text-orange-700 hover:bg-orange-600 hover:text-white transition-colors">
|
|
{{ huodong.branch }}
|
|
</a>
|
|
<h3 class="text-lg font-bold text-red-700 group-hover:text-red-800 transition-colors">
|
|
{{ huodong.name }}
|
|
</h3>
|
|
<span class="text-xs font-medium text-white bg-red-500 px-2 py-0.5 rounded-full">未完成</span>
|
|
</div>
|
|
<p class="text-sm text-gray-600 mb-3 line-clamp-2">{{ huodong.description }}</p>
|
|
<div class="flex flex-wrap items-center gap-4 text-xs text-gray-500">
|
|
<span class="inline-flex items-center gap-1 bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
开始时间：{{ huodong.start_time|date:"Y年m月d日" }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="p-8 text-center text-gray-500">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-3 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
暂无进行中的活动
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 分隔线 -->
|
|
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-teal-400 to-transparent"></div>
|
|
|
|
<!-- 今年活动分类展示 -->
|
|
{% for scope, scope_data in grouped_activities.items %}
|
|
<div class="w-full max-w-5xl mx-auto p-6">
|
|
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-teal-100">
|
|
<div class="px-6 py-4 bg-gradient-to-r from-teal-500 via-teal-600 to-cyan-600">
|
|
<h2 class="text-lg font-bold text-white flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
|
</svg>
|
|
今年的{{ scope }}
|
|
<span class="ml-auto text-sm font-normal bg-white/20 px-3 py-1 rounded-full">{{ scope_data.branch_count }} 个分支机构</span>
|
|
</h2>
|
|
</div>
|
|
<div class="divide-y divide-gray-100">
|
|
{% for activity in scope_data.activities %}
|
|
<div class="p-5 hover:bg-teal-50/50 transition-colors duration-200 group" style="background-color: {{ activity.branch.background_color }};">
|
|
<div class="flex flex-col sm:flex-row sm:items-start gap-4">
|
|
<!-- 状态标记 -->
|
|
<div class="flex-shrink-0">
|
|
<div class="w-10 h-10 rounded-full {% if not activity.end_time %}bg-gradient-to-br from-red-400 to-red-600{% else %}bg-gradient-to-br from-teal-400 to-teal-600{% endif %} flex items-center justify-center text-white shadow-md">
|
|
{% if not activity.end_time %}
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
{% else %}
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<!-- 内容 -->
|
|
<div class="flex-grow min-w-0">
|
|
<div class="flex flex-wrap items-center gap-2 mb-2">
|
|
<a href="{% url 'branch-detail' activity.branch.pk %}"
|
|
class="inline-flex items-center px-2.5 py-1 rounded-lg text-sm font-medium bg-teal-100 text-teal-700 hover:bg-teal-600 hover:text-white transition-colors">
|
|
{{ activity.branch }}
|
|
</a>
|
|
<h3 class="text-lg font-bold {% if not activity.end_time %}text-red-700{% else %}text-gray-800{% endif %} group-hover:text-teal-700 transition-colors">
|
|
{{ activity.name }}
|
|
</h3>
|
|
{% if not activity.end_time %}
|
|
<span class="text-xs font-medium text-white bg-red-500 px-2 py-0.5 rounded-full">未完成</span>
|
|
{% endif %}
|
|
</div>
|
|
<p class="text-sm text-gray-600 mb-3 line-clamp-2">{{ activity.description }}</p>
|
|
<div class="flex flex-wrap items-center gap-4 text-xs text-gray-500">
|
|
<span class="inline-flex items-center gap-1 bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
{{ activity.start_time|date:"Y年m月d日" }}
|
|
</span>
|
|
{% if activity.end_time %}
|
|
<span class="inline-flex items-center gap-1 bg-green-50 text-green-700 px-2.5 py-1 rounded-full">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
{{ activity.end_time|date:"Y年m月d日" }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="p-8 text-center text-gray-500">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-3 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
|
</svg>
|
|
暂无活动
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 分隔线 -->
|
|
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
|
|
{% endfor %}
|
|
|
|
<!-- 今年统计汇总 -->
|
|
<div class="w-full max-w-5xl mx-auto p-6">
|
|
<div class="bg-gradient-to-r from-teal-50 to-cyan-50 rounded-xl p-6 border border-teal-200">
|
|
<h3 class="text-lg font-bold text-teal-800 mb-3 flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
今年统计
|
|
</h3>
|
|
<div class="flex flex-wrap gap-3">
|
|
{% for scope, scope_data in grouped_activities.items %}
|
|
<span class="inline-flex items-center px-4 py-2 rounded-full bg-white shadow-sm border border-teal-100">
|
|
<span class="w-2 h-2 rounded-full bg-teal-500 mr-2"></span>
|
|
<span class="font-medium text-gray-700">{{ scope }}</span>
|
|
<span class="ml-2 text-teal-600 font-bold">{{ scope_data.branch_count }}个</span>
|
|
</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 分隔线 -->
|
|
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-indigo-400 to-transparent"></div>
|
|
|
|
<!-- 历年活动统计 -->
|
|
<div class="w-full max-w-5xl mx-auto p-6">
|
|
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-indigo-100">
|
|
<div class="px-6 py-4 bg-gradient-to-r from-indigo-500 via-indigo-600 to-purple-600">
|
|
<h2 class="text-lg font-bold text-white flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
历年活动统计
|
|
</h2>
|
|
</div>
|
|
<div class="p-6 space-y-4">
|
|
{% for year in historical_years %}
|
|
{% with year_data=historical_grouped_activities|get_item:year %}
|
|
{% if year_data %}
|
|
<div class="bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl p-5 border border-indigo-100">
|
|
<h3 class="text-lg font-bold text-indigo-800 mb-3 flex items-center gap-2">
|
|
<span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-indigo-600 text-white text-sm font-bold">{{ year }}</span>
|
|
<span>年统计</span>
|
|
</h3>
|
|
<div class="flex flex-wrap gap-3">
|
|
{% for scope, scope_data in year_data.items %}
|
|
<span class="inline-flex items-center px-4 py-2 rounded-full bg-white shadow-sm border border-indigo-100">
|
|
<span class="w-2 h-2 rounded-full bg-indigo-500 mr-2"></span>
|
|
<span class="font-medium text-gray-700">{{ scope }}</span>
|
|
<span class="ml-2 text-indigo-600 font-bold">{{ scope_data.branch_count }}个</span>
|
|
</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% endblock %}
|