220 lines
7.8 KiB
HTML
220 lines
7.8 KiB
HTML
{% load static %}
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>{% block title %}{% endblock %}{{ site_info.title }}</title>
|
|
<link rel="stylesheet" href="{% static 'css/style.css' %}">
|
|
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
|
|
<link rel="stylesheet" href="{% static 'admin/simpleui-x/fontawesome-free-6.2.0-web/css/fontawesome.css' %}">
|
|
</head>
|
|
<body>
|
|
<header class="top-header">
|
|
<span></span>
|
|
<div class="header-container flex">
|
|
<img src="{% static 'images/logo.png' %}" class="logo" alt="">
|
|
<div>
|
|
<h1>{{ site_info.title }}</h1>
|
|
<p>{{ site_info.e_title }}</p>
|
|
{# <p>CHANGBAI MOUNTAIN FIRE AND RESCUE BRIGADE</p>#}
|
|
</div>
|
|
</div>
|
|
<div></div>
|
|
<div></div>
|
|
</header>
|
|
|
|
<!-- 导航 -->
|
|
<nav class="nav-main">
|
|
<span></span>
|
|
<div class="header-nav">
|
|
<ul>
|
|
<!-- 网站首页 -->
|
|
<li class="{% if request.resolver_match.url_name == 'index' %}active{% endif %}">
|
|
<a href="{% url 'front:index' %}">网站首页</a>
|
|
</li>
|
|
|
|
<!-- 单位简介 -->
|
|
<li class="{% if request.resolver_match.url_name == 'about' %}active{% endif %}">
|
|
<a href="{% url 'front:about' %}">单位简介</a>
|
|
</li>
|
|
<!-- 新闻中心 -->
|
|
<li class="{% if request.resolver_match.url_name == 'news' %}active{% endif %}">
|
|
<a href="{% url 'front:news' %}">新闻中心</a>
|
|
</li>
|
|
{% for menu in menus %}
|
|
<!-- 新闻中心 -->
|
|
|
|
<li class="{% if menu.code in request.path %}active{% endif %}">
|
|
<a href="{% url 'front:section' main=menu.code %}">{{ menu.title }}</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
<span></span>
|
|
<span></span>
|
|
</nav>
|
|
|
|
<!-- Banner -->
|
|
{#<div class="d-xl-none" style="height: 50px;"></div>#}
|
|
<div class="banner">
|
|
<img src="{% static 'images/img.jpg' %}" alt="">
|
|
</div>
|
|
|
|
<!-- 主体 -->
|
|
<main class="container main" style="padding: 10px 5px !important;">
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
<!-- 底部页脚：只需要写这一行，全站生效！ -->
|
|
|
|
<footer class="footer">
|
|
<!-- 友情链接区域 -->
|
|
<div class=" d-none d-md-block">
|
|
<div class="row"
|
|
style="align-items: center;justify-content: space-evenly;padding: 15px 0;background-color: #F5F5F5;width: 100%!important;margin-left: 0 !important;gap: 10px;">
|
|
|
|
<div style="display: flex;align-items: center;">
|
|
<img src="{% static "icons/link.svg" %}" alt=""
|
|
style="width: 13px; height: 13px; object-fit: contain;">
|
|
<a href="#"
|
|
style="margin-left: 6px; text-decoration: none; color: #13227a; font-size: 14px; white-space: nowrap;">
|
|
友情链接
|
|
</a>
|
|
</div>
|
|
{% for category in categories %}
|
|
<!-- 市政府网站下拉框 -->
|
|
|
|
<div style="width: 280px;">
|
|
<select class="form-control"
|
|
onchange="if(this.value) window.open(this.value)">
|
|
<option>{{ category.name }}</option>
|
|
{% for link in category.links.all %}
|
|
{% if link.is_active %}
|
|
<!-- 这里可以动态循环 FooterLink 关联的友情链接对象 -->
|
|
<option value="{{ link.url }}">{{ link.name }}</option>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
{% empty %}
|
|
<!-- 如果后台没配置分类，显示默认占位 -->
|
|
<div style="width: 280px;">
|
|
<select class="form-control">
|
|
<option>暂无链接</option>
|
|
</select>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<!-- 页脚主体信息区域 -->
|
|
<div class="footer-info">
|
|
<div class="row">
|
|
|
|
<!-- 左侧：Logo 图标 -->
|
|
<div class="col-lg-3 col-md-6 text-center">
|
|
<img src="{% static 'images/red.png' %}" alt="政府标识">
|
|
<img class="footerImg" src="{% static 'images/jiucuo.png' %}" alt="找错">
|
|
</div>
|
|
|
|
<!-- 中间：文字信息 -->
|
|
<div class="col-lg-6 d-none d-xl-block">
|
|
<!-- 地址与邮编 -->
|
|
<p class="margin-top-20 font-size-14 line-height-2 footerColor">
|
|
地址：{{ base_info.address }} 邮编：{{ base_info.postal }}
|
|
</p>
|
|
<!-- 电话与传真 -->
|
|
<p class="font-size-14 line-height-2 footerColor">
|
|
服务热线：{{ base_info.telephone }} 传真：{{ base_info.fax }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 右侧：公众号/微博二维码 -->
|
|
<div class="col-lg-3 col-md-6 text-center">
|
|
<!-- 微信二维码 -->
|
|
{% if base_info.official_account %}
|
|
<img src="{{ base_info.official_account.url }}" alt="微信公众号"
|
|
style="width: 50px; height: 50px; margin-right: 10px;">
|
|
{% else %}
|
|
<span>暂无二维码</span>
|
|
{% endif %}
|
|
|
|
<!-- 微博二维码 -->
|
|
{% if base_info.weibo %}
|
|
<img class="footerImg" src="{{ base_info.weibo.url }}" alt="政务微博"
|
|
style="width: 50px; height: 50px;">
|
|
{% else %}
|
|
<span>暂无微博</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 版权备案信息 -->
|
|
<div class="copyright text-center line-height-2 padding-bottom-20 padding-top-20">
|
|
<p class="margin-top-20 font-size-14 line-height-2 footerColor">
|
|
版权所有：{{ base_info.unit }} 备案证号：
|
|
<a href="http://beian.miit.gov.cn/" target="_blank">
|
|
{{ base_info.filing }}
|
|
</a>
|
|
</p>
|
|
</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>
|
|
</html>
|