init. 初始化项目，并初步完成前端模板样式
This commit is contained in:
@@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,155 @@
|
||||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{% block title %}长白山消防救援支队{% endblock %}</title>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="{% static 'css/style.css' %}">
|
||||
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部 -->
|
||||
<header class="top-header">
|
||||
<span></span>
|
||||
<div class="header-container flex">
|
||||
<img src="{% static 'images/logo.png' %}" class="logo" alt="">
|
||||
<div>
|
||||
<h1>长白山消防救援支队</h1>
|
||||
<p>CHANGBAI MOUNTAIN FIRE AND RESCUE BRIGADE</p>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</header>
|
||||
|
||||
<!-- 导航 -->
|
||||
<nav class="nav-main">
|
||||
<span></span>
|
||||
<div class="header-nav">
|
||||
<ul>
|
||||
<!-- 网站首页 -->
|
||||
<li class="{% if request.resolver_match.url_name == 'index' %}active{% endif %}">
|
||||
<a href="{% url 'front:index' %}">网站首页</a>
|
||||
</li>
|
||||
|
||||
<!-- 单位简介 -->
|
||||
<li class="{% if request.resolver_match.url_name == 'about' %}active{% endif %}">
|
||||
<a href="{% url 'front:about' %}">单位简介</a>
|
||||
</li>
|
||||
|
||||
<!-- 新闻中心 -->
|
||||
<li class="{% if request.resolver_match.url_name == 'news' %}active{% endif %}">
|
||||
<a href="{% url 'front:news' %}">新闻中心</a>
|
||||
</li>
|
||||
|
||||
<!-- 信息公开 -->
|
||||
<li class="{% if request.resolver_match.url_name == 'info' %}active{% endif %}">
|
||||
<a href="{% url 'front:info' %}">信息公开</a>
|
||||
</li>
|
||||
<!-- 党建引领 -->
|
||||
<li class="{% if request.resolver_match.url_name == 'party' %}active{% endif %}">
|
||||
<a href="{% url 'front:party' %}">党建引领</a>
|
||||
</li>
|
||||
<!-- 办事服务 -->
|
||||
<li class="{% if request.resolver_match.url_name == 'service' %}active{% endif %}">
|
||||
<a href="{% url 'front:service' %}">办事服务</a>
|
||||
</li>
|
||||
<!-- 互动交流 -->
|
||||
<li class="{% if request.resolver_match.url_name == 'interaction' %}active{% endif %}">
|
||||
<a href="{% url 'front:interaction' %}">互动交流</a>
|
||||
</li>
|
||||
<!-- 消防科普 -->
|
||||
<li class="{% if request.resolver_match.url_name == 'science' %}active{% endif %}">
|
||||
<a href="{% url 'front:science' %}">消防科普</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</nav>
|
||||
|
||||
<!-- Banner -->
|
||||
{#<div class="d-xl-none" style="height: 50px;"></div>#}
|
||||
<div class="banner">
|
||||
<img src="{% static 'images/img.jpg' %}" alt="">
|
||||
</div>
|
||||
|
||||
<!-- 主体 -->
|
||||
<main class="container main" style="padding: 10px 5px !important;">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<!-- 底部 -->
|
||||
<footer class="footer">
|
||||
<div class=" d-none d-md-block">
|
||||
<div class="row"
|
||||
style="align-items: center;justify-content: space-evenly;padding: 15px 0;background-color: #F5F5F5;width: 100%!important;margin-left: 0 !important;gap: 10px;">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<img src="{% static "icons/link.svg" %}" alt="" style="width: 13px; height: 13px; object-fit: contain;">
|
||||
<a href="#"
|
||||
style="margin-left: 6px; text-decoration: none; color: #13227a; font-size: 14px; white-space: nowrap;">
|
||||
友情链接
|
||||
</a>
|
||||
</div>
|
||||
<div style="width: 280px;">
|
||||
<select class="form-control" id="exampleFormControlSelect1"
|
||||
x-placement="市政府网站"
|
||||
>
|
||||
<option>市政府网站</option>
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="display: block;width: 280px;">
|
||||
<select class="form-control" id="exampleFormControlSelect1"
|
||||
x-placement="国内消防站点"
|
||||
>
|
||||
<option>国内消防站点</option>
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-info">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6 text-center">
|
||||
<img src="{% static 'images/red.png' %}">
|
||||
<img class="footerImg" src="{% static 'images/jiucuo.png' %}">
|
||||
</div>
|
||||
<div class="col-lg-6 d-none d-xl-block">
|
||||
<p class="margin-top-20 font-size-14 line-height-2 footerColor">
|
||||
地址：某某市某某东路锦海·某某区大厦B栋14楼 邮编：xxxxxx
|
||||
</p>
|
||||
<p class="font-size-14 line-height-2 footerColor">
|
||||
服务热线：0791-00000000 传真：0791-00000000
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 text-center">
|
||||
<img src="/media/upload/images/2026/03/25/wechat.png" alt="">
|
||||
<img class="footerImg" src="/media/upload/images/2026/03/25/weibo.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="copyright text-center line-height-2 padding-bottom-20 padding-top-20">
|
||||
<p class="margin-top-20 font-size-14 line-height-2 footerColor">
|
||||
版权所有：长白山消防救援支队 备案证号：<a href="http://beian.miit.gov.cn/"
|
||||
target="_blank">辽ICP备xxxxxxxx号</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
|
||||
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,84 @@
|
||||
{% comment %}
|
||||
用法: {% include "includes/carousel.html" with carousel_id="mainBanner" slides=carousel_data height="500px" show_caption=True %}
|
||||
|
||||
参数说明:
|
||||
- carousel_id: 唯一ID，用于区分页面上的多个轮播图 (必填)
|
||||
- slides: 列表，包含字典 {'image_url': '...', 'title': '...', 'description': '...'} (必填)
|
||||
- height: 轮播图高度，默认 400px (可选)
|
||||
- show_caption: 是否显示文字描述，默认 True (可选)
|
||||
- object_fit: 图片填充模式，默认 'cover' (可选: cover, contain, fill)
|
||||
{% endcomment %}
|
||||
|
||||
{% load static %}
|
||||
|
||||
<div id="{{ carousel_id }}" class="carousel slide" data-ride="carousel">
|
||||
|
||||
<!-- 1. 指示器 (Indicators) -->
|
||||
{% if slides|length > 1 %}
|
||||
<ol class="carousel-indicators">
|
||||
{% for slide in slides %}
|
||||
<li data-target="#{{ carousel_id }}" data-slide-to="{{ forloop.counter0 }}"
|
||||
{% if forloop.first %}class="active"{% endif %}></li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
{% endif %}
|
||||
|
||||
<!-- 2. 图片区域 (Inner) -->
|
||||
<div class="carousel-inner" style="height: {{ height|default:'400px' }}; background: #f8f9fa;">
|
||||
{% for slide in slides %}
|
||||
<div class="carousel-item {% if forloop.first %}active{% endif %}" style="height: 100%;">
|
||||
|
||||
<!-- 图片 -->
|
||||
<img src="{{ slide.image_url }}"
|
||||
class="d-block w-100 h-100"
|
||||
alt="{{ slide.title|default:'Slide image' }}"
|
||||
style="object-fit: {{ object_fit|default:'cover' }}; width: 100%; height: 100%;">
|
||||
|
||||
<!-- 文字描述 (可选) -->
|
||||
{% if show_caption|default:True and slide.title %}
|
||||
<div class="carousel-caption d-none d-md-block"
|
||||
style="background: rgba(0,0,0,0.3); border-radius: 8px; padding: 10px 20px; bottom: 20px;">
|
||||
<h5 class="text-white text-shadow">{{ slide.title }}</h5>
|
||||
{% if slide.description %}
|
||||
<p class="text-white text-shadow">{{ slide.description }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% empty %}
|
||||
<!-- 空状态占位 -->
|
||||
<div class="carousel-item active" style="height: 100%; display: flex; align-items: center; justify-content: center; color: #999;">
|
||||
<span>暂无轮播图片</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- 3. 控制按钮 (Controls) - 仅当多于1张图时显示 -->
|
||||
{% if slides|length > 1 %}
|
||||
<button class="carousel-control-prev" type="button" data-target="#{{ carousel_id }}" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-target="#{{ carousel_id }}" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 可选：增加文字阴影以确保在亮色图片上可见 */
|
||||
.text-shadow {
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.6);
|
||||
}
|
||||
/* 修复 Bootstrap 默认 carousel-item 高度问题 */
|
||||
.carousel-inner {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.carousel-item {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!-- templates/components/_news_card.html -->
|
||||
{% load dict_tools %} {# 确保加载了过滤器，虽然这里可能不再需要 get_item，但保留以防万一 #}
|
||||
|
||||
<div class="news-card">
|
||||
<div class="custom-tabs-header">
|
||||
<div class="tabs-header-wrapper">
|
||||
<ul class="nav nav-tabs" id="newsTab_{{ unique_id }}" role="tablist">
|
||||
{# 核心修改：直接遍历 data 字典的 key #}
|
||||
{% for tab_id, items in data.items %}
|
||||
<li class="nav-item">
|
||||
{# 确定显示名称：如果有 labels 字典则取 labels.tab_id，否则直接用 tab_id (或进行capitalize处理) #}
|
||||
{% with display_name=tab_id %}
|
||||
{# 如果 default 返回的是英文 key，可以在这里做简单的格式化，比如首字母大写，或者保持原样 #}
|
||||
<a class="nav-link {% if forloop.first %}active{% endif %}"
|
||||
id="{{ tab_id }}-tab_{{ unique_id }}"
|
||||
data-toggle="tab"
|
||||
href="#{{ tab_id }}_{{ unique_id }}"
|
||||
role="tab"
|
||||
aria-selected="{% if forloop.first %}true{% else %}false{% endif %}">
|
||||
{{ display_name }}
|
||||
</a>
|
||||
{% endwith %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
|
||||
</ul>
|
||||
<!-- 右侧：更多链接 (独立于 ul) -->
|
||||
<a class="more-link-standalone"
|
||||
href="{{ more_url|default:'#' }}">
|
||||
更多 >
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content news-list-body" id="newsTabContent_{{ unique_id }}">
|
||||
|
||||
{# 再次遍历 data 生成内容面板 #}
|
||||
{% for tab_id, items in data.items %}
|
||||
<div class="tab-pane fade {% if forloop.first %}show active{% endif %}"
|
||||
id="{{ tab_id }}_{{ unique_id }}"
|
||||
role="tabpanel"
|
||||
aria-labelledby="{{ tab_id }}-tab_{{ unique_id }}">
|
||||
|
||||
<ul class="list-unstyled mb-0">
|
||||
{# items 就是当前 key 对应的列表数据，直接使用 #}
|
||||
{% if items %}
|
||||
{% for item in items %}
|
||||
<li class="news-item">
|
||||
<div class="news-title-wrapper">
|
||||
<span class="bullet-point"></span>
|
||||
<span class="news-title-text"
|
||||
title="{{ item.title }}">{{ item.title|truncatechars:30 }}</span>
|
||||
</div>
|
||||
<span class="news-date">{{ item.date }}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<li class="text-muted text-center py-2">暂无数据</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,45 @@
|
||||
{% load static %}
|
||||
<footer class="site-footer">
|
||||
<div class="footer-top">
|
||||
<div class="footer-links">
|
||||
<span class="link-title">友情链接：</span>
|
||||
<select name="links" id="links">
|
||||
<option value="">市政务网站</option>
|
||||
<option value="">国内消防站点</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<div class="footer-left">
|
||||
<div class="gov-logo">
|
||||
<img src="{% static 'images/gov_logo.png' %}" alt="政府机关">
|
||||
<img src="{% static 'images/search_logo.png' %}" alt="政府网站找错">
|
||||
</div>
|
||||
<div class="footer-text">
|
||||
<a href="#">关于我们</a>
|
||||
<a href="#">版权声明</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-center">
|
||||
<p><strong>政府服务热线：</strong> 0433-5312088</p>
|
||||
<p><strong>地址：</strong> 长白山保护开发区消防救援支队防火监督与政策法规科</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-right">
|
||||
<div class="qrcode">
|
||||
<img src="{% static 'images/wechat_qr.png' %}" alt="微信公众号">
|
||||
<p>微信公众号</p>
|
||||
</div>
|
||||
<div class="qrcode">
|
||||
<img src="{% static 'images/weibo_qr.png' %}" alt="政务微博">
|
||||
<p>政务微博</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-copyright">
|
||||
<p>版权所有：长白山消防救援支队 | 网站标识码：XXXXXX | 公网安备：XXXXXXXX</p>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -0,0 +1,176 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block title %}单位简介{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<nav aria-label="breadcrumb" style="margin-left: -10px;">
|
||||
<ol class="breadcrumb" style="background-color: transparent !important;padding-bottom: 0;">
|
||||
<li class="breadcrumb-item"><a href="#">网站首页</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">单位简介</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<div class="row" style="height: 500px;margin: auto auto 15px;">
|
||||
<div class="col-4">
|
||||
<div class="news-card" style="height: 100%;">
|
||||
<div class="custom-tabs-header">
|
||||
<div class="tabs-header-wrapper">
|
||||
<ul class="nav nav-tabs" id="newsTab_{{ unique_id }}" role="tablist">
|
||||
<li class="nav-item">
|
||||
{# 确定显示名称：如果有 labels 字典则取 labels.tab_id，否则直接用 tab_id (或进行capitalize处理) #}
|
||||
|
||||
{# 如果 default 返回的是英文 key，可以在这里做简单的格式化，比如首字母大写，或者保持原样 #}
|
||||
<a class="nav-link active"
|
||||
id="{{ tab_id }}-tab_{{ unique_id }}"
|
||||
data-toggle="tab"
|
||||
href="#"
|
||||
role="tab"
|
||||
aria-selected="true">
|
||||
领导信息
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content intro-text">
|
||||
|
||||
<p>
|
||||
长白山消防救援支队，是隶属于吉林省长白山保护开发区管理委员会的综合性消防救援队伍，负责辖区内的火灾预防、扑救和应急救援工作。
|
||||
</p>
|
||||
|
||||
<p><strong>官方信息与联系方式：</strong></p>
|
||||
<p>
|
||||
官方信息平台与联系方式：长白山消防救援支队的相关信息主要通过长白山保护开发区管理委员会官方网站的“政务公开
|
||||
- 机构设置”栏目进行发布。根据其 2025 年政府信息公开年度报告，公众可通过以下方式联系该支队：
|
||||
</p>
|
||||
|
||||
<div class="contact-info">
|
||||
<p><strong>联系电话/传真：</strong>0433-5312088</p>
|
||||
<p><strong>办公地址：</strong>长白山保护开发区消防救援支队防火监督与政策法规科 101
|
||||
室（邮编：133613）</p>
|
||||
<p><strong>电子邮箱：</strong>306098022@qq.com</p>
|
||||
</div>
|
||||
|
||||
<p><strong>主要职责与工作重点：</strong></p>
|
||||
<p>
|
||||
作为长白山地区的核心消防救援力量，该支队承担着“全灾种、大应急”的综合性救援任务，其工作重点紧密围绕辖区特点展开。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="news-card" style=" height: 500px;">
|
||||
<div class="custom-tabs-header">
|
||||
<div class="tabs-header-wrapper">
|
||||
<ul class="nav nav-tabs" id="newsTab_{{ unique_id }}" role="tablist">
|
||||
|
||||
<li class="nav-item">
|
||||
{# 确定显示名称：如果有 labels 字典则取 labels.tab_id，否则直接用 tab_id (或进行capitalize处理) #}
|
||||
|
||||
{# 如果 default 返回的是英文 key，可以在这里做简单的格式化，比如首字母大写，或者保持原样 #}
|
||||
<a class="nav-link active"
|
||||
id="{{ tab_id }}-tab_{{ unique_id }}"
|
||||
data-toggle="tab"
|
||||
href="#"
|
||||
role="tab"
|
||||
aria-selected="true">
|
||||
单位简介
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content intro-text">
|
||||
|
||||
<p>
|
||||
长白山消防救援支队，是隶属于吉林省长白山保护开发区管理委员会的综合性消防救援队伍，负责辖区内的火灾预防、扑救和应急救援工作。
|
||||
</p>
|
||||
|
||||
<p><strong>官方信息与联系方式：</strong></p>
|
||||
<p>
|
||||
官方信息平台与联系方式：长白山消防救援支队的相关信息主要通过长白山保护开发区管理委员会官方网站的“政务公开
|
||||
- 机构设置”栏目进行发布。根据其 2025 年政府信息公开年度报告，公众可通过以下方式联系该支队：
|
||||
</p>
|
||||
|
||||
<div class="contact-info">
|
||||
<p><strong>联系电话/传真：</strong>0433-5312088</p>
|
||||
<p><strong>办公地址：</strong>长白山保护开发区消防救援支队防火监督与政策法规科 101
|
||||
室（邮编：133613）</p>
|
||||
<p><strong>电子邮箱：</strong>306098022@qq.com</p>
|
||||
</div>
|
||||
|
||||
<p><strong>主要职责与工作重点：</strong></p>
|
||||
<p>
|
||||
作为长白山地区的核心消防救援力量，该支队承担着“全灾种、大应急”的综合性救援任务，其工作重点紧密围绕辖区特点展开。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="height: 300px;margin: auto auto 15px;">
|
||||
<div class="col-12">
|
||||
<div class="news-card">
|
||||
<div class="custom-tabs-header">
|
||||
<div class="tabs-header-wrapper">
|
||||
<ul class="nav nav-tabs" id="newsTab_{{ unique_id }}" role="tablist">
|
||||
|
||||
<li class="nav-item">
|
||||
{# 确定显示名称：如果有 labels 字典则取 labels.tab_id，否则直接用 tab_id (或进行capitalize处理) #}
|
||||
|
||||
{# 如果 default 返回的是英文 key，可以在这里做简单的格式化，比如首字母大写，或者保持原样 #}
|
||||
<a class="nav-link active"
|
||||
id="{{ tab_id }}-tab_{{ unique_id }}"
|
||||
data-toggle="tab"
|
||||
href="#"
|
||||
role="tab"
|
||||
aria-selected="true">
|
||||
组织结构
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content news-list-body" id="newsTabContent_{{ unique_id }}">
|
||||
<ul class="list-unstyled">
|
||||
{# items 就是当前 key 对应的列表数据，直接使用 #}
|
||||
{% if items %}
|
||||
{% for item in items %}
|
||||
<li class="news-item">
|
||||
<div class="news-title-wrapper">
|
||||
<span class="bullet-point"></span>
|
||||
<span class="news-title-text"
|
||||
title="{{ item.title }}">{{ item.title|truncatechars:30 }}</span>
|
||||
</div>
|
||||
<span class="news-date">{{ item.date }}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<li class="text-muted text-center py-2">暂无数据</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.intro-text {
|
||||
font-size: 13px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,21 @@
|
||||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>长白山消防救援支队</title>
|
||||
<link rel="stylesheet" href="{% static 'css/style.css' %}">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部 -->
|
||||
<header class="top-header">
|
||||
<div class="container flex" >
|
||||
<img src="{% static 'images/logo.png' %}" class="logo" alt="">
|
||||
<div>
|
||||
<h1>长白山消防救援支队</h1>
|
||||
<p>CHANGBAI MOUNTAIN FIRE AND RESCUE BRIGADE</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,74 @@
|
||||
<!-- 这个模板继承自 base.html -->
|
||||
{% extends 'base.html' %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}首页 - 长白山消防救援支队{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- 顶部横幅 -->
|
||||
<div class="row d-none d-md-block">
|
||||
<div class="col-12">
|
||||
<img src="{% static 'images/slogan_bg.png' %}" alt="标语背景"
|
||||
style="object-fit: fill;max-width: 1160px;width: 100%;">
|
||||
{# <h2>对党忠诚 纪律严明 赴汤蹈火 竭诚为民</h2>#}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row d-none d-md-block" style="padding:0 5px;">
|
||||
<div class="col-12 date-bar">
|
||||
<span style="font-size: 14px;padding-left: 25px;">{{ time_str }}</span>
|
||||
<div class="user-icons">
|
||||
<form class="search-form">
|
||||
<div class="search-wrapper">
|
||||
<input type="text" class="search-input">
|
||||
<button type="submit" class="search-btn">
|
||||
<img src="{% static "icons/search.svg" %}" alt="">
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<img src="{% static "icons/user.svg" %}" alt="">
|
||||
<img src="{% static "icons/edit.svg" %}" alt="">
|
||||
<img src="{% static "icons/sina.svg" %}" alt="">
|
||||
<img src="{% static "icons/wechat.svg" %}" alt="">
|
||||
<img src="{% static "icons/douyin.svg" %}" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 主要内容区 -->
|
||||
<!-- 左侧大图 -->
|
||||
<div class="row" style="height: 300px;">
|
||||
<div class="col-md-6 col-sm-12">
|
||||
{% include 'components/_carousel.html' with carousel_id=carousel.key slides=carousel.data height="300px" %}
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12">
|
||||
{% include 'components/_news_card.html' with data=news_data.data unique_id=news_data.key %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 广告横幅 -->
|
||||
<div class="ad-banner row">
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<img class="ad-item" src="/media/upload/images/2026/03/25/img.png" alt="我为十五五规划献策">
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<img class="ad-item" src="/media/upload/images/2026/03/25/img_1.png" alt="精彩火焰蓝">
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<img class="ad-item" src="/media/upload/images/2026/03/25/img_2.png" alt="电动自行车安全">
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<img class="ad-item" src="/media/upload/images/2026/03/25/img_3.png" alt="消防安全培训">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
{% for section in section_data %}
|
||||
<div class="col-md-6 col-sm-12" style="margin: 15px auto">
|
||||
{% include 'components/_news_card.html' with data=section.data unique_id=section.key %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,19 @@
|
||||
{% extends 'base.html' %}
|
||||
{% block title %}信息公开 - 长白山消防救援支队{% endblock %}
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<nav aria-label="breadcrumb" style="margin-left: -10px;">
|
||||
<ol class="breadcrumb" style="background-color: transparent !important;padding-bottom: 0;">
|
||||
<li class="breadcrumb-item"><a href="#">网站首页</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">信息公开</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<div class="row" style="margin: 15px auto ">
|
||||
{% for section in sections %}
|
||||
<div class="col-6" style="margin: auto auto 15px">
|
||||
{% include 'components/_news_card.html' with data=section.data unique_id=section.key %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,168 @@
|
||||
{% extends 'base.html' %}
|
||||
{% block title %}互动交流 - 长白山消防救援支队{% endblock %}
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<nav aria-label="breadcrumb" style="margin-left: -10px;">
|
||||
<ol class="breadcrumb" style="background-color: transparent !important;padding-bottom: 0;">
|
||||
<li class="breadcrumb-item"><a href="#">网站首页</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">互动交流</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row" style="height: 100%;margin: 15px auto;margin-right: 0 !important;">
|
||||
<div class="col-3">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item" style="background: #23418A; color: #f5f5f5">
|
||||
<h5>互动交流</h5>
|
||||
</li>
|
||||
{% for sec in sections %}
|
||||
<li class="list-group-item">
|
||||
<a href="?q={{ sec }}" style="color: #1d2124;text-decoration: none;"> {{ sec }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="col-9" style="width: 100%;padding-right: 0 !important;">
|
||||
<!-- 组件开始 -->
|
||||
<div class="section-header-card">
|
||||
|
||||
<!-- 左侧文字内容 -->
|
||||
<div class="header-content">
|
||||
<div class="header-title">
|
||||
<span class="icon-circle"></span>
|
||||
{{ q }}
|
||||
</div>
|
||||
<hr class="divider-line">
|
||||
</div>
|
||||
|
||||
{# <!-- 右侧装饰色块 -->#}
|
||||
{# <div class="right-decoration">#}
|
||||
{# <div class="deco-top"></div>#}
|
||||
{# <div class="deco-bottom"></div>#}
|
||||
{# </div>#}
|
||||
<ul class="list-unstyled mb-0" style="width: 100%;padding-right: 38px; margin-left: 0;">
|
||||
{# items 就是当前 key 对应的列表数据，直接使用 #}
|
||||
{% if data_list %}
|
||||
{% for item in data_list %}
|
||||
<li class="news-item">
|
||||
<div class="news-title-wrapper">
|
||||
<span class="bullet-point"></span>
|
||||
<span class="news-title-text"
|
||||
title="{{ item.title }}">{{ item.title|truncatechars:30 }}</span>
|
||||
</div>
|
||||
<span class="news-date">{{ item.date }}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<li class="text-muted text-center py-2">暂无数据</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 组件结束 -->
|
||||
<div style="display: flex; justify-content: center; margin-top: 10px;margin-bottom: -5px;">
|
||||
<ul class="pagination" style="margin: auto;">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
|
||||
|
||||
/* --- 组件核心样式 --- */
|
||||
.section-header-card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
{#max-width: 800px; /* 模拟图片中的长宽比 */#} min-height: 720px; /* 设置一个保底高度 */
|
||||
height: auto; /* 高度随内容增加而增加 */
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px; /* 大圆角 */
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* 柔和阴影 */
|
||||
overflow: hidden; /* 确保右侧装饰块不溢出圆角 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-left: 30px;
|
||||
{#justify-content: space-between;#}
|
||||
}
|
||||
|
||||
/* 左侧内容区域 */
|
||||
.header-content {
|
||||
z-index: 2; /* 确保内容在装饰块之上 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 标题部分 */
|
||||
.header-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #23408A; /* 深蓝色文字 */
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 空心圆圈图标 */
|
||||
.icon-circle {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 2px solid #23408A; /* 边框颜色同文字 */
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
box-sizing: border-box; /* 确保边框包含在宽高内 */
|
||||
}
|
||||
|
||||
/* 分割线 */
|
||||
.divider-line {
|
||||
width: 95%; /* 线条长度，不完全贯穿 */
|
||||
height: 2px;
|
||||
background-color: #23408A; /* 线条颜色比文字稍浅一点或保持一致 */
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* --- 右侧装饰块 --- */
|
||||
.right-decoration {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 60px; /* 装饰块宽度 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 上方深色块 */
|
||||
.deco-top {
|
||||
flex: 1; /* 占据上半部分 */
|
||||
background-color: #5a6da3; /* 深蓝灰色 */
|
||||
min-height: 50%;
|
||||
}
|
||||
|
||||
/* 下方浅色块 */
|
||||
.deco-bottom {
|
||||
flex: 1; /* 占据下半部分 */
|
||||
background-color: #eef4ff; /* 极浅的蓝色 */
|
||||
min-height: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,22 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block title %}新闻中心{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
|
||||
<nav aria-label="breadcrumb" style="margin-left: -10px;">
|
||||
<ol class="breadcrumb" style="background-color: transparent !important;padding-bottom: 0;">
|
||||
<li class="breadcrumb-item"><a href="#">网站首页</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">信息公开</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<div style="margin: 0 5px;">
|
||||
{% for section in sections %}
|
||||
<div class="row" style="margin: auto auto 15px;">
|
||||
{% include 'components/_news_card.html' with data=section.data unique_id=section.key %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,23 @@
|
||||
{% extends 'base.html' %}
|
||||
{% block title %}党建引领 - 长白山消防救援支队{% endblock %}
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<nav aria-label="breadcrumb" style="margin-left: -10px;">
|
||||
<ol class="breadcrumb" style="background-color: transparent !important;padding-bottom: 0;">
|
||||
<li class="breadcrumb-item"><a href="#">网站首页</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">党建引领</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<div class="row" style="margin: auto;">
|
||||
{% for section in sections %}
|
||||
<div class="col-6" style="margin: auto auto 15px;">
|
||||
{% if forloop.counter == 2 %}
|
||||
{% include 'components/_carousel.html' with carousel_id=section.key slides=section.data height="300px" %}
|
||||
{% else %}
|
||||
{% include 'components/_news_card.html' with data=section.data unique_id=section.key %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,168 @@
|
||||
{% extends 'base.html' %}
|
||||
{% block title %}消防科普 - 长白山消防救援支队{% endblock %}
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<nav aria-label="breadcrumb" style="margin-left: -10px;">
|
||||
<ol class="breadcrumb" style="background-color: transparent !important;padding-bottom: 0;">
|
||||
<li class="breadcrumb-item"><a href="#">网站首页</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">消防科普</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row" style="height: 100%;margin: 15px auto;margin-right: 0 !important;">
|
||||
<div class="col-3">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item" style="background: #23418A; color: #f5f5f5">
|
||||
<h5>消防科普</h5>
|
||||
</li>
|
||||
{% for sec in sections %}
|
||||
<li class="list-group-item">
|
||||
<a href="?q={{ sec }}" style="color: #1d2124;text-decoration: none;"> {{ sec }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="col-9" style="width: 100%;padding-right: 0 !important;">
|
||||
<!-- 组件开始 -->
|
||||
<div class="section-header-card">
|
||||
|
||||
<!-- 左侧文字内容 -->
|
||||
<div class="header-content">
|
||||
<div class="header-title">
|
||||
<span class="icon-circle"></span>
|
||||
{{ q }}
|
||||
</div>
|
||||
<hr class="divider-line">
|
||||
</div>
|
||||
|
||||
{# <!-- 右侧装饰色块 -->#}
|
||||
{# <div class="right-decoration">#}
|
||||
{# <div class="deco-top"></div>#}
|
||||
{# <div class="deco-bottom"></div>#}
|
||||
{# </div>#}
|
||||
<ul class="list-unstyled mb-0" style="width: 100%;padding-right: 38px; margin-left: 0;">
|
||||
{# items 就是当前 key 对应的列表数据，直接使用 #}
|
||||
{% if data_list %}
|
||||
{% for item in data_list %}
|
||||
<li class="news-item">
|
||||
<div class="news-title-wrapper">
|
||||
<span class="bullet-point"></span>
|
||||
<span class="news-title-text"
|
||||
title="{{ item.title }}">{{ item.title|truncatechars:30 }}</span>
|
||||
</div>
|
||||
<span class="news-date">{{ item.date }}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<li class="text-muted text-center py-2">暂无数据</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 组件结束 -->
|
||||
<div style="display: flex; justify-content: center; margin-top: 10px;margin-bottom: -5px;">
|
||||
<ul class="pagination" style="margin: auto;">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
|
||||
|
||||
/* --- 组件核心样式 --- */
|
||||
.section-header-card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
{#max-width: 800px; /* 模拟图片中的长宽比 */#} min-height: 720px; /* 设置一个保底高度 */
|
||||
height: auto; /* 高度随内容增加而增加 */
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px; /* 大圆角 */
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* 柔和阴影 */
|
||||
overflow: hidden; /* 确保右侧装饰块不溢出圆角 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-left: 30px;
|
||||
{#justify-content: space-between;#}
|
||||
}
|
||||
|
||||
/* 左侧内容区域 */
|
||||
.header-content {
|
||||
z-index: 2; /* 确保内容在装饰块之上 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 标题部分 */
|
||||
.header-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #23408A; /* 深蓝色文字 */
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 空心圆圈图标 */
|
||||
.icon-circle {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 2px solid #23408A; /* 边框颜色同文字 */
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
box-sizing: border-box; /* 确保边框包含在宽高内 */
|
||||
}
|
||||
|
||||
/* 分割线 */
|
||||
.divider-line {
|
||||
width: 95%; /* 线条长度，不完全贯穿 */
|
||||
height: 2px;
|
||||
background-color: #23408A; /* 线条颜色比文字稍浅一点或保持一致 */
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* --- 右侧装饰块 --- */
|
||||
.right-decoration {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 60px; /* 装饰块宽度 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 上方深色块 */
|
||||
.deco-top {
|
||||
flex: 1; /* 占据上半部分 */
|
||||
background-color: #5a6da3; /* 深蓝灰色 */
|
||||
min-height: 50%;
|
||||
}
|
||||
|
||||
/* 下方浅色块 */
|
||||
.deco-bottom {
|
||||
flex: 1; /* 占据下半部分 */
|
||||
background-color: #eef4ff; /* 极浅的蓝色 */
|
||||
min-height: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,169 @@
|
||||
{% extends 'base.html' %}
|
||||
{% block title %}办事服务 - 长白山消防救援支队{% endblock %}
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
|
||||
<nav aria-label="breadcrumb" style="margin-left: -10px;">
|
||||
<ol class="breadcrumb" style="background-color: transparent !important;padding-bottom: 0;">
|
||||
<li class="breadcrumb-item"><a href="#">网站首页</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">办事服务</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row" style="height: 100%;margin: auto;margin-right: 0 !important;">
|
||||
<div class="col-3">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item" style="background: #23418A; color: #f5f5f5">
|
||||
<h5>办事服务</h5>
|
||||
</li>
|
||||
{% for sec in sections %}
|
||||
<li class="list-group-item">
|
||||
<a href="?q={{ sec }}" style="color: #1d2124;text-decoration: none;"> {{ sec }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="col-9" style="width: 100%;padding-right: 0 !important;">
|
||||
<!-- 组件开始 -->
|
||||
<div class="section-header-card">
|
||||
|
||||
<!-- 左侧文字内容 -->
|
||||
<div class="header-content">
|
||||
<div class="header-title">
|
||||
<span class="icon-circle"></span>
|
||||
{{ q }}
|
||||
</div>
|
||||
<hr class="divider-line">
|
||||
</div>
|
||||
|
||||
{# <!-- 右侧装饰色块 -->#}
|
||||
{# <div class="right-decoration">#}
|
||||
{# <div class="deco-top"></div>#}
|
||||
{# <div class="deco-bottom"></div>#}
|
||||
{# </div>#}
|
||||
<ul class="list-unstyled mb-0" style="width: 100%;padding-right: 38px; margin-left: 0;">
|
||||
{# items 就是当前 key 对应的列表数据，直接使用 #}
|
||||
{% if data_list %}
|
||||
{% for item in data_list %}
|
||||
<li class="news-item">
|
||||
<div class="news-title-wrapper">
|
||||
<span class="bullet-point"></span>
|
||||
<span class="news-title-text"
|
||||
title="{{ item.title }}">{{ item.title|truncatechars:30 }}</span>
|
||||
</div>
|
||||
<span class="news-date">{{ item.date }}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<li class="text-muted text-center py-2">暂无数据</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 组件结束 -->
|
||||
<div style="display: flex; justify-content: center; margin-top: 10px;margin-bottom: -5px;">
|
||||
<ul class="pagination" style="margin: 15px auto;">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
|
||||
|
||||
/* --- 组件核心样式 --- */
|
||||
.section-header-card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
{#max-width: 800px; /* 模拟图片中的长宽比 */#} min-height: 720px; /* 设置一个保底高度 */
|
||||
height: auto; /* 高度随内容增加而增加 */
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px; /* 大圆角 */
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* 柔和阴影 */
|
||||
overflow: hidden; /* 确保右侧装饰块不溢出圆角 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-left: 30px;
|
||||
{#justify-content: space-between;#}
|
||||
}
|
||||
|
||||
/* 左侧内容区域 */
|
||||
.header-content {
|
||||
z-index: 2; /* 确保内容在装饰块之上 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 标题部分 */
|
||||
.header-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #23408A; /* 深蓝色文字 */
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 空心圆圈图标 */
|
||||
.icon-circle {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 2px solid #23408A; /* 边框颜色同文字 */
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
box-sizing: border-box; /* 确保边框包含在宽高内 */
|
||||
}
|
||||
|
||||
/* 分割线 */
|
||||
.divider-line {
|
||||
width: 95%; /* 线条长度，不完全贯穿 */
|
||||
height: 2px;
|
||||
background-color: #23408A; /* 线条颜色比文字稍浅一点或保持一致 */
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* --- 右侧装饰块 --- */
|
||||
.right-decoration {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 60px; /* 装饰块宽度 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 上方深色块 */
|
||||
.deco-top {
|
||||
flex: 1; /* 占据上半部分 */
|
||||
background-color: #5a6da3; /* 深蓝灰色 */
|
||||
min-height: 50%;
|
||||
}
|
||||
|
||||
/* 下方浅色块 */
|
||||
.deco-bottom {
|
||||
flex: 1; /* 占据下半部分 */
|
||||
background-color: #eef4ff; /* 极浅的蓝色 */
|
||||
min-height: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,35 @@
|
||||
{% load static %}
|
||||
<header class="site-header">
|
||||
<div class="header-top">
|
||||
<div class="logo-container">
|
||||
<img src="{% static 'images/logo.png' %}" alt="长白山消防救援支队" class="logo">
|
||||
<h1>长白山消防救援支队</h1>
|
||||
<p>CHANGBAI MOUNTAIN FIRE AND RESCUE BRIGADE</p>
|
||||
</div>
|
||||
<div class="top-links">
|
||||
<a href="#" aria-label="搜索"><i class="icon-search"></i></a>
|
||||
<a href="#" aria-label="用户中心"><i class="icon-user"></i></a>
|
||||
<a href="#" aria-label="消息"><i class="icon-message"></i></a>
|
||||
<a href="#" aria-label="登录"><i class="icon-login"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<nav class="main-navigation">
|
||||
<ul class="nav-list">
|
||||
<li><a href="{% url 'index' %}" class="{% if request.resolver_match.url_name == 'index' %}active{% endif %}">网站首页</a></li>
|
||||
<li><a href="{% url 'about' %}" class="{% if request.resolver_match.url_name == 'about' %}active{% endif %}">单位简介</a></li>
|
||||
<li><a href="{% url 'news' %}" class="{% if request.resolver_match.url_name == 'news' %}active{% endif %}">新闻中心</a></li>
|
||||
<li><a href="{% url 'info' %}" class="{% if request.resolver_match.url_name == 'info' %}active{% endif %}">信息公开</a></li>
|
||||
<li><a href="{% url 'service' %}" class="{% if request.resolver_match.url_name == 'service' %}active{% endif %}">办事服务</a></li>
|
||||
<li><a href="{% url 'party' %}" class="{% if request.resolver_match.url_name == 'party' %}active{% endif %}">党建引领</a></li>
|
||||
<li><a href="{% url 'interaction' %}" class="{% if request.resolver_match.url_name == 'interaction' %}active{% endif %}">互动交流</a></li>
|
||||
<li><a href="{% url 'science' %}" class="{% if request.resolver_match.url_name == 'science' %}active{% endif %}">消防科普</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- 轮播图/大背景图 -->
|
||||
<div class="hero-banner">
|
||||
<img src="{% static 'images/banner.jpg' %}" alt="雪地消防员" class="banner-img">
|
||||
</div>
|
||||
</header>
|
||||
@@ -0,0 +1,11 @@
|
||||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>长白山消防支队</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user