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 18:54:42 +08:00
parent 777ca50328
commit 414dc0ee95
23 changed files with 359 additions and 707 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/components/_news_card.html
+1 -1
View File
@@ -47,7 +47,7 @@
{% if items %}
{% for item in items %}
<li class="news-item">
<a href="{% url "front:article_detail" pk=item.id %}"
<a href="{% url route|default:"front:article_detail" pk=item.id %}"
style="text-decoration: none;color: black;">
<div class="news-title-wrapper">
templates/components/main_menu.html
+5 -4
View File
@@ -1,9 +1,10 @@
{% load static %}
{% for menu in menus %}
<!-- 新闻中心 -->
<li class="{% if request.resolver_match.kwargs.url == menu.url %}active{% endif %}">
<a href="{% url 'front:menu' main=menu.code %}">{{ menu.title }}</a>
</li>
<!-- 新闻中心 -->
<li class="{% if menu.code in request.path %}active{% endif %}">
<a href="{% url 'front:menu' main=menu.code %}">{{ menu.title }}</a>
</li>
{% endfor %}
templates/front/details/article.html
+28 -25
View File
@@ -24,7 +24,8 @@
<h1 class="fw-bold mb-3">{{ article.title }}</h1>
<div class="text-muted small">
<span class="me-3"><i class="bi bi-clock"></i> {{ article.created_at|date:"Y-m-d H:i" }}</span>
<span class="me-3"><i class="bi bi-person"></i> {{ article.author.username|default:"管理员" }}</span>
<span class="me-3"><i
class="bi bi-person"></i> {{ article.author.username|default:"管理员" }}</span>
<span><i class="bi bi-eye"></i> 阅读数：{{ article.views|default:0 }}</span>
</div>
</div>
@@ -32,7 +33,8 @@
<!-- 封面图 (如果有) -->
{% if article.cover %}
<div class="mb-4 text-center">
<img src="{{ article.cover.url }}" alt="{{ article.title }}" class="img-fluid rounded shadow-sm" style="max-height: 400px; width: 100%; object-fit: cover;">
<img src="{{ article.cover.url }}" alt="{{ article.title }}" class="img-fluid rounded shadow-sm"
style="max-height: 400px; width: 100%; object-fit: cover;">
</div>
{% endif %}
@@ -40,32 +42,33 @@
<div class="article-content mb-5" style="line-height: 1.8; font-size: 1.1rem; color: #333;">
{{ article.content|safe }}
</div>
<!-- 3. 附件列表 (如果有附件) -->
{% if article.attachments_list %}
<div class="card bg-light mb-5">
<div class="card-header">
<i class="bi bi-paperclip"></i> 相关附件
</div>
<ul class="list-group list-group-flush">
{% for attachment in article.attachments_list %}
<li class="list-group-item bg-transparent">
<a href="{{ attachment.file.url }}" target="_blank" class="text-decoration-none">
<i class="bi bi-file-earmark-text"></i>
<!-- 截取文件名显示，防止太长 -->
{{ attachment.file.name|slice:"30:" }}
</a>
<span class="text-muted small float-end">
{% with attachments=article.attachments.all %}
<!-- 3. 附件列表 (如果有附件) -->
{% if attachments %}
<div class="card bg-light mb-5">
<div class="card-header">
<i class="bi bi-paperclip"></i> 相关附件
</div>
<ul class="list-group list-group-flush">
{% for attachment in attachments %}
<li class="list-group-item bg-transparent">
<a href="{{ attachment.file.url }}" target="_blank"
class="text-decoration-none">
<i class="bi bi-file-earmark-text"></i>
<!-- 截取文件名显示，防止太长 -->
{{ attachment.file.name|slice:"30:" }}
</a>
<span class="text-muted small float-end">
{{ attachment.uploaded_at|date:"Y-m-d" }}
</span>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endwith %}
<!-- 4. 底部操作栏 -->
<div class="d-grid gap-4 d-sm-flex justify-content-sm-center border-top pt-4 mt-5">
<div class="d-grid gap-4 d-sm-flex justify-content-sm-center border-top pt-4 mt-5" style="gap: 30px;">
<a href="javascript:history.back()" class="btn btn-outline-secondary btn px-3">
<i class="bi bi-arrow-left"></i> 返回上一页
</a>
templates/front/details/news.html
+58 -9
View File
@@ -1,10 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% extends 'base.html' %}
</body>
</html>
{% block title %}{{ article.section.title }} - 长白山消防救援支队{% endblock %}
{% block content %}
<div class="container mt-4">
<!-- 1. 面包屑导航 -->
<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"><a href="#">{{ article.section.parent.title }}</a></li>
<li class="breadcrumb-item"><a href="#">{{ article.section.title }}</a></li>
<li class="breadcrumb-item active" aria-current="page">文章详情</li>
</ol>
</nav>
<!-- 2. 文章主体内容 -->
<div class="row justify-content-center mt-4">
<div class="col-lg-10">
<!-- 文章头部信息 -->
<div class="text-center mb-5">
<h1 class="fw-bold mb-3">{{ article.title }}</h1>
<div class="text-muted small">
<span class="me-3"><i class="bi bi-clock"></i> {{ article.created_at|date:"Y-m-d H:i" }}</span>
<span class="me-3"><i
class="bi bi-person"></i> {{ article.author.username|default:"管理员" }}</span>
<span><i class="bi bi-eye"></i> 阅读数：{{ article.views|default:0 }}</span>
</div>
</div>
<!-- 封面图 (如果有) -->
{% if article.cover %}
<div class="mb-4 text-center">
<img src="{{ article.cover.url }}" alt="{{ article.title }}" class="img-fluid rounded shadow-sm"
style="max-height: 400px; width: 100%; object-fit: cover;">
</div>
{% endif %}
<!-- 正文内容 -->
<div class="article-content mb-5" style="line-height: 1.8; font-size: 1.1rem; color: #333;">
{{ article.content|safe }}
</div>
<!-- 4. 底部操作栏 -->
<div class="d-grid gap-4 d-sm-flex justify-content-sm-center border-top pt-4 mt-5" style="gap: 30px;">
<a href="javascript:history.back()" class="btn btn-outline-secondary btn px-3">
<i class="bi bi-arrow-left"></i> 返回上一页
</a>
<a href="/" class="btn btn-primary btn px-3">
<i class="bi bi-house-door-fill"></i> 返回首页
</a>
</div>
</div>
</div>
</div>
{% endblock %}
templates/front/index.html
+2 -1
View File
@@ -42,7 +42,8 @@
{% 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 %}
{% url "front:news" as more_url %}
{% include 'components/_news_card.html' with data=news_data.data unique_id=news_data.key more_url=more_url route="front:news_detail" %}
</div>
</div>
templates/front/info.html
+2 -1
View File
@@ -10,7 +10,8 @@
</nav>
<div class="row" style="margin: 15px auto ">
{% for section in sections %}
<div class="col-6" style="margin: auto auto 15px">
<div class="col-6 {% if forloop.last and not sections|length|divisibleby:2 %}col-md-12{% endif %}"
style="margin: auto auto 15px">
{% url "front:sub_list" main=main_section.code sub=section.key as card_more_url %}
{% include 'components/_news_card.html' with data=section.data unique_id=section.key more_url=card_more_url %}
templates/front/interaction.html
-168
View File
@@ -1,168 +0,0 @@
{% 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">&laquo;</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">&raquo;</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 %}
templates/front/list.html
+44 -12
View File
@@ -4,26 +4,58 @@
<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"><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">
<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>
</a>
</li>
{% for sec in sections %}
<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>
{% 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>
{% endfor %}
{% 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>{{ 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>
templates/front/news.html
+3 -2
View File
@@ -7,14 +7,15 @@
<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"><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 %}
{% url "front:news_list" sub=section.key as more_url %}
{% include 'components/_news_card.html' with data=section.data unique_id=section.key more_url=more_url route="front:news_detail" %}
</div>
{% endfor %}
</div>
templates/front/party.html
-23
View File
@@ -1,23 +0,0 @@
{% 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 %}
templates/front/science.html
-168
View File
@@ -1,168 +0,0 @@
{% 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">&laquo;</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">&raquo;</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 %}
templates/front/service.html
-169
View File
@@ -1,169 +0,0 @@
{% 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">&laquo;</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">&raquo;</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 %}