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

init. 初始化项目，并初步完成前端模板样式

Browse Source
This commit is contained in:
ngfchl
2026-03-26 11:08:42 +08:00
commit af9d7a676f
116 changed files with 5266 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/front/about.html
+176
View File
@@ -0,0 +1,176 @@
{% 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: 500px;margin: auto auto 15px;">
<div class="col-4">
<div class="news-card" style="height: 100%;">
<div class="custom-tabs-header">
<div class="tabs-header-wrapper">
<ul class="nav nav-tabs" id="newsTab_{{ unique_id }}" role="tablist">
<li class="nav-item">
{# 确定显示名称：如果有 labels 字典则取 labels.tab_id，否则直接用 tab_id (或进行capitalize处理) #}
{# 如果 default 返回的是英文 key，可以在这里做简单的格式化，比如首字母大写，或者保持原样 #}
<a class="nav-link active"
id="{{ tab_id }}-tab_{{ unique_id }}"
data-toggle="tab"
href="#"
role="tab"
aria-selected="true">
领导信息
</a>
</li>
</ul>
</div>
</div>
<div class="tab-content intro-text">
<p>
长白山消防救援支队，是隶属于吉林省长白山保护开发区管理委员会的综合性消防救援队伍，负责辖区内的火灾预防、扑救和应急救援工作。
</p>
<p><strong>官方信息与联系方式：</strong></p>
<p>
官方信息平台与联系方式：长白山消防救援支队的相关信息主要通过长白山保护开发区管理委员会官方网站的“政务公开
- 机构设置”栏目进行发布。根据其 2025 年政府信息公开年度报告，公众可通过以下方式联系该支队：
</p>
<div class="contact-info">
<p><strong>联系电话/传真：</strong>0433-5312088</p>
<p><strong>办公地址：</strong>长白山保护开发区消防救援支队防火监督与政策法规科 101
室（邮编：133613）</p>
<p><strong>电子邮箱：</strong>306098022@qq.com</p>
</div>
<p><strong>主要职责与工作重点：</strong></p>
<p>
作为长白山地区的核心消防救援力量，该支队承担着“全灾种、大应急”的综合性救援任务，其工作重点紧密围绕辖区特点展开。
</p>
</div>
</div>
</div>
<div class="col-8">
<div class="news-card" style=" height: 500px;">
<div class="custom-tabs-header">
<div class="tabs-header-wrapper">
<ul class="nav nav-tabs" id="newsTab_{{ unique_id }}" role="tablist">
<li class="nav-item">
{# 确定显示名称：如果有 labels 字典则取 labels.tab_id，否则直接用 tab_id (或进行capitalize处理) #}
{# 如果 default 返回的是英文 key，可以在这里做简单的格式化，比如首字母大写，或者保持原样 #}
<a class="nav-link active"
id="{{ tab_id }}-tab_{{ unique_id }}"
data-toggle="tab"
href="#"
role="tab"
aria-selected="true">
单位简介
</a>
</li>
</ul>
</div>
</div>
<div class="tab-content intro-text">
<p>
长白山消防救援支队，是隶属于吉林省长白山保护开发区管理委员会的综合性消防救援队伍，负责辖区内的火灾预防、扑救和应急救援工作。
</p>
<p><strong>官方信息与联系方式：</strong></p>
<p>
官方信息平台与联系方式：长白山消防救援支队的相关信息主要通过长白山保护开发区管理委员会官方网站的“政务公开
- 机构设置”栏目进行发布。根据其 2025 年政府信息公开年度报告，公众可通过以下方式联系该支队：
</p>
<div class="contact-info">
<p><strong>联系电话/传真：</strong>0433-5312088</p>
<p><strong>办公地址：</strong>长白山保护开发区消防救援支队防火监督与政策法规科 101
室（邮编：133613）</p>
<p><strong>电子邮箱：</strong>306098022@qq.com</p>
</div>
<p><strong>主要职责与工作重点：</strong></p>
<p>
作为长白山地区的核心消防救援力量，该支队承担着“全灾种、大应急”的综合性救援任务，其工作重点紧密围绕辖区特点展开。
</p>
</div>
</div>
</div>
</div>
<div class="row" style="height: 300px;margin: auto auto 15px;">
<div class="col-12">
<div class="news-card">
<div class="custom-tabs-header">
<div class="tabs-header-wrapper">
<ul class="nav nav-tabs" id="newsTab_{{ unique_id }}" role="tablist">
<li class="nav-item">
{# 确定显示名称：如果有 labels 字典则取 labels.tab_id，否则直接用 tab_id (或进行capitalize处理) #}
{# 如果 default 返回的是英文 key，可以在这里做简单的格式化，比如首字母大写，或者保持原样 #}
<a class="nav-link active"
id="{{ tab_id }}-tab_{{ unique_id }}"
data-toggle="tab"
href="#"
role="tab"
aria-selected="true">
组织结构
</a>
</li>
</ul>
</div>
</div>
<div class="tab-content news-list-body" id="newsTabContent_{{ unique_id }}">
<ul class="list-unstyled">
{# items 就是当前 key 对应的列表数据，直接使用 #}
{% if items %}
{% for item in items %}
<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>
</div>
</div>
</div>
<style>
.intro-text {
font-size: 13px;
padding: 10px;
}
</style>
{% endblock %}
templates/front/h.html
+21
View File
@@ -0,0 +1,21 @@
{% 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>
templates/front/index.html
+74
View File
@@ -0,0 +1,74 @@
<!-- 这个模板继承自 base.html -->
{% extends 'base.html' %}
{% load static %}
{% 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>
</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="">
</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>
<div class="col-md-6 col-sm-12">
{% include 'components/_news_card.html' with data=news_data.data unique_id=news_data.key %}
</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 %}
<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 %}
</div>
{% endfor %}
</div>
{% endblock %}
templates/front/info.html
+19
View File
@@ -0,0 +1,19 @@
{% 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: 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 %}
</div>
{% endfor %}
</div>
</div>
{% endblock %}
templates/front/interaction.html
+168
View File
@@ -0,0 +1,168 @@
{% 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/news.html
+22
View File
@@ -0,0 +1,22 @@
{% 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 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 %}
</div>
{% endfor %}
</div>
</div>
{% endblock %}
templates/front/party.html
+23
View File
@@ -0,0 +1,23 @@
{% 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
@@ -0,0 +1,168 @@
{% 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
@@ -0,0 +1,169 @@
{% 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 %}