feat(nav): 导航栏增加服务与产品高端大气二级卡片面板(Mega Menu)
这个提交包含在：
wikiboss
@@ -24,11 +24,220 @@
|
||||
<li>
|
||||
<a href="{:addon_url('official/web.official_home/index')}" class="nhc-nav-link {if empty(input('param.pid'))}active{/if}">首页</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{:addon_url('official/web.official_product/list',[':pid'=>19,':sid'=>19])}" class="nhc-nav-link {if input('param.pid') == 19}active{/if}">服务</a>
|
||||
<!-- 1. 服务菜单与二级卡片面板 -->
|
||||
<li class="nhc-nav-item nhc-has-dropdown">
|
||||
<a href="{:addon_url('official/web.official_product/list',[':pid'=>19,':sid'=>19])}" class="nhc-nav-link {if input('param.pid') == 19}active{/if}">
|
||||
<span>服务</span>
|
||||
<svg class="nhc-caret" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"/></svg>
|
||||
</a>
|
||||
<!-- 服务二级大卡片面板 (Mega Panel) -->
|
||||
<div class="nhc-mega-panel">
|
||||
<div class="nhc-mega-grid">
|
||||
<div class="nhc-mega-cards-col">
|
||||
<div class="nhc-mega-header">
|
||||
<span class="nhc-seal">服务矩阵</span>
|
||||
<span>ENGINEERING CAPABILITIES</span>
|
||||
</div>
|
||||
<div class="nhc-mega-cards-grid-3">
|
||||
<!-- 领域 1：软件开发 -->
|
||||
<a href="{:addon_url('official/web.official_product/list',[':pid'=>19,':sid'=>19])}#services-list" class="nhc-mega-card">
|
||||
<div class="nhc-mega-card-top">
|
||||
<div class="nhc-mega-card-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
||||
</div>
|
||||
<div class="nhc-mega-card-title">
|
||||
<span>软件开发</span>
|
||||
<span class="nhc-mega-card-arrow">→</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="nhc-mega-card-desc">高并发业务中台定制，分布式微服务架构，100% 完整源码移交。</p>
|
||||
<div class="nhc-mega-card-tags">
|
||||
<span class="nhc-mega-card-tag">微服务中台</span>
|
||||
<span class="nhc-mega-card-tag">源码移交</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 领域 2：APP与小程序定制 -->
|
||||
<a href="{:addon_url('official/web.official_product/list',[':pid'=>19,':sid'=>19])}#services-list" class="nhc-mega-card">
|
||||
<div class="nhc-mega-card-top">
|
||||
<div class="nhc-mega-card-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
|
||||
</div>
|
||||
<div class="nhc-mega-card-title">
|
||||
<span>APP与小程序定制</span>
|
||||
<span class="nhc-mega-card-arrow">→</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="nhc-mega-card-desc">覆盖 iOS / Android 与微信生态，60fps 丝滑交互与蓝牙物联网硬件直连。</p>
|
||||
<div class="nhc-mega-card-tags">
|
||||
<span class="nhc-mega-card-tag">Flutter/Uni-app</span>
|
||||
<span class="nhc-mega-card-tag">全端协同</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 领域 3：智能体开发 -->
|
||||
<a href="{:addon_url('official/web.official_product/list',[':pid'=>19,':sid'=>19])}#services-list" class="nhc-mega-card">
|
||||
<div class="nhc-mega-card-top">
|
||||
<div class="nhc-mega-card-icon">
|
||||
<svg width="18" height="18" 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>
|
||||
<div class="nhc-mega-card-title">
|
||||
<span>智能体开发</span>
|
||||
<span class="nhc-mega-card-arrow">→</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="nhc-mega-card-desc">企业私域专属大模型微调，RAG 向量精准检索，内网物理隔离 0 外泄。</p>
|
||||
<div class="nhc-mega-card-tags">
|
||||
<span class="nhc-mega-card-tag">RAG向量库</span>
|
||||
<span class="nhc-mega-card-tag">私有合规</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 服务面板右侧背书视窗 -->
|
||||
<div class="nhc-mega-sidebar">
|
||||
<div>
|
||||
<div class="nhc-mega-sidebar-title">
|
||||
<span class="nhc-mega-sidebar-heading">工程受控规范</span>
|
||||
<span class="nhc-seal">精工立骨</span>
|
||||
</div>
|
||||
<p class="nhc-mega-sidebar-desc">严格遵循 TDD 测试驱动开发与 ISO9001 质量审核，提供全套系统架构设计蓝图与数据库字典。</p>
|
||||
<div class="nhc-mega-sidebar-metrics">
|
||||
<div class="nhc-mega-metric-row">
|
||||
<span class="nhc-mega-metric-label">响应时效保障</span>
|
||||
<span class="nhc-mega-metric-val">< 15分钟 SLA</span>
|
||||
</div>
|
||||
<div class="nhc-mega-metric-row">
|
||||
<span class="nhc-mega-metric-label">首年质保服务</span>
|
||||
<span class="nhc-mega-metric-val">365天 免费维保</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="{:addon_url('official/web.official_online_message/list',[':pid'=>18,':sid'=>18])}" class="nhc-mega-sidebar-link">
|
||||
<span>预约架构师技术初审</span>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{:addon_url('official/web.official_product/list',[':pid'=>22,':sid'=>22])}" class="nhc-nav-link {if input('param.pid') == 22}active{/if}">产品</a>
|
||||
|
||||
<!-- 2. 产品菜单与二级卡片面板 -->
|
||||
<li class="nhc-nav-item nhc-has-dropdown">
|
||||
<a href="{:addon_url('official/web.official_product/list',[':pid'=>22,':sid'=>22])}" class="nhc-nav-link {if input('param.pid') == 22}active{/if}">
|
||||
<span>产品</span>
|
||||
<svg class="nhc-caret" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"/></svg>
|
||||
</a>
|
||||
<!-- 产品二级大卡片面板 (Mega Panel) -->
|
||||
<div class="nhc-mega-panel">
|
||||
<div class="nhc-mega-grid">
|
||||
<div class="nhc-mega-cards-col">
|
||||
<div class="nhc-mega-header">
|
||||
<span class="nhc-seal">商业矩阵</span>
|
||||
<span>STANDARDIZED SOLUTIONS</span>
|
||||
</div>
|
||||
<div class="nhc-mega-cards-grid-2">
|
||||
<!-- 产品 1：商城系统 -->
|
||||
<a href="{:addon_url('official/web.official_home/index')}#products" class="nhc-mega-card">
|
||||
<div class="nhc-mega-card-top">
|
||||
<div class="nhc-mega-card-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
|
||||
</div>
|
||||
<div class="nhc-mega-card-title">
|
||||
<span>全场景商城系统</span>
|
||||
<span class="nhc-mega-card-arrow">→</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="nhc-mega-card-desc">B2B2C / S2B2C 多商户入驻，全渠道统一订单汇聚与分销裂变体系。</p>
|
||||
<div class="nhc-mega-card-tags">
|
||||
<span class="nhc-mega-card-tag">多商户</span>
|
||||
<span class="nhc-mega-card-tag">社交裂变</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 产品 2：智能收银系统 -->
|
||||
<a href="{:addon_url('official/web.official_home/index')}#products" class="nhc-mega-card">
|
||||
<div class="nhc-mega-card-top">
|
||||
<div class="nhc-mega-card-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
|
||||
</div>
|
||||
<div class="nhc-mega-card-title">
|
||||
<span>智能商业收银系统</span>
|
||||
<span class="nhc-mega-card-arrow">→</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="nhc-mega-card-desc">软硬一体，秒级聚合扫码付，网络中断离线记账自动回传同步。</p>
|
||||
<div class="nhc-mega-card-tags">
|
||||
<span class="nhc-mega-card-tag">秒级聚合付</span>
|
||||
<span class="nhc-mega-card-tag">离线记账</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 产品 3：全链路进销存 -->
|
||||
<a href="{:addon_url('official/web.official_home/index')}#products" class="nhc-mega-card">
|
||||
<div class="nhc-mega-card-top">
|
||||
<div class="nhc-mega-card-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
|
||||
</div>
|
||||
<div class="nhc-mega-card-title">
|
||||
<span>全链路进销存系统</span>
|
||||
<span class="nhc-mega-card-arrow">→</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="nhc-mega-card-desc">采购、销售、仓储与财务业财一体化，批次批号管理与动态盘点预警。</p>
|
||||
<div class="nhc-mega-card-tags">
|
||||
<span class="nhc-mega-card-tag">业财一体</span>
|
||||
<span class="nhc-mega-card-tag">智能补货</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 产品 4：云原生 SaaS 版本 -->
|
||||
<a href="{:addon_url('official/web.official_home/index')}#products" class="nhc-mega-card">
|
||||
<div class="nhc-mega-card-top">
|
||||
<div class="nhc-mega-card-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/></svg>
|
||||
</div>
|
||||
<div class="nhc-mega-card-title">
|
||||
<span>云原生 SaaS 平台</span>
|
||||
<span class="nhc-mega-card-arrow">→</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="nhc-mega-card-desc">多租户金融级数据逻辑与物理隔离，高弹性伸缩云集群，即开即用。</p>
|
||||
<div class="nhc-mega-card-tags">
|
||||
<span class="nhc-mega-card-tag">多租户隔离</span>
|
||||
<span class="nhc-mega-card-tag">弹性扩容</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 产品面板右侧背书视窗 -->
|
||||
<div class="nhc-mega-sidebar">
|
||||
<div>
|
||||
<div class="nhc-mega-sidebar-title">
|
||||
<span class="nhc-mega-sidebar-heading">成熟商业开箱即用</span>
|
||||
<span class="nhc-seal">矩阵赋能</span>
|
||||
</div>
|
||||
<p class="nhc-mega-sidebar-desc">经历千万级真实交易峰值验证，支持公有云敏捷订阅与企业专有云私有化源码买断。</p>
|
||||
<div class="nhc-mega-sidebar-metrics">
|
||||
<div class="nhc-mega-metric-row">
|
||||
<span class="nhc-mega-metric-label">日交易承载力</span>
|
||||
<span class="nhc-mega-metric-val">10W+ 单/天</span>
|
||||
</div>
|
||||
<div class="nhc-mega-metric-row">
|
||||
<span class="nhc-mega-metric-label">硬件生态适配</span>
|
||||
<span class="nhc-mega-metric-val">收银外设即插即用</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="{:addon_url('official/web.official_home/index')}#contact" class="nhc-mega-sidebar-link">
|
||||
<span>申请在线系统演示</span>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{:addon_url('official/web.official_case_show/list',[':pid'=>14,':sid'=>14])}" class="nhc-nav-link {if input('param.pid') == 14}active{/if}">案例</a>
|
||||
|
||||
在新工单中引用
屏蔽一个用户