feat: 优化能源订单班页面排版布局
详细说明: - 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
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user