{extend name="web/official_common/mobile/base" /}

{block name="content"}
<!-- 纳海川官方网站 · 移动端标杆案例独立页 (Cases Page Mobile) 开始 -->
<div class="nhc-mobile-cases-page" style="background: #F8FAFC; min-height: 100vh; padding-bottom: 60px;">
    
    <!-- 1. 移动端 Hero 视窗 -->
    <div style="background: #FFFFFF; padding: 28px 16px 22px; border-bottom: 1px solid #E2E8F0; text-align: center;">
        <div style="margin-bottom: 10px;">
            <span class="nhc-seal" style="padding: 2px 10px; font-size: 11px;">精选实践</span>
        </div>
        <h1 style="font-family: 'Noto Serif SC', 'SimSun', serif; font-size: 20px; font-weight: 700; color: #0F172A; margin: 0 0 8px 0; line-height: 1.4;">
            标杆实践成果 · 严谨数据验证
        </h1>
        <p style="font-size: 13px; color: #64748B; margin: 0; line-height: 1.6;">
            纳海川坚持严苛工程标准，为政企单位、智能制造与连锁商业打造确定性数字化样本。
        </p>
    </div>

    <!-- 2. 横向滑动筛选器 (Filter) -->
    <div style="background: #FFFFFF; border-bottom: 1px solid #E2E8F0; padding: 12px 16px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;" class="nhc-case-filter" id="nhcMobileCaseFilter">
        <button class="nhc-case-filter-btn active" data-category="all" style="padding: 6px 14px; font-size: 13px; border-radius: 4px; border: 1px solid #2563EB; background: #2563EB; color: #FFFFFF; margin-right: 8px;">全部案例</button>
        <button class="nhc-case-filter-btn" data-category="middle" style="padding: 6px 14px; font-size: 13px; border-radius: 4px; border: 1px solid #E2E8F0; background: #F8FAFC; color: #475569; margin-right: 8px;">软件开发与中台</button>
        <button class="nhc-case-filter-btn" data-category="mobile" style="padding: 6px 14px; font-size: 13px; border-radius: 4px; border: 1px solid #E2E8F0; background: #F8FAFC; color: #475569; margin-right: 8px;">APP与小程序</button>
        <button class="nhc-case-filter-btn" data-category="agent" style="padding: 6px 14px; font-size: 13px; border-radius: 4px; border: 1px solid #E2E8F0; background: #F8FAFC; color: #475569; margin-right: 8px;">企业级 AI 智能体</button>
        <button class="nhc-case-filter-btn" data-category="product" style="padding: 6px 14px; font-size: 13px; border-radius: 4px; border: 1px solid #E2E8F0; background: #F8FAFC; color: #475569;">商城与商业产品</button>
    </div>

    <!-- 3. 案例卡片列表容器 -->
    <div style="padding: 16px;" id="nhcMobileCasesContainer">
        
        <!-- 案例 1 -->
        <div class="nhc-mobile-case-card nhc-case-card" data-category="middle product" style="background: #FFFFFF; border-radius: 6px; border: 1px solid #E2E8F0; padding: 18px; margin-bottom: 16px;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                <span style="font-size: 12px; color: #2563EB; font-weight: 600;">商贸批发 · 数字中台</span>
                <span class="nhc-seal" style="padding: 1px 6px; font-size: 10px;">成果验证</span>
            </div>
            <h3 style="font-family: 'Noto Serif SC', 'SimSun', serif; font-size: 16px; font-weight: 700; color: #0F172A; margin: 0 0 12px 0; line-height: 1.4;">
                大型快消供应链集团「全渠道分销商城与订货中台」
            </h3>
            <div style="background: #F8FAFC; border-radius: 4px; padding: 12px; margin-bottom: 14px; border-left: 3px solid #2563EB;">
                <div style="margin-bottom: 8px;">
                    <div style="font-size: 11px; font-weight: 700; color: #64748B; letter-spacing: 1px;">业务挑战 CHALLENGE</div>
                    <p style="font-size: 12px; color: #334155; margin: 2px 0 0; line-height: 1.5;">
                        跨区域经销商传统订货繁杂，人工拆单对账耗时长达 24 小时以上，高峰期锁库超时常导致断货漏单。
                    </p>
                </div>
                <div>
                    <div style="font-size: 11px; font-weight: 700; color: #64748B; letter-spacing: 1px;">技术方案 SOLUTION</div>
                    <p style="font-size: 12px; color: #334155; margin: 2px 0 0; line-height: 1.5;">
                        重构分布式微服务订货中台，接入灵活等级阶梯价、信用授信账期管控及全自动分单对账引擎。
                    </p>
                </div>
            </div>
            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; border-top: 1px solid #F1F5F9; padding-top: 10px;">
                <div>
                    <div style="font-size: 18px; font-weight: 700; color: #2563EB; font-family: 'Noto Serif SC', serif;">65%</div>
                    <div style="font-size: 11px; color: #64748B;">时效提升</div>
                </div>
                <div>
                    <div style="font-size: 18px; font-weight: 700; color: #0F172A; font-family: 'Noto Serif SC', serif;">0.02%</div>
                    <div style="font-size: 11px; color: #64748B;">差错率降至</div>
                </div>
                <div>
                    <div style="font-size: 18px; font-weight: 700; color: #0F172A; font-family: 'Noto Serif SC', serif;">10W+</div>
                    <div style="font-size: 11px; color: #64748B;">日峰值单量</div>
                </div>
            </div>
        </div>

        <!-- 案例 2 -->
        <div class="nhc-mobile-case-card nhc-case-card" data-category="mobile product" style="background: #FFFFFF; border-radius: 6px; border: 1px solid #E2E8F0; padding: 18px; margin-bottom: 16px;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                <span style="font-size: 12px; color: #2563EB; font-weight: 600;">连锁零售 · 软硬一体</span>
                <span class="nhc-seal" style="padding: 1px 6px; font-size: 10px;">成果验证</span>
            </div>
            <h3 style="font-family: 'Noto Serif SC', 'SimSun', serif; font-size: 16px; font-weight: 700; color: #0F172A; margin: 0 0 12px 0; line-height: 1.4;">
                知名区域连锁餐饮「全场景智能收银与门店一体化」
            </h3>
            <div style="background: #F8FAFC; border-radius: 4px; padding: 12px; margin-bottom: 14px; border-left: 3px solid #06B6D4;">
                <div style="margin-bottom: 8px;">
                    <div style="font-size: 11px; font-weight: 700; color: #64748B; letter-spacing: 1px;">业务挑战 CHALLENGE</div>
                    <p style="font-size: 12px; color: #334155; margin: 2px 0 0; line-height: 1.5;">
                        就餐高峰期前台排队拥堵严重，断网断电导致收银死机与掉单丢单，前后端数据脱节导致物料报表失真。
                    </p>
                </div>
                <div>
                    <div style="font-size: 11px; font-weight: 700; color: #64748B; letter-spacing: 1px;">技术方案 SOLUTION</div>
                    <p style="font-size: 12px; color: #334155; margin: 2px 0 0; line-height: 1.5;">
                        部署软硬一体化收银系统与后厨 KDS 联动看板，打通微信扫码点餐、离线聚合支付与实时扣料核销。
                    </p>
                </div>
            </div>
            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; border-top: 1px solid #F1F5F9; padding-top: 10px;">
                <div>
                    <div style="font-size: 18px; font-weight: 700; color: #2563EB; font-family: 'Noto Serif SC', serif;">70%</div>
                    <div style="font-size: 11px; color: #64748B;">结账耗时缩短</div>
                </div>
                <div>
                    <div style="font-size: 18px; font-weight: 700; color: #0F172A; font-family: 'Noto Serif SC', serif;">28%</div>
                    <div style="font-size: 11px; color: #64748B;">损耗降低</div>
                </div>
                <div>
                    <div style="font-size: 18px; font-weight: 700; color: #0F172A; font-family: 'Noto Serif SC', serif;">300+</div>
                    <div style="font-size: 11px; color: #64748B;">稳定部署门店</div>
                </div>
            </div>
        </div>

        <!-- 案例 3 -->
        <div class="nhc-mobile-case-card nhc-case-card" data-category="middle" style="background: #FFFFFF; border-radius: 6px; border: 1px solid #E2E8F0; padding: 18px; margin-bottom: 16px;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                <span style="font-size: 12px; color: #2563EB; font-weight: 600;">智能制造 · 进销存 ERP</span>
                <span class="nhc-seal" style="padding: 1px 6px; font-size: 10px;">成果验证</span>
            </div>
            <h3 style="font-family: 'Noto Serif SC', 'SimSun', serif; font-size: 16px; font-weight: 700; color: #0F172A; margin: 0 0 12px 0; line-height: 1.4;">
                高端装备制造企业「生产进销存与供应链敏捷协同」
            </h3>
            <div style="background: #F8FAFC; border-radius: 4px; padding: 12px; margin-bottom: 14px; border-left: 3px solid #7C3AED;">
                <div style="margin-bottom: 8px;">
                    <div style="font-size: 11px; font-weight: 700; color: #64748B; letter-spacing: 1px;">业务挑战 CHALLENGE</div>
                    <p style="font-size: 12px; color: #334155; margin: 2px 0 0; line-height: 1.5;">
                        零配件品类繁杂多达数万种，采购节拍与装配生产脱节，呆滞物料占用大量资金且难以追溯批次质量。
                    </p>
                </div>
                <div>
                    <div style="font-size: 11px; font-weight: 700; color: #64748B; letter-spacing: 1px;">技术方案 SOLUTION</div>
                    <p style="font-size: 12px; color: #334155; margin: 2px 0 0; line-height: 1.5;">
                        定制落地进销存管理系统，建立动态物料 BOM 匹配、安全库存预警与供应商端协同门户。
                    </p>
                </div>
            </div>
            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; border-top: 1px solid #F1F5F9; padding-top: 10px;">
                <div>
                    <div style="font-size: 18px; font-weight: 700; color: #2563EB; font-family: 'Noto Serif SC', serif;">42%</div>
                    <div style="font-size: 11px; color: #64748B;">周转率提升</div>
                </div>
                <div>
                    <div style="font-size: 18px; font-weight: 700; color: #0F172A; font-family: 'Noto Serif SC', serif;">55%</div>
                    <div style="font-size: 11px; color: #64748B;">呆滞物料压降</div>
                </div>
                <div>
                    <div style="font-size: 18px; font-weight: 700; color: #0F172A; font-family: 'Noto Serif SC', serif;">35%</div>
                    <div style="font-size: 11px; color: #64748B;">采购周期缩短</div>
                </div>
            </div>
        </div>

        <!-- 案例 4 -->
        <div class="nhc-mobile-case-card nhc-case-card" data-category="agent" style="background: #FFFFFF; border-radius: 6px; border: 1px solid #E2E8F0; padding: 18px; margin-bottom: 16px;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                <span style="font-size: 12px; color: #2563EB; font-weight: 600;">政企服务 · AI 智能体</span>
                <span class="nhc-seal" style="padding: 1px 6px; font-size: 10px;">成果验证</span>
            </div>
            <h3 style="font-family: 'Noto Serif SC', 'SimSun', serif; font-size: 16px; font-weight: 700; color: #0F172A; margin: 0 0 12px 0; line-height: 1.4;">
                知识密集型政务机构「专属 RAG 业务审核智能体」
            </h3>
            <div style="background: #F8FAFC; border-radius: 4px; padding: 12px; margin-bottom: 14px; border-left: 3px solid #2563EB;">
                <div style="margin-bottom: 8px;">
                    <div style="font-size: 11px; font-weight: 700; color: #64748B; letter-spacing: 1px;">业务挑战 CHALLENGE</div>
                    <p style="font-size: 12px; color: #334155; margin: 2px 0 0; line-height: 1.5;">
                        政策法规与历史案例规章跨数十库，人工跨部门查重检索耗时耗力，初审标准难统一且存在合规漏洞。
                    </p>
                </div>
                <div>
                    <div style="font-size: 11px; font-weight: 700; color: #64748B; letter-spacing: 1px;">技术方案 SOLUTION</div>
                    <p style="font-size: 12px; color: #334155; margin: 2px 0 0; line-height: 1.5;">
                        构建基于私有大模型与向量数据库的 RAG 智能体，自动检索法规依据并输出规范化核查报告。
                    </p>
                </div>
            </div>
            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; border-top: 1px solid #F1F5F9; padding-top: 10px;">
                <div>
                    <div style="font-size: 18px; font-weight: 700; color: #2563EB; font-family: 'Noto Serif SC', serif;">&lt;1.5s</div>
                    <div style="font-size: 11px; color: #64748B;">规章响应</div>
                </div>
                <div>
                    <div style="font-size: 18px; font-weight: 700; color: #0F172A; font-family: 'Noto Serif SC', serif;">85%</div>
                    <div style="font-size: 11px; color: #64748B;">人工消耗降低</div>
                </div>
                <div>
                    <div style="font-size: 18px; font-weight: 700; color: #0F172A; font-family: 'Noto Serif SC', serif;">94.6%</div>
                    <div style="font-size: 11px; color: #64748B;">合规准确率</div>
                </div>
            </div>
        </div>

    </div>

    <!-- 4. 【数据】成果数据指标墙 (Data Wall) -->
    <div class="nhc-case-metrics" style="background: #FFFFFF; border-top: 1px solid #E2E8F0; border-bottom: 1px solid #E2E8F0; padding: 24px 16px; margin-top: 10px;">
        <div style="text-align: center; margin-bottom: 16px;">
            <span class="nhc-seal" style="padding: 2px 8px; font-size: 11px;">数据实证</span>
            <h2 style="font-family: 'Noto Serif SC', 'SimSun', serif; font-size: 18px; font-weight: 700; color: #0F172A; margin: 8px 0 4px 0;">
                数字见证力量 · 严谨量化成效
            </h2>
            <p style="font-size: 12px; color: #64748B; margin: 0;">
                以客观业务数据指标为交付尺度，创造确定性价值。
            </p>
        </div>
        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
            <div style="background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 4px; padding: 14px; text-align: center;">
                <div style="font-family: 'Noto Serif SC', serif; font-size: 24px; font-weight: 700; color: #2563EB;">50<sub style="font-size: 13px;">亿+</sub></div>
                <div style="font-size: 12px; font-weight: 600; color: #0F172A; margin-top: 4px;">支撑交易总额</div>
            </div>
            <div style="background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 4px; padding: 14px; text-align: center;">
                <div style="font-family: 'Noto Serif SC', serif; font-size: 24px; font-weight: 700; color: #2563EB;">200<sub style="font-size: 13px;">+</sub></div>
                <div style="font-size: 12px; font-weight: 600; color: #0F172A; margin-top: 4px;">标杆合作组织</div>
            </div>
            <div style="background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 4px; padding: 14px; text-align: center;">
                <div style="font-family: 'Noto Serif SC', serif; font-size: 24px; font-weight: 700; color: #2563EB;">50<sub style="font-size: 13px;">+</sub></div>
                <div style="font-size: 12px; font-weight: 600; color: #0F172A; margin-top: 4px;">自主软件著作权</div>
            </div>
            <div style="background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 4px; padding: 14px; text-align: center;">
                <div style="font-family: 'Noto Serif SC', serif; font-size: 24px; font-weight: 700; color: #2563EB;">99.8<sub style="font-size: 13px;">%</sub></div>
                <div style="font-size: 12px; font-weight: 600; color: #0F172A; margin-top: 4px;">按期交付率</div>
            </div>
        </div>
    </div>

    <!-- 5. 底部行动号召 CTA -->
    <div style="padding: 24px 16px; text-align: center;">
        <h3 style="font-family: 'Noto Serif SC', serif; font-size: 16px; font-weight: 700; color: #0F172A; margin: 0 0 8px 0;">
            预约架构师 1 对 1 方案研讨
        </h3>
        <p style="font-size: 12px; color: #64748B; margin: 0 0 16px 0;">
            纳海川资深团队 24 小时内响应，输出定制落地方案
        </p>
        <a href="{:addon_url('official/web.official_online_message/list',[':pid'=>18,':sid'=>18])}" style="display: block; width: 100%; background: #2563EB; color: #FFFFFF; font-size: 14px; font-weight: 600; padding: 12px 0; border-radius: 4px; text-decoration: none;">
            立即预约业务诊断
        </a>
    </div>

</div>

<!-- 移动端筛选 JS 脚本 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    var btns = document.querySelectorAll('#nhcMobileCaseFilter .nhc-case-filter-btn');
    var cards = document.querySelectorAll('#nhcMobileCasesContainer .nhc-mobile-case-card');

    btns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            var category = this.getAttribute('data-category');
            btns.forEach(function(b) {
                b.style.background = '#F8FAFC';
                b.style.color = '#475569';
                b.style.borderColor = '#E2E8F0';
            });
            this.style.background = '#2563EB';
            this.style.color = '#FFFFFF';
            this.style.borderColor = '#2563EB';

            cards.forEach(function(card) {
                var cCats = card.getAttribute('data-category') || '';
                if (category === 'all' || cCats.indexOf(category) !== -1) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        });
    });
});
</script>
<!-- 纳海川官方网站 · 移动端标杆案例独立页 (Cases Page Mobile) 结束 -->
{/block}