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}

251
public/assets/addons/official/css/modern_nhc.css
查看文件

@@ -322,9 +322,231 @@ img {
font-size: 16px;
}
/* 首屏 (Hero Section) */
/* ==========================================================================
高端大气首屏轮播图系统 (Hero Panoramic Carousel)
========================================================================== */
.nhc-hero-carousel-wrap {
position: relative;
width: 100%;
overflow: hidden;
background-color: var(--bg-primary);
border-bottom: 1px solid var(--border-color);
padding-top: 76px; /* 避开固定导航栏 */
}
.nhc-carousel {
position: relative;
width: 100%;
min-height: 700px;
overflow: hidden;
}
.nhc-carousel-track {
position: relative;
width: 100%;
height: 100%;
min-height: 700px;
}
.nhc-carousel-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 700px;
opacity: 0;
visibility: hidden;
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
display: flex;
align-items: center;
justify-content: center;
padding: 70px 0 90px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
z-index: 1;
}
.nhc-carousel-slide.active {
opacity: 1;
visibility: visible;
z-index: 2;
}
/* 轮播图幻灯片不同主题背景与中式意境光影 (浅色高雅、通透水墨微晕) */
.nhc-slide-theme-1 {
background:
radial-gradient(circle at 50% 18%, rgba(37, 99, 235, 0.08) 0%, transparent 48%),
radial-gradient(circle at 82% 65%, rgba(6, 182, 212, 0.07) 0%, transparent 45%),
radial-gradient(circle at 18% 75%, rgba(124, 58, 237, 0.04) 0%, transparent 40%),
linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
}
.nhc-slide-theme-2 {
background:
radial-gradient(circle at 80% 25%, rgba(37, 99, 235, 0.09) 0%, transparent 50%),
radial-gradient(circle at 20% 60%, rgba(6, 182, 212, 0.06) 0%, transparent 45%),
linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
}
.nhc-slide-theme-3 {
background:
radial-gradient(circle at 50% 20%, rgba(6, 182, 212, 0.09) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(124, 58, 237, 0.06) 0%, transparent 50%),
linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
}
.nhc-slide-theme-4 {
background:
radial-gradient(circle at 20% 30%, rgba(124, 58, 237, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(37, 99, 235, 0.08) 0%, transparent 55%),
linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
}
/* 轮播图切换过渡微动画 */
.nhc-carousel-slide .nhc-hero-content {
transform: translateY(24px) scale(0.99);
transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.85s;
opacity: 0;
}
.nhc-carousel-slide.active .nhc-hero-content {
transform: translateY(0) scale(1);
opacity: 1;
}
/* 轮播图左右悬浮控制按钮 (高定毛玻璃气泡) */
.nhc-carousel-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(226, 232, 240, 0.9);
color: var(--text-primary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
}
.nhc-carousel-prev {
left: 36px;
}
.nhc-carousel-next {
right: 36px;
}
.nhc-carousel-nav:hover {
background: var(--primary);
color: #FFFFFF;
border-color: var(--primary);
transform: translateY(-50%) scale(1.1);
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
}
.nhc-carousel-nav:active {
transform: translateY(-50%) scale(0.95);
}
/* 底部高定长条指示器与编号 */
.nhc-carousel-indicators {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 12px;
z-index: 10;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 6px 16px;
border-radius: 30px;
border: 1px solid rgba(226, 232, 240, 0.85);
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}
.nhc-carousel-dot {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 6px 10px;
border-radius: 20px;
transition: all 0.3s ease;
user-select: none;
}
.nhc-carousel-dot-num {
font-family: var(--font-serif);
font-size: 13px;
font-weight: 700;
color: var(--text-muted);
letter-spacing: 0.5px;
transition: color 0.3s;
}
.nhc-carousel-dot-bar {
width: 20px;
height: 3px;
border-radius: 2px;
background: rgba(203, 213, 225, 0.8);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
}
.nhc-carousel-dot:hover .nhc-carousel-dot-num,
.nhc-carousel-dot.active .nhc-carousel-dot-num {
color: var(--primary);
}
.nhc-carousel-dot:hover .nhc-carousel-dot-bar {
background: #93C5FD;
}
.nhc-carousel-dot.active .nhc-carousel-dot-bar {
width: 56px;
background: var(--primary);
box-shadow: 0 0 10px rgba(37, 99, 235, 0.4);
}
/* 窗棂细线折角微装饰 (Corner Accents) */
.nhc-corner-card {
position: relative;
}
.nhc-corner-card::after {
content: "";
position: absolute;
top: 8px;
right: 8px;
width: 14px;
height: 14px;
border-top: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
pointer-events: none;
transition: border-color 0.3s;
}
.nhc-corner-card:hover::after {
border-color: var(--primary);
}
/* 首屏 (Hero Section) 样式微调 */
.nhc-hero {
padding-top: 150px;
padding-top: 120px;
padding-bottom: 90px;
position: relative;
background: radial-gradient(circle at 50% 10%, rgba(37, 99, 235, 0.05) 0%, rgba(255, 255, 255, 0) 70%),
@@ -1144,6 +1366,31 @@ img {
.nhc-nav-actions .nhc-btn {
display: none;
}
/* 移动端全景轮播图优雅适配 */
.nhc-carousel {
min-height: 600px;
}
.nhc-carousel-track {
min-height: 600px;
}
.nhc-carousel-slide {
min-height: 600px;
padding: 40px 16px 72px;
}
.nhc-carousel-nav {
display: none; /* 移动端主打触控滑动手势与底部指示器 */
}
.nhc-carousel-indicators {
bottom: 16px;
padding: 4px 12px;
gap: 8px;
}
.nhc-carousel-dot-bar {
width: 14px;
}
.nhc-carousel-dot.active .nhc-carousel-dot-bar {
width: 36px;
}
.nhc-hero-title {
font-size: 32px;
}

18
tests/HomepageDesignTest.php
查看文件

@@ -62,7 +62,10 @@ class HomepageDesignTest
// 7. 案例、流程、评价、CTA 板块测试
$this->testEssentialSections();
// 8. 响应式布局测试
// 8. 轮播图 (Carousel) 专项测试
$this->testCarouselSection();
// 9. 响应式布局测试
$this->testResponsiveDesign();
echo "\n测试结果: {$this->passed} 通过, {$this->failed} 失败\n";
@@ -186,6 +189,19 @@ class HomepageDesignTest
$this->assert(strpos($this->htmlContent, 'nhc-footer') !== false, "必须包含现代化专业页脚板块");
}
/**
* 测试轮播图 (Carousel) 结构与组件
*/
public function testCarouselSection()
{
$this->assert(strpos($this->htmlContent, 'nhc-carousel') !== false, "必须包含高端轮播图 nhc-carousel 容器");
$this->assert(strpos($this->htmlContent, 'nhc-carousel-slide') !== false, "必须包含轮播图幻灯片 nhc-carousel-slide");
$this->assert(strpos($this->htmlContent, 'nhc-carousel-prev') !== false && strpos($this->htmlContent, 'nhc-carousel-next') !== false, "必须包含轮播图左右切换导航控件");
$this->assert(strpos($this->htmlContent, 'nhc-carousel-indicators') !== false, "必须包含轮播图指示器组件");
$hasCarouselCss = (stripos($this->cssContent, 'nhc-carousel') !== false);
$this->assert($hasCarouselCss, "CSS 中必须包含高端轮播图专用样式规范");
}
/**
* 测试响应式断点与设计
*/