Duguay/Agent-n8n
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化能源订单班页面排版布局

Browse Source 
详细说明:
- 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

影响模块: 能源订单班展示页面
This commit is contained in:
Yep_Q
2025-10-09 14:41:48 +08:00
parent 305119df24
commit 86406c7567
7 changed files with 471 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
.claude/settings.local.json
View File

@@ -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|<link href=\"\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\"\" rel=\"\"stylesheet\"\">|<script src=\"\"https://cdn.tailwindcss.com\"\"></script>|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": [],

2
web_frontend/web_result/order-classes/energy/agent-avatars
View File

@@ -1 +1 @@
../../../../../data/订单班文档资料/能源/agent头像
/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/data/订单班文档资料/能源/agent头像

383
web_frontend/web_result/order-classes/energy/css/styles.css
View File

@@ -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; }

1
web_frontend/web_result/order-classes/energy/data Symbolic link
View File

@@ -0,0 +1 @@
/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/data

2
web_frontend/web_result/order-classes/energy/images
View File

@@ -1 +1 @@
../../../../../data/订单班文档资料/能源/notion文稿/image
/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/data/订单班文档资料/能源/notion文稿/image

61
web_frontend/web_result/order-classes/energy/index.html
View File

@@ -18,6 +18,20 @@
<!-- Hero 区域 -->
<section class="hero">
<!-- 动态背景SVG -->
<svg class="hero-bg-svg" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgb(245,158,11);stop-opacity:0.1" />
<stop offset="100%" style="stop-color:rgb(217,119,6);stop-opacity:0.05" />
</linearGradient>
</defs>
<circle class="floating-circle" cx="200" cy="200" r="120" fill="url(#grad1)" />
<circle class="floating-circle" cx="1720" cy="300" r="80" fill="url(#grad1)" />
<circle class="floating-circle" cx="1600" cy="800" r="100" fill="url(#grad1)" />
<circle class="floating-circle" cx="300" cy="900" r="60" fill="url(#grad1)" />
</svg>
<div class="hero-content">
<div class="hero-badge">⚡ 能源订单班</div>
<h1 class="hero-title">光伏晶硅电池片<br>印后AOI检测与分拣单元</h1>
@@ -27,6 +41,27 @@
<i data-lucide="camera"></i> 康耐视In-Sight D900深度学习AOI<br>
<i data-lucide="bot"></i> ABB IRB 1200六轴机器人分拣
</p>
<!-- 浮动数据卡片 -->
<div class="hero-floating-cards">
<div class="hero-card">
<div class="hero-card-value">3600片/时</div>
<div class="hero-card-label">设计产能</div>
</div>
<div class="hero-card">
<div class="hero-card-value">99.7%</div>
<div class="hero-card-label">检出率</div>
</div>
<div class="hero-card">
<div class="hero-card-value">±0.02mm</div>
<div class="hero-card-label">定位精度</div>
</div>
</div>
</div>
<!-- 滚动提示 -->
<div class="scroll-indicator">
<i data-lucide="chevron-down"></i>
</div>
</section>
@@ -71,10 +106,12 @@
<p>本项目为某光伏企业设计并实施了一套基于西门子S7-1500 PLC + 康耐视机器视觉 + ABB六轴机器人的晶硅电池片印后AOI检测与自动分拣单元。系统针对丝网印刷工序后的PERC/TopCon电池片,能够精准识别断栅、漏印、拖浆、脏污、划伤、崩边等7类缺陷,实现≥3600片/小时产能、≤0.5%误检率、≤0.3%漏检率的行业领先水平。</p>
</div>
<div class="grid grid-3">
<div class="card">
<!-- Bento Grid 布局 - 不等大小网格 -->
<div class="bento-grid">
<!-- 大卡片 - PLC控制系统 -->
<div class="card bento-large">
<div class="image-container">
<img data-src="images/PLC示意图.jpg" alt="PLC控制系统" loading="lazy">
<img data-src="data/订单班文档资料/能源/notion文稿/image/PLC示意图.jpg" alt="PLC控制系统" loading="lazy">
<div class="image-caption">西门子S7-1500 PLC控制系统</div>
</div>
<div class="card-header">
@@ -90,9 +127,10 @@
</div>
</div>
<div class="card">
<!-- 中等卡片 - 机器人 -->
<div class="card bento-medium">
<div class="image-container">
<img data-src="images/工业机器人图片.jpg" alt="ABB工业机器人" loading="lazy">
<img data-src="data/订单班文档资料/能源/notion文稿/image/工业机器人图片.jpg" alt="ABB工业机器人" loading="lazy">
<div class="image-caption">ABB IRB 1200六轴工业机器人</div>
</div>
<div class="card-header">
@@ -108,9 +146,10 @@
</div>
</div>
<div class="card">
<!-- 中等卡片 - 视觉系统 -->
<div class="card bento-medium">
<div class="image-container">
<img data-src="images/机器视觉相机图片.jpg" alt="机器视觉相机" loading="lazy">
<img data-src="data/订单班文档资料/能源/notion文稿/image/机器视觉相机图片.jpg" alt="机器视觉相机" loading="lazy">
<div class="image-caption">康耐视In-Sight D900视觉系统</div>
</div>
<div class="card-header">
@@ -128,7 +167,7 @@
</div>
<div class="image-container" style="margin-top: var(--spacing-xl);">
<img data-src="images/输送与治具.jpg" alt="输送线与治具系统" loading="lazy">
<img data-src="data/订单班文档资料/能源/notion文稿/image/输送与治具.jpg" alt="输送线与治具系统" loading="lazy">
<div class="image-caption">双边夹持缓存输送线与伺服定心机构</div>
</div>
@@ -209,7 +248,7 @@
</div>
<div class="image-container" style="margin-bottom: var(--spacing-xl);">
<img data-src="images/Mermaid流程图.jpg" alt="控制流程图" loading="lazy">
<img data-src="data/订单班文档资料/能源/notion文稿/image/Mermaid流程图.jpg" alt="控制流程图" loading="lazy">
<div class="image-caption">系统控制流程Mermaid图</div>
</div>
@@ -379,7 +418,7 @@
</div>
<div class="image-container" style="margin-bottom: var(--spacing-xl);">
<img data-src="images/光伏面板生成画面.jpg" alt="光伏面板分拣场景" loading="lazy">
<img data-src="data/订单班文档资料/能源/notion文稿/image/光伏面板生成画面.jpg" alt="光伏面板分拣场景" loading="lazy">
<div class="image-caption">机器人分拣路径三维仿真</div>
</div>
@@ -548,7 +587,7 @@
</div>
<div class="image-container" style="margin-bottom: var(--spacing-xl);">
<img data-src="images/光伏面板室外场景图片.jpg" alt="光伏检测场景" loading="lazy">
<img data-src="data/订单班文档资料/能源/notion文稿/image/光伏面板室外场景图片.jpg" alt="光伏检测场景" loading="lazy">
<div class="image-caption">AOI检测工位实景</div>
</div>

39
web_frontend/web_result/order-classes/energy/js/main.js
View File

@@ -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' });
}
});
}
}
// 图片懒加载