wikiboss/nahaichuan
1
0
派生 0
代码 工单 合并请求 Actions 软件包 项目 版本发布 百科 动态

feat(home): 首页首屏升级为高端全景轮播图系统并增强现代中式科技质感

浏览代码
这个提交包含在：
wikiboss
2026-10-08 16:44:18 +08:00
父节点 5f42eec8e7
当前提交 37e8677e64
共有 4 个文件被更改，包括 888 次插入 和 84 次删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件

372
addons/official/view/web/official_home/index.html
查看文件

@@ -3,60 +3,223 @@
{block name="content"}
<!-- 纳海川官方网站 首页主体 开始 -->
<!-- 1. 首屏 (Hero Section) 开始 -->
<section class="nhc-hero nhc-lattice-pattern">
<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>
<!-- 1. 高端大气全景首屏轮播图系统 (Hero Panoramic Carousel) 开始 -->
<section class="nhc-hero-carousel-wrap nhc-lattice-pattern">
<div class="nhc-carousel" id="nhcHeroCarousel">
<div class="nhc-carousel-track">
<!-- 幻灯片 1：纳海川 · 领航篇（总览与数字底座） -->
<div class="nhc-carousel-slide nhc-slide-theme-1 active" data-slide-index="0">
<div class="nhc-container">
<div class="nhc-hero-content">
<div class="nhc-hero-badge">
<span class="nhc-seal">纳海川</span>
<span class="nhc-hero-badge-text">现代企业数字化底座与智能体定制专家</span>
</div>
<h1 class="nhc-hero-title">
海纳百川以成巨流 <span class="highlight">聚智能</span>以启新元
</h1>
<p class="nhc-hero-subtitle">
纳海川专注于为政企与高成长型企业构筑稳固的业务技术中台、全端移动生态与垂直领域 AI 智能体体系，融合东方秩序美学与现代软件工程标准，赋能实体业务深层数字化跃升。
</p>
<div class="nhc-hero-cta">
<a href="#contact" class="nhc-btn nhc-btn-primary nhc-btn-lg">
<span>预约专家咨询</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
<a href="#products" class="nhc-btn nhc-btn-outline nhc-btn-lg">
<span>浏览核心产品</span>
</a>
</div>
<div class="nhc-hero-metrics">
<div class="nhc-metric-item">
<div class="nhc-metric-val">99.8<sub>%</sub></div>
<div class="nhc-metric-label">项目按期高质量交付率</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">50<sub>+</sub></div>
<div class="nhc-metric-label">核心自主软件著作权资产</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">200<sub>+</sub></div>
<div class="nhc-metric-label">政企与各行业标杆客户</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">10<sub>+</sub></div>
<div class="nhc-metric-label">年企业级软件工程沉淀</div>
</div>
</div>
</div>
</div>
</div>
<!-- 主标题 (宋体大字，严谨大气) -->
<h1 class="nhc-hero-title">
纳百川以成巨流 <span class="highlight">聚智能</span>以启新元
</h1>
<!-- 副标题 -->
<p class="nhc-hero-subtitle">
纳海川专注于为政企与高成长型企业构筑稳固的业务技术中台、全端移动生态与垂直领域 AI 智能体体系，融合东方秩序美学与现代软件工程标准，赋能实体业务深层数字化跃升。
</p>
<!-- 行动号召组 -->
<div class="nhc-hero-cta">
<a href="#contact" class="nhc-btn nhc-btn-primary nhc-btn-lg">
<span>预约专家咨询</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
<a href="#products" class="nhc-btn nhc-btn-outline nhc-btn-lg">
<span>浏览核心产品</span>
</a>
<!-- 幻灯片 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">企业级中台 · 全端移动生态 · 源码交付</span>
</div>
<h1 class="nhc-hero-title">
经纬立骨铸基石 <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 nhc-btn-lg">
<span>探索软件开发服务</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
<a href="{:addon_url('official/web.official_case_show/list',[':pid'=>14,':sid'=>14])}" class="nhc-btn nhc-btn-outline nhc-btn-lg">
<span>查阅标杆案例</span>
</a>
</div>
<div class="nhc-hero-metrics">
<div class="nhc-metric-item">
<div class="nhc-metric-val">&lt;50<sub>ms</sub></div>
<div class="nhc-metric-label">核心接口微服务平均响应</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">100<sub>%</sub></div>
<div class="nhc-metric-label">工程自主可控与源码移交</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">60<sub>fps</sub></div>
<div class="nhc-metric-label">全端移动界面丝滑交互体验</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">ISO<sub>9001</sub></div>
<div class="nhc-metric-label">标准化研发质量严苛审计</div>
</div>
</div>
</div>
</div>
</div>
<!-- 信任背书量化指标 -->
<div class="nhc-hero-metrics">
<div class="nhc-metric-item">
<div class="nhc-metric-val">99.8<sub>%</sub></div>
<div class="nhc-metric-label">项目按期高质量交付率</div>
<!-- 幻灯片 3：前沿科技 · 智元篇（企业级 AI 智能体应用） -->
<div class="nhc-carousel-slide nhc-slide-theme-3" data-slide-index="2">
<div class="nhc-container">
<div class="nhc-hero-content">
<div class="nhc-hero-badge">
<span class="nhc-seal">智能跃升</span>
<span class="nhc-hero-badge-text">企业私域大模型 · 多智能体协同 · RAG 知识库</span>
</div>
<h1 class="nhc-hero-title">
格物致知启新智 <span class="highlight">人机协同</span>创非凡
</h1>
<p class="nhc-hero-subtitle">
深入垂直行业业务一线，将大语言模型与企业专属知识库深度结合，自主编排业务工作流，打造安全可控的高阶企业级智能体（Agent）。
</p>
<div class="nhc-hero-cta">
<a href="#contact" class="nhc-btn nhc-btn-primary nhc-btn-lg">
<span>预约智能体场景演示</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
<a href="#services" class="nhc-btn nhc-btn-outline nhc-btn-lg">
<span>了解智能体能力</span>
</a>
</div>
<div class="nhc-hero-metrics">
<div class="nhc-metric-item">
<div class="nhc-metric-val">&lt;1.5<sub>s</sub></div>
<div class="nhc-metric-label">私域知识库精准向量检索</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">85<sub>%</sub></div>
<div class="nhc-metric-label">重复业务工单自动解决率</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">Multi<sub>Agent</sub></div>
<div class="nhc-metric-label">多智能体分工协同调度体系</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">0<sub>泄露</sub></div>
<div class="nhc-metric-label">数据私有化本地隔离部署</div>
</div>
</div>
</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">50<sub>+</sub></div>
<div class="nhc-metric-label">核心自主软件著作权资产</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">200<sub>+</sub></div>
<div class="nhc-metric-label">政企与各行业标杆客户</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">10<sub>+</sub></div>
<div class="nhc-metric-label">年企业级软件工程沉淀</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">
积厚流光成重器 <span class="highlight">矩阵赋能</span>拓坦途
</h1>
<p class="nhc-hero-subtitle">
历经千万级真实交易峰值淬炼的标准模块化产品体系，兼具即开即用与定制灵活性，支持公有云 SaaS 订阅与专有私有化买断部署。
</p>
<div class="nhc-hero-cta">
<a href="#products" class="nhc-btn nhc-btn-primary nhc-btn-lg">
<span>申请全系统在线演示</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
<a href="#contact" class="nhc-btn nhc-btn-outline nhc-btn-lg">
<span>咨询部署方案</span>
</a>
</div>
<div class="nhc-hero-metrics">
<div class="nhc-metric-item">
<div class="nhc-metric-val">4<sub>大</sub></div>
<div class="nhc-metric-label">核心商业产品开箱即用</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">10W<sub>+</sub></div>
<div class="nhc-metric-label">日交易订单平稳支撑能力</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">软硬<sub>一体</sub></div>
<div class="nhc-metric-label">智能收银与扫码硬件全兼容</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">99.99<sub>%</sub></div>
<div class="nhc-metric-label">云原生多租户金融级可用性</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 左右切换悬浮导航控件 -->
<div class="nhc-carousel-nav nhc-carousel-prev" id="nhcPrevBtn" title="上一张">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
</div>
<div class="nhc-carousel-nav nhc-carousel-next" id="nhcNextBtn" title="下一张">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
</div>
<!-- 底部精美长条指示器与编号 -->
<div class="nhc-carousel-indicators" id="nhcIndicators">
<div class="nhc-carousel-dot active" data-goto="0">
<span class="nhc-carousel-dot-num">01</span>
<span class="nhc-carousel-dot-bar"></span>
</div>
<div class="nhc-carousel-dot" data-goto="1">
<span class="nhc-carousel-dot-num">02</span>
<span class="nhc-carousel-dot-bar"></span>
</div>
<div class="nhc-carousel-dot" data-goto="2">
<span class="nhc-carousel-dot-num">03</span>
<span class="nhc-carousel-dot-bar"></span>
</div>
<div class="nhc-carousel-dot" data-goto="3">
<span class="nhc-carousel-dot-num">04</span>
<span class="nhc-carousel-dot-bar"></span>
</div>
</div>
</div>
</section>
<!-- 首屏 (Hero Section) 结束 -->
<!-- 1. 高端大气全景首屏轮播图系统 结束 -->
<!-- 2. 服务入口 (Services Section) 开始 -->
@@ -611,4 +774,125 @@
<!-- 底部行动号召 (CTA Section) 结束 -->
<!-- 首页主体 结束 -->
{/block}
{block name="js"}
<script>
document.addEventListener('DOMContentLoaded', function() {
var carousel = document.getElementById('nhcHeroCarousel');
if (!carousel) return;
var slides = carousel.querySelectorAll('.nhc-carousel-slide');
var dots = carousel.querySelectorAll('.nhc-carousel-dot');
var prevBtn = document.getElementById('nhcPrevBtn');
var nextBtn = document.getElementById('nhcNextBtn');
var currentIndex = 0;
var totalSlides = slides.length;
var autoPlayTimer = null;
var intervalDuration = 6000;
function goToSlide(index) {
if (index < 0) {
index = totalSlides - 1;
} else if (index >= totalSlides) {
index = 0;
}
slides.forEach(function(slide, i) {
if (i === index) {
slide.classList.add('active');
} else {
slide.classList.remove('active');
}
});
dots.forEach(function(dot, i) {
if (i === index) {
dot.classList.add('active');
} else {
dot.classList.remove('active');
}
});
currentIndex = index;
}
function nextSlide() {
goToSlide(currentIndex + 1);
}
function prevSlide() {
goToSlide(currentIndex - 1);
}
function startAutoPlay() {
stopAutoPlay();
autoPlayTimer = setInterval(nextSlide, intervalDuration);
}
function stopAutoPlay() {
if (autoPlayTimer) {
clearInterval(autoPlayTimer);
autoPlayTimer = null;
}
}
if (prevBtn) {
prevBtn.addEventListener('click', function(e) {
e.preventDefault();
prevSlide();
startAutoPlay();
});
}
if (nextBtn) {
nextBtn.addEventListener('click', function(e) {
e.preventDefault();
nextSlide();
startAutoPlay();
});
}
dots.forEach(function(dot) {
dot.addEventListener('click', function() {
var targetIdx = parseInt(this.getAttribute('data-goto'), 10);
if (!isNaN(targetIdx)) {
goToSlide(targetIdx);
startAutoPlay();
}
});
});
carousel.addEventListener('mouseenter', stopAutoPlay);
carousel.addEventListener('mouseleave', startAutoPlay);
// 触摸滑动支持
var touchStartX = 0;
var touchEndX = 0;
carousel.addEventListener('touchstart', function(e) {
touchStartX = e.changedTouches[0].screenX;
stopAutoPlay();
}, { passive: true });
carousel.addEventListener('touchend', function(e) {
touchEndX = e.changedTouches[0].screenX;
if (touchStartX - touchEndX > 50) {
nextSlide();
} else if (touchEndX - touchStartX > 50) {
prevSlide();
}
startAutoPlay();
}, { passive: true });
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
stopAutoPlay();
} else {
startAutoPlay();
}
});
startAutoPlay();
});
</script>
{/block}

331
addons/official/view/web/official_home/index_e.html
查看文件

@@ -20,50 +20,207 @@
{block name="content"}
<!-- 纳海川移动端 首页主体 开始 -->
<!-- 1. 首屏 (Hero Section) -->
<section class="nhc-hero nhc-lattice-pattern">
<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>
<!-- 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">
纳海川专注于为政企与高成长型企业构筑稳固的业务技术中台、全端移动生态与垂直领域 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">99.8<sub>%</sub></div>
<div class="nhc-metric-label">项目按期交付率</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">50<sub>+</sub></div>
<div class="nhc-metric-label">自主软著资产</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">200<sub>+</sub></div>
<div class="nhc-metric-label">政企标杆客户</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">10<sub>+</sub></div>
<div class="nhc-metric-label">年软件工程沉淀</div>
</div>
</div>
</div>
</div>
</div>
<h1 class="nhc-hero-title">
纳百川以成巨流 <br><span class="highlight">聚智能</span>以启新元
</h1>
<p class="nhc-hero-subtitle">
纳海川专注于为政企与高成长型企业构筑稳固的业务技术中台、全端移动生态与垂直领域 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>
<!-- 幻灯片 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">企业中台 · 全端生态 · 源码交付</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">&lt;50<sub>ms</sub></div>
<div class="nhc-metric-label">核心接口平均响应</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">100<sub>%</sub></div>
<div class="nhc-metric-label">源码完整交付</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">60<sub>fps</sub></div>
<div class="nhc-metric-label">全端流畅交互</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">ISO<sub>9001</sub></div>
<div class="nhc-metric-label">研发质量严审</div>
</div>
</div>
</div>
</div>
</div>
<div class="nhc-hero-metrics">
<div class="nhc-metric-item">
<div class="nhc-metric-val">99.8<sub>%</sub></div>
<div class="nhc-metric-label">项目按期交付率</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">智能跃升</span>
<span class="nhc-hero-badge-text">专属大模型 · 多智能体 · RAG 知识库</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="#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">&lt;1.5<sub>s</sub></div>
<div class="nhc-metric-label">精准向量检索</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">85<sub>%</sub></div>
<div class="nhc-metric-label">工单自动解决率</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">Multi<sub>Agent</sub></div>
<div class="nhc-metric-label">多智能体协同调度</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">0<sub>泄露</sub></div>
<div class="nhc-metric-label">私有化本地隔离</div>
</div>
</div>
</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">50<sub>+</sub></div>
<div class="nhc-metric-label">自主软著资产</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">200<sub>+</sub></div>
<div class="nhc-metric-label">政企标杆客户</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">10<sub>+</sub></div>
<div class="nhc-metric-label">年软件工程沉淀</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">
千万级真实交易峰值淬炼的标准成熟产品矩阵，支持即开即用公有云 SaaS 与私有化部署。
</p>
<div class="nhc-hero-cta">
<a href="#products" 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">4<sub>大</sub></div>
<div class="nhc-metric-label">核心成熟商业产品</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">10W<sub>+</sub></div>
<div class="nhc-metric-label">日交易订单承载力</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">软硬<sub>一体</sub></div>
<div class="nhc-metric-label">收银智能硬件兼容</div>
</div>
<div class="nhc-metric-item">
<div class="nhc-metric-val">99.99<sub>%</sub></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>
@@ -292,3 +449,103 @@
<!-- 移动端首页主体 结束 -->
{/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}