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-02 11:01:25 +08:00
parent 66dd4916d1
commit 784c8bbb6e
10 changed files with 241 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/base.html
+50 -1
View File
@@ -16,7 +16,7 @@
<div>
<h1>{{ site_info.title }}</h1>
<p>{{ site_info.e_title }}</p>
<p>CHANGBAI MOUNTAIN FIRE AND RESCUE BRIGADE</p>
<p>CHANGBAI MOUNTAIN FIRE AND RESCUE BRIGADE</p>
</div>
</div>
<div></div>
@@ -159,10 +159,59 @@
</div>
</div>
</footer>
<button id="backToTop"
class="btn btn-primary rounded-circle shadow d-none"
style="position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; z-index: 1000; font-size: 20px;"
title="回到顶部">
↑
</button>
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<!-- 2. JavaScript 逻辑 -->
<script>
// 获取按钮元素
const backToTopBtn = document.getElementById("backToTop");
// 监听页面滚动事件
window.addEventListener("scroll", function () {
// 当页面向下滚动超过 300px 时显示按钮，否则隐藏
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
backToTopBtn.classList.remove("d-none");
// 可选：添加淡入动画类
backToTopBtn.classList.add("fade-in");
} else {
backToTopBtn.classList.add("d-none");
backToTopBtn.classList.remove("fade-in");
}
});
// 监听按钮点击事件
backToTopBtn.addEventListener("click", function () {
// 平滑滚动到顶部
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
</script>
<!-- 3. 可选：添加简单的淡入淡出 CSS 动画 -->
<style>
.fade-in {
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
<!-- 页面底部脚本 -->
{% block extra_js %}{% endblock %}
</body>
templates/front/index.html
+69 -67
View File
@@ -5,80 +5,82 @@
{% 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 class="container">
<!-- 顶部横幅 -->
<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>
</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="">
<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>
<!-- 主要内容区 -->
<!-- 左侧大图 -->
<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 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">
{% url "front:news_main" 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>
<div class="col-md-6 col-sm-12">
{% url "front:news_main" 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>
<!-- 广告横幅 -->
<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 %}
{% if forloop.revcounter == 1 and forloop.counter|add:"0"|divisibleby:"2" == False %}
<!-- 最后一项，且总数为奇数，则独占一行 -->
<div class="col-12" style="margin: 15px auto">
{% 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 class="row g-4 justify-content-start mt-3">
{% for link in picture_links %}
<!--
col-6: 手机端一行2个
col-md-4: 平板一行3个
col-lg-3: 电脑端一行4个 (25%)
-->
<div class="col-6 col-md-4 col-lg-3">
<a href="{{ link.url }}" class="d-block">
<!-- img-fluid 让图片宽度 100% 自适应父容器 -->
<img class="img-fluid" src="{{ link.picture.url }}" alt="{{ link.name }}">
</a>
</div>
{% else %}
<div class="col-md-6 col-sm-12" style="margin: 15px auto">
{% 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>
{% endif %}
{% endfor %}
{% endfor %}
</div>
<div class="row">
{% for section in section_data %}
{% if forloop.revcounter == 1 and forloop.counter|add:"0"|divisibleby:"2" == False %}
<!-- 最后一项，且总数为奇数，则独占一行 -->
<div class="col-12" style="margin: 15px auto">
{% 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>
{% else %}
<div class="col-md-6 col-sm-12" style="margin: 15px auto">
{% 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>
{% endif %}
{% endfor %}
</div>
</div>
{% endblock %}
templates/header.html
-35
View File
@@ -1,35 +0,0 @@
{% 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>
templates/index.html
-11
View File
@@ -1,11 +0,0 @@
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>长白山消防支队</title>
</head>
<body>
</body>
</html>