xiaoqi/n8n_Demo
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

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