From 86406c7567c7f3adb1a662cb458b142a259e0a44 Mon Sep 17 00:00:00 2001 From: Yep_Q Date: Thu, 9 Oct 2025 14:41:48 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=83=BD=E6=BA=90?= =?UTF-8?q?=E8=AE=A2=E5=8D=95=E7=8F=AD=E9=A1=B5=E9=9D=A2=E6=8E=92=E7=89=88?= =?UTF-8?q?=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 详细说明: - Hero区域优化: 添加动态SVG背景、浮动数据卡片、滚动指示器 - Bento Grid布局: 第一个section使用不等大小网格,增加视觉层次 - 增强动画效果: 添加滚动触发动画、卡片渐次出现、悬停特效 - 优化响应式布局: 针对移动端、平板、桌面进行适配 - 性能优化: 移动端隐藏SVG背景,优化导航显示 影响文件: - web_frontend/web_result/order-classes/energy/index.html - web_frontend/web_result/order-classes/energy/css/styles.css - web_frontend/web_result/order-classes/energy/js/main.js 影响模块: 能源订单班展示页面 --- .claude/settings.local.json | 115 +----- .../order-classes/energy/agent-avatars | 2 +- .../order-classes/energy/css/styles.css | 383 +++++++++++++++++- .../web_result/order-classes/energy/data | 1 + .../web_result/order-classes/energy/images | 2 +- .../order-classes/energy/index.html | 61 ++- .../order-classes/energy/js/main.js | 39 +- 7 files changed, 471 insertions(+), 132 deletions(-) create mode 120000 web_frontend/web_result/order-classes/energy/data diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 46375424..efb176a7 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -1,119 +1,10 @@ { "permissions": { "allow": [ - "mcp__browser-tools__takeScreenshot", - "mcp__playwright__browser_navigate", - "mcp__playwright__browser_wait_for", - "mcp__playwright__browser_click", - "mcp__playwright__browser_snapshot", - "mcp__playwright__browser_evaluate", - "mcp__browser-tools__getConsoleErrors", - "mcp__playwright__browser_console_messages", - "mcp__playwright__browser_close", - "Bash(for file in exhibition.html marketing.html operation.html overview.html)", - "Bash(do sed -i '' 's|||g' \"$file\")", - "Bash(done)", - "mcp__serena__delete_memory", - "Bash(./start-network.sh:*)", - "Bash(./start-lan.sh:*)", - "Bash(./start.sh:*)", - "Bash(node server.js)", - "Bash(lsof:*)", - "Bash(sudo pfctl:*)", - "Bash(./start-demo.sh:*)", - "mcp__playwright__browser_fill_form", - "Bash(./start-final.sh:*)", - "Bash(open /Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/test-n8n-final.html)", - "Bash(echo:*)", - "Bash(__NEW_LINE__ echo \"\n🔧 当前配置:\n - 无需认证 (N8N_USER_MANAGEMENT_DISABLED=true)\n - 跳过设置 (N8N_SKIP_OWNER_SETUP=true) \n - CORS已启用 (N8N_CORS_ENABLED=true)\n - 语言: 中文 (N8N_DEFAULT_LOCALE=zh-CN)\n - 日志级别: 错误 (N8N_LOG_LEVEL=error)\n\n📝 测试页面已创建:\n test-n8n-final.html - 可在浏览器中打开检查错误\n\n🎯 服务已成功启动，无后台错误！\n==================================================\n\")", - "Bash(kill:*)", - "Bash(env)", - "mcp__ide__getDiagnostics", - "Bash(npm install:*)", - "mcp__serena__read_memory", + "mcp__promptx__remember", + "mcp__playwright__browser_network_requests", "Bash(git add:*)", - "Bash(git commit:*)", - "Bash(git push:*)", - "Bash(git checkout:*)", - "mcp__promptx__promptx_action", - "mcp__promptx__promptx_welcome", - "Bash(pnpm install:*)", - "Bash(pnpm approve-builds:*)", - "Bash(timeout:*)", - "Bash(curl:*)", - "Bash(pnpm dev:*)", - "mcp__playwright__browser_take_screenshot", - "mcp__promptx__promptx_remember", - "Bash(for dir in 财经商贸 食品 智能开发 智能制造 视觉设计 交通物流 土木 大健康 能源 化工 环保 文旅)", - "Bash(do )", - "Bash(do echo \"\")", - "Bash(ls:*)", - "Bash(awk:*)", - "Bash(open /Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/food-order-display.html)", - "Bash(ln:*)", - "Bash(open /Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/test-order-class.html)", - "Bash(for:*)", - "Bash(xargs:*)", - "Bash(do echo \"=== $dir ===\")", - "Bash(find:*)", - "Bash(npx eslint:*)", - "Bash(open http://localhost:4173/test-wenlu.html)", - "Bash(open http://localhost:4173/test-wenlu-data.html)", - "Bash(open http://localhost:4173/test-workflow-wenlu.html)", - "Bash(open http://localhost:4173/test-terminal-data.html)", - "Bash(open http://localhost:4173/test-workflow.html)", - "mcp__promptx__promptx_learn", - "Bash(./fix-wenlu-nav.sh:*)", - "Bash(open http://localhost:4174)", - "mcp__browser-tools__getConsoleLogs", - "Bash(node:*)", - "Bash(open http://localhost:4155/order-class/wenlu)", - "Bash(do mv \"$file\" \"$file%.bak\")", - "Bash(do mv /Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/web_result/order-classes/wenlu/page/$file /Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/web_result/order-classes/wenlu/$file)", - "Bash(do sed -i '' 's|pages/||g' /Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/web_result/order-classes/wenlu/$file)", - "mcp__playwright__browser_press_key", - "Bash(do sed -i '' 's|href=\"\"pages/|href=\"\"|g' \"$file\")", - "Bash(do sed -i '' 's|href=\"\"pages/|href=\"\"|g; s|href=\"\"\\.\\./index\\.html\"\"|href=\"\"index.html\"\"|g' \"$file\")", - "Bash(head:*)", - "Bash(do mv \"$file\" \"$file%.jpeg.jpg\")", - "Bash(\"/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/data/订单班文档资料/土木/notion文稿/rename_images.sh\")", - "Bash(npx tsc:*)", - "Bash(pnpm run type-check:*)", - "Bash(do echo \"=== $file.ts ===\")", - "Bash(open /Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/.superdesign/design_iterations/food_qingshi_v1.html)", - "Bash(open /Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/.superdesign/design_iterations/food_qingshi_v2.html)", - "Bash(open /Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/.superdesign/design_iterations/food_qingshi_v3.html)", - "Bash(npm create:*)", - "Bash(npx tailwindcss init:*)", - "Bash(./node_modules/.bin/tailwindcss:*)", - "Bash(npm run dev:*)", - "Bash(sed:*)", - "Bash(paste:*)", - "Bash(do)", - "Bash(do echo \"=== $order - Agent头像 ===\" ls -1 \"/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/exhibition-demo/public/data/订单班文档资料/$order/agent头像/\")", - "Bash(\"/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/exhibition-demo/public/data/订单班文档资料/财经商贸/notion文稿/rename_images.sh\")", - "Bash(\"化妆品电商运营 278118168b2380dd812fc71d5d440b35.md\")", - "Bash(\"某地表水环境质量考核断面水质采样方案撰写 27a04df704b380b59e0fdcf216e8ea5e.md\")", - "Bash(./rename_images.sh)", - "Bash(\"半导体ai综合检测项目 281d463fce518050869ac4e6fd58a861.md\")", - "Bash(do if [ \"$file\" != \"index.ts\" ])", - "Bash(then echo -n \"$file: \")", - "Bash(fi)", - "Bash(do echo \"=== $file ===\")", - "Bash(open http://localhost:3000/order-classes/food/)", - "Bash(test:*)", - "Bash(readlink:*)", - "Bash(wc:*)", - "Bash(if [ -f \"/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/web_result/order-classes/chemical/images/$img\" ])", - "Bash(then)", - "Bash(else)", - "Bash(xxd:*)", - "Bash(open \"http://localhost:4155/order-classes/civil/\")", - "Bash(file:*)", - "Bash(do sed -i '' 's|\"\"\\.\\./js/|\"\"js/|g' \"$file\")", - "Bash(do sed -i '' 's|\"\"\\.\\./css/|\"\"css/|g' \"$file\")", - "Bash(do sed -i '' 's|\"\"\\.\\./data/|\"\"data/|g' \"$file\")", - "Bash(do sed -i '' \"s|url(''\\.\\./data/|url(''data/|g\" \"$file\")" + "Bash(git commit:*)" ], "deny": [], "ask": [], diff --git a/web_frontend/web_result/order-classes/energy/agent-avatars b/web_frontend/web_result/order-classes/energy/agent-avatars index af0f84be..921fa672 120000 --- a/web_frontend/web_result/order-classes/energy/agent-avatars +++ b/web_frontend/web_result/order-classes/energy/agent-avatars @@ -1 +1 @@ -../../../../../data/订单班文档资料/能源/agent头像 \ No newline at end of file +/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/data/订单班文档资料/能源/agent头像 \ No newline at end of file diff --git a/web_frontend/web_result/order-classes/energy/css/styles.css b/web_frontend/web_result/order-classes/energy/css/styles.css index 9336539b..f6d16e26 100644 --- a/web_frontend/web_result/order-classes/energy/css/styles.css +++ b/web_frontend/web_result/order-classes/energy/css/styles.css @@ -132,6 +132,55 @@ body { overflow: hidden; } +/* Hero SVG背景动画 */ +.hero-bg-svg { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + pointer-events: none; + z-index: 0; +} + +.floating-circle { + animation: float 20s ease-in-out infinite; +} + +.floating-circle:nth-child(2) { + animation-delay: -5s; + animation-duration: 25s; +} + +.floating-circle:nth-child(3) { + animation-delay: -10s; + animation-duration: 18s; +} + +.floating-circle:nth-child(4) { + animation-delay: -15s; + animation-duration: 22s; +} + +@keyframes float { + 0%, 100% { + transform: translate(0, 0) scale(1); + opacity: 0.3; + } + 25% { + transform: translate(30px, -30px) scale(1.1); + opacity: 0.5; + } + 50% { + transform: translate(-20px, 40px) scale(0.9); + opacity: 0.4; + } + 75% { + transform: translate(40px, 20px) scale(1.05); + opacity: 0.6; + } +} + /* 深色主题下的Hero渐变 */ body.dark-theme .hero { background: @@ -212,10 +261,96 @@ body.dark-theme .hero { font-size: var(--text-xl); opacity: 0.85; max-width: 800px; - margin: 0 auto; + margin: 0 auto var(--spacing-2xl); line-height: 1.8; } +/* Hero浮动卡片 */ +.hero-floating-cards { + display: flex; + gap: var(--spacing-lg); + justify-content: center; + margin-top: var(--spacing-2xl); + flex-wrap: wrap; +} + +.hero-card { + background: var(--bg-card); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + padding: var(--spacing-lg) var(--spacing-xl); + border-radius: var(--radius-xl); + border: 2px solid var(--border-light); + box-shadow: var(--shadow-lg); + transition: all var(--transition-base); + min-width: 160px; + animation: fadeInUp 0.8s ease forwards; +} + +.hero-card:nth-child(1) { animation-delay: 0.2s; opacity: 0; } +.hero-card:nth-child(2) { animation-delay: 0.4s; opacity: 0; } +.hero-card:nth-child(3) { animation-delay: 0.6s; opacity: 0; } + +.hero-card:hover { + transform: translateY(-8px) scale(1.05); + box-shadow: var(--shadow-xl), var(--shadow-orange); + border-color: var(--primary-orange); +} + +.hero-card-value { + font-size: var(--text-3xl); + font-weight: var(--font-bold); + color: var(--primary-orange); + margin-bottom: var(--spacing-xs); + text-shadow: 0 2px 10px rgba(245, 158, 11, 0.3); +} + +.hero-card-label { + font-size: var(--text-sm); + color: var(--text-gray); + font-weight: var(--font-medium); +} + +/* 滚动指示器 */ +.scroll-indicator { + position: absolute; + bottom: 40px; + left: 50%; + transform: translateX(-50%); + color: var(--primary-orange); + animation: bounce 2s infinite; + cursor: pointer; + z-index: 10; +} + +.scroll-indicator i { + width: 32px !important; + height: 32px !important; +} + +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + transform: translateX(-50%) translateY(0); + } + 40% { + transform: translateX(-50%) translateY(-10px); + } + 60% { + transform: translateX(-50%) translateY(-5px); + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + /* ========== 导航 - 深色玻璃态 ========== */ .nav { position: sticky; @@ -538,6 +673,58 @@ body.dark-theme tr:hover { grid-template-columns: repeat(3, 1fr); } +/* ========== Bento Grid布局 - 不等大小网格 ========== */ +.bento-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--spacing-xl); + margin-bottom: var(--spacing-xl); +} + +.bento-large { + grid-column: span 2; + grid-row: span 2; +} + +.bento-medium { + grid-column: span 2; + grid-row: span 1; +} + +.bento-small { + grid-column: span 1; + grid-row: span 1; +} + +/* Bento Grid响应式 */ +@media (max-width: 1024px) { + .bento-grid { + grid-template-columns: repeat(2, 1fr); + } + + .bento-large { + grid-column: span 2; + grid-row: span 1; + } + + .bento-medium { + grid-column: span 1; + } +} + +@media (max-width: 768px) { + .bento-grid { + grid-template-columns: 1fr; + } + + .bento-large, + .bento-medium, + .bento-small { + grid-column: span 1; + grid-row: span 1; + } +} + /* ========== 卡片 - 图片优先布局 ========== */ .card { background: var(--bg-card); @@ -731,6 +918,21 @@ tr:hover { } /* ========== 响应式 ========== */ +@media (max-width: 1200px) { + .hero-floating-cards { + gap: var(--spacing-md); + } + + .hero-card { + min-width: 140px; + padding: var(--spacing-md) var(--spacing-lg); + } + + .hero-card-value { + font-size: var(--text-2xl); + } +} + @media (max-width: 768px) { :root { --spacing-sm: 0.75rem; @@ -743,6 +945,11 @@ tr:hover { .hero { background-attachment: scroll; + min-height: 90vh; + } + + .hero-bg-svg { + display: none; /* 移动端隐藏SVG背景 */ } .section:nth-child(odd), @@ -754,6 +961,32 @@ tr:hover { padding: var(--spacing-lg); } + .hero-title { + font-size: clamp(2rem, 8vw, 3.5rem); + } + + .hero-subtitle { + font-size: clamp(1.2rem, 4vw, 1.8rem); + } + + .hero-description { + font-size: var(--text-base); + } + + .hero-floating-cards { + flex-direction: column; + gap: var(--spacing-sm); + } + + .hero-card { + width: 100%; + min-width: auto; + } + + .scroll-indicator { + bottom: 20px; + } + .nav-container { gap: var(--spacing-xs); } @@ -763,6 +996,10 @@ tr:hover { font-size: var(--text-sm); } + .nav-item span { + display: none; /* 移动端只显示图标 */ + } + .section { padding: var(--spacing-2xl) 0; } @@ -778,8 +1015,57 @@ tr:hover { text-align: center; } + .agent-avatar { + width: 80px; + height: 80px; + } + .stats { flex-direction: column; + gap: var(--spacing-sm); + } + + .stat-item { + padding: var(--spacing-sm); + } + + .stat-value { + font-size: var(--text-xl); + } + + table { + font-size: var(--text-sm); + } + + th, td { + padding: var(--spacing-sm); + } +} + +@media (max-width: 480px) { + .hero-badge { + padding: var(--spacing-sm) var(--spacing-lg); + font-size: var(--text-base); + } + + .hero-card { + padding: var(--spacing-sm) var(--spacing-md); + } + + .hero-card-value { + font-size: var(--text-xl); + } + + .section-title { + font-size: var(--text-2xl); + } + + .card-title { + font-size: var(--text-lg); + } + + .expert-intro h3 { + font-size: var(--text-lg); } } @@ -823,6 +1109,101 @@ tr:hover { animation: slideIn 0.6s ease forwards; } +/* ========== 滚动触发动画 ========== */ +.scroll-reveal { + opacity: 0; + transform: translateY(50px); + transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); +} + +.scroll-reveal.revealed { + opacity: 1; + transform: translateY(0); +} + +.scroll-reveal-left { + opacity: 0; + transform: translateX(-50px); + transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); +} + +.scroll-reveal-left.revealed { + opacity: 1; + transform: translateX(0); +} + +.scroll-reveal-right { + opacity: 0; + transform: translateX(50px); + transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); +} + +.scroll-reveal-right.revealed { + opacity: 1; + transform: translateX(0); +} + +.scroll-reveal-scale { + opacity: 0; + transform: scale(0.9); + transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); +} + +.scroll-reveal-scale.revealed { + opacity: 1; + transform: scale(1); +} + +/* 卡片渐次出现 */ +.card.scroll-reveal { + transition-delay: calc(var(--card-index, 0) * 0.1s); +} + +/* 增强卡片悬停效果 */ +.card { + position: relative; +} + +.card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, transparent, rgba(245, 158, 11, 0.1)); + opacity: 0; + transition: opacity var(--transition-base); + border-radius: var(--radius-2xl); + pointer-events: none; + z-index: 1; +} + +.card:hover::before { + opacity: 1; +} + +/* 数据统计项动画 */ +.stat-item { + position: relative; + overflow: hidden; +} + +.stat-item::after { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.2), transparent); + transition: left 0.5s ease; +} + +.stat-item:hover::after { + left: 100%; +} + /* ========== 工具类 ========== */ .text-center { text-align: center; } .text-left { text-align: left; } diff --git a/web_frontend/web_result/order-classes/energy/data b/web_frontend/web_result/order-classes/energy/data new file mode 120000 index 00000000..c7960f02 --- /dev/null +++ b/web_frontend/web_result/order-classes/energy/data @@ -0,0 +1 @@ +/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/data \ No newline at end of file diff --git a/web_frontend/web_result/order-classes/energy/images b/web_frontend/web_result/order-classes/energy/images index 882eb843..71d73a10 120000 --- a/web_frontend/web_result/order-classes/energy/images +++ b/web_frontend/web_result/order-classes/energy/images @@ -1 +1 @@ -../../../../../data/订单班文档资料/能源/notion文稿/image \ No newline at end of file +/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/data/订单班文档资料/能源/notion文稿/image \ No newline at end of file diff --git a/web_frontend/web_result/order-classes/energy/index.html b/web_frontend/web_result/order-classes/energy/index.html index f75de92f..4f5dd358 100644 --- a/web_frontend/web_result/order-classes/energy/index.html +++ b/web_frontend/web_result/order-classes/energy/index.html @@ -18,6 +18,20 @@
+ + + + + + + + + + + + + +
⚡ 能源订单班

光伏晶硅电池片
印后AOI检测与分拣单元

@@ -27,6 +41,27 @@ 康耐视In-Sight D900深度学习AOI
ABB IRB 1200六轴机器人分拣

+ + +
+
+
3600片/时
+
设计产能
+
+
+
99.7%
+
检出率
+
+
+
±0.02mm
+
定位精度
+
+
+
+ + +
+
@@ -71,10 +106,12 @@

本项目为某光伏企业设计并实施了一套基于西门子S7-1500 PLC + 康耐视机器视觉 + ABB六轴机器人的晶硅电池片印后AOI检测与自动分拣单元。系统针对丝网印刷工序后的PERC/TopCon电池片,能够精准识别断栅、漏印、拖浆、脏污、划伤、崩边等7类缺陷,实现≥3600片/小时产能、≤0.5%误检率、≤0.3%漏检率的行业领先水平。

-
-
+ +
+ +
- PLC控制系统 + PLC控制系统
西门子S7-1500 PLC控制系统
@@ -90,9 +127,10 @@
-
+ +
- ABB工业机器人 + ABB工业机器人
ABB IRB 1200六轴工业机器人
@@ -108,9 +146,10 @@
-
+ +
- 机器视觉相机 + 机器视觉相机
康耐视In-Sight D900视觉系统
@@ -128,7 +167,7 @@
- 输送线与治具系统 + 输送线与治具系统
双边夹持缓存输送线与伺服定心机构
@@ -209,7 +248,7 @@
- 控制流程图 + 控制流程图
系统控制流程Mermaid图
@@ -379,7 +418,7 @@
- 光伏面板分拣场景 + 光伏面板分拣场景
机器人分拣路径三维仿真
@@ -548,7 +587,7 @@
- 光伏检测场景 + 光伏检测场景
AOI检测工位实景
diff --git a/web_frontend/web_result/order-classes/energy/js/main.js b/web_frontend/web_result/order-classes/energy/js/main.js index 1abfdc84..077b9c9f 100644 --- a/web_frontend/web_result/order-classes/energy/js/main.js +++ b/web_frontend/web_result/order-classes/energy/js/main.js @@ -68,25 +68,52 @@ function initAnimations() { // 使用 Intersection Observer 实现滚动动画 const observerOptions = { root: null, - rootMargin: '0px', - threshold: 0.1 + rootMargin: '0px 0px -100px 0px', + threshold: 0.15 }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { - entry.target.classList.add('fade-in'); + // 检查元素有哪些动画类 + if (entry.target.classList.contains('scroll-reveal') || + entry.target.classList.contains('scroll-reveal-left') || + entry.target.classList.contains('scroll-reveal-right') || + entry.target.classList.contains('scroll-reveal-scale')) { + entry.target.classList.add('revealed'); + } else { + entry.target.classList.add('fade-in'); + } + // 动画完成后停止观察 observer.unobserve(entry.target); } }); }, observerOptions); // 观察所有需要动画的元素 - const animatedElements = document.querySelectorAll('.card, .expert-intro'); - animatedElements.forEach(el => { - el.style.opacity = '0'; + const animatedElements = document.querySelectorAll( + '.card, .expert-intro, .scroll-reveal, .scroll-reveal-left, .scroll-reveal-right, .scroll-reveal-scale, .stats, .table-container' + ); + + animatedElements.forEach((el, index) => { + // 为卡片添加索引,用于延迟动画 + if (el.classList.contains('card')) { + el.style.setProperty('--card-index', index % 3); + el.classList.add('scroll-reveal'); + } observer.observe(el); }); + + // 滚动指示器点击事件 + const scrollIndicator = document.querySelector('.scroll-indicator'); + if (scrollIndicator) { + scrollIndicator.addEventListener('click', () => { + const nav = document.querySelector('.nav'); + if (nav) { + nav.scrollIntoView({ behavior: 'smooth' }); + } + }); + } } // 图片懒加载