283 lines
13 KiB
HTML
283 lines
13 KiB
HTML
{% extends 'base.html' %}
|
|
{% block title %}{{ main_section.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">{{ main_section.title }}</li>
|
|
<li class="breadcrumb-item active" aria-current="page">{{ sub_section.title }}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<div class="row" style="height: 100%;margin: 15px auto;margin-right: 0 !important;">
|
|
<div class="col-3">
|
|
<ul class="list-group">
|
|
|
|
{% if request.path|slice:":6" == '/news/' %}
|
|
<li class="list-group-item" style="background: #23418A; color: #f5f5f5">
|
|
<a href="{% url "front:news" %}"
|
|
style="color: #F5F5F5;text-decoration: none;">
|
|
<h5 style="margin: 0; padding: 0; line-height: 1.2;">{{ main_section.title }}</h5>
|
|
</a>
|
|
</li>
|
|
{% for sec in sections %}
|
|
<!-- 核心修改：判断当前路径是否包含该子栏目的 code -->
|
|
{% if request.path|slice:":6" == '/news/' and sec.code in request.path %}
|
|
<li class="list-group-item" style="background: #e9ecef;"> <!-- 选中样式：灰色背景 -->
|
|
<a href="{% url "front:news_list" sub=sec.code %}"
|
|
style="color: #23418A; text-decoration: none; font-weight: bold;"> {{ sec.title }}</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="list-group-item">
|
|
<a href="{% url "front:news_list" sub=sec.code %}"
|
|
style="color: #1d2124; text-decoration: none;"> {{ sec.title }}</a>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% else %}
|
|
<li class="list-group-item" style="background: #23418A; color: #f5f5f5">
|
|
<a href="{% url "front:main_list" main=main_section.code %}"
|
|
style="color: #F5F5F5;text-decoration: none;">
|
|
<h5 style="margin: 0; padding: 0; line-height: 1.2;">{{ main_section.title }}</h5>
|
|
</a>
|
|
</li>
|
|
{% for sec in sections %}
|
|
{% if sec.code in request.path %}
|
|
<li class="list-group-item" style="background: #e9ecef;">
|
|
<a href="{% url "front:sub_list" main=main_section.code sub=sec.code %}"
|
|
style="color: #23418A; text-decoration: none; font-weight: bold;"> {{ sec.title }}</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="list-group-item">
|
|
<a href="{% url "front:sub_list" main=main_section.code sub=sec.code %}"
|
|
style="color: #1d2124; text-decoration: none;"> {{ sec.title }}</a>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
</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>
|
|
{{ sub_section.title | default:main_section.title }}
|
|
</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">
|
|
{# items 就是当前 key 对应的列表数据，直接使用 #}
|
|
{% if articles %}
|
|
{% for item in articles %}
|
|
<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.created_at }}</span>
|
|
</li>
|
|
{% endfor %}
|
|
{% else %}
|
|
<li class="text-muted text-center py-2">暂无数据</li>
|
|
{% endif %}
|
|
</ul>
|
|
|
|
|
|
<!-- 组件结束 -->
|
|
</div>
|
|
<ul class="pagination pagination-sm pagination-wrapper">
|
|
<li class="page-item disabled">
|
|
<a class="page-link">共 {{ articles.paginator.count }} 条</a>
|
|
</li>
|
|
<!-- 首页 -->
|
|
{% if articles.has_previous %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="?page=1">首页</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="page-item disabled">
|
|
<span class="page-link">首页</span>
|
|
</li>
|
|
{% endif %}
|
|
|
|
<!-- 上一页 -->
|
|
{% if articles.has_previous %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="?page={{ articles.previous_page_number }}"
|
|
aria-label="Previous">
|
|
<span>上一页</span>
|
|
</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="page-item disabled">
|
|
<span class="page-link">上一页</span>
|
|
</li>
|
|
{% endif %}
|
|
|
|
{# 页码核心逻辑 #}
|
|
{% for i in articles.paginator.page_range %}
|
|
{% if articles.number == i %}
|
|
{# 当前页 #}
|
|
<li class="page-item active">
|
|
<span class="page-link">{{ i }}</span>
|
|
</li>
|
|
{% else %}
|
|
{# 显示规则：第1-2页 | 当前页前后各2页 | 最后2页 #}
|
|
{% if i == 1 or i == 2 or i == articles.paginator.num_pages or i == articles.paginator.num_pages|add:"-1" or i >= articles.number|add:"-2" and i <= articles.number|add:"2" %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="?page={{ i }}">{{ i }}</a>
|
|
</li>
|
|
{% elif i == articles.number|add:"-3" or i == articles.number|add:"3" %}
|
|
{# 省略号只出现一次 #}
|
|
<li class="page-item disabled">
|
|
<span class="page-link">...</span>
|
|
</li>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
<!-- 下一页 -->
|
|
{% if articles.has_next %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="?page={{ articles.next_page_number }}" aria-label="Next">
|
|
<span>下一页</span>
|
|
</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="page-item disabled">
|
|
<span class="page-link">下一页</span>
|
|
</li>
|
|
{% endif %}
|
|
|
|
<!-- 尾页 -->
|
|
{% if articles.has_next %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="?page={{ articles.paginator.num_pages }}"
|
|
aria-label="Last">
|
|
<span>尾页</span>
|
|
</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="page-item disabled">
|
|
<span class="page-link">尾页</span>
|
|
</li>
|
|
{% endif %}
|
|
{# 6. 跳转功能 (模拟图片样式：前往 [输入框] 页) #}
|
|
{# <li class="page-item">#}
|
|
{# <span class="page-link pagination-info">前往</span>#}
|
|
{# </li>#}
|
|
{# <li class="page-item">#}
|
|
{# <input class="page-jump-input" id="gotoPageInput" type="number" min="1"#}
|
|
{# max="{{ articles.paginator.num_pages }}" placeholder="页">#}
|
|
{# </li>#}
|
|
{# <li class="page-item d-none"> {# 这里隐藏一个提交按钮，主要靠JS触发 #}
|
|
{# <button id="jumpBtn" class="page-link" style="display: none;">确定</button>#}
|
|
{# </li>#}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
|
|
|
|
/* --- 组件核心样式 --- */
|
|
.section-header-card {
|
|
position: relative;
|
|
width: 100%;
|
|
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;
|
|
}
|
|
|
|
/* 左侧内容区域 */
|
|
.header-content {
|
|
z-index: 2; /* 确保内容在装饰块之上 */
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.list-unstyled {
|
|
flex-grow: 1; /* 使列表占满剩余的空间 */
|
|
padding-right: 38px;
|
|
margin-left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.pagination-wrapper {
|
|
display: flex;
|
|
justify-content: end; /* 分页内容左右对齐 */
|
|
align-items: center;
|
|
margin: 10px auto -20px;
|
|
|
|
padding: 5px 0;
|
|
border-radius: 12px; /* 大圆角 */
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important; /* 柔和阴影 */
|
|
}
|
|
|
|
.page-link {
|
|
border: none !important;
|
|
color: #6C757D;
|
|
}
|
|
|
|
.page-item.active .page-link {
|
|
background-color: #23408A;
|
|
border-color: #23408A;
|
|
}
|
|
|
|
/* 标题部分 */
|
|
.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;
|
|
}
|
|
|
|
|
|
</style>
|
|
{% endblock %}
|