ngfchl/server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update. 完成分页显示，清理部分冗余代码

Browse Source
This commit is contained in:
ngfchl
2026-04-01 20:49:04 +08:00
parent 414dc0ee95
commit 43f4bd0165
4 changed files with 198 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/front/list.html
+118 -40
View File
@@ -39,7 +39,7 @@
<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>{{ main_section.title }}</h5>
<h5 style="margin: 0; padding: 0; line-height: 1.2;">{{ main_section.title }}</h5>
</a>
</li>
{% for sec in sections %}
@@ -77,7 +77,7 @@
{# <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;">
<ul class="list-unstyled mb-0">
{# items 就是当前 key 对应的列表数据，直接使用 #}
{% if articles %}
{% for item in articles %}
@@ -94,25 +94,99 @@
<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;">
<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="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<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>
<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>
{% 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="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<a class="page-link" href="?page={{ articles.next_page_number }}" aria-label="Next">
<span>下一页</span>
</a>
</li>
</ul>
</div>
{% 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>
@@ -123,7 +197,7 @@
.section-header-card {
position: relative;
width: 100%;
{#max-width: 800px; /* 模拟图片中的长宽比 */#} min-height: 720px; /* 设置一个保底高度 */
min-height: 720px; /* 设置一个保底高度 */
height: auto; /* 高度随内容增加而增加 */
background-color: #ffffff;
border-radius: 12px; /* 大圆角 */
@@ -133,7 +207,6 @@
flex-direction: column;
align-items: center;
padding-left: 30px;
{#justify-content: space-between;#}
}
/* 左侧内容区域 */
@@ -145,6 +218,35 @@
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;
@@ -175,30 +277,6 @@
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 %}