diff --git a/addons/official/view/web/official_home/index.html b/addons/official/view/web/official_home/index.html index c2d8580..99c5162 100644 --- a/addons/official/view/web/official_home/index.html +++ b/addons/official/view/web/official_home/index.html @@ -3,60 +3,223 @@ {block name="content"} - -
-
-
- -
- 纳海川 - 现代企业数字化底座与智能体定制专家 + +
+
- + @@ -611,4 +774,125 @@ +{/block} + +{block name="js"} + {/block} \ No newline at end of file diff --git a/addons/official/view/web/official_home/index_e.html b/addons/official/view/web/official_home/index_e.html index 98fd64b..844393d 100644 --- a/addons/official/view/web/official_home/index_e.html +++ b/addons/official/view/web/official_home/index_e.html @@ -20,50 +20,207 @@ {block name="content"} - -
-
-
-
- 纳海川 - 现代企业数字化底座与智能体定制专家 + +
+
@@ -292,3 +449,103 @@ {/block} + +{block name="js"} + +{/block} diff --git a/public/assets/addons/official/css/modern_nhc.css b/public/assets/addons/official/css/modern_nhc.css index c482338..2dec778 100644 --- a/public/assets/addons/official/css/modern_nhc.css +++ b/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; } diff --git a/tests/HomepageDesignTest.php b/tests/HomepageDesignTest.php index 8cab77a..49e4a50 100644 --- a/tests/HomepageDesignTest.php +++ b/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 中必须包含高端轮播图专用样式规范"); + } + /** * 测试响应式断点与设计 */