{extend name="web/official_common/mobile/base" /} {block name="css"}
<style>
    /* 移动端特定微调 */
    .nhc-hero {
        padding-top: 100px;
        padding-bottom: 50px;
    }
    .nhc-hero-title {
        font-size: 28px;
        letter-spacing: 1px;
    }
    .nhc-hero-subtitle {
        font-size: 14px;
    }
</style>
{/block} {block name="content"}
<!-- 纳海川移动端 首页主体 开始 -->

<!-- 1. 高端全景首屏轮播图 (Mobile Hero 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 /><span class="highlight"
                                >源码交付</span
                            >，部署在客户自己的服务器
                        </h1>
                        <p class="nhc-hero-subtitle">
                            承接企业业务系统、APP 与小程序、私有化 AI
                            应用的开发，交付源码、部署说明和数据库字典。
                        </p>
                        <div class="nhc-hero-cta">
                            <a href="#contact" class="nhc-btn nhc-btn-primary">
                                <span>预约咨询</span>
                            </a>
                            <a href="#products" class="nhc-btn nhc-btn-outline">
                                <span>浏览产品</span>
                            </a>
                        </div>
                        <div class="nhc-hero-metrics">
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 15px"
                                >
                                    源码交付
                                </div>
                                <div class="nhc-metric-label">
                                    附部署说明和数据库字典
                                </div>
                            </div>
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 15px"
                                >
                                    交付进度
                                </div>
                                <div class="nhc-metric-label">
                                    按阶段确认，功能逐项验收
                                </div>
                            </div>
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 15px"
                                >
                                    部署方式
                                </div>
                                <div class="nhc-metric-label">
                                    客户机房、专有云或内网
                                </div>
                            </div>
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 15px"
                                >
                                    测试记录
                                </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 /><span class="highlight"
                                >专有云</span
                            >与内网都能部署
                        </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"
                            >
                                <span>了解方案</span>
                            </a>
                            <a
                                href="{:addon_url('official/web.official_case_show/list',[':pid'=>14,':sid'=>14])}"
                                class="nhc-btn nhc-btn-outline"
                            >
                                <span>查阅案例</span>
                            </a>
                        </div>
                        <div class="nhc-hero-metrics">
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 15px"
                                >
                                    技术选型
                                </div>
                                <div class="nhc-metric-label">
                                    按业务规模确定
                                </div>
                            </div>
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 15px"
                                >
                                    部署支持
                                </div>
                                <div class="nhc-metric-label">
                                    专有云、内网与混合环境
                                </div>
                            </div>
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 15px"
                                >
                                    多端共用
                                </div>
                                <div class="nhc-metric-label">
                                    App / 小程序 / H5 同一后台
                                </div>
                            </div>
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 15px"
                                >
                                    代码审查
                                </div>
                                <div class="nhc-metric-label">
                                    合并前审查与 CI 构建
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 幻灯片 3：智元篇 -->
            <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 />基于内部资料做<span
                                class="highlight"
                                >检索问答</span
                            >
                        </h1>
                        <p class="nhc-hero-subtitle">
                            把制度、法规和历史文档整理成可检索的知识库，回答标注原文出处；模型与数据部署在客户内网服务器上。
                        </p>
                        <div class="nhc-hero-cta">
                            <a href="#contact" class="nhc-btn nhc-btn-primary">
                                <span>方案咨询</span>
                            </a>
                            <a href="#services" class="nhc-btn nhc-btn-outline">
                                <span>技术架构</span>
                            </a>
                        </div>
                        <div class="nhc-hero-metrics">
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 15px"
                                >
                                    知识库
                                </div>
                                <div class="nhc-metric-label">
                                    文档整理与切分检索
                                </div>
                            </div>
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 15px"
                                >
                                    出处标注
                                </div>
                                <div class="nhc-metric-label">
                                    回答附带原文位置
                                </div>
                            </div>
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 15px"
                                >
                                    流程辅助
                                </div>
                                <div class="nhc-metric-label">
                                    审批与工单环节试用
                                </div>
                            </div>
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 15px"
                                >
                                    内网部署
                                </div>
                                <div class="nhc-metric-label">
                                    模型与数据不出机房
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 幻灯片 4：商业产品篇 -->
            <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 /><span class="highlight"
                                >可以直接用</span
                            >，也可以按需改
                        </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"
                            >
                                <span>申请演示</span>
                            </a>
                            <a href="#contact" class="nhc-btn nhc-btn-outline">
                                <span>咨询报价</span>
                            </a>
                        </div>
                        <div class="nhc-hero-metrics">
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 15px"
                                >
                                    四个产品
                                </div>
                                <div class="nhc-metric-label">
                                    商城、收银、进销存、SaaS
                                </div>
                            </div>
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 15px"
                                >
                                    防重复扣款
                                </div>
                                <div class="nhc-metric-label">
                                    重复提交只扣一次款
                                </div>
                            </div>
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 15px"
                                >
                                    外设对接
                                </div>
                                <div class="nhc-metric-label">
                                    扫码枪、打印机、钱箱
                                </div>
                            </div>
                            <div class="nhc-metric-item">
                                <div
                                    class="nhc-metric-val"
                                    style="font-size: 15px"
                                >
                                    部署方式
                                </div>
                                <div class="nhc-metric-label">
                                    公有云订阅或源码部署
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </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>

<!-- 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">SERVICES</span>
            </div>
            <h2 class="nhc-section-title" style="font-size: 26px">
                三块业务，解决具体问题
            </h2>
            <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>
                <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>
                </ul>
                <div style="margin-top: 14px">
                    <a
                        href="{:addon_url('official/web.official_product/service_software')}"
                        class="nhc-service-link"
                        style="
                            display: inline-flex;
                            align-items: center;
                            gap: 6px;
                            font-size: 13px;
                            color: var(--primary);
                        "
                    >
                        <span>了解详情</span>
                        <svg
                            width="12"
                            height="12"
                            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 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>
                <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>
                </ul>
                <div style="margin-top: 14px">
                    <a
                        href="{:addon_url('official/web.official_product/service_app')}"
                        class="nhc-service-link"
                        style="
                            display: inline-flex;
                            align-items: center;
                            gap: 6px;
                            font-size: 13px;
                            color: var(--primary);
                        "
                    >
                        <span>了解详情</span>
                        <svg
                            width="12"
                            height="12"
                            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 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>
                <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>
                </ul>
                <div style="margin-top: 14px">
                    <a
                        href="{:addon_url('official/web.official_product/service_agent')}"
                        class="nhc-service-link"
                        style="
                            display: inline-flex;
                            align-items: center;
                            gap: 6px;
                            font-size: 13px;
                            color: var(--primary);
                        "
                    >
                        <span>了解详情</span>
                        <svg
                            width="12"
                            height="12"
                            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>

        <div style="text-align: center; margin-top: 24px">
            <a
                href="{:addon_url('official/web.official_product/list',[':pid'=>19,':sid'=>19])}"
                class="nhc-btn nhc-btn-outline"
                style="width: 100%; justify-content: center"
            >
                <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>

<!-- 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">PRODUCTS</span>
            </div>
            <h2 class="nhc-section-title" style="font-size: 26px">
                四个标准化产品
            </h2>
            <div class="nhc-line-divider"><span></span></div>
        </div>

        <div class="nhc-products-grid">
            <div class="nhc-product-card">
                <div class="nhc-card-thumb">
                    <img
                        src="__ADDON__/images/showcases/product_mall.svg"
                        alt="商城系统管理后台"
                        loading="lazy"
                    />
                </div>
                <span class="nhc-product-type-badge">全渠道商城</span>
                <h3 class="nhc-product-name">商城</h3>
                <p class="nhc-product-desc">
                    支持多商户入驻、分销与拼团秒杀等常用营销工具的商城系统，可对接微信、支付宝支付。
                </p>
                <div style="margin-top: 12px">
                    <a
                        href="{:addon_url('official/web.official_product/list',[':pid'=>22,':sid'=>22])}#product-matrix"
                        class="nhc-btn nhc-btn-outline nhc-btn-sm"
                        style="width: 100%; justify-content: center"
                        >查看详情</a
                    >
                </div>
            </div>
            <div class="nhc-product-card">
                <div class="nhc-card-thumb">
                    <img
                        src="__ADDON__/images/showcases/product_pos.svg"
                        alt="收银系统与扫码、打印外设"
                        loading="lazy"
                    />
                </div>
                <span class="nhc-product-type-badge">扫码收银</span>
                <h3 class="nhc-product-name">收银</h3>
                <p class="nhc-product-desc">
                    收银软件与扫码枪、小票打印机等外设配合使用，断网时可离线记账。
                </p>
                <div style="margin-top: 12px">
                    <a
                        href="{:addon_url('official/web.official_product/list',[':pid'=>22,':sid'=>22])}#demo-sandbox"
                        class="nhc-btn nhc-btn-outline nhc-btn-sm"
                        style="width: 100%; justify-content: center"
                        >申请演示</a
                    >
                </div>
            </div>
            <div class="nhc-product-card">
                <div class="nhc-card-thumb">
                    <img
                        src="__ADDON__/images/showcases/product_erp.svg"
                        alt="进销存与财务数据界面"
                        loading="lazy"
                    />
                </div>
                <span class="nhc-product-type-badge">业财一体化</span>
                <h3 class="nhc-product-name">进销存</h3>
                <p class="nhc-product-desc">
                    采购、销售、仓储与财务数据打通，支持多仓库调拨与库存预警。
                </p>

                <div style="margin-top: 12px">
                    <a
                        href="{:addon_url('official/web.official_product/list',[':pid'=>22,':sid'=>22])}#product-matrix"
                        class="nhc-btn nhc-btn-outline nhc-btn-sm"
                        style="width: 100%; justify-content: center"
                        >查看详情</a
                    >
                </div>
            </div>
            <div class="nhc-product-card">
                <div class="nhc-card-thumb">
                    <img
                        src="__ADDON__/images/showcases/product_saas.svg"
                        alt="多租户 SaaS 平台管理界面"
                        loading="lazy"
                    />
                </div>
                <span class="nhc-product-type-badge">多租户平台</span>
                <h3 class="nhc-product-name">SaaS版本</h3>
                <p class="nhc-product-desc">
                    多租户 SaaS
                    平台，按账号开通；数据按租户隔离，也可为单个客户部署独立数据库。
                </p>
                <div style="margin-top: 12px">
                    <a
                        href="{:addon_url('official/web.official_product/list',[':pid'=>22,':sid'=>22])}#demo-sandbox"
                        class="nhc-btn nhc-btn-primary nhc-btn-sm"
                        style="width: 100%; justify-content: center"
                        >立即开通</a
                    >
                </div>
            </div>
        </div>

        <div style="text-align: center; margin-top: 24px">
            <a
                href="{:addon_url('official/web.official_product/list',[':pid'=>22,':sid'=>22])}"
                class="nhc-btn nhc-btn-outline"
                style="width: 100%; justify-content: center"
            >
                <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>

<!-- 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">CASES</span>
            </div>
            <h2 class="nhc-section-title" style="font-size: 26px">
                几个客户项目，以及当时怎么解决
            </h2>
            <p
                style="
                    font-size: 13px;
                    color: var(--text-secondary);
                    margin: 8px 0 0;
                    line-height: 1.6;
                "
            >
                以下案例隐去企业名称与联系人，交付范围与验收记录可另行说明。
            </p>
            <div class="nhc-line-divider"><span></span></div>
        </div>

        <div class="nhc-cases-grid">
            <div class="nhc-case-card">
                <span class="nhc-case-category">商贸流通</span>
                <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-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>
                <div style="margin-top: 14px">
                    <a
                        href="{:addon_url('official/web.official_case_show/list',[':pid'=>14,':sid'=>14])}"
                        class="nhc-case-card-link"
                        style="
                            display: inline-flex;
                            align-items: center;
                            gap: 6px;
                            font-size: 13px;
                            color: var(--primary);
                        "
                    >
                        <span>查看案例</span>
                        <svg
                            width="12"
                            height="12"
                            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 class="nhc-case-card">
                <span class="nhc-case-category">连锁零售</span>
                <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-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>
                <div style="margin-top: 14px">
                    <a
                        href="{:addon_url('official/web.official_case_show/list',[':pid'=>14,':sid'=>14])}"
                        class="nhc-case-card-link"
                        style="
                            display: inline-flex;
                            align-items: center;
                            gap: 6px;
                            font-size: 13px;
                            color: var(--primary);
                        "
                    >
                        <span>查看案例</span>
                        <svg
                            width="12"
                            height="12"
                            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>

        <div style="text-align: center; margin-top: 24px">
            <a
                href="{:addon_url('official/web.official_case_show/list',[':pid'=>14,':sid'=>14])}"
                class="nhc-btn nhc-btn-outline"
                style="width: 100%; justify-content: center"
            >
                <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>

<!-- 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">PROCESS</span>
            </div>
            <h2 class="nhc-section-title" style="font-size: 26px">
                项目怎么推进
            </h2>
            <div class="nhc-line-divider"><span></span></div>
        </div>

        <div class="nhc-process-flow">
            <div class="nhc-process-card">
                <div class="nhc-process-step-num">01</div>
                <h4 class="nhc-process-step-title">业务需求调研</h4>
            </div>
            <div class="nhc-process-card">
                <div class="nhc-process-step-num">02</div>
                <h4 class="nhc-process-step-title">架构与技术选型</h4>
            </div>
            <div class="nhc-process-card">
                <div class="nhc-process-step-num">03</div>
                <h4 class="nhc-process-step-title">编码与测试</h4>
            </div>
            <div class="nhc-process-card">
                <div class="nhc-process-step-num">04</div>
                <h4 class="nhc-process-step-title">压力与安全测试</h4>
            </div>
            <div class="nhc-process-card">
                <div class="nhc-process-step-num">05</div>
                <h4 class="nhc-process-step-title">部署与售后支持</h4>
            </div>
        </div>

        <div style="text-align: center; margin-top: 20px">
            <a
                href="{:addon_url('official/web.official_product/list',[':pid'=>19,':sid'=>19])}#services-list"
                class="nhc-btn nhc-btn-outline nhc-btn-sm"
                style="width: 100%; justify-content: center"
            >
                <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>

<!-- 6. 客户评价 (Testimonials Section) -->
<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">TESTIMONIALS</span>
            </div>
            <h2 class="nhc-section-title" style="font-size: 26px">
                客户的原话
            </h2>
            <div class="nhc-line-divider"><span></span></div>
        </div>
        <div class="nhc-testimonials-grid">
            <div class="nhc-testimonial-card">
                <p class="nhc-testimonial-text">
                    订货中台重做后，大促当天的订单没卡住，库存和财务的账也能对上了。
                </p>
                <div class="nhc-author-name">
                    供应链企业 · 技术负责人（名称已隐去）
                </div>
            </div>
            <div class="nhc-testimonial-card">
                <p class="nhc-testimonial-text">
                    门店断网时照常收银，网络恢复后单据自动补传，月底对账省了不少事。
                </p>
                <div class="nhc-author-name">
                    连锁零售企业 · 运营负责人（名称已隐去）
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 7. 底部 CTA -->
<section id="contact" class="nhc-cta">
    <div class="nhc-container">
        <div class="nhc-cta-inner">
            <div class="nhc-cta-content">
                <h2 class="nhc-cta-title" style="font-size: 26px">
                    有具体的系统研发需求？可以直接沟通
                </h2>
                <p class="nhc-cta-desc">
                    由架构师直接对接，先确认业务流程与部署环境，再给方案和工期。
                </p>
            </div>
            <div
                class="nhc-cta-buttons"
                style="
                    margin-top: 20px;
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                "
            >
                <a
                    href="{:addon_url('official/web.official_online_message/list',[':pid'=>18,':sid'=>18])}"
                    class="nhc-btn nhc-cta-btn-light"
                    style="width: 100%; justify-content: center"
                >
                    <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>
                <a
                    href="tel:{:__config('site_mobile','value')}"
                    class="nhc-btn nhc-cta-btn-ghost"
                    style="
                        width: 100%;
                        justify-content: center;
                        border: 1px solid rgba(255, 255, 255, 0.4);
                        color: #fff;
                    "
                >
                    <span>电话咨询</span>
                </a>
            </div>
        </div>
    </div>
</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 currentIndex = 0;
        var totalSlides = slides.length;
        var autoPlayTimer = null;
        var intervalDuration = 5500;

        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;
            }
        }

        dots.forEach(function (dot) {
            dot.addEventListener("click", function () {
                var targetIdx = parseInt(this.getAttribute("data-goto"), 10);
                if (!isNaN(targetIdx)) {
                    goToSlide(targetIdx);
                    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 > 45) {
                    nextSlide();
                } else if (touchEndX - touchStartX > 45) {
                    prevSlide();
                }
                startAutoPlay();
            },
            { passive: true },
        );

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

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