xiaji/fzjg_local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(ui): 优化多个页面的UI设计和交互体验

Browse Source 
重构公共电子屏、分支机构信息、设备间图片和活动统计页面的UI设计
- 添加渐变背景、阴影和悬停效果提升视觉体验
- 使用图标增强信息展示和交互提示
- 改进表格和卡片布局提高可读性
- 统一各页面的设计风格和交互模式
- 添加CSS组件类支持新的UI效果
This commit is contained in:
xiaji
2026-01-28 12:30:14 +08:00
parent 18314c9808
commit b6704519ec
11 changed files with 3512 additions and 979 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
fzjgact/huodong/templates/branch_info.html
View File

@@ -1,76 +1,140 @@
{% extends 'base.html' %}
{% block content %}
<table class="items-center bg-transparent w-full border-collapse ">
<thead>
<tr class="bg-gray-100">
<th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-base uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
所在省份
</th>
<th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-base uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
分支机构名称
<br>
基础信息
</th>
<th class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-base uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
信息系统类别
</th>
</tr>
</thead>
<tbody>
{% for province, branches in branches_by_province.items %}
{% for item in branches %}
<tr class="{% if forloop.parentloop.counter|divisibleby:2 %}bg-gray-100{% else %}bg-white{% endif %}">
{% if forloop.first %}
<td class="px-6 py-4 whitespace-no-wrap text-left border-b border-gray-200" rowspan="{{ branches|length }}">
{{ province }}
</td>
{% endif %}
<td class="px-6 py-4 whitespace-no-wrap text-left border-b border-gray-200">
<a href="{% url 'branch-detail' item.pk %}"
class="bg-transparent hover:bg-blue-900 hover:text-white p-2 rounded-md">
{{ item.name }}
</a>
</td>
<td class="px-6 py-4 whitespace-no-wrap text-left border-b border-gray-200">
{{ item.category }}
</td>
<!-- 页面标题 -->
<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-indigo-500 to-transparent"></div>
<div class="relative z-10 bg-gradient-to-r from-indigo-600 to-purple-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>
分支机构信息
</h1>
</div>
</div>
</div>
</tr>
{% endfor %}
{% endfor %}
</tbody>
<tr class="bg-gray-200 font-bold">
<td class="px-6 py-4 whitespace-no-wrap text-left border-b border-gray-200">
分支机构类别统计
</td>
<td class="px-6 py-4 whitespace-no-wrap text-left border-b border-gray-200" colspan="2">
A型: {{ type_a_count }}家 | B型: {{ type_b_count }}家 | C型: {{ type_c_count }}家
</td>
</tr>
<tfoot>
<tr class="bg-gray-50">
<td colspan="3" class="px-6 py-4 text-right border-b border-gray-200">
<div class="flex justify-end space-x-3">
<a href="{% url 'export-branches-xls' %}" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-black font-medium rounded-lg shadow-md transition duration-150 ease-in-out transform hover:scale-105">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
<!-- 分支机构列表 -->
<div class="w-full max-w-6xl 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-600 via-indigo-700 to-purple-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 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0121 18.382V7.618a1 1 0 01-.553-.894L15 7m0 13V7" />
</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-indigo-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-indigo-500" 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>
</th>
<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-indigo-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>
分支机构名称
</div>
</th>
<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-indigo-500" 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>
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100">
{% for province, branches in branches_by_province.items %}
{% for item in branches %}
<tr class="{% if forloop.parentloop.counter|divisibleby:2 %}bg-slate-50/50{% else %}bg-white{% endif %} hover:bg-indigo-50/50 transition-colors duration-200">
{% if forloop.first %}
<td class="px-6 py-4 whitespace-nowrap text-left font-medium text-gray-800" rowspan="{{ branches|length }}">
<span class="inline-flex items-center px-3 py-1 rounded-full bg-indigo-100 text-indigo-700 text-sm">
{{ province }}
</span>
</td>
{% endif %}
<td class="px-6 py-4 whitespace-nowrap text-left">
<a href="{% url 'branch-detail' item.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-indigo-600 hover:text-white transition-all duration-200">
{{ item.name }}
</a>
</td>
<td class="px-6 py-4 whitespace-nowrap text-left">
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium {% if item.category == 'A型' %}bg-blue-100 text-blue-700{% elif item.category == 'B型' %}bg-green-100 text-green-700{% elif item.category == 'C型' %}bg-orange-100 text-orange-700{% else %}bg-gray-100 text-gray-700{% endif %}">
{{ item.category }}
</span>
</td>
</tr>
{% endfor %}
{% endfor %}
</tbody>
<!-- 统计行 -->
<tr class="bg-gradient-to-r from-indigo-50 to-purple-50 border-t-2 border-indigo-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-indigo-600" 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>
分支机构类别统计
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap" colspan="2">
<div class="flex flex-wrap gap-3">
<span class="inline-flex items-center px-3 py-1.5 rounded-full bg-blue-100 text-blue-700 text-sm font-medium">
<span class="w-2 h-2 rounded-full bg-blue-500 mr-2"></span>
A型: {{ type_a_count }}家
</span>
<span class="inline-flex items-center px-3 py-1.5 rounded-full bg-green-100 text-green-700 text-sm font-medium">
<span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span>
B型: {{ type_b_count }}家
</span>
<span class="inline-flex items-center px-3 py-1.5 rounded-full bg-orange-100 text-orange-700 text-sm font-medium">
<span class="w-2 h-2 rounded-full bg-orange-500 mr-2"></span>
C型: {{ type_c_count }}家
</span>
</div>
</td>
</tr>
</table>
</div>
<!-- 导出按钮 -->
<div class="px-6 py-4 bg-gray-50 border-t border-gray-100">
<div class="flex justify-end gap-3">
<a href="{% url 'export-branches-xls' %}" class="inline-flex items-center px-5 py-2.5 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
导出为XLS
</a>
<a href="{% url 'export-branches-pdf' %}" class="inline-flex items-center px-4 py-2 bg-purple-600 hover:bg-purple-800 text-black font-medium rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
<a href="{% url 'export-branches-pdf' %}" class="inline-flex items-center px-5 py-2.5 bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
导出为PDF
</a>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<!-- 分隔线 -->
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-purple-400 to-transparent"></div>
<hr class="h-px my-8 bg-red-500 border-1 dark:bg-red-700">
{% endblock %}