update. 完成前端页面展示、列表和详情页
update. 调整融合主菜单与板块 update. 分离新闻模块
This commit is contained in:
ngfchl
@@ -0,0 +1,80 @@
|
||||
{% extends 'base.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>
|
||||
|
||||
<!-- 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">
|
||||
{{ attachment.uploaded_at|date:"Y-m-d" }}
|
||||
</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- 4. 底部操作栏 -->
|
||||
<div class="d-grid gap-4 d-sm-flex justify-content-sm-center border-top pt-4 mt-5">
|
||||
<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 %}
|
||||
@@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block title %}页面未找到 - 404 - 长白山消防救援支队{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mt-5">
|
||||
<!-- 面包屑导航 -->
|
||||
<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">404</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<!-- 404 核心内容区域 -->
|
||||
<div class="row justify-content-center mt-5">
|
||||
<div class="col-md-8 text-center">
|
||||
|
||||
<!-- 错误图标与代码 -->
|
||||
<div class="mb-4">
|
||||
<!-- 使用简单的 SVG 图标，你也可以换成消防相关的图片 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="#dc3545" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16">
|
||||
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 错误标题 -->
|
||||
<h1 class="display-1 fw-bold text-danger" style="font-size: 6rem; line-height: 1;">404</h1>
|
||||
|
||||
<!-- 错误描述 -->
|
||||
<h2 class="h3 mb-3">抱歉，您访问的页面不存在</h2>
|
||||
<p class="lead text-muted mb-4">
|
||||
您请求的页面可能已被删除、名称已更改或暂时不可用。<br>
|
||||
请检查网址是否正确，或返回首页查找所需信息。
|
||||
</p>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="d-grid gap-30 d-sm-flex justify-content-sm-center" style="gap: 30px;">
|
||||
<a href="/" class="btn btn-primary btn-md w-auto px-3">
|
||||
<i class="bi bi-house-door-fill"></i> 返回首页
|
||||
</a>
|
||||
<button onclick="history.back()" class="btn btn-outline-secondary w-auto btn-md px-3">
|
||||
<i class="bi bi-arrow-left"></i> 返回上一页
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,60 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block title %}服务器内部错误 - 500 - 长白山消防救援支队{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mt-5">
|
||||
<!-- 面包屑导航 -->
|
||||
<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>
|
||||
|
||||
<!-- 500 核心内容区域 -->
|
||||
<div class="row justify-content-center mt-5">
|
||||
<div class="col-md-8 text-center">
|
||||
|
||||
<!-- 错误图标 -->
|
||||
<div class="mb-4">
|
||||
<!-- 使用齿轮/扳手图标，代表系统维护或故障 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="#6c757d" class="bi bi-gear-fill" viewBox="0 0 16 16">
|
||||
<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 错误标题 -->
|
||||
<h1 class="display-1 fw-bold text-secondary" style="font-size: 6rem; line-height: 1;">500</h1>
|
||||
|
||||
<!-- 错误描述 -->
|
||||
<h2 class="h3 mb-3">系统内部错误</h2>
|
||||
<p class="lead text-muted mb-4">
|
||||
抱歉，服务器遇到了一些意外情况，无法完成您的请求。<br>
|
||||
我们的技术人员已经收到了错误报告，正在紧急排查修复中。
|
||||
</p>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="d-grid gap-30 d-sm-flex justify-content-sm-center">
|
||||
<a href="/" class="btn btn-primary btn-lg px-4">
|
||||
<i class="bi bi-house-door-fill"></i> 返回首页
|
||||
</a>
|
||||
<!-- 刷新按钮 -->
|
||||
<button onclick="window.location.reload()" class="btn btn-outline-secondary btn-lg px-4">
|
||||
<i class="bi bi-arrow-clockwise"></i> 重试
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 技术支持提示 -->
|
||||
<div class="mt-5 p-3 bg-light rounded">
|
||||
<p class="mb-0 text-muted small">
|
||||
<strong>温馨提示：</strong><br>
|
||||
如果您急需办理业务，请稍后再试，或联系网站管理员。<br>
|
||||
联系电话：0433-xxxxxxx (示例)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -1,21 +0,0 @@
|
||||
{% 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>
|
||||
@@ -66,9 +66,10 @@
|
||||
<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 %}
|
||||
{% url "front:main_list" main=section.key as card_more_url %}
|
||||
{% include 'components/_news_card.html' with data=section.data unique_id=section.key more_url=card_more_url %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,19 +1,21 @@
|
||||
{% extends 'base.html' %}
|
||||
{% block title %}信息公开 - 长白山消防救援支队{% endblock %}
|
||||
{% 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">信息公开</li>
|
||||
<li class="breadcrumb-item active" aria-current="page">{{ main_section.title }}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<div class="row" style="margin: 15px auto ">
|
||||
<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 %}
|
||||
{% 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 %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -0,0 +1,172 @@
|
||||
{% 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>
|
||||
</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>
|
||||
</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>
|
||||
{{ 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" style="width: 100%;padding-right: 38px; margin-left: 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>
|
||||
<!-- 组件结束 -->
|
||||
<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 %}
|
||||
@@ -8,7 +8,7 @@
|
||||
<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>
|
||||
<li class="breadcrumb-item active" aria-current="page">新闻中心</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<div style="margin: 0 5px;">
|
||||
@@ -19,4 +19,4 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user