{extend name="web/official_common/pc/base" /} {block name="content"}
<!-- 纳海川官方网站 首页主体 开始 -->

<!-- 1. 高端大气全景首屏轮播图系统 (Hero Panoramic Carousel) 开始 -->
<section class="nhc-hero-carousel-wrap nhc-lattice-pattern">
    <div class="nhc-carousel" id="nhcHeroCarousel">
        <div class="nhc-carousel-track">
            <!-- 幻灯片 1：领航篇（企业级软件定制与技术中台） -->
            <div
                class="nhc-carousel-slide nhc-slide-theme-1 active"
                data-slide-index="0"
            >
                <div class="nhc-container">
                    <div class="nhc-hero-content">
                        <div class="nhc-hero-badge">
                            <span class="nhc-seal">软件定制</span>
                            <span class="nhc-hero-badge-text"
                                >贵阳纳海川科技 · 软件定制与私有化部署</span
                            >
                        </div>
                        <h1 class="nhc-hero-title">
                            企业软件定制开发<br />源码交付，部署在客户自己的服务器
                        </h1>
                        <p class="nhc-hero-subtitle">
                            立足贵阳，服务全国客户。承接企业业务系统、APP
                            与小程序、私有化 AI
                            应用的开发；交付源码、部署说明和数据库字典，可部署在客户自己的服务器或内网。
                        </p>
                        <div class="nhc-hero-cta">
                            <a
                                href="#contact"
                                class="nhc-btn nhc-btn-primary nhc-btn-lg"
                            >
                                <span>预约咨询</span>
                                <svg
                                    width="16"
                                    height="16"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                >
                                    <path d="M5 12h14M12 5l7 7-7 7" />
                                </svg>
                            </a>
                            <a
                                href="#products"
                                class="nhc-btn nhc-btn-outline nhc-btn-lg"
                            >
                                <span>浏览产品</span>
                            </a>
                        </div>
                        <div class="nhc-hero-metrics col-3">
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 20px; font-weight: 700"
                                >
                                    源码交付
                                </div>
                                <div class="nhc-metric-label">
                                    附部署说明和数据库字典
                                </div>
                            </div>
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 20px; font-weight: 700"
                                >
                                    交付进度
                                </div>
                                <div class="nhc-metric-label">
                                    按阶段确认，功能逐项验收
                                </div>
                            </div>
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 20px; font-weight: 700"
                                >
                                    部署方式
                                </div>
                                <div class="nhc-metric-label">
                                    客户机房、专有云或内网
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 幻灯片 2：软件开发篇（全栈中台与移动端定制） -->
            <div
                class="nhc-carousel-slide nhc-slide-theme-2"
                data-slide-index="1"
            >
                <div class="nhc-container">
                    <div class="nhc-hero-content">
                        <div class="nhc-hero-badge">
                            <span class="nhc-seal">定制开发</span>
                            <span class="nhc-hero-badge-text"
                                >业务系统、APP 与小程序，共用一套后台</span
                            >
                        </div>
                        <h1 class="nhc-hero-title">
                            按需开发，源码完整移交<br />专有云与内网都能部署
                        </h1>
                        <p class="nhc-hero-subtitle">
                            从需求梳理、原型确认到编码、测试和上线，按阶段交付可确认的成果。架构按业务规模和客户的运维能力来定，单体或微服务都可以。
                        </p>
                        <div class="nhc-hero-cta">
                            <a
                                href="{:addon_url('official/web.official_product/list',[':pid'=>19,':sid'=>19])}"
                                class="nhc-btn nhc-btn-primary nhc-btn-lg"
                            >
                                <span>了解方案</span>
                                <svg
                                    width="16"
                                    height="16"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                >
                                    <path d="M5 12h14M12 5l7 7-7 7" />
                                </svg>
                            </a>
                            <a
                                href="{:addon_url('official/web.official_case_show/list',[':pid'=>14,':sid'=>14])}"
                                class="nhc-btn nhc-btn-outline nhc-btn-lg"
                            >
                                <span>查阅案例</span>
                            </a>
                        </div>
                        <div class="nhc-hero-metrics">
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 18px; font-weight: 700"
                                >
                                    技术选型
                                </div>
                                <div class="nhc-metric-label">
                                    按业务规模与运维能力确定
                                </div>
                            </div>
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 18px; font-weight: 700"
                                >
                                    多端共用
                                </div>
                                <div class="nhc-metric-label">
                                    iOS、Android、小程序同一后台
                                </div>
                            </div>
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 18px; font-weight: 700"
                                >
                                    测试记录
                                </div>
                                <div class="nhc-metric-label">
                                    接口与核心流程用例
                                </div>
                            </div>
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 18px; font-weight: 700"
                                >
                                    交付物
                                </div>
                                <div class="nhc-metric-label">
                                    源码、接口文档、数据库字典
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 幻灯片 3：智能体篇（企业级私域 AI 智能体与知识库） -->
            <div
                class="nhc-carousel-slide nhc-slide-theme-3"
                data-slide-index="2"
            >
                <div class="nhc-container">
                    <div class="nhc-hero-content">
                        <div class="nhc-hero-badge">
                            <span class="nhc-seal">AI 智能体</span>
                            <span class="nhc-hero-badge-text"
                                >私有化 AI，知识库检索，部署在内网</span
                            >
                        </div>
                        <h1 class="nhc-hero-title">
                            企业私有化 AI 智能体<br />基于内部资料做检索和问答
                        </h1>
                        <p class="nhc-hero-subtitle">
                            把制度、法规和历史文档整理成可检索的知识库，回答时标注原文出处，供业务人员复核。模型与数据部署在客户内网服务器上，不调用外部接口。
                        </p>
                        <div class="nhc-hero-cta">
                            <a
                                href="#contact"
                                class="nhc-btn nhc-btn-primary nhc-btn-lg"
                            >
                                <span>方案咨询</span>
                                <svg
                                    width="16"
                                    height="16"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                >
                                    <path d="M5 12h14M12 5l7 7-7 7" />
                                </svg>
                            </a>
                            <a
                                href="#services"
                                class="nhc-btn nhc-btn-outline nhc-btn-lg"
                            >
                                <span>技术架构</span>
                            </a>
                        </div>
                        <div class="nhc-hero-metrics">
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 18px; font-weight: 700"
                                >
                                    知识库
                                </div>
                                <div class="nhc-metric-label">
                                    文档整理与切分检索
                                </div>
                            </div>
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 18px; font-weight: 700"
                                >
                                    出处标注
                                </div>
                                <div class="nhc-metric-label">
                                    回答附带原文位置
                                </div>
                            </div>
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 18px; font-weight: 700"
                                >
                                    内网部署
                                </div>
                                <div class="nhc-metric-label">
                                    模型与数据不出机房
                                </div>
                            </div>
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 18px; font-weight: 700"
                                >
                                    流程辅助
                                </div>
                                <div class="nhc-metric-label">
                                    审批与工单环节试用
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 幻灯片 4：产品矩阵篇（商城、收银、进销存、SaaS系统） -->
            <div
                class="nhc-carousel-slide nhc-slide-theme-4"
                data-slide-index="3"
            >
                <div class="nhc-container">
                    <div class="nhc-hero-content">
                        <div class="nhc-hero-badge">
                            <span class="nhc-seal">商业产品</span>
                            <span class="nhc-hero-badge-text"
                                >商城、收银、进销存、SaaS 四套系统</span
                            >
                        </div>
                        <h1 class="nhc-hero-title">
                            四套现成的系统<br />可以直接用，也可以按需改
                        </h1>
                        <p class="nhc-hero-subtitle">
                            四套系统用的是同一套代码，可以按年订阅，也可以买源码部署到自己的服务器。具体功能和版本以产品说明为准。
                        </p>
                        <div class="nhc-hero-cta">
                            <a
                                href="{:addon_url('official/web.official_product/list',[':pid'=>22,':sid'=>22])}#demo-sandbox"
                                class="nhc-btn nhc-btn-primary nhc-btn-lg"
                            >
                                <span>申请演示</span>
                                <svg
                                    width="16"
                                    height="16"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                >
                                    <path d="M5 12h14M12 5l7 7-7 7" />
                                </svg>
                            </a>
                            <a
                                href="#contact"
                                class="nhc-btn nhc-btn-outline nhc-btn-lg"
                            >
                                <span>咨询报价</span>
                            </a>
                        </div>
                        <div class="nhc-hero-metrics">
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 18px; font-weight: 700"
                                >
                                    四个产品
                                </div>
                                <div class="nhc-metric-label">
                                    商城、收银、进销存、SaaS
                                </div>
                            </div>
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 18px; font-weight: 700"
                                >
                                    防重复扣款
                                </div>
                                <div class="nhc-metric-label">
                                    重复提交只扣一次款
                                </div>
                            </div>
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 18px; font-weight: 700"
                                >
                                    外设对接
                                </div>
                                <div class="nhc-metric-label">
                                    扫码枪、打印机、钱箱
                                </div>
                            </div>
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 18px; font-weight: 700"
                                >
                                    部署方式
                                </div>
                                <div class="nhc-metric-label">
                                    公有云订阅或源码部署
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 左右切换悬浮导航控件 -->
        <div
            class="nhc-carousel-nav nhc-carousel-prev"
            id="nhcPrevBtn"
            title="上一张"
        >
            <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
            >
                <path d="M15 18l-6-6 6-6" />
            </svg>
        </div>
        <div
            class="nhc-carousel-nav nhc-carousel-next"
            id="nhcNextBtn"
            title="下一张"
        >
            <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
            >
                <path d="M9 18l6-6-6-6" />
            </svg>
        </div>

        <!-- 底部精美长条指示器与编号 -->
        <div class="nhc-carousel-indicators" id="nhcIndicators">
            <div class="nhc-carousel-dot active" data-goto="0">
                <span class="nhc-carousel-dot-num">01</span>
                <span class="nhc-carousel-dot-bar"></span>
            </div>
            <div class="nhc-carousel-dot" data-goto="1">
                <span class="nhc-carousel-dot-num">02</span>
                <span class="nhc-carousel-dot-bar"></span>
            </div>
            <div class="nhc-carousel-dot" data-goto="2">
                <span class="nhc-carousel-dot-num">03</span>
                <span class="nhc-carousel-dot-bar"></span>
            </div>
            <div class="nhc-carousel-dot" data-goto="3">
                <span class="nhc-carousel-dot-num">04</span>
                <span class="nhc-carousel-dot-bar"></span>
            </div>
        </div>
    </div>
</section>
<!-- 1. 高端大气全景首屏轮播图系统 结束 -->

<!-- 2. 服务入口 (Services Section) 开始 -->
<section id="services" class="nhc-services">
    <div class="nhc-container">
        <div class="nhc-section-header">
            <div class="nhc-section-tag">
                <span class="nhc-seal">服务范围</span>
                <span class="nhc-tag-text">ENGINEERING CAPABILITIES</span>
            </div>
            <h2 class="nhc-section-title">把系统做出来，也要能长期维护</h2>
            <p class="nhc-section-desc">
                承接三类工作：企业业务系统定制、移动端与小程序开发、企业私有化
                AI 应用。功能范围和验收标准在合同里写清楚。
            </p>
            <div class="nhc-line-divider"><span></span></div>
        </div>

        <div class="nhc-services-grid">
            <!-- 核心服务一：软件开发 -->
            <div class="nhc-service-card">
                <span class="nhc-service-watermark">壹</span>
                <div class="nhc-card-thumb">
                    <img
                        src="__ADDON__/images/showcases/service_middle.svg"
                        alt="企业业务系统与多系统对接示意"
                        loading="lazy"
                    />
                </div>
                <div class="nhc-service-icon">
                    <svg
                        width="26"
                        height="26"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    >
                        <rect
                            x="2"
                            y="3"
                            width="20"
                            height="14"
                            rx="2"
                            ry="2"
                        />
                        <line x1="8" y1="21" x2="16" y2="21" />
                        <line x1="12" y1="17" x2="12" y2="21" />
                    </svg>
                </div>
                <h3 class="nhc-service-title">软件开发</h3>
                <p class="nhc-service-desc">
                    承接企业业务系统与内部管理系统的定制开发，包括多系统数据对接、权限与流程配置、报表与对账等模块。
                </p>
                <ul class="nhc-service-list">
                    <li class="nhc-service-item">业务系统与内部管理系统定制</li>
                    <li class="nhc-service-item">
                        多系统数据对接与权限、流程配置
                    </li>
                    <li class="nhc-service-item">
                        源码交付，可部署在客户自有服务器或内网
                    </li>
                    <li class="nhc-service-item">
                        代码审查、接口文档与数据库字典配套交付
                    </li>
                </ul>
                <a
                    href="{:addon_url('official/web.official_product/service_software')}"
                    target="_blank"
                    class="nhc-service-link"
                >
                    <span>了解详情</span>
                    <svg
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path d="M5 12h14M12 5l7 7-7 7" />
                    </svg>
                </a>
            </div>

            <!-- 核心服务二：APP与小程序定制 -->
            <div class="nhc-service-card">
                <span class="nhc-service-watermark">贰</span>
                <div class="nhc-card-thumb">
                    <img
                        src="__ADDON__/images/showcases/service_app.svg"
                        alt="移动端 APP 与微信小程序多端界面"
                        loading="lazy"
                    />
                </div>
                <div class="nhc-service-icon">
                    <svg
                        width="26"
                        height="26"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    >
                        <rect
                            x="5"
                            y="2"
                            width="14"
                            height="20"
                            rx="2"
                            ry="2"
                        />
                        <line x1="12" y1="18" x2="12.01" y2="18" />
                    </svg>
                </div>
                <h3 class="nhc-service-title">APP与小程序定制</h3>
                <p class="nhc-service-desc">
                    承接 iOS、Android
                    应用与微信小程序开发，多端可共用同一套后台；涉及蓝牙外设或硬件对接时单独评估。
                </p>
                <ul class="nhc-service-list">
                    <li class="nhc-service-item">
                        iOS / Android 应用与微信小程序
                    </li>
                    <li class="nhc-service-item">
                        与现有账号、订单、支付系统对接
                    </li>
                    <li class="nhc-service-item">
                        蓝牙外设与物联网设备数据接入
                    </li>
                    <li class="nhc-service-item">
                        低端机型的启动速度与列表滚动优化
                    </li>
                </ul>
                <a
                    href="{:addon_url('official/web.official_product/service_app')}"
                    target="_blank"
                    class="nhc-service-link"
                >
                    <span>了解详情</span>
                    <svg
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path d="M5 12h14M12 5l7 7-7 7" />
                    </svg>
                </a>
            </div>

            <!-- 核心服务三：智能体开发 -->
            <div class="nhc-service-card">
                <span class="nhc-service-watermark">叁</span>
                <div class="nhc-card-thumb">
                    <img
                        src="__ADDON__/images/showcases/service_agent.svg"
                        alt="私有化 AI 与内部知识库示意"
                        loading="lazy"
                    />
                </div>
                <div class="nhc-service-icon">
                    <svg
                        width="26"
                        height="26"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    >
                        <path
                            d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 14.93V17a1 1 0 0 1-2 0v-.07A7 7 0 1 1 18.93 11H19a1 1 0 0 1 0 2h-.07A7 7 0 0 1 13 16.93zM12 6a6 6 0 1 0 6 6 6 6 0 0 0-6-6z"
                        />
                    </svg>
                </div>
                <h3 class="nhc-service-title">智能体开发</h3>
                <p class="nhc-service-desc">
                    基于开源大模型与企业内部资料搭建问答和检索工具，回答附带文档出处；数据存放在客户内网，不经过我们的服务器。
                </p>
                <ul class="nhc-service-list">
                    <li class="nhc-service-item">
                        内部制度、法规与文档的知识库检索
                    </li>
                    <li class="nhc-service-item">
                        回答标注原文出处，便于人工复核
                    </li>
                    <li class="nhc-service-item">审批、工单等流程的辅助处理</li>
                    <li class="nhc-service-item">
                        内网部署，模型与数据不出机房
                    </li>
                </ul>
                <a
                    href="{:addon_url('official/web.official_product/service_agent')}"
                    target="_blank"
                    class="nhc-service-link"
                >
                    <span>了解详情</span>
                    <svg
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path d="M5 12h14M12 5l7 7-7 7" />
                    </svg>
                </a>
            </div>
        </div>
    </div>
</section>
<!-- 服务入口 (Services Section) 结束 -->

<!-- 3. 产品矩阵入口 (Products Section) 开始 -->
<section id="products" class="nhc-products">
    <div class="nhc-container">
        <div class="nhc-section-header">
            <div class="nhc-section-tag">
                <span class="nhc-seal">产品</span>
                <span class="nhc-tag-text">STANDARDIZED SOLUTIONS</span>
            </div>
            <h2 class="nhc-section-title">
                四个标准化产品，可直接用，也可按需改
            </h2>
            <p class="nhc-section-desc">
                四套系统用的是同一套代码。可以先用公有云版本试运行，也可以直接买源码部署到自己的服务器；具体版本和功能以产品说明为准。
            </p>
            <div class="nhc-line-divider"><span></span></div>
        </div>

        <div class="nhc-products-grid">
            <!-- 产品 1：商城 -->
            <div class="nhc-product-card">
                <div class="nhc-card-thumb">
                    <img
                        src="__ADDON__/images/showcases/product_mall.svg"
                        alt="商城系统管理后台"
                        loading="lazy"
                    />
                </div>
                <div class="nhc-product-header">
                    <span class="nhc-product-type-badge">新零售 · 全渠道</span>
                    <h3 class="nhc-product-name">商城</h3>
                    <p class="nhc-product-desc">
                        支持多商户入驻、分销与拼团秒杀等常用营销工具的商城系统，可对接微信、支付宝支付。
                    </p>
                </div>
                <ul class="nhc-product-features">
                    <li class="nhc-product-feat-item">
                        <svg
                            width="14"
                            height="14"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <polyline points="20 6 9 17 4 12" />
                        </svg>
                        <span>微信小程序、H5、APP 三端订单与库存同步</span>
                    </li>
                    <li class="nhc-product-feat-item">
                        <svg
                            width="14"
                            height="14"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <polyline points="20 6 9 17 4 12" />
                        </svg>
                        <span>分销、拼团、秒杀、优惠券与积分</span>
                    </li>
                    <li class="nhc-product-feat-item">
                        <svg
                            width="14"
                            height="14"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <polyline points="20 6 9 17 4 12" />
                        </svg>
                        <span>供应商结算与佣金分账</span>
                    </li>
                </ul>
                <div class="nhc-product-footer">
                    <span class="nhc-product-tag">支持 SaaS / 私有化</span>
                    <a
                        href="{:addon_url('official/web.official_product/list',[':pid'=>22,':sid'=>22])}#product-matrix"
                        class="nhc-btn nhc-btn-outline nhc-btn-sm"
                        >查看详情</a
                    >
                </div>
            </div>

            <!-- 产品 2：收银 -->
            <div class="nhc-product-card">
                <div class="nhc-card-thumb">
                    <img
                        src="__ADDON__/images/showcases/product_pos.svg"
                        alt="收银系统与扫码、打印外设"
                        loading="lazy"
                    />
                </div>
                <div class="nhc-product-header">
                    <span class="nhc-product-type-badge"
                        >门店零售 · 扫码结算</span
                    >
                    <h3 class="nhc-product-name">收银</h3>
                    <p class="nhc-product-desc">
                        收银软件与扫码枪、小票打印机、钱箱等外设配合使用，单笔结算通常在数秒内完成。
                    </p>
                </div>
                <ul class="nhc-product-features">
                    <li class="nhc-product-feat-item">
                        <svg
                            width="14"
                            height="14"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <polyline points="20 6 9 17 4 12" />
                        </svg>
                        <span
                            >微信、支付宝等扫码支付；银行卡视收单渠道而定</span
                        >
                    </li>
                    <li class="nhc-product-feat-item">
                        <svg
                            width="14"
                            height="14"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <polyline points="20 6 9 17 4 12" />
                        </svg>
                        <span
                            >断网时离线记账，恢复联网后自动上传并核对差异</span
                        >
                    </li>
                    <li class="nhc-product-feat-item">
                        <svg
                            width="14"
                            height="14"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <polyline points="20 6 9 17 4 12" />
                        </svg>
                        <span>对接扫码枪、计价秤与小票打印机</span>
                    </li>
                </ul>
                <div class="nhc-product-footer">
                    <span class="nhc-product-tag">软硬件配合使用</span>
                    <a
                        href="{:addon_url('official/web.official_product/list',[':pid'=>22,':sid'=>22])}#demo-sandbox"
                        class="nhc-btn nhc-btn-outline nhc-btn-sm"
                        >申请演示</a
                    >
                </div>
            </div>

            <!-- 产品 3：进销存 -->
            <div class="nhc-product-card">
                <div class="nhc-card-thumb">
                    <img
                        src="__ADDON__/images/showcases/product_erp.svg"
                        alt="进销存与财务数据界面"
                        loading="lazy"
                    />
                </div>
                <div class="nhc-product-header">
                    <span class="nhc-product-type-badge"
                        >业财一体 · 精细管控</span
                    >
                    <h3 class="nhc-product-name">进销存</h3>
                    <p class="nhc-product-desc">
                        采购、销售、仓储与财务数据打通的进销存系统，用于减少积压、核对账目。
                    </p>
                </div>
                <ul class="nhc-product-features">
                    <li class="nhc-product-feat-item">
                        <svg
                            width="14"
                            height="14"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <polyline points="20 6 9 17 4 12" />
                        </svg>
                        <span>多仓库调拨与库存上下限预警</span>
                    </li>
                    <li class="nhc-product-feat-item">
                        <svg
                            width="14"
                            height="14"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <polyline points="20 6 9 17 4 12" />
                        </svg>
                        <span>批次与保质期管理，出入库可扫码追溯</span>
                    </li>
                    <li class="nhc-product-feat-item">
                        <svg
                            width="14"
                            height="14"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <polyline points="20 6 9 17 4 12" />
                        </svg>
                        <span>按商品、客户、项目生成毛利与经营报表</span>
                    </li>
                </ul>
                <div class="nhc-product-footer">
                    <span class="nhc-product-tag">业财协同标准版</span>
                    <a
                        href="{:addon_url('official/web.official_product/list',[':pid'=>22,':sid'=>22])}#product-matrix"
                        class="nhc-btn nhc-btn-outline nhc-btn-sm"
                        >查看详情</a
                    >
                </div>
            </div>

            <!-- 产品 4：SaaS版本 -->
            <div class="nhc-product-card">
                <div class="nhc-card-thumb">
                    <img
                        src="__ADDON__/images/showcases/product_saas.svg"
                        alt="多租户 SaaS 平台管理界面"
                        loading="lazy"
                    />
                </div>
                <div class="nhc-product-header">
                    <span class="nhc-product-type-badge"
                        >多租户 · 按账号开通</span
                    >
                    <h3 class="nhc-product-name">SaaS版本</h3>
                    <p class="nhc-product-desc">
                        多租户 SaaS
                        平台，按账号开通使用；数据按租户隔离，也可为单个客户部署独立数据库。
                    </p>
                </div>
                <ul class="nhc-product-features">
                    <li class="nhc-product-feat-item">
                        <svg
                            width="14"
                            height="14"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <polyline points="20 6 9 17 4 12" />
                        </svg>
                        <span>多租户数据隔离，可选用独立数据库</span>
                    </li>
                    <li class="nhc-product-feat-item">
                        <svg
                            width="14"
                            height="14"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <polyline points="20 6 9 17 4 12" />
                        </svg>
                        <span>支持容器化部署、多实例与数据备份</span>
                    </li>
                    <li class="nhc-product-feat-item">
                        <svg
                            width="14"
                            height="14"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <polyline points="20 6 9 17 4 12" />
                        </svg>
                        <span>提供 OpenAPI 接口文档，便于与第三方系统对接</span>
                    </li>
                </ul>
                <div class="nhc-product-footer">
                    <span class="nhc-product-tag">按账号订阅</span>
                    <a
                        href="{:addon_url('official/web.official_product/list',[':pid'=>22,':sid'=>22])}#demo-sandbox"
                        class="nhc-btn nhc-btn-primary nhc-btn-sm"
                        >立即开通</a
                    >
                </div>
            </div>
        </div>
    </div>
</section>
<!-- 产品矩阵入口 (Products Section) 结束 -->

<!-- 4. 案例入口 (Cases Section) 开始 -->
<section id="cases" class="nhc-cases">
    <div class="nhc-container">
        <div class="nhc-section-header">
            <div class="nhc-section-tag">
                <span class="nhc-seal">案例</span>
                <span class="nhc-tag-text">SELECTED PROJECTS</span>
            </div>
            <h2 class="nhc-section-title">几个客户项目，以及当时怎么解决</h2>
            <p class="nhc-section-desc">
                以下案例按客户要求隐去企业名称和联系人。具体做了什么、上线多久、怎么验收，可以在沟通时说明。
            </p>
            <div class="nhc-line-divider"><span></span></div>
        </div>

        <div class="nhc-cases-grid">
            <!-- 案例 1 -->
            <div class="nhc-case-card">
                <div class="nhc-case-meta">
                    <span class="nhc-case-category">商贸批发 · 分销订货</span>
                    <span class="nhc-seal" style="font-size: 11px"
                        >脱敏案例</span
                    >
                </div>
                <h3 class="nhc-case-title">
                    快消品经销企业「全渠道分销与订货中台」
                </h3>
                <div class="nhc-case-img-wrap">
                    <img
                        src="__ADDON__/images/showcases/case_distrib.svg"
                        alt="分销订货中台界面"
                        loading="lazy"
                    />
                </div>
                <div class="nhc-case-details">
                    <div class="nhc-case-detail-row">
                        <span class="nhc-case-detail-label">业务挑战</span>
                        <span class="nhc-case-detail-content"
                            >多区域经销商的价格与账期政策不统一，订单靠人工汇总后再录入，处理周期长、容易出错。</span
                        >
                    </div>
                    <div class="nhc-case-detail-row">
                        <span class="nhc-case-detail-label">解决方案</span>
                        <span class="nhc-case-detail-content"
                            >按经销商等级配置价格与账期，订单提交后校验库存和信用额度，再按仓库拆单。</span
                        >
                    </div>
                </div>
                <div class="nhc-case-metrics-bar">
                    <div class="nhc-case-metric-box">
                        <div class="nhc-case-metric-num">订单校验</div>
                        <div class="nhc-case-metric-sub">
                            价格、库存、信用额度
                        </div>
                    </div>
                    <div class="nhc-case-metric-box">
                        <div class="nhc-case-metric-num">分级价格</div>
                        <div class="nhc-case-metric-sub">按经销商等级配置</div>
                    </div>
                    <div class="nhc-case-metric-box">
                        <div class="nhc-case-metric-num">弹性扩容</div>
                        <div class="nhc-case-metric-sub">按并发量横向扩容</div>
                    </div>
                </div>
                <div
                    style="
                        margin-top: 20px;
                        display: flex;
                        justify-content: flex-end;
                    "
                >
                    <a
                        href="{:addon_url('official/web.official_case_show/list',[':pid'=>14,':sid'=>14])}"
                        class="nhc-case-card-link"
                    >
                        <span>查看案例</span>
                        <svg
                            width="12"
                            height="12"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2.5"
                        >
                            <path d="M5 12h14M12 5l7 7-7 7" />
                        </svg>
                    </a>
                </div>
            </div>

            <!-- 案例 2 -->
            <div class="nhc-case-card">
                <div class="nhc-case-meta">
                    <span class="nhc-case-category">连锁餐饮 · 收银与门店</span>
                    <span class="nhc-seal" style="font-size: 11px"
                        >脱敏案例</span
                    >
                </div>
                <h3 class="nhc-case-title">
                    连锁餐饮品牌「收银与门店管理一体化」
                </h3>
                <div class="nhc-case-img-wrap">
                    <img
                        src="__ADDON__/images/showcases/case_catering.svg"
                        alt="收银与后厨看板界面"
                        loading="lazy"
                    />
                </div>
                <div class="nhc-case-details">
                    <div class="nhc-case-detail-row">
                        <span class="nhc-case-detail-label">业务挑战</span>
                        <span class="nhc-case-detail-content"
                            >高峰时段前台排队，点单信息靠人工传到后厨；门店物料消耗缺少记录。</span
                        >
                    </div>
                    <div class="nhc-case-detail-row">
                        <span class="nhc-case-detail-label">解决方案</span>
                        <span class="nhc-case-detail-content"
                            >收银与后厨看板联动：扫码点单后自动打印到后厨，支付完成即扣减对应物料。</span
                        >
                    </div>
                </div>
                <div class="nhc-case-metrics-bar">
                    <div class="nhc-case-metric-box">
                        <div class="nhc-case-metric-num">离线记账</div>
                        <div class="nhc-case-metric-sub">联网后自动上传</div>
                    </div>
                    <div class="nhc-case-metric-box">
                        <div class="nhc-case-metric-num">后厨联动</div>
                        <div class="nhc-case-metric-sub">
                            点单打印与物料扣减
                        </div>
                    </div>
                    <div class="nhc-case-metric-box">
                        <div class="nhc-case-metric-num">多端适配</div>
                        <div class="nhc-case-metric-sub">
                            收银机/打印机/扫码枪
                        </div>
                    </div>
                </div>
                <div
                    style="
                        margin-top: 20px;
                        display: flex;
                        justify-content: flex-end;
                    "
                >
                    <a
                        href="{:addon_url('official/web.official_case_show/list',[':pid'=>14,':sid'=>14])}"
                        class="nhc-case-card-link"
                    >
                        <span>查看案例</span>
                        <svg
                            width="12"
                            height="12"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2.5"
                        >
                            <path d="M5 12h14M12 5l7 7-7 7" />
                        </svg>
                    </a>
                </div>
            </div>

            <!-- 案例 3 -->
            <div class="nhc-case-card">
                <div class="nhc-case-meta">
                    <span class="nhc-case-category">装备制造 · 进销存</span>
                    <span class="nhc-seal" style="font-size: 11px"
                        >脱敏案例</span
                    >
                </div>
                <h3 class="nhc-case-title">
                    装备制造企业「生产进销存与供应商协同」
                </h3>
                <div class="nhc-case-details">
                    <div class="nhc-case-detail-row">
                        <span class="nhc-case-detail-label">业务挑战</span>
                        <span class="nhc-case-detail-content"
                            >零部件品类多，采购计划与装配进度对不上，部分物料长期积压。</span
                        >
                    </div>
                    <div class="nhc-case-detail-row">
                        <span class="nhc-case-detail-label">解决方案</span>
                        <span class="nhc-case-detail-content"
                            >按 BOM
                            计算缺料，设置库存上下限预警，供应商在门户内确认送货计划。</span
                        >
                    </div>
                </div>
                <div class="nhc-case-metrics-bar">
                    <div class="nhc-case-metric-box">
                        <div class="nhc-case-metric-num">BOM 缺料</div>
                        <div class="nhc-case-metric-sub">按 BOM 计算缺料</div>
                    </div>
                    <div class="nhc-case-metric-box">
                        <div class="nhc-case-metric-num">批次追溯</div>
                        <div class="nhc-case-metric-sub">出入库扫码记录</div>
                    </div>
                    <div class="nhc-case-metric-box">
                        <div class="nhc-case-metric-num">供应商门户</div>
                        <div class="nhc-case-metric-sub">在线确认送货计划</div>
                    </div>
                </div>
                <div
                    style="
                        margin-top: 20px;
                        display: flex;
                        justify-content: flex-end;
                    "
                >
                    <a
                        href="{:addon_url('official/web.official_case_show/list',[':pid'=>14,':sid'=>14])}"
                        class="nhc-case-card-link"
                    >
                        <span>查看案例</span>
                        <svg
                            width="12"
                            height="12"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2.5"
                        >
                            <path d="M5 12h14M12 5l7 7-7 7" />
                        </svg>
                    </a>
                </div>
            </div>

            <!-- 案例 4 -->
            <div class="nhc-case-card">
                <div class="nhc-case-meta">
                    <span class="nhc-case-category">政务服务 · 知识库辅助</span>
                    <span class="nhc-seal" style="font-size: 11px"
                        >脱敏案例</span
                    >
                </div>
                <h3 class="nhc-case-title">
                    政务机构「基于知识库的审核辅助智能体」
                </h3>
                <div class="nhc-case-details">
                    <div class="nhc-case-detail-row">
                        <span class="nhc-case-detail-label">业务挑战</span>
                        <span class="nhc-case-detail-content"
                            >制度与历史档案数量大，人工查证耗时，不同经办人的判断标准不一致。</span
                        >
                    </div>
                    <div class="nhc-case-detail-row">
                        <span class="nhc-case-detail-label">解决方案</span>
                        <span class="nhc-case-detail-content"
                            >把制度与法规建成知识库，审核时检索相关条款并附出处，由经办人复核。</span
                        >
                    </div>
                </div>
                <div class="nhc-case-metrics-bar">
                    <div class="nhc-case-metric-box">
                        <div class="nhc-case-metric-num">内网部署</div>
                        <div class="nhc-case-metric-sub">数据不出机房</div>
                    </div>
                    <div class="nhc-case-metric-box">
                        <div class="nhc-case-metric-num">法规溯源</div>
                        <div class="nhc-case-metric-sub">标注原文出处</div>
                    </div>
                    <div class="nhc-case-metric-box">
                        <div class="nhc-case-metric-num">人机协同</div>
                        <div class="nhc-case-metric-sub">初审辅助专家终审</div>
                    </div>
                </div>
                <div
                    style="
                        margin-top: 20px;
                        display: flex;
                        justify-content: flex-end;
                    "
                >
                    <a
                        href="{:addon_url('official/web.official_case_show/list',[':pid'=>14,':sid'=>14])}"
                        class="nhc-case-card-link"
                    >
                        <span>查看案例</span>
                        <svg
                            width="12"
                            height="12"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2.5"
                        >
                            <path d="M5 12h14M12 5l7 7-7 7" />
                        </svg>
                    </a>
                </div>
            </div>
        </div>

        <div style="text-align: center; margin-top: 48px">
            <a
                href="{:addon_url('official/web.official_case_show/list',[':pid'=>14,':sid'=>14])}"
                class="nhc-btn nhc-btn-outline nhc-btn-lg"
            >
                <span>浏览案例</span>
                <svg
                    width="14"
                    height="14"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <path d="M5 12h14M12 5l7 7-7 7" />
                </svg>
            </a>
        </div>
    </div>
</section>
<!-- 案例入口 (Cases Section) 结束 -->

<!-- 5. 全生命周期交付流程 (Process Section) 开始 -->
<section id="process" class="nhc-process">
    <div class="nhc-container">
        <div class="nhc-section-header">
            <div class="nhc-section-tag">
                <span class="nhc-seal">研发流程</span>
                <span class="nhc-tag-text">HOW WE WORK</span>
            </div>
            <h2 class="nhc-section-title">项目怎么推进</h2>
            <p class="nhc-section-desc">
                下面五个阶段是常规做法，具体项目按合同调整。每个阶段结束都有文档或可运行的系统，确认后再往下走。
            </p>
            <div class="nhc-line-divider"><span></span></div>
        </div>

        <div class="nhc-process-flow">
            <!-- 步骤 1 -->
            <div class="nhc-process-card">
                <div class="nhc-process-step-num">01</div>
                <h4 class="nhc-process-step-title">需求调研与方案确认</h4>
                <p class="nhc-process-step-desc">
                    由架构师参与调研，梳理现有流程与系统边界，输出需求规格说明书和可行性评估，双方确认后进入设计。
                </p>
            </div>

            <!-- 步骤 2 -->
            <div class="nhc-process-card">
                <div class="nhc-process-step-num">02</div>
                <h4 class="nhc-process-step-title">架构设计与技术选型</h4>
                <p class="nhc-process-step-desc">
                    按业务规模、数据量和客户运维能力确定架构（单体或微服务）、数据库与缓存方案，并给出部署拓扑与容量估算。
                </p>
            </div>

            <!-- 步骤 3 -->
            <div class="nhc-process-card">
                <div class="nhc-process-step-num">03</div>
                <h4 class="nhc-process-step-title">编码、审查与测试</h4>
                <p class="nhc-process-step-desc">
                    代码合并前做审查，走 CI
                    构建；接口与核心流程编写自动化测试用例，测试记录随版本归档。
                </p>
            </div>

            <!-- 步骤 4 -->
            <div class="nhc-process-card">
                <div class="nhc-process-step-num">04</div>
                <h4 class="nhc-process-step-title">压力测试与安全测试</h4>
                <p class="nhc-process-step-desc">
                    按约定的并发量做压力测试，检查权限、越权与常见注入风险；需要第三方渗透测试报告时另行委托。
                </p>
            </div>

            <!-- 步骤 5 -->
            <div class="nhc-process-card">
                <div class="nhc-process-step-num">05</div>
                <h4 class="nhc-process-step-title">部署、移交与运维支持</h4>
                <p class="nhc-process-step-desc">
                    部署到客户专有云或机房内网，交付源码、部署文档与数据库字典，并按合同约定的
                    SLA 响应。
                </p>
            </div>
        </div>

        <div style="text-align: center; margin-top: 40px">
            <a
                href="{:addon_url('official/web.official_product/list',[':pid'=>19,':sid'=>19])}#services-list"
                class="nhc-btn nhc-btn-outline nhc-btn-sm"
            >
                <span>研发规范</span>
                <svg
                    width="14"
                    height="14"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <path d="M5 12h14M12 5l7 7-7 7" />
                </svg>
            </a>
        </div>
    </div>
</section>
<!-- 交付流程 (Process Section) 结束 -->

<!-- 6. 客户评价与合作伙伴 (Testimonials & Clients) 开始 -->
<section class="nhc-testimonials">
    <div class="nhc-container">
        <div class="nhc-section-header">
            <div class="nhc-section-tag">
                <span class="nhc-seal">客户评价</span>
                <span class="nhc-tag-text">WHAT CLIENTS SAY</span>
            </div>
            <h2 class="nhc-section-title">客户的原话</h2>
            <p class="nhc-section-desc">
                以下反馈经受访者同意后引用，并按对方要求隐去企业名称与姓名。
            </p>
            <div class="nhc-line-divider"><span></span></div>
        </div>

        <div class="nhc-testimonials-grid">
            <div class="nhc-testimonial-card">
                <div class="nhc-quote-icon">“</div>
                <p class="nhc-testimonial-text">
                    订货中台重做后，大促当天的订单没卡住，库存和财务的账也能对上了。过程中沟通比较直接，改动都有记录。
                </p>
                <div class="nhc-testimonial-author">
                    <div class="nhc-author-avatar">企</div>
                    <div class="nhc-author-info">
                        <span class="nhc-author-name"
                            >供应链企业 · 技术负责人</span
                        >
                        <span class="nhc-author-role">订货中台 · 分销业务</span>
                    </div>
                </div>
            </div>

            <div class="nhc-testimonial-card">
                <div class="nhc-quote-icon">“</div>
                <p class="nhc-testimonial-text">
                    收银员学半天就能上手。门店断网时照常收银，网络恢复后单据自动补传，月底对账省了不少事。
                </p>
                <div class="nhc-testimonial-author">
                    <div class="nhc-author-avatar">企</div>
                    <div class="nhc-author-info">
                        <span class="nhc-author-name"
                            >连锁零售企业 · 运营负责人</span
                        >
                        <span class="nhc-author-role">门店收银 · 连锁零售</span>
                    </div>
                </div>
            </div>

            <div class="nhc-testimonial-card">
                <div class="nhc-quote-icon">“</div>
                <p class="nhc-testimonial-text">
                    智能体部署在内网，数据不出机房，这一点通过了我们信息中心的审查。检索结果带原文出处，同事敢用。
                </p>
                <div class="nhc-testimonial-author">
                    <div class="nhc-author-avatar">企</div>
                    <div class="nhc-author-info">
                        <span class="nhc-author-name"
                            >装备制造企业 · 信息中心负责人</span
                        >
                        <span class="nhc-author-role">知识库 · 内网部署</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 合作企业展位 -->
        <div style="text-align: center; margin-bottom: 24px">
            <span
                style="
                    font-size: 13px;
                    letter-spacing: 2px;
                    color: var(--text-muted);
                    text-transform: uppercase;
                "
                >常见项目类型（客户名称按约定不公开）</span
            >
        </div>
        <div class="nhc-clients-grid">
            <div class="nhc-client-item">
                <span class="nhc-client-name">商贸流通</span>
                <span class="nhc-client-tag">分销订货与库存管理</span>
            </div>
            <div class="nhc-client-item">
                <span class="nhc-client-name">装备制造</span>
                <span class="nhc-client-tag">生产进销存与供应商协同</span>
            </div>
            <div class="nhc-client-item">
                <span class="nhc-client-name">政务与企业服务</span>
                <span class="nhc-client-tag">知识库问答与审核辅助</span>
            </div>
            <div class="nhc-client-item">
                <span class="nhc-client-name">零售与餐饮</span>
                <span class="nhc-client-tag">收银与门店管理</span>
            </div>
            <div class="nhc-client-item">
                <span class="nhc-client-name">农产品与快消</span>
                <span class="nhc-client-tag">线上商城与分销</span>
            </div>
            <div class="nhc-client-item">
                <span class="nhc-client-name">医药与冷链</span>
                <span class="nhc-client-tag">批次追溯与效期管理</span>
            </div>
        </div>
    </div>
</section>
<!-- 客户评价与合作伙伴 结束 -->

<!-- 6.5 技术洞察与研发动态 (Insights & Engineering Section) 开始 -->
<section
    id="insights"
    class="nhc-section nhc-insights-section"
    style="
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        padding: 80px 0;
    "
>
    <div class="nhc-container">
        <!-- 章节标题栏 -->
        <div
            style="
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                flex-wrap: wrap;
                gap: 16px;
                margin-bottom: 40px;
            "
        >
            <div>
                <div
                    style="
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        margin-bottom: 10px;
                    "
                >
                    <span class="nhc-seal">技术笔记</span>
                    <span
                        style="
                            font-size: 13px;
                            color: var(--primary);
                            font-weight: 600;
                            letter-spacing: 1px;
                        "
                        >ENGINEERING INSIGHTS</span
                    >
                </div>
                <h2
                    style="
                        font-family: var(--font-serif);
                        font-size: 28px;
                        font-weight: 700;
                        color: var(--text-primary);
                        margin: 0 0 8px 0;
                    "
                >
                    技术笔记与团队动态
                </h2>
                <p
                    style="
                        font-size: 14px;
                        color: var(--text-secondary);
                        margin: 0;
                        max-width: 640px;
                        line-height: 1.6;
                    "
                >
                    写一些项目里的具体做法：架构怎么选、性能问题怎么查、交付时遇到过哪些问题。
                </p>
            </div>
            <a
                href="{:addon_url('official/web.official_journalism/list',[':pid'=>6,':sid'=>6])}"
                class="nhc-btn nhc-btn-outline nhc-btn-sm"
                style="display: inline-flex; align-items: center; gap: 6px"
            >
                <span>更多动态</span>
                <svg
                    width="12"
                    height="12"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2.5"
                >
                    <path d="M5 12h14M12 5l7 7-7 7" />
                </svg>
            </a>
        </div>

        <!-- 文章四列/两列响应式卡片网格 -->
        <div class="nhc-article-grid">
            {if !empty($information['data'])} {foreach name="information.data"
            id="art" key="idx" offset="0" length="4"}
            <article class="nhc-article-card">
                <a
                    href="{:addon_url('official/web.official_journalism/details',[':pid'=>6,':sid'=>$art['official_category_id'],':id'=>$art['id']])}"
                    class="nhc-article-card-thumb"
                >
                    {php} $cover_fallbacks = [
                    '/assets/addons/official/images/articles/article_cache.svg',
                    '/assets/addons/official/images/articles/article_mysql_page.svg',
                    '/assets/addons/official/images/articles/article_xxl_job.svg',
                    '/assets/addons/official/images/articles/article_redis_split.svg',
                    ]; $img_val = !empty($art['image']) ? $art['image'] : ''; if
                    (empty($img_val) || strpos($img_val,
                    'article_microservice.svg') !== false) { $cover_src =
                    isset($cover_fallbacks[$idx]) ? $cover_fallbacks[$idx] :
                    '/assets/addons/official/images/articles/article_microservice.svg';
                    } else { $cover_src = $img_val; } {/php}
                    <img
                        src="{$cover_src}"
                        alt="{$art['title']}"
                        loading="lazy"
                        style="width: 100%; height: 100%; object-fit: cover"
                    />
                </a>
                <div class="nhc-article-card-body">
                    <div class="nhc-article-meta">
                        <span class="nhc-article-category-badge"
                            >{if $art['official_category_id'] ==
                            7}公司动态{else/}技术文章{/if}</span
                        >
                        <span>{:date('Y-m-d', $art['createtime'])}</span>
                        <span>·</span>
                        <span>纳海川技术团队</span>
                    </div>
                    <a
                        href="{:addon_url('official/web.official_journalism/details',[':pid'=>6,':sid'=>$art['official_category_id'],':id'=>$art['id']])}"
                    >
                        <h3 class="nhc-article-card-title">{$art['title']}</h3>
                    </a>
                    <p class="nhc-article-card-desc">{$art['subheading']}</p>
                    <div
                        class="nhc-article-card-footer"
                        style="justify-content: flex-end"
                    >
                        <a
                            href="{:addon_url('official/web.official_journalism/details',[':pid'=>6,':sid'=>$art['official_category_id'],':id'=>$art['id']])}"
                            class="nhc-article-read-btn"
                        >
                            <span>阅读全文</span>
                            <svg
                                width="12"
                                height="12"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2.5"
                            >
                                <path d="M5 12h14M12 5l7 7-7 7" />
                            </svg>
                        </a>
                    </div>
                </div>
            </article>
            {/foreach} {else/}
            <!-- 静态默认文章卡片 -->
            <article class="nhc-article-card">
                <a
                    href="{:addon_url('official/web.official_journalism/details',[':pid'=>6,':sid'=>8,':id'=>201])}"
                    class="nhc-article-card-thumb"
                >
                    <img
                        src="/assets/addons/official/images/articles/article_microservice.svg"
                        alt="高并发商城中台架构设计"
                        loading="lazy"
                    />
                </a>
                <div class="nhc-article-card-body">
                    <div class="nhc-article-meta">
                        <span class="nhc-article-category-badge">技术文章</span>
                        <span>纳海川技术团队</span>
                    </div>
                    <a
                        href="{:addon_url('official/web.official_journalism/details',[':pid'=>6,':sid'=>8,':id'=>201])}"
                    >
                        <h3 class="nhc-article-card-title">
                            高并发商城中台架构设计：从单体拆分到微服务与分布式事务实践
                        </h3>
                    </a>
                    <p class="nhc-article-card-desc">
                        从单体到微服务的拆分过程，以及订单、库存、支付在不同服务之间如何保持一致。
                    </p>
                    <div
                        class="nhc-article-card-footer"
                        style="justify-content: flex-end"
                    >
                        <a
                            href="{:addon_url('official/web.official_journalism/details',[':pid'=>6,':sid'=>8,':id'=>201])}"
                            class="nhc-article-read-btn"
                        >
                            <span>阅读全文</span>
                            <svg
                                width="12"
                                height="12"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2.5"
                            >
                                <path d="M5 12h14M12 5l7 7-7 7" />
                            </svg>
                        </a>
                    </div>
                </div>
            </article>
            <article class="nhc-article-card">
                <a
                    href="{:addon_url('official/web.official_journalism/details',[':pid'=>6,':sid'=>8,':id'=>202])}"
                    class="nhc-article-card-thumb"
                >
                    <img
                        src="/assets/addons/official/images/articles/article_ai_agent.svg"
                        alt="企业私域 AI 智能体落地指南"
                        loading="lazy"
                    />
                </a>
                <div class="nhc-article-card-body">
                    <div class="nhc-article-meta">
                        <span class="nhc-article-category-badge">技术文章</span>
                        <span>纳海川技术团队</span>
                    </div>
                    <a
                        href="{:addon_url('official/web.official_journalism/details',[':pid'=>6,':sid'=>8,':id'=>202])}"
                    >
                        <h3 class="nhc-article-card-title">
                            企业私域 AI 智能体落地指南：基于 RAG
                            的本地化知识库与安全隔离工程
                        </h3>
                    </a>
                    <p class="nhc-article-card-desc">
                        如何在客户内网部署大模型与知识库，如何切分文档、控制检索范围，并让回答带上出处。
                    </p>
                    <div
                        class="nhc-article-card-footer"
                        style="justify-content: flex-end"
                    >
                        <a
                            href="{:addon_url('official/web.official_journalism/details',[':pid'=>6,':sid'=>8,':id'=>202])}"
                            class="nhc-article-read-btn"
                        >
                            <span>阅读全文</span>
                            <svg
                                width="12"
                                height="12"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2.5"
                            >
                                <path d="M5 12h14M12 5l7 7-7 7" />
                            </svg>
                        </a>
                    </div>
                </div>
            </article>
            {/if}
        </div>
    </div>
</section>
<!-- 技术洞察与研发动态 结束 -->

<!-- 7. 底部行动号召 (CTA Section) 开始 -->
<section id="contact" class="nhc-cta">
    <div class="nhc-container">
        <div class="nhc-cta-inner">
            <div class="nhc-cta-content">
                <span
                    class="nhc-seal"
                    style="
                        background: rgba(255, 255, 255, 0.15);
                        border-color: rgba(255, 255, 255, 0.4);
                        color: #ffffff;
                        margin-bottom: 12px;
                    "
                    >联系我们</span
                >
                <h2 class="nhc-cta-title">
                    有具体的系统研发或产品选型需求？可以直接沟通
                </h2>
                <p class="nhc-cta-desc">
                    由架构师直接对接，先确认业务流程、现有系统和部署环境，再给方案、工期与预算区间。是否合作都可以先把问题聊清楚。
                </p>
            </div>
            <div class="nhc-cta-buttons">
                <a
                    href="{:addon_url('official/web.official_online_message/list',[':pid'=>18,':sid'=>18])}"
                    class="nhc-btn nhc-cta-btn-light nhc-btn-lg"
                >
                    <span>预约咨询</span>
                    <svg
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path d="M5 12h14M12 5l7 7-7 7" />
                    </svg>
                </a>
                <a
                    href="tel:{:__config('site_mobile','value')}"
                    class="nhc-btn nhc-cta-btn-ghost nhc-btn-lg"
                >
                    <span>电话咨询</span>
                </a>
            </div>
        </div>
    </div>
</section>
<!-- 底部行动号召 (CTA Section) 结束 -->

<!-- 首页主体 结束 -->
{/block} {block name="js"}
<script>
    document.addEventListener("DOMContentLoaded", function () {
        var carousel = document.getElementById("nhcHeroCarousel");
        if (!carousel) return;

        var slides = carousel.querySelectorAll(".nhc-carousel-slide");
        var dots = carousel.querySelectorAll(".nhc-carousel-dot");
        var prevBtn = document.getElementById("nhcPrevBtn");
        var nextBtn = document.getElementById("nhcNextBtn");
        var currentIndex = 0;
        var totalSlides = slides.length;
        var autoPlayTimer = null;
        var intervalDuration = 6000;

        function goToSlide(index) {
            if (index < 0) {
                index = totalSlides - 1;
            } else if (index >= totalSlides) {
                index = 0;
            }

            slides.forEach(function (slide, i) {
                if (i === index) {
                    slide.classList.add("active");
                } else {
                    slide.classList.remove("active");
                }
            });

            dots.forEach(function (dot, i) {
                if (i === index) {
                    dot.classList.add("active");
                } else {
                    dot.classList.remove("active");
                }
            });

            currentIndex = index;
        }

        function nextSlide() {
            goToSlide(currentIndex + 1);
        }

        function prevSlide() {
            goToSlide(currentIndex - 1);
        }

        function startAutoPlay() {
            stopAutoPlay();
            autoPlayTimer = setInterval(nextSlide, intervalDuration);
        }

        function stopAutoPlay() {
            if (autoPlayTimer) {
                clearInterval(autoPlayTimer);
                autoPlayTimer = null;
            }
        }

        if (prevBtn) {
            prevBtn.addEventListener("click", function (e) {
                e.preventDefault();
                prevSlide();
                startAutoPlay();
            });
        }

        if (nextBtn) {
            nextBtn.addEventListener("click", function (e) {
                e.preventDefault();
                nextSlide();
                startAutoPlay();
            });
        }

        dots.forEach(function (dot) {
            dot.addEventListener("click", function () {
                var targetIdx = parseInt(this.getAttribute("data-goto"), 10);
                if (!isNaN(targetIdx)) {
                    goToSlide(targetIdx);
                    startAutoPlay();
                }
            });
        });

        carousel.addEventListener("mouseenter", stopAutoPlay);
        carousel.addEventListener("mouseleave", startAutoPlay);

        // 触摸滑动支持
        var touchStartX = 0;
        var touchEndX = 0;
        carousel.addEventListener(
            "touchstart",
            function (e) {
                touchStartX = e.changedTouches[0].screenX;
                stopAutoPlay();
            },
            { passive: true },
        );

        carousel.addEventListener(
            "touchend",
            function (e) {
                touchEndX = e.changedTouches[0].screenX;
                if (touchStartX - touchEndX > 50) {
                    nextSlide();
                } else if (touchEndX - touchStartX > 50) {
                    prevSlide();
                }
                startAutoPlay();
            },
            { passive: true },
        );

        document.addEventListener("visibilitychange", function () {
            if (document.hidden) {
                stopAutoPlay();
            } else {
                startAutoPlay();
            }
        });

        startAutoPlay();
    });
</script>
{/block}