From 39cfded738db6f951d968c87d1c2af33190fe9d4 Mon Sep 17 00:00:00 2001
From: wikiboss <zacow@163.com>
Date: Thu, 8 Oct 2026 16:56:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(services):=20=E5=AE=9E=E7=8E=B0=E5=A4=A7?=
 =?UTF-8?q?=E5=85=AC=E5=8F=B8=E5=93=81=E7=89=8C=E7=BA=A7=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E7=8B=AC=E7=AB=8B=E9=A1=B5=EF=BC=8C=E5=8C=85=E5=90=AB=E5=88=86?=
 =?UTF-8?q?=E7=B1=BB=E8=83=BD=E5=8A=9B=E6=B5=81=E7=A8=8B=E4=BA=A4=E4=BB=98?=
 =?UTF-8?q?=E4=B8=8EFAQ=EF=BC=8C=E5=BD=BB=E5=BA=95=E5=8E=BB=E9=99=A4AI?=
 =?UTF-8?q?=E5=91=B3=E9=81=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 AGENTS.md                                     |   4 +
 .../view/web/official_product/list.html       | 113 ++--
 .../view/web/official_product/list_e.html     |  91 ++-
 .../web/official_product/service_page.html    | 571 ++++++++++++++++++
 .../assets/addons/official/css/modern_nhc.css | 459 ++++++++++++++
 tests/ServicesPageTest.php                    | 137 +++++
 6 files changed, 1269 insertions(+), 106 deletions(-)
 create mode 100644 addons/official/view/web/official_product/service_page.html
 create mode 100644 tests/ServicesPageTest.php

diff --git a/AGENTS.md b/AGENTS.md
index f07e273..12c6f4c 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -40,3 +40,7 @@ https://gitcode.gynhc.com/wikiboss/nahaichuan.git
 
 现代中式高端软件公司官网。主菜单：服务、产品、案例、关于我们、联系我们。独立页面：服务、产品、案例。风格：严谨商务、高级感、现代中式、浅色专业风。背景 #FFFFFF 与 #F8FAFC，主色 #2563EB，辅助 #06B6D4 与 #7C3AED，文字 #0F172A 与 #475569。标题宋体，正文黑体或 Inter。12 列网格，1280px，大留白，细线，水墨抽象，窗棂，印章点缀，圆角 4 至 6px。服务：软件开发、APP与小程序定制、智能体开发。产品：商城、收银、进销存、SaaS版本。首页含首屏、服务产品案例入口、流程、评价、CTA。服务页含分类、能力、流程、交付、FAQ。产品页含矩阵、功能、版本、定价、演示。案例页含筛选、挑战方案结果、数据。关于我们含品牌、团队、资质。联系我们含表单、地图、电话。响应式，禁止 emoji、卡通、霓虹、赛博朋克、国潮堆砌。
 
+
+
+不要有ai味，
+
diff --git a/addons/official/view/web/official_product/list.html b/addons/official/view/web/official_product/list.html
index 7d730b3..e44c147 100644
--- a/addons/official/view/web/official_product/list.html
+++ b/addons/official/view/web/official_product/list.html
@@ -2,72 +2,65 @@
 
 {block name="content"}
 
-<!--主体内容 开始-->
-<div class="product">
-    <!--右侧区域 开始-->
-    <div id="right">
-        <div class="right_title">
-            <!--当前位置 开始-->
-            <div id="location">
-                <b>{:__l('index','Current position')}：</b>
-                <a href="/" target="_self">{:__l('index','Website homepage')}</a> &nbsp;&gt;&gt;&nbsp;
-                <a href="javascript:;">{:ze($res,'name')}</a> &nbsp;&gt;&gt;&nbsp;
-                {if !empty($son_data)}
-                <a href="javascript:;">{:ze($son_data,'name')}</a>
-                {/if}
+{if input('param.pid') == 19 || (isset($res['name']) && strpos($res['name'],'服务') !== false)}
+    <!-- 引入纳海川服务独立页 -->
+    {include file="web/official_product/service_page" /}
+{else/}
+    <!-- 通用产品/服务列表 开始 -->
+    <div class="product nhc-container" style="padding: 110px 0 60px;">
+        <div id="right" style="width: 100%;">
+            <div class="right_title" style="margin-bottom: 24px;">
+                <div id="location" class="nhc-breadcrumb">
+                    <a href="/" target="_self">首页</a> &gt;&gt;
+                    <a href="javascript:;">{:ze($res,'name')}</a>
+                    {if !empty($son_data)}
+                    &gt;&gt; <a href="javascript:;">{:ze($son_data,'name')}</a>
+                    {/if}
+                </div>
+                <h2 style="font-family: var(--font-serif); font-size: 28px; color: var(--text-primary); margin-top: 12px;">
+                    {:ze($res,'name')}
+                </h2>
             </div>
-            <!--当前位置 结束-->
-            <h2>
-                <img src="__ADDON__/images/titleleftbg.png" align="absmiddle">{:ze($res,'name')}
-                <img src="__ADDON__/images/titlerightbg.png" align="absmiddle">
-            </h2>
-        </div>
-        <div id="subchannel_main">
-            <div id="subchannel">
-                <ul class="subchannellist">
-                    {foreach $res['son'] as $item}
-                        <li class="depth1" {if $item['is_choose']} id="current" {/if}>
-                            <a href="{:get_cate_url($item)}">{:ze($item,'name')}</a>
-                        </li>
+            {if !empty($res['son'])}
+            <div id="subchannel_main" style="margin-bottom: 32px;">
+                <div id="subchannel">
+                    <ul class="subchannellist" style="display: flex; gap: 12px; list-style: none;">
+                        {foreach $res['son'] as $item}
+                            <li class="depth1 {if $item['is_choose']}active{/if}" style="padding: 6px 18px; border: 1px solid var(--border-color); border-radius: 4px; background: {if $item['is_choose']}var(--primary){else}#FFF{/if};">
+                                <a href="{:get_cate_url($item)}" style="color: {if $item['is_choose']}#FFF{else}var(--text-secondary){/if};">{:ze($item,'name')}</a>
+                            </li>
+                        {/foreach}
+                    </ul>
+                </div>
+            </div>
+            {/if}
+            <div class="right_body minwidth">
+                <ul class="productlist" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none;">
+                    {foreach $data as $index => $item}
+                    <li style="background: #FFF; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-subtle);">
+                        <a href="{:addon_url('official/web.official_product/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$item['id']])}" target="_blank" class="info_wrap" style="display: block; text-decoration: none;">
+                            <div class="InfoPicture" style="height: 180px; overflow: hidden; background: #F8FAFC; display: flex; align-items: center; justify-content: center;">
+                                <img src="{$item['image']}" title="{$item['title']}" alt="{$item['title']}" style="max-width: 100%; max-height: 100%; object-fit: cover;">
+                            </div>
+                            <div class="InfoWrap" style="padding: 16px;">
+                                <div class="InfoTitle" style="font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--text-primary);">
+                                    {$item['title']}
+                                </div>
+                            </div>
+                        </a>
+                    </li>
                     {/foreach}
                 </ul>
-            </div>
-        </div>
-        <div class="right_body minwidth">
-            <ul class="productlist">
-
-                <!--循环开始-->
-                {foreach $data as $index => $item}
-                <li>
-                    <a href="{:addon_url('official/web.official_product/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$item['id']])}" target="blank" class="info_wrap">
-                        <div class="InfoPicture">
-                            <img src="{$item['image']}" title="{$item['title']}" alt="{$item['title']}">
-                        </div>
-                        <div class="InfoWrap">
-                            <div class="InfoTitle">
-                                {$item['title']}
-                            </div>
-                            <!-- <p>{$item['title']}</p>-->
-                        </div>
-                    </a>
-                </li>
-                {/foreach}
-                <!--循环结束-->
-
-
-            </ul>
-            <div class="page_custom">
-                <div class="page_son">
-                    {$data->render(['pid'=>(int)input('param.pid'),'sid'=>(int)input('param.sid')])}
+                <div class="page_custom" style="margin-top: 40px; text-align: center;">
+                    <div class="page_son">
+                        {$data->render(['pid'=>(int)input('param.pid'),'sid'=>(int)input('param.sid')])}
+                    </div>
                 </div>
             </div>
         </div>
-        <div class="right_bottom"></div>
+        <div class="clear"></div>
     </div>
-    <!--右侧区域 结束-->
-    <div class="clear"></div>
-</div>
-<!--主体内容 结束-->
-
+    <!-- 通用产品/服务列表 结束 -->
+{/if}
 
 {/block}
\ No newline at end of file
diff --git a/addons/official/view/web/official_product/list_e.html b/addons/official/view/web/official_product/list_e.html
index ccafc4c..b9d3ede 100644
--- a/addons/official/view/web/official_product/list_e.html
+++ b/addons/official/view/web/official_product/list_e.html
@@ -2,58 +2,57 @@
 
 {block name="content"}
 
-<!--主体内容 开始-->
-<div class="product">
-    <!--右侧区域 开始-->
-    <div id="right">
-        <div class="right_title">
-            <h2 class="right_title_2">
-                <img src="__ADDON__/images/titleleftbg.png" align="absmiddle">{:ze($res,'name')}
-                <img src="__ADDON__/images/titlerightbg.png" align="absmiddle">
-            </h2>
-        </div>
-        <div id="subchannel_main">
-            <div id="subchannel">
-                <ul class="subchannellist">
-                    {foreach $res['son'] as $item}
-                        <li class="depth1" {if $item['is_choose']} id="current" {/if}>
-                            <a href="{:get_cate_url($item)}" class="current_a">{:ze($item,'name')}</a>
-                        </li>
+{if input('param.pid') == 19 || (isset($res['name']) && strpos($res['name'],'服务') !== false)}
+    <!-- 引入移动端纳海川服务独立页 -->
+    {include file="web/official_product/service_page" /}
+{else/}
+    <!-- 通用产品/服务移动端列表 开始 -->
+    <div class="product nhc-container" style="padding: 80px 16px 40px;">
+        <div id="right">
+            <div class="right_title" style="margin-bottom: 20px;">
+                <h2 style="font-family: var(--font-serif); font-size: 24px; color: var(--text-primary);">
+                    {:ze($res,'name')}
+                </h2>
+            </div>
+            {if !empty($res['son'])}
+            <div id="subchannel_main" style="margin-bottom: 24px;">
+                <div id="subchannel">
+                    <ul class="subchannellist" style="display: flex; flex-wrap: wrap; gap: 8px; list-style: none;">
+                        {foreach $res['son'] as $item}
+                            <li class="depth1 {if $item['is_choose']}active{/if}" style="padding: 6px 14px; border: 1px solid var(--border-color); border-radius: 4px; background: {if $item['is_choose']}var(--primary){else}#FFF{/if};">
+                                <a href="{:get_cate_url($item)}" style="font-size: 13px; color: {if $item['is_choose']}#FFF{else}var(--text-secondary){/if};">{:ze($item,'name')}</a>
+                            </li>
+                        {/foreach}
+                    </ul>
+                </div>
+            </div>
+            {/if}
+            <div class="right_body minwidth">
+                <ul class="productlist" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; list-style: none;">
+                    {foreach $data as $key => $item}
+                    <li style="background: #FFF; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-subtle);">
+                        <div class="content new_xinwen">
+                            <img src="{$item['image']}" title="{$item['title']}" class="new_xinwen_image" style="width: 100%; height: 120px; object-fit: cover;"
+                                 onclick='location.href="{:addon_url('official/web.official_product/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$item['id']])}"'>
+                            <div style="padding: 10px;">
+                                <a class="new_xinwen_A" href="{:addon_url('official/web.official_product/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$item['id']])}" style="font-size: 13px; color: var(--text-primary); text-decoration: none; font-weight: 600;">
+                                    {$item['title']}
+                                </a>
+                            </div>
+                        </div>
+                    </li>
                     {/foreach}
                 </ul>
-            </div>
-        </div>
-        <div class="right_body minwidth">
-            <ul class="productlist">
-                <!--循环开始-->
-                <li class="row">
-                    {foreach $data as $key => $item}
-                    <div class="col s6" style="margin-bottom: 10px">
-                        <div class="content new_xinwen">
-                            <img src="{$item['image']}" title="{$item['title']}" class="new_xinwen_image"
-                                 onclick='location.href="{:addon_url('official/web.official_product/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$item['id']])}"'>
-                            <a class="new_xinwen_A" href="{:addon_url('official/web.official_product/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$item['id']])}">
-                                {$item['title']}
-                            </a>
-                            <!--<p>Lorem ipsum dolor sit amet, consectetur.</p>-->
-                        </div>
+                <div class="page_custom" style="margin-top: 24px; text-align: center;">
+                    <div class="page_son">
+                        {$data->render(['pid'=>(int)input('param.pid'),'sid'=>(int)input('param.sid')])}
                     </div>
-                    {/foreach}
-                </li>
-                <!--循环结束-->
-            </ul>
-            <div class="page_custom">
-                <div class="page_son">
-                    {$data->render(['pid'=>(int)input('param.pid'),'sid'=>(int)input('param.sid')])}
                 </div>
             </div>
         </div>
-        <div class="right_bottom"></div>
+        <div class="clear"></div>
     </div>
-    <!--右侧区域 结束-->
-    <div class="clear"></div>
-</div>
-<!--主体内容 结束-->
-
+    <!-- 通用产品/服务移动端列表 结束 -->
+{/if}
 
 {/block}
\ No newline at end of file
diff --git a/addons/official/view/web/official_product/service_page.html b/addons/official/view/web/official_product/service_page.html
new file mode 100644
index 0000000..d3ca265
--- /dev/null
+++ b/addons/official/view/web/official_product/service_page.html
@@ -0,0 +1,571 @@
+<!-- 纳海川官方网站 · 服务独立页 (Services Page) 开始 -->
+
+<!-- 1. 服务总览 Hero 视窗 -->
+<section class="nhc-page-hero nhc-lattice-pattern">
+    <div class="nhc-container">
+        <div class="nhc-breadcrumb">
+            <a href="{:addon_url('official/web.official_home/index')}">首页</a>
+            <span>/</span>
+            <span>核心服务</span>
+        </div>
+        <div style="margin-bottom: 16px;">
+            <span class="nhc-seal">精工匠造</span>
+        </div>
+        <h1 class="nhc-page-title">经纬立骨铸基石 · 全栈自主赋生产</h1>
+        <p class="nhc-page-desc">
+            纳海川聚焦企业级中台定制、全端移动生态与垂直智能体工程，坚持全流程测试驱动开发（TDD）与金融级安全标准，提供 100% 完整源码工程交付与专有私有化部署。
+        </p>
+        <div style="display: flex; justify-content: center; gap: 16px;">
+            <a href="#services-list" 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"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+            </a>
+            <a href="{:addon_url('official/web.official_online_message/list',[':pid'=>18,':sid'=>18])}" class="nhc-btn nhc-btn-outline nhc-btn-lg">
+                <span>预约架构师评估</span>
+            </a>
+        </div>
+    </div>
+</section>
+
+<!-- 2. 三大服务分类深度展开 (分类板块) -->
+<section id="services-list" class="nhc-service-detail-section nhc-services-categories">
+    <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 DOMAINS</span>
+            </div>
+            <h2 class="nhc-section-title">聚焦三大技术领域 · 打造自主可控工程</h2>
+            <p class="nhc-section-desc">
+                严格遵循企业级软件工程规范，拒绝黑盒组件与外包拼装，从底层架构到全端界面均实现自主可控。
+            </p>
+            <div class="nhc-line-divider"><span></span></div>
+        </div>
+
+        <!-- 服务 01：软件开发 -->
+        <div class="nhc-service-detail-card nhc-corner-card">
+            <div class="nhc-service-detail-inner">
+                <div>
+                    <div class="nhc-service-tagline">DOMAIN 01 · 核心中台与底层工程</div>
+                    <h3 class="nhc-service-detail-title">企业级软件开发与微服务中台</h3>
+                    <p class="nhc-service-detail-desc">
+                        面向高并发、高可用与复杂业务逻辑场景，纳海川提供专有业务中台重构与定制开发服务。通过微服务分布式解耦、主从数据库读写分离与千万级缓存调度，彻底消除系统性能瓶颈与数据孤岛。
+                    </p>
+                    <div class="nhc-tech-pills">
+                        <span class="nhc-tech-pill">Spring Cloud</span>
+                        <span class="nhc-tech-pill">PHP 8+ / Hyperf</span>
+                        <span class="nhc-tech-pill">MySQL 读写分离</span>
+                        <span class="nhc-tech-pill">Redis 集群</span>
+                        <span class="nhc-tech-pill">RabbitMQ / Kafka</span>
+                        <span class="nhc-tech-pill">Docker / K8s</span>
+                    </div>
+                    <ul class="nhc-feature-checklist">
+                        <li class="nhc-feature-check-item">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+                            <span>高并发分布式微服务架构设计</span>
+                        </li>
+                        <li class="nhc-feature-check-item">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+                            <span>异构系统数据管道与 API 网关集成</span>
+                        </li>
+                        <li class="nhc-feature-check-item">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+                            <span>金融级资金往来加密与等保合规</span>
+                        </li>
+                        <li class="nhc-feature-check-item">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+                            <span>100% 完整工程源码与数据库字典移交</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="nhc-service-visual-box">
+                    <div class="nhc-visual-title">
+                        <span>技术指标规格</span>
+                        <span class="nhc-seal">企业标准</span>
+                    </div>
+                    <div class="nhc-visual-spec-item">
+                        <span class="nhc-spec-label">核心接口微服务平均响应</span>
+                        <span class="nhc-spec-val" style="color: var(--primary);">&lt; 50 ms</span>
+                    </div>
+                    <div class="nhc-visual-spec-item">
+                        <span class="nhc-spec-label">系统并发可用性保障（SLA）</span>
+                        <span class="nhc-spec-val">99.95 %</span>
+                    </div>
+                    <div class="nhc-visual-spec-item">
+                        <span class="nhc-spec-label">源码单元测试覆盖率</span>
+                        <span class="nhc-spec-val">&gt; 80 %</span>
+                    </div>
+                    <div class="nhc-visual-spec-item">
+                        <span class="nhc-spec-label">交付归属与二次开发权</span>
+                        <span class="nhc-spec-val" style="color: #10B981;">100% 客户独占</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 服务 02：APP与小程序定制 -->
+        <div class="nhc-service-detail-card nhc-corner-card">
+            <div class="nhc-service-detail-inner">
+                <div>
+                    <div class="nhc-service-tagline">DOMAIN 02 · 全渠道跨端触点</div>
+                    <h3 class="nhc-service-detail-title">APP与小程序定制研发</h3>
+                    <p class="nhc-service-detail-desc">
+                        覆盖 iOS、Android 双端原生应用与微信、支付宝小程序生态，兼具原生级别的 60fps 丝滑交互性能与跨端多平台的敏捷发布能力，深度支持蓝牙硬件直连、移动离线记账与全链路消息推送。
+                    </p>
+                    <div class="nhc-tech-pills">
+                        <span class="nhc-tech-pill">Flutter</span>
+                        <span class="nhc-tech-pill">Uni-app</span>
+                        <span class="nhc-tech-pill">Vue 3 / React</span>
+                        <span class="nhc-tech-pill">TypeScript</span>
+                        <span class="nhc-tech-pill">微信生态 API</span>
+                        <span class="nhc-tech-pill">低功耗蓝牙 BLE</span>
+                    </div>
+                    <ul class="nhc-feature-checklist">
+                        <li class="nhc-feature-check-item">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+                            <span>iOS / Android 双端原生框架深度优化</span>
+                        </li>
+                        <li class="nhc-feature-check-item">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+                            <span>微信/支付宝/抖音三端小程序一码发布</span>
+                        </li>
+                        <li class="nhc-feature-check-item">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+                            <span>智能扫码盒、打印机与物联网设备对接</span>
+                        </li>
+                        <li class="nhc-feature-check-item">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+                            <span>60fps 丝滑动画与离线弱网数据缓存</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="nhc-service-visual-box">
+                    <div class="nhc-visual-title">
+                        <span>全端体验规格</span>
+                        <span class="nhc-seal">原生级</span>
+                    </div>
+                    <div class="nhc-visual-spec-item">
+                        <span class="nhc-spec-label">界面渲染交互帧率</span>
+                        <span class="nhc-spec-val" style="color: var(--primary);">60 fps</span>
+                    </div>
+                    <div class="nhc-visual-spec-item">
+                        <span class="nhc-spec-label">小程序冷启动首屏加载</span>
+                        <span class="nhc-spec-val">&lt; 1.2 s</span>
+                    </div>
+                    <div class="nhc-visual-spec-item">
+                        <span class="nhc-spec-label">应用商店上架一次通过率</span>
+                        <span class="nhc-spec-val">98.5 %</span>
+                    </div>
+                    <div class="nhc-visual-spec-item">
+                        <span class="nhc-spec-label">跨机型分辨率无缝自适应</span>
+                        <span class="nhc-spec-val" style="color: #10B981;">100% 覆盖</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 服务 03：智能体开发 -->
+        <div class="nhc-service-detail-card nhc-corner-card">
+            <div class="nhc-service-detail-inner">
+                <div>
+                    <div class="nhc-service-tagline">DOMAIN 03 · 垂直前沿应用</div>
+                    <h3 class="nhc-service-detail-title">企业级 AI 智能体与知识工程开发</h3>
+                    <p class="nhc-service-detail-desc">
+                        深入政企垂直业务一线，拒绝假大空套话。纳海川将企业私域业务规范、规章文献与大语言模型结合，通过高维向量检索（RAG）与多智能体（Multi-Agent）自主协同调度，打造数据安全物理隔离的专有业务智能体。
+                    </p>
+                    <div class="nhc-tech-pills">
+                        <span class="nhc-tech-pill">私有化大模型微调</span>
+                        <span class="nhc-tech-pill">Milvus / Qdrant 向量库</span>
+                        <span class="nhc-tech-pill">RAG 混合检索</span>
+                        <span class="nhc-tech-pill">Multi-Agent 工作流</span>
+                        <span class="nhc-tech-pill">Python / FastAPI</span>
+                        <span class="nhc-tech-pill">内网物理隔离沙箱</span>
+                    </div>
+                    <ul class="nhc-feature-checklist">
+                        <li class="nhc-feature-check-item">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+                            <span>企业私域知识库 RAG 向量精准检索</span>
+                        </li>
+                        <li class="nhc-feature-check-item">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+                            <span>多智能体自主分工与复杂审批流程协同</span>
+                        </li>
+                        <li class="nhc-feature-check-item">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+                            <span>业务工单与政务咨询 85% 自动化解决</span>
+                        </li>
+                        <li class="nhc-feature-check-item">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+                            <span>企业敏感数据零外泄 · 纯本地私有部署</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="nhc-service-visual-box">
+                    <div class="nhc-visual-title">
+                        <span>智能体指标规格</span>
+                        <span class="nhc-seal">合规私有</span>
+                    </div>
+                    <div class="nhc-visual-spec-item">
+                        <span class="nhc-spec-label">专有知识库检索命中响应</span>
+                        <span class="nhc-spec-val" style="color: var(--primary);">&lt; 1.5 s</span>
+                    </div>
+                    <div class="nhc-visual-spec-item">
+                        <span class="nhc-spec-label">规章制度精准回答准确率</span>
+                        <span class="nhc-spec-val">94.6 %</span>
+                    </div>
+                    <div class="nhc-visual-spec-item">
+                        <span class="nhc-spec-label">核心业务工单自动分流处置率</span>
+                        <span class="nhc-spec-val">85.0 %</span>
+                    </div>
+                    <div class="nhc-visual-spec-item">
+                        <span class="nhc-spec-label">外部网络依赖与数据出境风险</span>
+                        <span class="nhc-spec-val" style="color: #10B981;">0 风险（物理内网）</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</section>
+
+<!-- 3. 技术底座与全栈能力架构图 (能力板块) -->
+<section class="nhc-tech-stack-section nhc-tech-capabilities">
+    <div class="nhc-container">
+        <div class="nhc-section-header">
+            <div class="nhc-section-tag">
+                <span class="nhc-seal">技术底座</span>
+                <span class="nhc-tag-text">ARCHITECTURE BLUEPRINT</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-architecture-diagram">
+            <!-- 第 1 层：多终端触点层 -->
+            <div class="nhc-arch-layer">
+                <div class="nhc-arch-layer-header">
+                    <div class="nhc-arch-layer-name">01 终端触点层</div>
+                    <div class="nhc-arch-layer-sub">CLIENT TOUCHPOINTS</div>
+                </div>
+                <div class="nhc-arch-items">
+                    <span class="nhc-arch-badge">PC 运营管理端 (Vue 3 / React)</span>
+                    <span class="nhc-arch-badge">iOS / Android 原生 App (Flutter)</span>
+                    <span class="nhc-arch-badge">微信 / 支付宝小程序 (Uni-app)</span>
+                    <span class="nhc-arch-badge">双屏收银机 / 智能手持终端</span>
+                </div>
+            </div>
+
+            <!-- 第 2 层：统一网关与安全层 -->
+            <div class="nhc-arch-layer">
+                <div class="nhc-arch-layer-header">
+                    <div class="nhc-arch-layer-name">02 网关与安全层</div>
+                    <div class="nhc-arch-layer-sub">GATEWAY &amp; SECURITY</div>
+                </div>
+                <div class="nhc-arch-items">
+                    <span class="nhc-arch-badge">Spring Cloud Gateway</span>
+                    <span class="nhc-arch-badge">Nginx 负载均衡与反向代理</span>
+                    <span class="nhc-arch-badge">WAF 防火墙 &amp; 抗 DDOS 攻击</span>
+                    <span class="nhc-arch-badge">OAuth 2.0 / JWT 统一鉴权</span>
+                    <span class="nhc-arch-badge">SSL / 国密 SM2/SM4 加密传输</span>
+                </div>
+            </div>
+
+            <!-- 第 3 层：微服务核心业务中台层 -->
+            <div class="nhc-arch-layer">
+                <div class="nhc-arch-layer-header">
+                    <div class="nhc-arch-layer-name">03 业务中台与智能引擎</div>
+                    <div class="nhc-arch-layer-sub">MICROSERVICES &amp; AGENTS</div>
+                </div>
+                <div class="nhc-arch-items">
+                    <span class="nhc-arch-badge">用户与权限中台 (RBAC)</span>
+                    <span class="nhc-arch-badge">商品与价格调度中台</span>
+                    <span class="nhc-arch-badge">高并发订单交易引擎</span>
+                    <span class="nhc-arch-badge">供应链仓储与调拨中台</span>
+                    <span class="nhc-arch-badge">多智能体工作流编排 (Agent Core)</span>
+                    <span class="nhc-arch-badge">清算分账与财务对账中心</span>
+                </div>
+            </div>
+
+            <!-- 第 4 层：数据存储与容器基础设施层 -->
+            <div class="nhc-arch-layer">
+                <div class="nhc-arch-layer-header">
+                    <div class="nhc-arch-layer-name">04 数据与基础设施层</div>
+                    <div class="nhc-arch-layer-sub">DATA &amp; INFRASTRUCTURE</div>
+                </div>
+                <div class="nhc-arch-items">
+                    <span class="nhc-arch-badge">MySQL / PostgreSQL 集群</span>
+                    <span class="nhc-arch-badge">Redis 分布式缓存集群</span>
+                    <span class="nhc-arch-badge">Elasticsearch 海量日志检索</span>
+                    <span class="nhc-arch-badge">Milvus 向量知识库存储</span>
+                    <span class="nhc-arch-badge">Docker / Kubernetes 容器编排</span>
+                    <span class="nhc-arch-badge">企业私有云 / 政企信创机房</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- 4. 五步标准化交付工程流程 (流程板块) -->
+<section class="nhc-process nhc-delivery-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">STANDARD METHODOLOGY</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">
+            <div class="nhc-process-step">
+                <div class="nhc-process-step-num">01</div>
+                <h4 class="nhc-process-step-title">需求深度研判</h4>
+                <p class="nhc-process-step-desc">
+                    格物致知。资深架构师与业务专家深入业务一线，全流程梳理业务痛点，产出详尽需求规格蓝图与可行性评估报告。
+                </p>
+            </div>
+            <div class="nhc-process-step">
+                <div class="nhc-process-step-num">02</div>
+                <h4 class="nhc-process-step-title">架构严谨立骨</h4>
+                <p class="nhc-process-step-desc">
+                    经纬分明。制定高可用系统拓扑、高安全数据模型、微服务治理及应对极端峰值的应急预案，杜绝后期返工。
+                </p>
+            </div>
+            <div class="nhc-process-step">
+                <div class="nhc-process-step-num">03</div>
+                <h4 class="nhc-process-step-title">敏捷测试驱动</h4>
+                <p class="nhc-process-step-desc">
+                    精工细琢。严格遵循 TDD 模式与 CI/CD 自动化流水线，代码评审严苛，确保无死锁缺陷，保障高质量源码输出。
+                </p>
+            </div>
+            <div class="nhc-process-step">
+                <div class="nhc-process-step-num">04</div>
+                <h4 class="nhc-process-step-title">高压安全审计</h4>
+                <p class="nhc-process-step-desc">
+                    严审磐石。全路径模拟超负荷并发压力测试，配合权威渗透扫描与等保合规校验，坚固如铁，滴水不漏。
+                </p>
+            </div>
+            <div class="nhc-process-step">
+                <div class="nhc-process-step-num">05</div>
+                <h4 class="nhc-process-step-title">私有化与维保</h4>
+                <p class="nhc-process-step-desc">
+                    修己守信。专业工程师现场或专网部署交付，提供完善运维赋能培训与 7×24 持续演进支持，全天候守护平稳运行。
+                </p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- 5. 标准化 8 大交付物清单与 SLA 维保 (交付板块) -->
+<section class="nhc-deliverables-section nhc-deliverables">
+    <div class="nhc-container">
+        <div class="nhc-section-header">
+            <div class="nhc-section-tag">
+                <span class="nhc-seal">资产移交</span>
+                <span class="nhc-tag-text">DELIVERABLES &amp; SLA</span>
+            </div>
+            <h2 class="nhc-section-title">8 大标准交付物清单 · 资产 100% 移交</h2>
+            <p class="nhc-section-desc">
+                我们不仅交付稳定运行的系统，更将完整的数字化资产与工程知识库毫无保留地移交至客户手中。
+            </p>
+            <div class="nhc-line-divider"><span></span></div>
+        </div>
+
+        <div class="nhc-deliverables-grid">
+            <div class="nhc-deliverable-item">
+                <div class="nhc-deliverable-icon">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+                </div>
+                <h4 class="nhc-deliverable-title">01 完整工程源码</h4>
+                <p class="nhc-deliverable-desc">规范注释的 Git 仓库工程，无混淆无加密，含全量第三方依赖清单与编译配置。</p>
+            </div>
+
+            <div class="nhc-deliverable-item">
+                <div class="nhc-deliverable-icon">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
+                </div>
+                <h4 class="nhc-deliverable-title">02 系统架构蓝图</h4>
+                <p class="nhc-deliverable-desc">微服务物理拓扑图、应用部署架构图、系统数据流向图与容灾切换方案。</p>
+            </div>
+
+            <div class="nhc-deliverable-item">
+                <div class="nhc-deliverable-icon">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
+                </div>
+                <h4 class="nhc-deliverable-title">03 数据库设计字典</h4>
+                <p class="nhc-deliverable-desc">全套数据表结构定义、字段详细注释、主外键索引设计与 ER 实体关系图。</p>
+            </div>
+
+            <div class="nhc-deliverable-item">
+                <div class="nhc-deliverable-icon">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
+                </div>
+                <h4 class="nhc-deliverable-title">04 标准 API 接口规范</h4>
+                <p class="nhc-deliverable-desc">基于 Swagger / Postman 规格的可视化在线 API 调试文档与数据返回示例。</p>
+            </div>
+
+            <div class="nhc-deliverable-item">
+                <div class="nhc-deliverable-icon">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+                </div>
+                <h4 class="nhc-deliverable-title">05 需求规格与原型</h4>
+                <p class="nhc-deliverable-desc">高保真交互产品原型（Axure / Figma）及各版本需求规格说明书（PRD）。</p>
+            </div>
+
+            <div class="nhc-deliverable-item">
+                <div class="nhc-deliverable-icon">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
+                </div>
+                <h4 class="nhc-deliverable-title">06 测试用例与报告</h4>
+                <p class="nhc-deliverable-desc">覆盖关键业务流的单元测试、集成测试自动化脚本与质量验收签署报告。</p>
+            </div>
+
+            <div class="nhc-deliverable-item">
+                <div class="nhc-deliverable-icon">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+                </div>
+                <h4 class="nhc-deliverable-title">07 高压测试与安全报告</h4>
+                <p class="nhc-deliverable-desc">千万级真实峰值压测报告、弱口令及 SQL 注入渗透漏洞扫描与安全合规证明。</p>
+            </div>
+
+            <div class="nhc-deliverable-item">
+                <div class="nhc-deliverable-icon">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+                </div>
+                <h4 class="nhc-deliverable-title">08 系统运维与应急手册</h4>
+                <p class="nhc-deliverable-desc">Docker/K8s 自动化部署脚本、日常监控告警阈值配置与系统数据备份恢复手册。</p>
+            </div>
+        </div>
+
+        <!-- SLA 服务保障横幅 -->
+        <div class="nhc-sla-banner">
+            <div class="nhc-sla-col">
+                <div class="nhc-sla-val">&lt; 15 分钟</div>
+                <div class="nhc-sla-label">7×24 生产级故障极速响应</div>
+                <p class="nhc-sla-desc">专线运维架构师待命，重大故障 2 小时内出具解决方案与恢复实施。</p>
+            </div>
+            <div class="nhc-sla-col">
+                <div class="nhc-sla-val">365 天</div>
+                <div class="nhc-sla-label">首年全面免费维保承诺</div>
+                <p class="nhc-sla-desc">包含非人为逻辑缺陷免费修复、环境性能巡检与关键安全补丁升级。</p>
+            </div>
+            <div class="nhc-sla-col">
+                <div class="nhc-sla-val">100 %</div>
+                <div class="nhc-sla-label">知识产权归属客户所有</div>
+                <p class="nhc-sla-desc">签署正规商用源码交付协议，协助客户申报自主国家计算机软件著作权。</p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- 6. 技术常见问答 (FAQ 板块) -->
+<section class="nhc-faq-section nhc-faq">
+    <div class="nhc-container">
+        <div class="nhc-section-header">
+            <div class="nhc-section-tag">
+                <span class="nhc-seal">疑虑解答</span>
+                <span class="nhc-tag-text">FREQUENTLY ASKED QUESTIONS</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-faq-container">
+            <div class="nhc-faq-item active">
+                <div class="nhc-faq-q">
+                    <span>纳海川交付的系统是否提供全套源代码？后期能否自主二开？</span>
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
+                </div>
+                <div class="nhc-faq-a">
+                    是的，纳海川严格执行“全量源码工程级移交”。项目验收后，我们将包含完整注释的 Git 仓库、数据库字典、Swagger 接口规范及构建脚本全部移交。代码遵循行业通用标准规范，没有任何私有加密后门，客户自有的技术团队完全可以无障碍接管并进行二次开发扩展。
+                </div>
+            </div>
+
+            <div class="nhc-faq-item">
+                <div class="nhc-faq-q">
+                    <span>在企业级 AI 智能体开发中，如何确保我们的内部敏感商业数据不泄露？</span>
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
+                </div>
+                <div class="nhc-faq-a">
+                    纳海川提供“纯本地物理内网私有化部署方案”。所有大模型微调推理节点、向量检索数据库（Milvus）及知识库文件均部署在客户专属的本地服务器或政企信创专有云中。整个推理与检索流程完全在客户内网封闭运行，不向任何第三方公网 API 发送数据，从物理架构层面实现数据 0 泄露。
+                </div>
+            </div>
+
+            <div class="nhc-faq-item">
+                <div class="nhc-faq-q">
+                    <span>APP 与小程序开发采用什么技术路线？能否保证类似原生的流畅度？</span>
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
+                </div>
+                <div class="nhc-faq-a">
+                    我们根据业务场景提供两种方案：对于重交互、对性能有苛刻要求的核心应用，采用 Flutter 配合底层原生 SDK 深度优化，确保 60fps 渲染与丝滑触控；对于注重敏捷裂变、快速获客的业务，采用 Uni-app 与 Vue 3 体系，实现一套代码编译至微信、支付宝小程序及双端 App，兼顾开发效率与优秀性能。
+                </div>
+            </div>
+
+            <div class="nhc-faq-item">
+                <div class="nhc-faq-q">
+                    <span>项目工期与费用是如何进行科学评估的？是否存在隐形增项？</span>
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
+                </div>
+                <div class="nhc-faq-a">
+                    纳海川坚持“需求先行、按模块工时严谨定额”。在签订合同前，资深架构师会与客户共同确认细化到每个功能点和接口的《需求规格说明书（PRD）》，并提供明确的阶段里程碑时间表。双方在明确范围后闭口定价，严格遵循合同边界，绝无任何巧立名目的隐形费用。
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- 7. 底部行动号召 (CTA Section) -->
+<section 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">
+                    纳海川技术委员会核心架构师随时待命，为您提供深度业务剖析、系统架构蓝图规划与可行性评估，2 小时内快速响应对接。
+                </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>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // FAQ 手风琴展开与收起交互
+    var faqItems = document.querySelectorAll('.nhc-faq-item');
+    faqItems.forEach(function(item) {
+        var question = item.querySelector('.nhc-faq-q');
+        if (question) {
+            question.addEventListener('click', function() {
+                var isActive = item.classList.contains('active');
+                faqItems.forEach(function(other) {
+                    other.classList.remove('active');
+                });
+                if (!isActive) {
+                    item.classList.add('active');
+                }
+            });
+        }
+    });
+});
+</script>
+<!-- 纳海川官方网站 · 服务独立页 (Services Page) 结束 -->
diff --git a/public/assets/addons/official/css/modern_nhc.css b/public/assets/addons/official/css/modern_nhc.css
index 2dec778..2b62c1c 100644
--- a/public/assets/addons/official/css/modern_nhc.css
+++ b/public/assets/addons/official/css/modern_nhc.css
@@ -1432,3 +1432,462 @@ img {
     width: 100%;
   }
 }
+
+/* ==========================================================================
+   服务独立页专有样式 (Services Page Modern Style)
+   ========================================================================== */
+.nhc-page-hero {
+  position: relative;
+  padding: 130px 0 70px;
+  background: 
+    radial-gradient(circle at 50% 15%, rgba(37, 99, 235, 0.07) 0%, transparent 55%),
+    radial-gradient(circle at 85% 60%, rgba(6, 182, 212, 0.05) 0%, transparent 45%),
+    linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
+  border-bottom: 1px solid var(--border-color);
+  text-align: center;
+}
+
+.nhc-breadcrumb {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--text-muted);
+  margin-bottom: 20px;
+}
+
+.nhc-breadcrumb a {
+  color: var(--text-secondary);
+  transition: color 0.2s;
+}
+
+.nhc-breadcrumb a:hover {
+  color: var(--primary);
+}
+
+.nhc-page-title {
+  font-family: var(--font-serif);
+  font-size: 44px;
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: 1.5px;
+  margin-bottom: 18px;
+}
+
+.nhc-page-desc {
+  max-width: 760px;
+  margin: 0 auto 30px;
+  font-size: 17px;
+  color: var(--text-secondary);
+  line-height: 1.8;
+}
+
+/* 服务三大领域深度卡片 (交替错落或大横幅) */
+.nhc-service-detail-section {
+  padding: 90px 0;
+}
+
+.nhc-service-detail-card {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  padding: 48px;
+  margin-bottom: 40px;
+  box-shadow: var(--shadow-subtle);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.nhc-service-detail-card:hover {
+  border-color: rgba(37, 99, 235, 0.3);
+  box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.08);
+}
+
+.nhc-service-detail-inner {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+  gap: 48px;
+  align-items: center;
+}
+
+.nhc-service-tagline {
+  font-size: 12px;
+  letter-spacing: 2px;
+  color: var(--primary);
+  font-weight: 600;
+  text-transform: uppercase;
+  margin-bottom: 8px;
+}
+
+.nhc-service-detail-title {
+  font-family: var(--font-serif);
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 16px;
+}
+
+.nhc-service-detail-desc {
+  font-size: 15px;
+  line-height: 1.8;
+  color: var(--text-secondary);
+  margin-bottom: 24px;
+}
+
+.nhc-tech-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 28px;
+}
+
+.nhc-tech-pill {
+  font-size: 12px;
+  font-family: var(--font-sans);
+  background: #F1F5F9;
+  color: #334155;
+  padding: 4px 12px;
+  border-radius: 4px;
+  border: 1px solid #E2E8F0;
+  font-weight: 500;
+}
+
+.nhc-feature-checklist {
+  list-style: none;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  margin-bottom: 28px;
+}
+
+.nhc-feature-check-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: var(--text-primary);
+}
+
+.nhc-feature-check-item svg {
+  color: var(--primary);
+  flex-shrink: 0;
+}
+
+/* 服务卡片右侧视窗展示盒 */
+.nhc-service-visual-box {
+  background: #F8FAFC;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 32px;
+  position: relative;
+}
+
+.nhc-visual-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-muted);
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.nhc-visual-spec-item {
+  background: #FFFFFF;
+  border: 1px solid #E2E8F0;
+  border-radius: 4px;
+  padding: 14px 16px;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.nhc-spec-label {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.nhc-spec-val {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+/* 全栈技术底座架构全景 (四层架构蓝图) */
+.nhc-tech-stack-section {
+  padding: 80px 0;
+  background-color: var(--bg-secondary);
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.nhc-architecture-diagram {
+  max-width: 1040px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.nhc-arch-layer {
+  background: #FFFFFF;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 24px 28px;
+  box-shadow: var(--shadow-subtle);
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  align-items: center;
+  gap: 24px;
+  transition: border-color 0.25s;
+}
+
+.nhc-arch-layer:hover {
+  border-color: var(--primary);
+}
+
+.nhc-arch-layer-header {
+  border-right: 1px solid var(--border-color);
+  padding-right: 20px;
+}
+
+.nhc-arch-layer-name {
+  font-family: var(--font-serif);
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+}
+
+.nhc-arch-layer-sub {
+  font-size: 11px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.nhc-arch-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.nhc-arch-badge {
+  background: #F8FAFC;
+  border: 1px solid #E2E8F0;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* 标准化 8 大交付物清单 */
+.nhc-deliverables-section {
+  padding: 90px 0;
+}
+
+.nhc-deliverables-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+}
+
+.nhc-deliverable-item {
+  background: #FFFFFF;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 24px 20px;
+  box-shadow: var(--shadow-subtle);
+  transition: all 0.25s ease;
+  position: relative;
+}
+
+.nhc-deliverable-item:hover {
+  transform: translateY(-3px);
+  border-color: var(--primary);
+  box-shadow: 0 10px 24px -5px rgba(15, 23, 42, 0.08);
+}
+
+.nhc-deliverable-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 6px;
+  background: var(--primary-light);
+  color: var(--primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 14px;
+}
+
+.nhc-deliverable-title {
+  font-family: var(--font-serif);
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.nhc-deliverable-desc {
+  font-size: 13px;
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+/* SLA 服务信赖横幅 */
+.nhc-sla-banner {
+  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
+  border-radius: var(--radius-md);
+  padding: 40px 48px;
+  color: #FFFFFF;
+  margin: 40px 0 80px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 32px;
+}
+
+.nhc-sla-col {
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  padding-right: 28px;
+}
+
+.nhc-sla-col:last-child {
+  border-right: none;
+  padding-right: 0;
+}
+
+.nhc-sla-val {
+  font-family: var(--font-sans);
+  font-size: 28px;
+  font-weight: 700;
+  color: #60A5FA;
+  margin-bottom: 6px;
+}
+
+.nhc-sla-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #FFFFFF;
+  margin-bottom: 4px;
+}
+
+.nhc-sla-desc {
+  font-size: 12px;
+  color: #94A3B8;
+  line-height: 1.6;
+}
+
+/* FAQ 问答手风琴列表 */
+.nhc-faq-section {
+  padding: 80px 0;
+  background-color: var(--bg-secondary);
+  border-top: 1px solid var(--border-color);
+}
+
+.nhc-faq-container {
+  max-width: 860px;
+  margin: 0 auto;
+}
+
+.nhc-faq-item {
+  background: #FFFFFF;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  margin-bottom: 16px;
+  overflow: hidden;
+  transition: border-color 0.2s;
+}
+
+.nhc-faq-item.active {
+  border-color: var(--primary);
+}
+
+.nhc-faq-q {
+  padding: 20px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  font-family: var(--font-serif);
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary);
+  user-select: none;
+}
+
+.nhc-faq-q svg {
+  color: var(--text-muted);
+  transition: transform 0.3s;
+}
+
+.nhc-faq-item.active .nhc-faq-q svg {
+  transform: rotate(180deg);
+  color: var(--primary);
+}
+
+.nhc-faq-a {
+  padding: 0 24px 20px;
+  font-size: 14px;
+  line-height: 1.8;
+  color: var(--text-secondary);
+  border-top: 1px solid transparent;
+}
+
+.nhc-faq-item:not(.active) .nhc-faq-a {
+  display: none;
+}
+
+/* 响应式微调 */
+@media (max-width: 1024px) {
+  .nhc-service-detail-inner {
+    grid-template-columns: 1fr;
+    gap: 32px;
+  }
+  .nhc-arch-layer {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+  .nhc-arch-layer-header {
+    border-right: none;
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: 12px;
+  }
+  .nhc-deliverables-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .nhc-sla-banner {
+    grid-template-columns: 1fr;
+    gap: 24px;
+  }
+  .nhc-sla-col {
+    border-right: none;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    padding-bottom: 16px;
+  }
+  .nhc-sla-col:last-child {
+    border-bottom: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .nhc-page-title {
+    font-size: 32px;
+  }
+  .nhc-service-detail-card {
+    padding: 24px;
+  }
+  .nhc-feature-checklist {
+    grid-template-columns: 1fr;
+  }
+  .nhc-deliverables-grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/tests/ServicesPageTest.php b/tests/ServicesPageTest.php
new file mode 100644
index 0000000..93c4ed7
--- /dev/null
+++ b/tests/ServicesPageTest.php
@@ -0,0 +1,137 @@
+<?php
+/**
+ * 服务独立页改版规范与内容完整性测试 (TDD 模式)
+ * 验证服务页必备板块：分类、能力、流程、交付、FAQ、色彩体系、去AI味道与禁止项
+ */
+
+class ServicesPageTest
+{
+    private $passed = 0;
+    private $failed = 0;
+    private $htmlContent = '';
+    private $cssContent = '';
+
+    public function __construct()
+    {
+        $baseDir = dirname(__DIR__);
+        $serviceFile = $baseDir . '/addons/official/view/web/official_product/service_page.html';
+        $listFile = $baseDir . '/addons/official/view/web/official_product/list.html';
+        $cssFile = $baseDir . '/public/assets/addons/official/css/modern_nhc.css';
+
+        $this->htmlContent = '';
+        if (file_exists($serviceFile)) {
+            $this->htmlContent .= file_get_contents($serviceFile) . "\n";
+        }
+        if (file_exists($listFile)) {
+            $this->htmlContent .= file_get_contents($listFile) . "\n";
+        }
+        if (file_exists($cssFile)) {
+            $this->cssContent = file_get_contents($cssFile);
+        }
+    }
+
+    public function run()
+    {
+        echo "=== 开始执行服务独立页设计规范与内容完整性测试 (TDD) ===\n";
+
+        // 1. 品牌名称必须为纳海川
+        $this->testBrandName();
+
+        // 2. 必备三大服务领域
+        $this->testServiceCategories();
+
+        // 3. 必备板块测试：分类、能力、流程、交付、FAQ
+        $this->testEssentialSections();
+
+        // 4. 去除 AI 味道：真实技术栈与真实业务交付物
+        $this->testNoAiCharacteristics();
+
+        // 5. 禁止项测试（严禁 emoji）
+        $this->testForbiddenElements();
+
+        // 6. 色彩与设计规范
+        $this->testDesignTokens();
+
+        echo "\n测试结果: {$this->passed} 通过, {$this->failed} 失败\n";
+        if ($this->failed > 0) {
+            exit(1);
+        }
+    }
+
+    private function assert($condition, $message)
+    {
+        if ($condition) {
+            echo "  [PASS] {$message}\n";
+            $this->passed++;
+        } else {
+            echo "  [FAIL] {$message}\n";
+            $this->failed++;
+        }
+    }
+
+    public function testBrandName()
+    {
+        $this->assert(strpos($this->htmlContent, '纳海川') !== false, "服务页必须明确包含品牌名称【纳海川】");
+        $hasWrongAbbr = preg_match('/纳川(?![海])/u', $this->htmlContent);
+        $this->assert(!$hasWrongAbbr, "服务页严禁错误简称为【纳川】");
+    }
+
+    public function testServiceCategories()
+    {
+        $this->assert(strpos($this->htmlContent, '软件开发') !== false, "必须深度包含【软件开发】服务分类");
+        $this->assert(strpos($this->htmlContent, 'APP与小程序定制') !== false || (strpos($this->htmlContent, 'APP定制') !== false && strpos($this->htmlContent, '小程序定制') !== false), "必须深度包含【APP与小程序定制】服务分类");
+        $this->assert(strpos($this->htmlContent, '智能体开发') !== false, "必须深度包含【智能体开发】服务分类");
+    }
+
+    public function testEssentialSections()
+    {
+        // 按照 AGENTS.md 规范：服务页含分类、能力、流程、交付、FAQ
+        $hasCategory = (strpos($this->htmlContent, 'nhc-services-categories') !== false || strpos($this->htmlContent, '服务分类') !== false || strpos($this->htmlContent, '服务矩阵') !== false);
+        $this->assert($hasCategory, "服务页必须包含【分类】板块");
+
+        $hasCapability = (strpos($this->htmlContent, 'nhc-tech-capabilities') !== false || strpos($this->htmlContent, '技术能力') !== false || strpos($this->htmlContent, '技术底座') !== false);
+        $this->assert($hasCapability, "服务页必须包含【能力】(技术底座/核心能力)板块");
+
+        $hasProcess = (strpos($this->htmlContent, 'nhc-delivery-process') !== false || strpos($this->htmlContent, '交付流程') !== false || strpos($this->htmlContent, '研发流程') !== false);
+        $this->assert($hasProcess, "服务页必须包含【流程】(研发交付流程)板块");
+
+        $hasDeliverables = (strpos($this->htmlContent, 'nhc-deliverables') !== false || strpos($this->htmlContent, '交付物') !== false || strpos($this->htmlContent, '交付标准') !== false);
+        $this->assert($hasDeliverables, "服务页必须包含【交付】(标准交付物与SLA保障)板块");
+
+        $hasFaq = (strpos($this->htmlContent, 'nhc-faq') !== false || strpos($this->htmlContent, '常见问答') !== false || strpos($this->htmlContent, '技术问答') !== false);
+        $this->assert($hasFaq, "服务页必须包含【FAQ】(技术与合作问答)板块");
+    }
+
+    public function testNoAiCharacteristics()
+    {
+        // 必须包含具体真实技术栈，去除空话
+        $hasTechStack = (strpos($this->htmlContent, 'Vue') !== false || strpos($this->htmlContent, 'React') !== false || strpos($this->htmlContent, 'Spring') !== false || strpos($this->htmlContent, 'Docker') !== false || strpos($this->htmlContent, '微服务') !== false);
+        $this->assert($hasTechStack, "去AI味道：必须展示具体的企业级技术栈与架构，而非空泛套话");
+
+        // 必须包含具体的交付物明细（如源码、数据库字典、API规范等）
+        $hasRealDeliverables = (strpos($this->htmlContent, '源码') !== false && (strpos($this->htmlContent, '数据库') !== false || strpos($this->htmlContent, 'API') !== false || strpos($this->htmlContent, '文档') !== false));
+        $this->assert($hasRealDeliverables, "去AI味道：必须列出实体交付物清单（源码移交、数据库字典、API文档等）");
+
+        // 包含真实的 SLA 运维时效标准
+        $hasSla = (strpos($this->htmlContent, 'SLA') !== false || strpos($this->htmlContent, '7×24') !== false || strpos($this->htmlContent, '响应') !== false);
+        $this->assert($hasSla, "去AI味道：必须包含具体的运维 SLA 保障标准");
+    }
+
+    public function testForbiddenElements()
+    {
+        $hasEmoji = preg_match('/[\x{1F600}-\x{1F64F}\x{1F300}-\x{1F5FF}\x{1F680}-\x{1F6FF}\x{2600}-\x{26FF}\x{2700}-\x{27BF}]/u', $this->htmlContent);
+        $this->assert(!$hasEmoji, "服务页严禁使用任何 emoji 表情符号");
+    }
+
+    public function testDesignTokens()
+    {
+        $hasSerif = (stripos($this->cssContent, 'SimSun') !== false || stripos($this->cssContent, 'Songti') !== false || stripos($this->cssContent, 'Noto Serif SC') !== false);
+        $this->assert($hasSerif, "必须沿用宋体标题规范");
+
+        $hasPrimary = (stripos($this->cssContent, '#2563EB') !== false || stripos($this->cssContent, '#2563eb') !== false);
+        $this->assert($hasPrimary, "必须沿用科技蓝 #2563EB 主色规范");
+    }
+}
+
+$test = new ServicesPageTest();
+$test->run();