fzjg_local/fzjgact/huodong/templates/public_screens.html

{% extends 'base.html' %}
{% load static %}

{% block content %}
<!-- 页面标题 -->
<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-cyan-500 to-transparent"></div>
        <div class="relative z-10 bg-gradient-to-r from-cyan-600 to-blue-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="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>
                公共电子屏列表
            </h1>
        </div>
    </div>
</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 mb-6">
        <div class="px-6 py-4 bg-gradient-to-r from-cyan-600 via-cyan-700 to-blue-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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                </svg>
                筛选条件
            </h2>
        </div>
        <div class="p-6">
            <form method="get" class="flex flex-col md:flex-row gap-4 items-end">
                <div class="flex flex-col w-full md:w-48">
                    <label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-cyan-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>
                        分支机构
                    </label>
                    <select name="branch" class="p-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-cyan-300 focus:border-cyan-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors">
                        <option value="">所有分支机构</option>
                        {% for branch in branches %}
                            <option value="{{ branch.id }}" {% if request.GET.branch == branch.id|stringformat:"i" %}selected{% endif %}>{{ branch.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="flex flex-col w-full md:w-48">
                    <label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-cyan-500" 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>
                        屏幕类型
                    </label>
                    <select name="screen_type" class="p-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-cyan-300 focus:border-cyan-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors">
                        <option value="">所有类型</option>
                        <option value="marquee" {% if request.GET.screen_type == 'marquee' %}selected{% endif %}>跑马灯</option>
                        <option value="advertisement" {% if request.GET.screen_type == 'advertisement' %}selected{% endif %}>广告屏</option>
                        <option value="information" {% if request.GET.screen_type == 'information' %}selected{% endif %}>信息发布屏</option>
                    </select>
                </div>
                <div class="flex items-center gap-2">
                    <button type="submit" class="px-5 py-2.5 bg-gradient-to-r from-cyan-600 to-cyan-700 hover:from-cyan-700 hover:to-cyan-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-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                        </svg>
                        筛选
                    </button>
                    {% if request.GET.branch or request.GET.screen_type %}
                        <a href="{% url 'public-screens' %}" class="px-4 py-2.5 text-gray-600 hover:text-cyan-600 hover:bg-cyan-50 rounded-lg transition-colors font-medium">
                            清除筛选
                        </a>
                    {% endif %}
                </div>
            </form>
        </div>
    </div>

    <!-- 电子屏列表 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% for screen in public_screens %}
            <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 border border-cyan-100 group">
                <div class="relative">
                    {% if screen.image %}
                        <img src="{{ screen.image.url }}" alt="{{ screen.get_screen_type_display }}" class="w-full h-[180px] object-cover cursor-pointer group-hover:scale-105 transition-transform duration-500" onclick="openModal('{{ screen.image.url }}')">
                    {% else %}
                        <div class="w-full h-[180px] bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center">
                            <div class="text-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-400 mx-auto mb-2" 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-500 text-sm">暂无图片</span>
                            </div>
                        </div>
                    {% endif %}
                    <div class="absolute top-3 right-3 bg-gradient-to-r from-cyan-600 to-blue-600 text-white px-3 py-1 rounded-full text-xs font-medium shadow-md">
                        {{ screen.get_screen_type_display }}
                    </div>
                </div>
                <div class="p-5">
                    <h3 class="font-bold text-lg mb-2 text-gray-800">{{ screen.branch.name }}</h3>
                    {% if screen.description %}
                        <p class="text-gray-600 mb-3 text-sm leading-relaxed">{{ screen.description|truncatechars:100 }}</p>
                    {% endif %}
                    <div class="text-sm space-y-1">
                        {% if screen.last_drill %}
                            <p class="flex items-center gap-2 text-gray-600">
                                <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="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 H:i" }}
                            </p>
                        {% else %}
                            <p class="flex items-center gap-2 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 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                                </svg>
                                暂无演练记录
                            </p>
                        {% endif %}
                        <p class="flex items-center gap-2 text-gray-500">
                            <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>
                            更新时间: {{ screen.updated_at|date:"Y-m-d H:i" }}
                        </p>
                    </div>
                </div>
            </div>
        {% empty %}
            <div class="col-span-full text-center py-12">
                <div class="bg-white rounded-2xl shadow-lg p-8 border border-cyan-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="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>
            </div>
        {% endfor %}
    </div>
</div>

<!-- 分隔线 -->
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-cyan-400 to-transparent"></div>

<!-- 图片预览模态框 -->
<div id="imageModal" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center hidden z-50">
    <button onclick="closeModal()" class="absolute top-4 right-4 text-white text-2xl">&times;</button>
    <img id="modalImage" src="" alt="大图预览" class="max-w-[90%] max-h-[90vh]">
</div>

<script>
function openModal(imageUrl) {
    document.getElementById('modalImage').src = imageUrl;
    document.getElementById('imageModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function closeModal() {
    document.getElementById('imageModal').classList.add('hidden');
    document.body.style.overflow = 'auto';
}

// 点击模态框背景关闭
document.getElementById('imageModal').addEventListener('click', function(e) {
    if (e.target === this) closeModal();
});
</script>
{% endblock %}