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

186
fzjgact/huodong/templates/equipment_images.html
View File

@@ -1,66 +1,186 @@
{% extends 'base.html' %}
{% block content %}
<div class="container mx-auto px-4 py-8">
<h1 class="text-3xl font-bold mb-8 text-center">分支机构设备间图片列表</h1>
<div class="flex justify-center mb-6">
<form method="get" action="" class="w-full max-w-md">
<div class="flex">
<input type="text" name="search" placeholder="搜索分支机构名称..." value="{{ request.GET.search }}"
class="flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500">
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-r-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
<!-- 页面标题 -->
<div class="w-full max-w-7xl 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-emerald-500 to-transparent"></div>
<div class="relative z-10 bg-gradient-to-r from-emerald-600 to-teal-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="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>
分支机构设备间图片列表
</h1>
</div>
</div>
</div>
<div class="w-full max-w-7xl mx-auto p-6">
<!-- 搜索区域 -->
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-emerald-100 mb-6">
<div class="px-6 py-4 bg-gradient-to-r from-emerald-600 via-emerald-700 to-teal-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
搜索分支机构
</h2>
</div>
<div class="p-6">
<form method="get" action="" class="flex flex-col sm:flex-row gap-4 items-center justify-center">
<div class="relative flex-1 max-w-md w-full">
<input type="text" name="search" placeholder="搜索分支机构名称..." value="{{ request.GET.search }}"
class="w-full px-4 py-3 pl-12 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 bg-gray-50 hover:bg-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 absolute left-4 top-1/2 transform -translate-y-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<button type="submit" class="px-6 py-3 bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 text-white rounded-lg shadow-md hover:shadow-lg transition-all duration-200 font-medium 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
搜索
</button>
</div>
</form>
</form>
</div>
</div>
<!-- 统计信息 -->
<div class="mb-6 text-center">
<span class="inline-flex items-center px-4 py-2 rounded-full bg-emerald-100 text-emerald-700 text-sm font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" 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>
共 {{ total_count }} 个分支机构
</span>
</div>
<p class="text-gray-600 mb-6 text-center">共 {{ total_count }} 个分支机构</p>
{% if branches %}
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
{% for branch in branches %}
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-900 mb-1">{{ branch.name }}</h2>
<a href="{% url 'branch-detail' branch.id %}" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
查看分支机构详情 →
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-emerald-100 hover:shadow-2xl transition-all duration-300 group">
<div class="p-5 bg-gradient-to-r from-emerald-50 to-teal-50 border-b border-emerald-100">
<h2 class="text-lg font-bold text-gray-900 mb-2">{{ branch.name }}</h2>
<a href="{% url 'branch-detail' branch.id %}" class="inline-flex items-center text-emerald-600 hover:text-emerald-800 text-sm font-medium transition-colors">
查看分支机构详情
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
<div class="bg-gray-100 p-2">
<!-- 设备间图片 -->
<div class="p-4 bg-gray-50">
<div class="flex items-center gap-2 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-600" 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>
<span class="text-sm font-semibold text-gray-700">设备间图片</span>
</div>
{% if branch.equipment_images.exists %}
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
<div class="grid grid-cols-2 gap-2">
{% for image in branch.equipment_images.all %}
<img src="{{ image.image.url }}" alt="{{ branch.name }}设备间图片"
class="h-[100px] md:h-[150px] lg:h-[200px] w-auto object-cover cursor-pointer"
class="h-[80px] w-full object-cover rounded-lg cursor-pointer hover:scale-105 transition-transform duration-300"
data-branch-id="{{ branch.id }}" data-image-type="equipment" data-index="{{ forloop.counter0 }}"
onclick="openImageModal(this)">
{% endfor %}
</div>
{% else %}
<div class="flex items-center justify-center h-48 bg-gray-200">
<span class="text-gray-400 text-sm">无图片</span>
<div class="flex items-center justify-center h-24 bg-gray-100 rounded-lg">
<div class="text-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-300 mx-auto mb-1" 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>
<span class="text-gray-400 text-xs">无图片</span>
</div>
</div>
{% endif %}
</div>
<!-- 图纸显示区域 -->
<div class="bg-gray-100 p-2 mt-4">
<h3 class="text-lg font-semibold mb-2">图纸</h3>
<div class="p-4 bg-gray-50 border-t border-gray-100">
<div class="flex items-center gap-2 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-600" 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>
<span class="text-sm font-semibold text-gray-700">图纸</span>
</div>
{% if branch.drawings.exists %}
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
<div class="grid grid-cols-2 gap-2">
{% for drawing in branch.drawings.all %}
<img src="{{ drawing.image.url }}" alt="{{ branch.name }}图纸"
class="h-[100px] md:h-[150px] lg:h-[200px] w-auto object-cover cursor-pointer"
class="h-[80px] w-full object-cover rounded-lg cursor-pointer hover:scale-105 transition-transform duration-300"
data-branch-id="{{ branch.id }}" data-image-type="drawings" data-index="{{ forloop.counter0 }}"
onclick="openImageModal(this)">
{% endfor %}
</div>
{% else %}
<div class="flex items-center justify-center h-48 bg-gray-200">
<span class="text-gray-400 text-sm">无图纸</span>
<div class="flex items-center justify-center h-24 bg-gray-100 rounded-lg">
<div class="text-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-300 mx-auto mb-1" 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>
<span class="text-gray-400 text-xs">无图纸</span>
</div>
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
<!-- 分页控件 -->
<div class="mt-10 flex justify-center">
<nav class="inline-flex rounded-xl shadow-lg overflow-hidden border border-emerald-100">
{% if branches.has_previous %}
<a href="?page=1" class="relative inline-flex items-center px-4 py-3 bg-white text-sm font-medium text-gray-700 hover:bg-emerald-50 transition-colors border-r border-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
</svg>
首页
</a>
<a href="?page={{ branches.previous_page_number }}" class="relative inline-flex items-center px-4 py-3 bg-white text-sm font-medium text-gray-700 hover:bg-emerald-50 transition-colors border-r border-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
上一页
</a>
{% endif %}
<span class="relative inline-flex items-center px-6 py-3 bg-gradient-to-r from-emerald-50 to-teal-50 text-sm font-bold text-emerald-700">
第 {{ branches.number }} 页，共 {{ branches.paginator.num_pages }} 页
</span>
{% if branches.has_next %}
<a href="?page={{ branches.next_page_number }}" class="relative inline-flex items-center px-4 py-3 bg-white text-sm font-medium text-gray-700 hover:bg-emerald-50 transition-colors border-l border-gray-100">
下一页
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
<a href="?page={{ branches.paginator.num_pages }}" class="relative inline-flex items-center px-4 py-3 bg-white text-sm font-medium text-gray-700 hover:bg-emerald-50 transition-colors border-l border-gray-100">
末页
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
</svg>
</a>
{% endif %}
</nav>
</div>
{% else %}
<div class="text-center py-12 bg-white rounded-2xl shadow-lg border border-emerald-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-300 mx-auto mb-4" 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 class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-emerald-400 to-transparent"></div>
<!-- 图片查看模态框 -->
<div id="imageModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
@@ -135,9 +255,7 @@ document.getElementById('imageModal').addEventListener('click', function(e) {
});
</script>
</div>
{% endfor %}
</div>
<!-- 分页控件 -->
<div class="mt-10 flex justify-center">
@@ -165,10 +283,6 @@ document.getElementById('imageModal').addEventListener('click', function(e) {
{% endif %}
</nav>
</div>
{% else %}
<div class="text-center py-12 bg-gray-50 rounded-lg">
<p class="text-gray-500 text-lg">暂无分支机构设备间图片数据</p>
</div>
{% endif %}
</div>
{% endblock %}