server/templates/front/list.html

{% 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">&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 %}