feat(ui): 优化多个页面的UI设计和交互体验
重构公共电子屏、分支机构信息、设备间图片和活动统计页面的UI设计 - 添加渐变背景、阴影和悬停效果提升视觉体验 - 使用图标增强信息展示和交互提示 - 改进表格和卡片布局提高可读性 - 统一各页面的设计风格和交互模式 - 添加CSS组件类支持新的UI效果
This commit is contained in:
@@ -2,51 +2,73 @@
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- Component starts here -->
|
||||
<h2 class="flex flex-row flex-nowrap items-center my-8">
|
||||
<span class="flex-grow block border-t border-black" aria-hidden="true" role="presentation"></span>
|
||||
<span class="flex-none block mx-4 px-4 py-2.5 text-base leading-none font-medium uppercase bg-black text-white">
|
||||
{{ branch.name }}
|
||||
</span>
|
||||
<span class="flex-grow block border-t border-black" aria-hidden="true" role="presentation"></span>
|
||||
</h2>
|
||||
<!-- Component ends here -->
|
||||
<!-- 页面标题 -->
|
||||
<div class="w-full max-w-6xl mx-auto p-6">
|
||||
<div class="relative flex items-center justify-center py-8">
|
||||
<div class="absolute left-0 right-0 h-1 bg-gradient-to-r from-transparent via-blue-500 to-transparent"></div>
|
||||
<div class="relative z-10 bg-gradient-to-r from-blue-600 to-indigo-700 text-white px-8 py-3 rounded-full shadow-lg">
|
||||
<h1 class="text-xl font-bold flex items-center gap-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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>
|
||||
{{ branch.name }}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 投入预算表 -->
|
||||
<div class="bg-white rounded-lg shadow-md p-4 mb-6">
|
||||
<h2 class="text-2xl font-bold mb-4">投入预算表</h2>
|
||||
<p class="text-gray-700 mb-4">分支机构项目的预算表，包括设备和基础设施明细</p>
|
||||
<div class="w-full max-w-6xl mx-auto p-6">
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-blue-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 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>
|
||||
投入预算表
|
||||
</h2>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<p class="text-gray-600 mb-6">分支机构项目的预算表，包括设备和基础设施明细</p>
|
||||
|
||||
<!-- 预算模板导入功能 -->
|
||||
{% if budget_templates %} <!-- 只有当有模板时才显示导入功能 -->
|
||||
<div class="mb-6 p-4 bg-blue-50 rounded-lg">
|
||||
<h3 class="text-lg font-semibold mb-2">预算模板导入</h3>
|
||||
<p class="text-sm text-gray-600 mb-3">从模板一键导入预算，快速生成预算表</p>
|
||||
|
||||
<form method="POST" action="{% url 'import-budget-template' branch.id %}">
|
||||
{% csrf_token %}
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label for="template" class="block text-sm font-medium text-gray-700 mb-1">选择模板</label>
|
||||
<select id="template" name="template" class="w-full p-2 border border-gray-300 rounded-md">
|
||||
{% for template in budget_templates %}
|
||||
<option value="{{ template.id }}">{{ template.name }}{% if template.is_default %} (默认){% endif %}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="budget_name" class="block text-sm font-medium text-gray-700 mb-1">预算名称</label>
|
||||
<input type="text" id="budget_name" name="budget_name" placeholder="请输入预算名称" class="w-full p-2 border border-gray-300 rounded-md">
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">
|
||||
一键导入
|
||||
</button>
|
||||
</div>
|
||||
<!-- 预算模板导入功能 -->
|
||||
{% if budget_templates %}
|
||||
<div class="mb-6 p-5 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-200">
|
||||
<h3 class="text-lg font-semibold mb-2 text-blue-800 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
|
||||
</svg>
|
||||
预算模板导入
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">从模板一键导入预算，快速生成预算表</p>
|
||||
|
||||
<form method="POST" action="{% url 'import-budget-template' branch.id %}">
|
||||
{% csrf_token %}
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label for="template" class="block text-sm font-medium text-gray-700 mb-1">选择模板</label>
|
||||
<select id="template" name="template" class="w-full p-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all">
|
||||
{% for template in budget_templates %}
|
||||
<option value="{{ template.id }}">{{ template.name }}{% if template.is_default %} (默认){% endif %}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="budget_name" class="block text-sm font-medium text-gray-700 mb-1">预算名称</label>
|
||||
<input type="text" id="budget_name" name="budget_name" placeholder="请输入预算名称" class="w-full p-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all">
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<button type="submit" class="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white px-6 py-2.5 rounded-lg font-medium shadow-md hover:shadow-lg transition-all duration-200 flex items-center justify-center gap-2">
|
||||
<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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
|
||||
</svg>
|
||||
一键导入
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if budgets %}
|
||||
{% for budget in budgets %}
|
||||
@@ -54,215 +76,438 @@
|
||||
<h3 class="text-lg font-semibold mb-3">{{ budget.name }} - 总预算: ￥{{ budget.total_budget }}</h3>
|
||||
|
||||
<!-- 设备预算部分 -->
|
||||
<div class="mb-4">
|
||||
<h4 class="text-md font-semibold mb-2">设备预算明细</h4>
|
||||
<div class="mb-6">
|
||||
<h4 class="text-md font-bold mb-3 text-gray-800 flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
|
||||
</svg>
|
||||
设备预算明细
|
||||
</h4>
|
||||
{% if budget.equipment_budgets.all %}
|
||||
<div class="overflow-x-auto">
|
||||
<div class="overflow-x-auto rounded-xl border border-gray-200">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<thead class="bg-gradient-to-r from-slate-50 to-gray-100">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">型号</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">单价</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">采购方式</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数量</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">小计</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">项目</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">型号</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">单价</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">采购方式</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">数量</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">小计</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<tbody class="bg-white divide-y divide-gray-100">
|
||||
{% for equipment in budget.equipment_budgets.all %}
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ equipment.project }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ equipment.model }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">￥{{ equipment.unit_price }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ equipment.get_procurement_method_display }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ equipment.quantity }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">￥{{ equipment.subtotal }}</td>
|
||||
<tr class="hover:bg-blue-50/50 transition-colors">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">{{ equipment.project }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ equipment.model }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">￥{{ equipment.unit_price }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ equipment.get_procurement_method_display }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">{{ equipment.quantity }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-600">￥{{ equipment.subtotal }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-gray-500 italic">暂无设备预算明细</p>
|
||||
<div class="p-6 text-center bg-gray-50 rounded-xl border border-gray-200">
|
||||
<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 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
|
||||
</svg>
|
||||
<p class="text-gray-500">暂无设备预算明细</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- 基础设施预算部分 -->
|
||||
<div>
|
||||
<h4 class="text-md font-semibold mb-2">基础设施预算明细</h4>
|
||||
<h4 class="text-md font-bold mb-3 text-gray-800 flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-teal-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>
|
||||
基础设施预算明细
|
||||
</h4>
|
||||
{% if budget.infrastructure_budgets.all %}
|
||||
<div class="overflow-x-auto">
|
||||
<div class="overflow-x-auto rounded-xl border border-gray-200">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<thead class="bg-gradient-to-r from-slate-50 to-gray-100">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">名称</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">备注</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">单价</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">单位</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数量</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">小计</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">说明</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">名称</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">备注</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">单价</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">单位</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">数量</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">小计</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<tbody class="bg-white divide-y divide-gray-100">
|
||||
{% for infrastructure in budget.infrastructure_budgets.all %}
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ infrastructure.name }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ infrastructure.remarks }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">￥{{ infrastructure.unit_price }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ infrastructure.unit }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ infrastructure.quantity }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">￥{{ infrastructure.subtotal }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ infrastructure.description }}</td>
|
||||
<tr class="hover:bg-teal-50/50 transition-colors">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">{{ infrastructure.name }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ infrastructure.remarks }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">￥{{ infrastructure.unit_price }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ infrastructure.unit }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">{{ infrastructure.quantity }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-600">￥{{ infrastructure.subtotal }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ infrastructure.description }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-gray-500 italic">暂无基础设施预算明细</p>
|
||||
<div class="p-6 text-center bg-gray-50 rounded-xl border border-gray-200">
|
||||
<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="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>
|
||||
<p class="text-gray-500">暂无基础设施预算明细</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p class="text-gray-500 italic">暂无预算信息</p>
|
||||
<div class="p-8 text-center bg-gray-50 rounded-xl border border-gray-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 text-gray-300" 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>
|
||||
<p class="text-gray-500 text-lg">暂无预算信息</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="bg-white rounded-lg shadow-md p-4 mb-6">
|
||||
<h2 class="text-2xl font-bold mb-4">基本信息</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p class="text-gray-700"><strong>信息系统分类:</strong> {{ branch.category|default:"暂无" }}</p>
|
||||
<p class="text-gray-700"><strong>联系人:</strong> {{ branch.contact_person|default:"暂无" }}</p>
|
||||
<p class="text-gray-700"><strong>联系电话:</strong> {{ branch.contact_phone|default:"暂无" }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-700"><strong>地址:</strong> {{ branch.address|default:"暂无" }}</p>
|
||||
<p class="text-gray-700"><strong>成立时间:</strong> {{ branch.established_date|date:"Y-m-d"|default:"暂无" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 事件信息 -->
|
||||
<div class="bg-white rounded-lg shadow-md p-4 mb-6">
|
||||
<h2 class="text-2xl font-bold mb-4">关联事件</h2>
|
||||
{% if events %}
|
||||
<div class="space-y-3">
|
||||
{% for event in events %}
|
||||
<div class="border-l-4 border-blue-500 pl-4 py-2 bg-blue-50 rounded">
|
||||
<h3 class="font-semibold text-lg">{{ event.name }}</h3>
|
||||
<p class="text-sm text-gray-600">
|
||||
{% if event.end_time %}
|
||||
开始日期{{ event.start_time|date:"Y年m月d日" }} 结束日期{{ event.end_time|date:"Y年m月d日" }}
|
||||
{% else %}
|
||||
开始日期{{ event.start_time|date:"Y年m月d日" }}，现在进行中
|
||||
{% endif %}
|
||||
</p>
|
||||
<p class="mt-1 text-gray-700">{{ event.description|truncatechars:100 }}</p>
|
||||
<!-- 分隔线 -->
|
||||
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-cyan-400 to-transparent"></div>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="w-full max-w-6xl mx-auto p-6">
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-cyan-100">
|
||||
<div class="px-6 py-4 bg-gradient-to-r from-cyan-500 via-cyan-600 to-teal-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 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
基本信息
|
||||
</h2>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-gray-500 italic">暂无事件记录</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- 设备间图片 -->
|
||||
<div class="bg-white rounded-lg shadow-md p-4 mb-6">
|
||||
<h2 class="text-2xl font-bold mb-4">设备间图片</h2>
|
||||
{% if equipment_images %}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
||||
{% for image in equipment_images %}
|
||||
<div class="overflow-hidden rounded-lg shadow">
|
||||
<img src="{{ image.image.url }}" alt="设备间图片" class="w-full h-48 object-cover">
|
||||
<div class="p-2 bg-gray-50">
|
||||
<p class="text-sm text-gray-700">{{ image.description|default:"无描述" }}</p>
|
||||
<p class="text-xs text-gray-500 mt-1">{{ image.upload_date|date:"Y-m-d" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-gray-500 italic">暂无设备间图片</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- 公共电子屏 -->
|
||||
<div class="bg-white rounded-lg shadow-md p-4 mb-6">
|
||||
<h2 class="text-2xl font-bold mb-4">公共电子屏</h2>
|
||||
{% if public_screens %}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最后演练</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">更新时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
{% for screen in public_screens %}
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ screen.get_screen_type_display }}</td>
|
||||
<td class="px-6 py-4">{{ screen.description|default:"无" }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{{ screen.last_drill.date|date:"Y-m-d"|default:"未演练" }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ screen.updated_at|date:"Y-m-d H:i" }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-gray-500 italic">暂无公共电子屏信息</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% for scope, activities in grouped_activities.items %}
|
||||
|
||||
<div class="p-5 border border-gray-100 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
|
||||
<time class="text-lg font-semibold text-gray-900 dark:text-white">{{ scope }}</time>
|
||||
<ol class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
|
||||
{% for huodong in activities %}
|
||||
<li style="background-color: {{ huodong.branch.background_color }};">
|
||||
<div class="items-center block p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
<div class="text-gray-600 dark:text-gray-400">
|
||||
<span class="inline-flex items-center text-xs font-normal text-gray-400 dark:text-gray-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" />
|
||||
</svg>
|
||||
开始时间 {{ huodong.start_time| date:"Y年m月d日" }}
|
||||
</span>
|
||||
<div class="text-base font-normal">
|
||||
<span class="font-medium text-gray-900 dark:text-white">
|
||||
{% if not huodong.end_time %}
|
||||
<span class="text-lg font-semibold text-red-900 dark:text-white">
|
||||
{{ huodong.name }}-未完成
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
{{ huodong.name }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
<div class="p-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3 p-4 bg-gray-50 rounded-xl">
|
||||
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
|
||||
<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="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mb-1">信息系统分类</p>
|
||||
<p class="text-base font-medium text-gray-800">{{ branch.category|default:"暂无" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm font-normal">
|
||||
{{ huodong.description }}
|
||||
<div class="flex items-start gap-3 p-4 bg-gray-50 rounded-xl">
|
||||
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mb-1">联系人</p>
|
||||
<p class="text-base font-medium text-gray-800">{{ branch.contact_person|default:"暂无" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 p-4 bg-gray-50 rounded-xl">
|
||||
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mb-1">联系电话</p>
|
||||
<p class="text-base font-medium text-gray-800">{{ branch.contact_phone|default:"暂无" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3 p-4 bg-gray-50 rounded-xl">
|
||||
<div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mb-1">地址</p>
|
||||
<p class="text-base font-medium text-gray-800">{{ branch.address|default:"暂无" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 p-4 bg-gray-50 rounded-xl">
|
||||
<div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-pink-600" 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>
|
||||
<p class="text-sm text-gray-500 mb-1">成立时间</p>
|
||||
<p class="text-base font-medium text-gray-800">{{ branch.established_date|date:"Y年m月d日"|default:"暂无" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="inline-flex items-center text-xs font-normal text-gray-400 dark:text-gray-400">
|
||||
<svg class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
|
||||
</svg>
|
||||
结束时间 {{ huodong.end_time| date:"Y年m月d日" }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<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-6xl 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="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>
|
||||
关联事件
|
||||
</h2>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
{% if events %}
|
||||
<div class="space-y-4">
|
||||
{% for event in events %}
|
||||
<div class="p-5 bg-gradient-to-r from-purple-50 to-indigo-50 rounded-xl border-l-4 border-purple-500 hover:shadow-md transition-shadow">
|
||||
<h3 class="font-bold text-lg text-purple-800 mb-2">{{ event.name }}</h3>
|
||||
<div class="flex flex-wrap items-center gap-3 mb-3">
|
||||
<span class="inline-flex items-center gap-1 text-xs bg-white px-2.5 py-1 rounded-full text-purple-700 shadow-sm">
|
||||
<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 text-xs bg-green-100 px-2.5 py-1 rounded-full text-green-700">
|
||||
<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>
|
||||
{% else %}
|
||||
<span class="inline-flex items-center gap-1 text-xs bg-red-100 px-2.5 py-1 rounded-full text-red-700">
|
||||
<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
进行中
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<p class="text-gray-700">{{ event.description|truncatechars:100 }}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="p-8 text-center bg-gray-50 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 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>
|
||||
<p class="text-gray-500 text-lg">暂无事件记录</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-emerald-400 to-transparent"></div>
|
||||
|
||||
<!-- 设备间图片 -->
|
||||
<div class="w-full max-w-6xl mx-auto p-6">
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-emerald-100">
|
||||
<div class="px-6 py-4 bg-gradient-to-r from-emerald-500 via-emerald-600 to-teal-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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
设备间图片
|
||||
</h2>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
{% if equipment_images %}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
|
||||
{% for image in equipment_images %}
|
||||
<div class="overflow-hidden rounded-xl shadow-lg hover:shadow-xl transition-shadow group">
|
||||
<div class="relative overflow-hidden">
|
||||
<img src="{{ image.image.url }}" alt="设备间图片" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
|
||||
</div>
|
||||
<div class="p-4 bg-gray-50">
|
||||
<p class="text-sm font-medium text-gray-800">{{ image.description|default:"无描述" }}</p>
|
||||
<p class="text-xs text-gray-500 mt-2 flex items-center gap-1">
|
||||
<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>
|
||||
{{ image.upload_date|date:"Y年m月d日" }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="p-8 text-center bg-gray-50 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<p class="text-gray-500 text-lg">暂无设备间图片</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-amber-400 to-transparent"></div>
|
||||
|
||||
<!-- 公共电子屏 -->
|
||||
<div class="w-full max-w-6xl mx-auto p-6">
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-amber-100">
|
||||
<div class="px-6 py-4 bg-gradient-to-r from-amber-500 via-amber-600 to-orange-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.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
公共电子屏
|
||||
</h2>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
{% if public_screens %}
|
||||
<div class="overflow-x-auto rounded-xl border border-gray-200">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gradient-to-r from-slate-50 to-gray-100">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">类型</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">描述</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">最后演练</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">更新时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-100">
|
||||
{% for screen in public_screens %}
|
||||
<tr class="hover:bg-amber-50/50 transition-colors">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-800">
|
||||
{{ screen.get_screen_type_display }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-700">{{ screen.description|default:"无" }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
{% if screen.last_drill %}
|
||||
<span class="inline-flex items-center gap-1 text-green-700">
|
||||
<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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
{{ screen.last_drill.date|date:"Y-m-d" }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="text-gray-400">未演练</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ screen.updated_at|date:"Y-m-d H:i" }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="p-8 text-center bg-gray-50 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<p class="text-gray-500 text-lg">暂无公共电子屏信息</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</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, activities in grouped_activities.items %}
|
||||
<div class="w-full max-w-6xl 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 }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="divide-y divide-gray-100">
|
||||
{% for huodong in activities %}
|
||||
<div class="p-5 hover:bg-teal-50/50 transition-colors duration-200" style="background-color: {{ huodong.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 huodong.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 huodong.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">
|
||||
<h3 class="text-lg font-bold {% if not huodong.end_time %}text-red-700{% else %}text-gray-800{% endif %}">
|
||||
{{ huodong.name }}
|
||||
</h3>
|
||||
{% if not huodong.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">{{ 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>
|
||||
{% if huodong.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>
|
||||
{{ huodong.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 %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user