-
-
- 检测背景
-本项目对单批次 300mm 硅晶圆 + 表面SiO₂薄膜开展一次性质量检测。整套流程由AI引擎主导:负责数据清洗、主判定与自动出具结构化报告;检测员只在低可信或越界时介入复核,最大化保障速度与一致性。
-
- ![检测背景]()
-
+
+ 
- AI驱动的智能检测系统
+
+
+
+ ![检测背景]()
+
+
+ AI驱动的智能检测系统
+
+
检测背景
++ 本项目对单批次 300mm 硅晶圆 + 表面SiO₂薄膜开展一次性质量检测。检测的核心目标是在不打乱生产节拍的前提下，快速、客观地给出放行/拦截结论，并将证据图与关键数据同步打包，便于管理层与工艺同事直接引用。 +
++ 整套流程由AI引擎主导：它负责数据清洗（去噪、校正）、主判定（是否达标/进入观察/越界）与自动出具结构化报告；检测员只在低可信或越界时介入复核，最大化保障速度与一致性。 +
+
@@ -91,6 +98,49 @@
+
+
+
+ 检测目的详细说明
+
+
+
+
+
+
+ + 1. 外观检测 +
++ 识别并量化颗粒、划痕、腐蚀等可见缺陷，输出数量、最大尺寸、位置分布与可信度；若出现同象限集中或边缘聚集，在报告中加注"需关注"提示，便于下批定位复测。 +
+
+
+ + 2. 薄膜测量 +
++ 用9点法核对厚度均值与均匀性(3σ)是否满足目标窗口；当整体达标但边缘点偏离明显时，自动标记"边缘敏感"，提示下批优先复查对应区域。 +
+
+
+ + 3. 电学测试 +
++ 以"AI预测+少量点实测校准"的组合快速评估Rs；当均值接近上/下限或离散度异常放大时，报告中会给出"观察或需复核"的明确结论与建议点位。 +
+
+
+ + 4. 成分分析 +
++ 进行小样本XPS抽检，确认O/Si比是否落在目标范围，并筛查金属污染的可疑峰位；若低于阈值但出现弱峰，记为"可疑"，建议同片位或邻近点复测。 +
+检测信息
@@ -156,14 +206,27 @@
-
-
-
- 检测对象与项目
-样品类型:300mm硅晶圆+表面SiO₂薄膜。覆盖项目:外观(颗粒/划痕/腐蚀)、薄膜(厚度与均匀性)、电学(方块电阻Rs)、成分(XPS抽检)。
-
- ![检测项目]()
-
- 硅晶圆检测项目全景
+
+
+
+ ![检测项目]()
+
+
+ 硅晶圆检测项目全景
+
+
检测对象与项目
+-
+
- 样品类型：300mm硅晶圆 + 表面SiO₂薄膜 +
- 外观检测：颗粒、划痕、腐蚀等可见缺陷 +
- 薄膜测量：厚度均值与均匀性(3σ) +
- 电学测试：方块电阻Rs(9点法) +
- 成分分析：XPS抽检(O/Si比、金属污染) +
- 不在范围：晶体位错、深层缺陷、应力拉曼 +
+ + 结果使用：仅服务当批放行/拦截，不外推其他批次或不同工艺窗口。 +
+
@@ -280,52 +343,73 @@
+
光学镜头检测硅晶圆示意
-
+
+
-
+
+
+
- ![外观热力图]()
+ ![外观热力图]()
+
.jpg)
+ 
+ AI输出图表 1/4
-
外观热力图
++ + 外观热力图 +
整片俯视图+网格热区,颗粒/划痕/腐蚀坑分类显示,颜色分级标注严重度。
+
+
![厚度分布图]()
+
-
- 
+ AI输出图表 2/4
-
厚度分布图
++ + 厚度分布图 +
9点热力格,均值、3σ、偏移率统计,边缘敏感性自动标注。
+
+
![电学对比图]()
+
-
+
+
+ 
+ AI输出图表 3/4
-
电学对比图
++ + 电学对比图 +
AI预测vs实测散点图,误差统计,置信区间可视化展示。
+
+
![成分抽检]()
+
@@ -341,43 +425,111 @@
+ AI输出图表 4/4
-
- 成分抽检卡片
++ + 成分抽检卡片 +
-
O/Si比值、金属污染状态,峰位截图,采样位置追溯。
+
+
O/Si比值、金属污染状态,峰位截图,采样位置追溯。
自动出报告并归档,无需人工处理。
+
+
- 测点最少化策略
+
-
0.80-0.90 → 观察
+✅ 默认做法：9点测量
-
自动生成备注与关注点,坐标放入下批复测清单。
+厚度和Rs用9点（中心1点+内环4点+外环4点），能覆盖重点区域，也不太费时。
+💡 "少测点"方法：如果AI预测和前3点实测的差异<2%，剩下6点可以用AI估算。报告里必须标注这些点为"AI估计"，同时随机抽查1-2点，以确保靠谱。
-
<0.80或超限 → 待复核
+⚠️ 不能少测点的情况
-
自动通知检测员复核,复核前不建议放行。
+-
+
- 某一象限的缺陷/颗粒明显偏多 +
- 边缘和中心差距异常（边缘普遍偏高或偏低） +
- 前3点与AI预测差异≥2% +
遇到这些情况，系统会自动恢复完整9点；必要时建议升到13点（外环再加4点）再确认。
-
@@ -401,9 +553,85 @@
-
- 单片用时
- 0分钟
-
-
- 批次用时(20片)
- 0小时
-
-
- AI可信度
- 0%
-
-
+
+ 异常复核
- 3-5分钟/片
-
+
+
+
+ AI输出内容详解
+
+
+
+
+
+
+ ![外观热力图]()
+
+
+
+
+ + + 外观热力图 +
+
+
+ 展示：整片俯视图+网格热区，颗粒/划痕/腐蚀分类显示，绿/橙/红颜色分级
+读图：①看红橙区是否集中 ②确认最大尺寸位置 ③判断分布随机性
+
+
+
+
+
+ ![厚度分布图]()
+
+
+
+
+ + + 厚度分布图 +
+
+
+ 组成：9点热力格（冷→暖=薄→厚），统计卡（均值/3σ/偏移率），达标徽记
+要点：3σ≤±3%且偏移率接近0为稳定，边缘敏感标记提示复测
+
+
+
+
+
+ ![电学对比图]()
+
+
+
+
+ + + 电学对比图 +
+
+
+ 元素：散点图（AI预测vs实测），45°参考线，误差统计（MAE/MAPE）
+判读：靠近45°线=准确，上方偏多=低估，下方偏多=高估
+
+
+ ![成分抽检]()
+
+
+
+
+ + + 成分抽检卡片 +
+
+
+ 项目：O/Si比值（2.00±0.05），金属污染（<1×10¹⁰atoms/cm²），峰位截图
+状态：正常（窗口内）、可疑（弱峰低于阈值）、异常（超出范围）
+本批共20片晶圆,全部完成外观、厚度、Rs三项检测;随机抽取3片补做XPS成分核验。完成度100%,无漏测、无中断记录。总体判定:合格19片、观察1片、不合格0片。
- ![检测结果]()
-
- 检测结果主图
+
+
+
+
+
+
+
+
+
+
+ 覆盖范围与完成度
+
+
+ 本批共20片晶圆，全部按计划完成外观、厚度、方块电阻(Rs)三项检测；随机抽取3片补做XPS成分核验。
+外观采用全片扫描（单片分辨率约0.2-0.3μm/px），厚度与Rs采用9点法（中心+内环4点+外环4点），与晶圆Notch对齐确保点位一致性。
+✓ 完成度100%，无漏测、无中断记录。
+
+
+
+
+
+ 统计口径与一致性
+
+
+ -
+
- 外观：每片"最大值"与"总数"呈现（便于快速对比风险峰值与整体水平） +
- 厚度与Rs：9点"均值+3σ(离散)"呈现 +
- 成分：按"正常/可疑/异常"分级，并附O/Si比与金属峰提示 +
各项统计口径与上一版报告保持一致，便于横向对比。
+
+
+
+
+ 总体判定与分布
+
+
+ 结果汇总：合格19片、观察1片、不合格0片。
+进入"观察"的样片原因为Rs略高但未越界；其余19片全部在阈值内。
+
+
+
+
+ 合格率
+ 95%
+
+
+ 观察率
+ 5%
+
+
+ ![检测结果]()
+
+
+ 检测结果数据可视化
+
+
检测结果总览
+
+
+
+
+ 95%
+ 批次合格率
+
+
+ 0.94
+ AI可信度
+
+
+ 1片
+ 观察片数
+
+
+ 0片
+ 不合格片数
+ + + 总体评价：本批质量稳定，仅1片进入观察带，AI与人工判定结果100%一致。 +
+
@@ -542,25 +770,195 @@
+
- 观察项解释
+
+
+
+
+
+
+ ❓ 为何是"观察"而非"不合格"
+
+
+ Rs仍在允许范围内，只是接近上限；离散度正常，说明并非局部失控。
+
+
+ + + 技术说明：Rs均值61.1Ω/□，目标60±1.2Ω/□，偏差+1.1Ω/□（约1.8%），仍在规格窗口内。9点离散度2.9Ω/□属于正常工艺波动范围。 +
+
+
+
+
+ 📊 对良率和使用的影响
+
+
+ 在当前应用场景下属于可接受波动，不会成为直接的失效风险。
+
+
+ + + 预警：若下批连续出现同样趋势，可能意味着工艺轻微偏移，需要小范围微调确认。 +
+
-
-
+ 光伏晶硅电池片印后AOI检测与分拣单元 - 能源订单班
+
+
+
@@ -208,82 +381,43 @@
批次合格率
- 0%
+
+
+
+
+ 复核与跟踪
+
+
-
+
+
+
+
+ ✅ 当班复核
+
+
+ 观察片的重点点位已复测，确认属轻微偏高；AI与人工结论一致。
+
+
+
+
+ 复核方式
+ 人工+AI双验证
+
+
+ 结论一致性
+ 100%
+
+
+ 复核耗时
+ 3分钟
+
+
+
+ 🔄 下批跟踪计划
+
+
+
+
+
+
+
+
+ + 优先点位 +
+-
+
- 边缘外环3点（NE、NW、SE） +
- 中心1点 +
+ 💡 AI已在报告中自动生成对应坐标 +
+
+
+ + 顺序建议 +
+-
+
- 先边缘后中心 +
- 若边缘回落而中心不变，优先考虑边缘效应 +
- 合格判据：Rs均值回到60±1.2Ω/□内，且9点离散≤上一批离散值+10%即可判定"趋稳" +
+
+ + + 跟踪目标：通过下批4个关键点位的数据变化，快速判断工艺稳定性。若Rs回落且离散度稳定，可维持当前工艺参数；若无改善或继续上升，需启动工艺分析会议，评估是否调整沉积参数。 +
+
-
+ AI可信度
- 0.94
+
+
+
+
+
+
+
- 批次合格率
+ 95%
-
+ 观察片数
- 1片
+
+
- AI可信度
+ 0.94
-
+ 不合格片数
- 0片
+
+
+ 观察片数
+ 1片
+
+ 不合格片数
+ 0片
+
+
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 2c8eeb54..fead6503 100644
--- a/web_frontend/web_result/order-classes/energy/css/styles.css
+++ b/web_frontend/web_result/order-classes/energy/css/styles.css
@@ -2,29 +2,29 @@
/* ========== 设计变量 ========== */
:root {
- /* 橙黄太阳能主题 - 能源风格 */
- --bg-dark: #fffbeb; /* 浅黄背景 */
- --bg-semi-dark: rgba(255, 251, 235, 0.95); /* 半透明浅黄 */
+ /* 科技蓝主题 - 能源光伏风格 */
+ --bg-dark: #ffffff; /* 纯白背景 */
+ --bg-semi-dark: rgba(255, 255, 255, 0.95); /* 半透明白 */
--bg-overlay: rgba(255, 255, 255, 0.85); /* 白色遮罩 */
--bg-card: rgba(255, 255, 255, 0.9); /* 卡片背景 */
- --primary-dark: #78350f; /* 主色深橙 */
- --primary-orange: #f59e0b; /* 主色橙 - 能源专业 */
- --accent-amber: #d97706; /* 琥珀色强调 - 太阳能主题 */
- --accent-amber-light: #fbbf24; /* 浅琥珀色 */
- --text-light: #78350f; /* 深色文字 */
- --text-gray: #6b7280; /* 灰色文字 */
- --border-light: rgba(245, 158, 11, 0.2); /* 橙色边框 */
- --hover-bg: rgba(245, 158, 11, 0.15); /* 悬停背景 */
- --active-bg: rgba(245, 158, 11, 0.2); /* 激活背景 */
+ --primary-dark: #0d47a1; /* 主色深蓝 */
+ --primary-blue: #1976d2; /* 主色蓝 - 科技专业 */
+ --accent-cyan: #00bcd4; /* 青色强调 - 能源主题 */
+ --accent-cyan-light: #4dd0e1; /* 浅青色 */
+ --text-light: #212121; /* 深色文字 */
+ --text-gray: #616161; /* 灰色文字 */
+ --border-light: rgba(25, 118, 210, 0.2); /* 蓝色边框 */
+ --hover-bg: rgba(0, 188, 212, 0.15); /* 悬停背景 */
+ --active-bg: rgba(25, 118, 210, 0.2); /* 激活背景 */
- /* 间距系统 - 针对大屏幕优化 */
- --spacing-xs: 0.75rem; /* 12px */
- --spacing-sm: 1.25rem; /* 20px */
- --spacing-md: 2rem; /* 32px */
- --spacing-lg: 3rem; /* 48px */
- --spacing-xl: 4rem; /* 64px */
- --spacing-2xl: 6rem; /* 96px */
- --spacing-3xl: 8rem; /* 128px */
+ /* 间距系统 - 紧凑布局 */
+ --spacing-xs: 0.5rem; /* 8px */
+ --spacing-sm: 0.75rem; /* 12px */
+ --spacing-md: 1.25rem; /* 20px */
+ --spacing-lg: 2rem; /* 32px */
+ --spacing-xl: 2.5rem; /* 40px */
+ --spacing-2xl: 3rem; /* 48px */
+ --spacing-3xl: 4rem; /* 64px */
/* 字体系统 */
--font-primary: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
@@ -61,7 +61,7 @@
--shadow-md: 0 2px 4px rgba(0,0,0,0.08);
--shadow-lg: 0 4px 8px rgba(0,0,0,0.1);
--shadow-xl: 0 8px 16px rgba(0,0,0,0.12);
- --shadow-orange: 0 2px 8px rgba(245, 158, 11, 0.15);
+ --shadow-blue: 0 2px 8px rgba(25, 118, 210, 0.15);
/* 过渡 */
--transition-fast: 150ms ease;
@@ -72,26 +72,26 @@
--container-max: 1600px; /* 增加最大宽度适配1920屏幕 */
}
-/* ========== 深色主题 - 深邃橙黄配色 ========== */
+/* ========== 深色主题 - 深邃科技蓝配色 ========== */
body.dark-theme {
- --bg-dark: #78350f; /* 深邃橙黑背景 */
- --bg-semi-dark: rgba(120, 53, 15, 0.95); /* 深橙半透明 */
- --bg-overlay: rgba(217, 119, 6, 0.85); /* 深橙遮罩层 */
- --bg-card: rgba(245, 158, 11, 0.9); /* 深橙卡片背景 */
- --primary-dark: #78350f; /* 深邃橙黑 */
- --primary-orange: #fbbf24; /* 明亮橙 */
- --accent-amber: #fcd34d; /* 亮琥珀色 */
- --accent-amber-light: #fde68a; /* 超亮琥珀色 */
- --text-light: #fffbeb; /* 浅色文字 */
- --text-gray: #fde68a; /* 灰色文字 */
- --border-light: rgba(251, 191, 36, 0.25); /* 橙色边框 */
- --hover-bg: rgba(245, 158, 11, 0.15); /* 悬停背景 */
- --active-bg: rgba(251, 191, 36, 0.2); /* 激活背景 */
+ --bg-dark: #0a1929; /* 深邃蓝黑背景 */
+ --bg-semi-dark: rgba(10, 25, 41, 0.95); /* 深蓝半透明 */
+ --bg-overlay: rgba(13, 47, 161, 0.85); /* 深蓝遮罩层 */
+ --bg-card: rgba(25, 118, 210, 0.9); /* 深蓝卡片背景 */
+ --primary-dark: #0d47a1; /* 深邃蓝 */
+ --primary-blue: #42a5f5; /* 明亮蓝 */
+ --accent-cyan: #4dd0e1; /* 亮青色 */
+ --accent-cyan-light: #80deea; /* 超亮青色 */
+ --text-light: #e3f2fd; /* 浅色文字 */
+ --text-gray: #b3e5fc; /* 灰色文字 */
+ --border-light: rgba(66, 165, 245, 0.25); /* 蓝色边框 */
+ --hover-bg: rgba(0, 188, 212, 0.15); /* 悬停背景 */
+ --active-bg: rgba(66, 165, 245, 0.2); /* 激活背景 */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
--shadow-md: 0 2px 4px rgba(0,0,0,0.5);
--shadow-lg: 0 4px 8px rgba(0,0,0,0.6);
--shadow-xl: 0 8px 16px rgba(0,0,0,0.7);
- --shadow-orange: 0 2px 8px rgba(245, 158, 11, 0.25);
+ --shadow-blue: 0 2px 8px rgba(25, 118, 210, 0.25);
}
/* ========== 重置样式 ========== */
@@ -123,8 +123,8 @@ body {
align-items: center;
justify-content: center;
background:
- linear-gradient(135deg, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 0.95) 100%),
- url('../images/光伏面板生成画面.jpg');
+ linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%),
+ url('https://images.unsplash.com/photo-1509391366360-2e959784a276?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
@@ -184,8 +184,8 @@ body {
/* 深色主题下的Hero渐变 */
body.dark-theme .hero {
background:
- linear-gradient(135deg, rgba(120, 53, 15, 0.9) 0%, rgba(217, 119, 6, 0.8) 100%),
- url('../images/光伏面板生成画面.jpg');
+ linear-gradient(135deg, rgba(10, 25, 41, 0.9) 0%, rgba(13, 71, 161, 0.8) 100%),
+ url('https://images.unsplash.com/photo-1509391366360-2e959784a276?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
@@ -197,8 +197,8 @@ body.dark-theme .hero {
width: 100%;
height: 100%;
background-image:
- radial-gradient(circle at 20% 50%, rgba(245, 158, 11, 0.1) 0%, transparent 50%),
- radial-gradient(circle at 80% 80%, rgba(217, 119, 6, 0.05) 0%, transparent 50%);
+ radial-gradient(circle at 20% 50%, rgba(25, 118, 210, 0.1) 0%, transparent 50%),
+ radial-gradient(circle at 80% 80%, rgba(13, 71, 161, 0.05) 0%, transparent 50%);
pointer-events: none;
animation: glow 8s ease-in-out infinite;
}
@@ -220,7 +220,7 @@ body.dark-theme .hero {
.hero-badge {
display: inline-block;
padding: var(--spacing-md) var(--spacing-xl);
- background: rgba(245, 158, 11, 0.15);
+ background: rgba(25, 118, 210, 0.15);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: var(--radius-full);
@@ -228,14 +228,14 @@ body.dark-theme .hero {
font-weight: var(--font-semibold);
letter-spacing: 0.1em;
margin-bottom: var(--spacing-xl);
- border: 3px solid var(--primary-orange);
- box-shadow: var(--shadow-orange);
+ border: 3px solid var(--primary-blue);
+ box-shadow: var(--shadow-blue);
text-transform: uppercase;
transition: all var(--transition-base);
}
.hero-badge:hover {
- background: rgba(245, 158, 11, 0.25);
+ background: rgba(25, 118, 210, 0.25);
transform: translateY(-2px);
}
@@ -245,8 +245,8 @@ body.dark-theme .hero {
margin-bottom: var(--spacing-lg);
letter-spacing: -0.02em;
line-height: 1.1;
- color: var(--accent-amber-light);
- text-shadow: 0 6px 30px rgba(0,0,0,0.8), 0 0 60px rgba(245, 158, 11, 0.4);
+ color: var(--accent-cyan-light);
+ text-shadow: 0 6px 30px rgba(0,0,0,0.8), 0 0 60px rgba(25, 118, 210, 0.4);
}
.hero-subtitle {
@@ -268,22 +268,22 @@ body.dark-theme .hero {
/* Hero浮动卡片 */
.hero-floating-cards {
display: flex;
- gap: var(--spacing-lg);
+ gap: var(--spacing-md);
justify-content: center;
- margin-top: var(--spacing-2xl);
- flex-wrap: wrap;
+ margin-top: var(--spacing-xl);
+ flex-wrap: nowrap; /* 强制并排显示 */
}
.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;
+ padding: var(--spacing-md) var(--spacing-lg); /* 紧凑但不过分 */
+ border-radius: var(--radius-lg); /* 优雅的圆角 */
+ border: 1px solid var(--border-light); /* 更细的边框 */
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 轻柔的阴影 */
+ transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性缓动 */
+ min-width: 120px; /* 合适的最小宽度 */
animation: fadeInUp 0.8s ease forwards;
}
@@ -292,23 +292,28 @@ body.dark-theme .hero {
.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);
+ transform: translateY(-6px) scale(1.03);
+ box-shadow: 0 8px 24px rgba(25, 118, 210, 0.15),
+ 0 4px 12px rgba(0, 0, 0, 0.1);
+ border-color: var(--primary-blue);
}
.hero-card-value {
- font-size: var(--text-3xl);
+ font-size: var(--text-lg); /* 从xl进一步缩小为lg,更精致 */
font-weight: var(--font-bold);
- color: var(--primary-orange);
+ color: var(--primary-blue);
margin-bottom: var(--spacing-xs);
- text-shadow: 0 2px 10px rgba(245, 158, 11, 0.3);
+ text-shadow: 0 1px 4px rgba(25, 118, 210, 0.2); /* 减小阴影 */
+ letter-spacing: -0.01em; /* 减小字间距 */
}
.hero-card-label {
- font-size: var(--text-sm);
+ font-size: 0.7rem; /* 比xs更小,约11.2px */
color: var(--text-gray);
font-weight: var(--font-medium);
+ text-transform: uppercase; /* 大写字母更精致 */
+ letter-spacing: 0.08em; /* 增加字间距,更精致 */
+ opacity: 0.85; /* 添加透明度 */
}
/* 滚动指示器 */
@@ -317,7 +322,7 @@ body.dark-theme .hero {
bottom: 40px;
left: 50%;
transform: translateX(-50%);
- color: var(--primary-orange);
+ color: var(--primary-blue);
animation: bounce 2s infinite;
cursor: pointer;
z-index: 10;
@@ -399,16 +404,16 @@ body.dark-theme .hero {
.nav-item:hover {
background: var(--hover-bg);
- color: var(--primary-orange);
+ color: var(--primary-blue);
transform: translateY(-2px);
- box-shadow: var(--shadow-orange);
+ box-shadow: var(--shadow-blue);
}
.nav-item.active {
background: var(--active-bg);
- color: var(--primary-orange);
- border-color: var(--primary-orange);
- box-shadow: var(--shadow-orange);
+ color: var(--primary-blue);
+ border-color: var(--primary-blue);
+ box-shadow: var(--shadow-blue);
}
/* ========== 内容区块 - 图片背景 ========== */
@@ -421,8 +426,8 @@ body.dark-theme .hero {
/* 浅色图片背景 - 每个区块使用不同图片 */
.section:nth-child(1) {
background-image:
- linear-gradient(to bottom, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 1) 100%),
- url('../images/PLC示意图.jpg');
+ linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%),
+ url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
@@ -430,8 +435,8 @@ body.dark-theme .hero {
.section:nth-child(2) {
background-image:
- linear-gradient(to bottom, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 1) 100%),
- url('../images/Mermaid流程图.jpg');
+ linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%),
+ url('https://images.unsplash.com/photo-1518770660439-4636190af475?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
@@ -439,8 +444,8 @@ body.dark-theme .hero {
.section:nth-child(3) {
background-image:
- linear-gradient(to bottom, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 1) 100%),
- url('../images/工业机器人图片.jpg');
+ linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%),
+ url('https://images.unsplash.com/photo-1563207153-f403bf289096?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
@@ -448,8 +453,8 @@ body.dark-theme .hero {
.section:nth-child(4) {
background-image:
- linear-gradient(to bottom, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 1) 100%),
- url('../images/机器视觉相机图片.jpg');
+ linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%),
+ url('https://images.unsplash.com/photo-1581092160562-40aa08e78837?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
@@ -458,8 +463,8 @@ body.dark-theme .hero {
/* 通用奇偶区块(当超过4个section时) */
.section:nth-child(n+5):nth-child(odd) {
background-image:
- linear-gradient(to bottom, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 1) 100%),
- url('../images/光伏面板室外场景图片.jpg');
+ linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%),
+ url('https://images.unsplash.com/photo-1509391366360-2e959784a276?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
@@ -467,8 +472,8 @@ body.dark-theme .hero {
.section:nth-child(n+5):nth-child(even) {
background-image:
- linear-gradient(to bottom, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 1) 100%),
- url('../images/输送与治具.jpg');
+ linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%),
+ url('https://images.unsplash.com/photo-1581092160607-ee67be8e3b13?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
@@ -477,8 +482,8 @@ body.dark-theme .hero {
/* 深色主题下的区块背景 - 每个区块使用对应图片 */
body.dark-theme .section:nth-child(1) {
background-image:
- linear-gradient(to bottom, rgba(120, 53, 15, 0.92) 0%, rgba(217, 119, 6, 0.88) 100%),
- url('../images/PLC示意图.jpg');
+ linear-gradient(to bottom, rgba(10, 25, 41, 0.92) 0%, rgba(13, 71, 161, 0.88) 100%),
+ url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
@@ -486,8 +491,8 @@ body.dark-theme .section:nth-child(1) {
body.dark-theme .section:nth-child(2) {
background-image:
- linear-gradient(to bottom, rgba(217, 119, 6, 0.90) 0%, rgba(120, 53, 15, 0.88) 100%),
- url('../images/Mermaid流程图.jpg');
+ linear-gradient(to bottom, rgba(13, 71, 161, 0.90) 0%, rgba(10, 25, 41, 0.88) 100%),
+ url('https://images.unsplash.com/photo-1518770660439-4636190af475?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
@@ -495,8 +500,8 @@ body.dark-theme .section:nth-child(2) {
body.dark-theme .section:nth-child(3) {
background-image:
- linear-gradient(to bottom, rgba(120, 53, 15, 0.92) 0%, rgba(217, 119, 6, 0.88) 100%),
- url('../images/工业机器人图片.jpg');
+ linear-gradient(to bottom, rgba(10, 25, 41, 0.92) 0%, rgba(13, 71, 161, 0.88) 100%),
+ url('https://images.unsplash.com/photo-1563207153-f403bf289096?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
@@ -504,8 +509,8 @@ body.dark-theme .section:nth-child(3) {
body.dark-theme .section:nth-child(4) {
background-image:
- linear-gradient(to bottom, rgba(217, 119, 6, 0.90) 0%, rgba(120, 53, 15, 0.88) 100%),
- url('../images/机器视觉相机图片.jpg');
+ linear-gradient(to bottom, rgba(13, 71, 161, 0.90) 0%, rgba(10, 25, 41, 0.88) 100%),
+ url('https://images.unsplash.com/photo-1581092160562-40aa08e78837?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
@@ -514,8 +519,8 @@ body.dark-theme .section:nth-child(4) {
/* 通用奇偶区块(当超过4个section时) */
body.dark-theme .section:nth-child(n+5):nth-child(odd) {
background-image:
- linear-gradient(to bottom, rgba(120, 53, 15, 0.92) 0%, rgba(217, 119, 6, 0.88) 100%),
- url('../images/光伏面板室外场景图片.jpg');
+ linear-gradient(to bottom, rgba(10, 25, 41, 0.92) 0%, rgba(13, 71, 161, 0.88) 100%),
+ url('https://images.unsplash.com/photo-1509391366360-2e959784a276?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
@@ -523,8 +528,8 @@ body.dark-theme .section:nth-child(n+5):nth-child(odd) {
body.dark-theme .section:nth-child(n+5):nth-child(even) {
background-image:
- linear-gradient(to bottom, rgba(217, 119, 6, 0.90) 0%, rgba(120, 53, 15, 0.88) 100%),
- url('../images/输送与治具.jpg');
+ linear-gradient(to bottom, rgba(13, 71, 161, 0.90) 0%, rgba(10, 25, 41, 0.88) 100%),
+ url('https://images.unsplash.com/photo-1581092160607-ee67be8e3b13?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
@@ -532,26 +537,26 @@ body.dark-theme .section:nth-child(n+5):nth-child(even) {
/* 深色主题下的特定元素调整 */
body.dark-theme .stat-item {
- background: rgba(245, 158, 11, 0.8);
+ background: rgba(25, 118, 210, 0.8);
backdrop-filter: blur(5px);
}
body.dark-theme .stat-item:hover {
- background: rgba(251, 191, 36, 0.15);
- border-color: var(--primary-orange);
+ background: rgba(0, 188, 212, 0.15);
+ border-color: var(--primary-blue);
}
body.dark-theme .stat-value {
- color: var(--accent-amber-light);
+ color: var(--accent-cyan-light);
}
body.dark-theme th {
- background: rgba(251, 191, 36, 0.12);
- color: var(--accent-amber-light);
+ background: rgba(0, 188, 212, 0.12);
+ color: var(--accent-cyan-light);
}
body.dark-theme tr:hover {
- background: rgba(251, 191, 36, 0.08);
+ background: rgba(0, 188, 212, 0.08);
}
.container {
@@ -579,7 +584,7 @@ body.dark-theme tr:hover {
height: 100px;
border-radius: var(--radius-xl);
object-fit: cover;
- border: 3px solid var(--primary-orange);
+ border: 3px solid var(--primary-blue);
box-shadow: var(--shadow-md);
transition: all var(--transition-base);
}
@@ -587,7 +592,7 @@ body.dark-theme tr:hover {
.agent-avatar:hover {
transform: scale(1.05);
box-shadow: var(--shadow-lg);
- border-color: var(--accent-amber);
+ border-color: var(--accent-cyan);
}
.agent-info {
@@ -596,7 +601,7 @@ body.dark-theme tr:hover {
.agent-name {
font-size: var(--text-lg);
- color: var(--primary-orange);
+ color: var(--primary-blue);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--spacing-sm);
@@ -620,7 +625,7 @@ body.dark-theme tr:hover {
left: 0;
width: 180px;
height: 4px;
- background: linear-gradient(90deg, var(--primary-orange), transparent);
+ background: linear-gradient(90deg, var(--primary-blue), transparent);
border-radius: 2px;
}
@@ -642,7 +647,7 @@ body.dark-theme tr:hover {
.expert-intro h3 {
font-size: var(--text-2xl);
- color: var(--primary-orange);
+ color: var(--primary-blue);
margin-bottom: var(--spacing-lg);
display: flex;
align-items: center;
@@ -666,7 +671,7 @@ body.dark-theme tr:hover {
}
.grid-3 {
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns: repeat(3, 1fr); /* 3列并排布局,避免2x2 */
}
.grid-4 {
@@ -701,7 +706,7 @@ body.dark-theme tr:hover {
.split-layout-image:hover {
transform: scale(1.02);
- box-shadow: var(--shadow-xl), var(--shadow-orange);
+ box-shadow: var(--shadow-xl), var(--shadow-blue);
}
.split-layout-image img {
@@ -724,7 +729,7 @@ body.dark-theme tr:hover {
}
.split-badge {
- background: var(--primary-orange);
+ background: var(--primary-blue);
color: white;
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: var(--radius-full);
@@ -744,7 +749,7 @@ body.dark-theme tr:hover {
.split-title {
font-size: var(--text-2xl);
- color: var(--primary-orange);
+ color: var(--primary-blue);
margin-bottom: var(--spacing-lg);
display: flex;
align-items: center;
@@ -793,16 +798,16 @@ body.dark-theme tr:hover {
right: 0;
bottom: 0;
background: linear-gradient(135deg,
- rgba(120, 53, 15, 0.85) 0%,
- rgba(217, 119, 6, 0.7) 100%
+ rgba(10, 25, 41, 0.85) 0%,
+ rgba(13, 71, 161, 0.7) 100%
);
backdrop-filter: blur(2px);
}
body:not(.dark-theme) .visual-divider::before {
background: linear-gradient(135deg,
- rgba(255, 251, 235, 0.85) 0%,
- rgba(254, 243, 199, 0.9) 100%
+ rgba(255, 255, 255, 0.85) 0%,
+ rgba(255, 255, 255, 0.9) 100%
);
}
@@ -823,25 +828,25 @@ body:not(.dark-theme) .visual-divider::before {
display: flex;
align-items: center;
justify-content: center;
- border: 3px solid var(--primary-orange);
- box-shadow: var(--shadow-xl), 0 0 30px rgba(245, 158, 11, 0.5);
+ border: 3px solid var(--primary-blue);
+ box-shadow: var(--shadow-xl), 0 0 30px rgba(25, 118, 210, 0.5);
animation: pulse 2s ease-in-out infinite;
}
.divider-icon i {
width: 40px !important;
height: 40px !important;
- color: var(--primary-orange);
+ color: var(--primary-blue);
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
- box-shadow: var(--shadow-xl), 0 0 30px rgba(245, 158, 11, 0.5);
+ box-shadow: var(--shadow-xl), 0 0 30px rgba(25, 118, 210, 0.5);
}
50% {
transform: scale(1.05);
- box-shadow: var(--shadow-xl), 0 0 50px rgba(245, 158, 11, 0.8);
+ box-shadow: var(--shadow-xl), 0 0 50px rgba(25, 118, 210, 0.8);
}
}
@@ -890,7 +895,7 @@ body:not(.dark-theme) .visual-divider::before {
.timeline-title {
font-size: var(--text-3xl);
- color: var(--primary-orange);
+ color: var(--primary-blue);
margin-bottom: var(--spacing-2xl);
display: flex;
align-items: center;
@@ -921,8 +926,8 @@ body:not(.dark-theme) .visual-divider::before {
width: 3px;
background: linear-gradient(to bottom,
transparent,
- var(--primary-orange) 10%,
- var(--primary-orange) 90%,
+ var(--primary-blue) 10%,
+ var(--primary-blue) 90%,
transparent
);
transform: translateX(-50%);
@@ -951,7 +956,7 @@ body:not(.dark-theme) .visual-divider::before {
height: 60px;
border-radius: 50%;
background: var(--bg-card);
- border: 4px solid var(--primary-orange);
+ border: 4px solid var(--primary-blue);
display: flex;
align-items: center;
justify-content: center;
@@ -963,12 +968,12 @@ body:not(.dark-theme) .visual-divider::before {
.timeline-marker i {
width: 28px !important;
height: 28px !important;
- color: var(--primary-orange);
+ color: var(--primary-blue);
}
.timeline-item:hover .timeline-marker {
transform: translateX(-50%) scale(1.1);
- box-shadow: var(--shadow-xl), 0 0 0 12px var(--bg-dark), var(--shadow-orange);
+ box-shadow: var(--shadow-xl), 0 0 0 12px var(--bg-dark), var(--shadow-blue);
}
.timeline-content {
@@ -992,13 +997,13 @@ body:not(.dark-theme) .visual-divider::before {
.timeline-content:hover {
transform: translateY(-4px);
- box-shadow: var(--shadow-xl), var(--shadow-orange);
- border-color: var(--primary-orange);
+ box-shadow: var(--shadow-xl), var(--shadow-blue);
+ border-color: var(--primary-blue);
}
.timeline-step {
font-size: var(--text-sm);
- color: var(--primary-orange);
+ color: var(--primary-blue);
font-weight: var(--font-bold);
text-transform: uppercase;
letter-spacing: 0.1em;
@@ -1023,7 +1028,7 @@ body:not(.dark-theme) .visual-divider::before {
display: inline-block;
padding: var(--spacing-xs) var(--spacing-md);
background: var(--active-bg);
- color: var(--primary-orange);
+ color: var(--primary-blue);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: var(--font-medium);
@@ -1096,8 +1101,8 @@ body:not(.dark-theme) .visual-divider::before {
.card:hover {
transform: translateY(-8px);
- box-shadow: var(--shadow-xl), var(--shadow-orange);
- border-color: var(--primary-orange);
+ box-shadow: var(--shadow-xl), var(--shadow-blue);
+ border-color: var(--primary-blue);
}
.card-header {
@@ -1110,7 +1115,7 @@ body:not(.dark-theme) .visual-divider::before {
.card-title {
font-size: var(--text-2xl);
font-weight: var(--font-semibold);
- color: var(--primary-orange);
+ color: var(--primary-blue);
margin-bottom: var(--spacing-sm);
}
@@ -1182,7 +1187,7 @@ body:not(.dark-theme) .visual-divider::before {
}
.feature-list li:hover {
- color: var(--primary-orange);
+ color: var(--primary-blue);
padding-left: var(--spacing-sm);
}
@@ -1227,21 +1232,30 @@ body:not(.dark-theme) .visual-divider::before {
.stat-value {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
- color: var(--primary-orange);
+ color: var(--primary-blue);
text-shadow: none;
}
-/* ========== 增强数据可视化 - 环形进度条 ========== */
+/* ========== 增强数据可视化 - 精致四列布局 ========== */
.stats-enhanced {
display: grid;
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
- gap: var(--spacing-xl);
- padding: var(--spacing-xl);
- background: var(--bg-overlay);
- backdrop-filter: blur(15px);
+ grid-template-columns: repeat(4, 1fr);
+ gap: var(--spacing-2xl);
+ padding: var(--spacing-2xl);
+ background: linear-gradient(135deg,
+ rgba(255, 255, 255, 0.6) 0%,
+ rgba(255, 255, 255, 0.4) 100%);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
border-radius: var(--radius-2xl);
border: 2px solid var(--border-light);
- box-shadow: var(--shadow-lg);
+ box-shadow: var(--shadow-xl);
+}
+
+body.dark-theme .stats-enhanced {
+ background: linear-gradient(135deg,
+ rgba(10, 25, 41, 0.6) 0%,
+ rgba(13, 71, 161, 0.4) 100%);
}
.stat-circle-item {
@@ -1277,12 +1291,12 @@ body:not(.dark-theme) .visual-divider::before {
}
.circle-fill {
- stroke: var(--primary-orange);
+ stroke: var(--primary-blue);
stroke-linecap: round;
stroke-dasharray: 326.73; /* 2 * π * r = 2 * π * 52 */
stroke-dashoffset: calc(326.73 * (1 - var(--progress, 0) / 100));
transition: stroke-dashoffset 2s cubic-bezier(0.16, 1, 0.3, 1);
- filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.5));
+ filter: drop-shadow(0 0 8px rgba(25, 118, 210, 0.5));
}
.circle-text {
@@ -1296,7 +1310,7 @@ body:not(.dark-theme) .visual-divider::before {
.circle-value {
font-size: var(--text-3xl);
font-weight: var(--font-bold);
- color: var(--primary-orange);
+ color: var(--primary-blue);
line-height: 1;
margin-bottom: var(--spacing-xs);
}
@@ -1313,10 +1327,18 @@ body:not(.dark-theme) .visual-divider::before {
font-weight: var(--font-semibold);
}
+@media (max-width: 1200px) {
+ .stats-enhanced {
+ grid-template-columns: repeat(2, 1fr);
+ gap: var(--spacing-xl);
+ }
+}
+
@media (max-width: 768px) {
.stats-enhanced {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-lg);
+ padding: var(--spacing-lg);
}
.circle-progress {
@@ -1329,6 +1351,148 @@ body:not(.dark-theme) .visual-divider::before {
}
}
+@media (max-width: 480px) {
+ .stats-enhanced {
+ grid-template-columns: 1fr;
+ }
+}
+
+/* ========== 现代化统计卡片 - 优化版 ========== */
+.stat-modern-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding: var(--spacing-2xl);
+ background: linear-gradient(135deg, var(--bg-card) 0%, rgba(255, 255, 255, 0.8) 100%);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border-radius: var(--radius-2xl);
+ border: 2px solid var(--border-light);
+ transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+ box-shadow: var(--shadow-md);
+ gap: var(--spacing-lg);
+ position: relative;
+ overflow: hidden;
+}
+
+.stat-modern-item::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(135deg, transparent 0%, rgba(25, 118, 210, 0.05) 100%);
+ opacity: 0;
+ transition: opacity var(--transition-base);
+}
+
+.stat-modern-item:hover::before {
+ opacity: 1;
+}
+
+.stat-modern-item:hover {
+ transform: translateY(-12px) scale(1.02);
+ box-shadow: 0 12px 32px rgba(25, 118, 210, 0.2),
+ 0 6px 16px rgba(0, 0, 0, 0.1);
+ border-color: var(--primary-blue);
+}
+
+.stat-icon-wrapper {
+ width: 72px;
+ height: 72px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+ transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+ position: relative;
+}
+
+.stat-icon-wrapper::after {
+ content: '';
+ position: absolute;
+ inset: -4px;
+ border-radius: 50%;
+ background: inherit;
+ opacity: 0.3;
+ filter: blur(12px);
+ z-index: -1;
+ transition: all var(--transition-base);
+}
+
+.stat-modern-item:hover .stat-icon-wrapper {
+ transform: scale(1.15) rotate(5deg);
+ box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
+}
+
+.stat-modern-item:hover .stat-icon-wrapper::after {
+ opacity: 0.5;
+ filter: blur(16px);
+}
+
+.stat-modern-value {
+ font-size: var(--text-3xl);
+ font-weight: var(--font-bold);
+ color: var(--text-light);
+ line-height: 1;
+ letter-spacing: -0.02em;
+ text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+body.dark-theme .stat-modern-value {
+ color: var(--accent-cyan-light);
+ text-shadow: 0 2px 12px rgba(77, 208, 225, 0.3);
+}
+
+body.dark-theme .stat-modern-item {
+ background: linear-gradient(135deg, rgba(25, 118, 210, 0.15) 0%, rgba(13, 71, 161, 0.1) 100%);
+}
+
+.stat-modern-unit {
+ font-size: var(--text-base);
+ font-weight: var(--font-semibold);
+ color: var(--text-gray);
+ margin-left: var(--spacing-xs);
+ opacity: 0.75;
+}
+
+.stat-modern-label {
+ font-size: var(--text-sm);
+ font-weight: var(--font-semibold);
+ color: var(--text-gray);
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ opacity: 0.8;
+}
+
+@media (max-width: 768px) {
+ .stat-modern-item {
+ padding: var(--spacing-lg);
+ gap: var(--spacing-sm);
+ }
+
+ .stat-icon-wrapper {
+ width: 60px;
+ height: 60px;
+ }
+
+ .stat-modern-value {
+ font-size: var(--text-2xl);
+ }
+
+ .stat-modern-unit {
+ font-size: var(--text-base);
+ }
+
+ .stat-modern-label {
+ font-size: var(--text-sm);
+ }
+}
+
/* ========== 表格 ========== */
.table-container {
overflow-x: auto;
@@ -1348,11 +1512,11 @@ table {
th {
background: var(--active-bg);
- color: var(--primary-orange);
+ color: var(--primary-blue);
padding: var(--spacing-md);
text-align: left;
font-weight: var(--font-semibold);
- border-bottom: 2px solid var(--primary-orange);
+ border-bottom: 2px solid var(--primary-blue);
}
td {
@@ -1623,7 +1787,7 @@ tr:hover {
left: 0;
right: 0;
bottom: 0;
- background: linear-gradient(135deg, transparent, rgba(245, 158, 11, 0.1));
+ background: linear-gradient(135deg, transparent, rgba(25, 118, 210, 0.1));
opacity: 0;
transition: opacity var(--transition-base);
border-radius: var(--radius-2xl);
@@ -1648,7 +1812,7 @@ tr:hover {
left: -100%;
width: 100%;
height: 100%;
- background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.2), transparent);
+ background: linear-gradient(90deg, transparent, rgba(25, 118, 210, 0.2), transparent);
transition: left 0.5s ease;
}
@@ -1675,7 +1839,7 @@ tr:hover {
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
- background: radial-gradient(circle, rgba(245, 158, 11, 0.3), transparent);
+ background: radial-gradient(circle, rgba(25, 118, 210, 0.3), transparent);
border-radius: 50%;
opacity: 0;
transition: all 0.5s ease;
@@ -1702,7 +1866,7 @@ tr:hover {
transform: translate(-50%, -50%) scale(0);
width: 60px;
height: 60px;
- background: rgba(245, 158, 11, 0.9);
+ background: rgba(25, 118, 210, 0.9);
border-radius: 50%;
opacity: 0;
transition: all 0.3s ease;
@@ -1743,7 +1907,7 @@ tr:hover {
bottom: 0;
width: 0;
height: 2px;
- background: var(--primary-orange);
+ background: var(--primary-blue);
transition: width 0.3s ease;
}
@@ -1756,14 +1920,14 @@ tr:hover {
0%, 100% {
box-shadow:
var(--shadow-md),
- 0 0 20px rgba(245, 158, 11, 0.3),
- inset 0 0 20px rgba(245, 158, 11, 0.1);
+ 0 0 20px rgba(25, 118, 210, 0.3),
+ inset 0 0 20px rgba(25, 118, 210, 0.1);
}
50% {
box-shadow:
var(--shadow-lg),
- 0 0 30px rgba(245, 158, 11, 0.5),
- inset 0 0 30px rgba(245, 158, 11, 0.2);
+ 0 0 30px rgba(25, 118, 210, 0.5),
+ inset 0 0 30px rgba(25, 118, 210, 0.2);
}
}
@@ -1774,7 +1938,7 @@ tr:hover {
/* 文字打字机效果类 */
.typewriter {
overflow: hidden;
- border-right: 2px solid var(--primary-orange);
+ border-right: 2px solid var(--primary-blue);
white-space: nowrap;
animation: typing 3.5s steps(40) 1s 1 normal both,
blink 0.75s step-end infinite;
@@ -1802,7 +1966,7 @@ tr::before {
top: 0;
width: 3px;
height: 0;
- background: var(--primary-orange);
+ background: var(--primary-blue);
transition: height var(--transition-base);
}
@@ -1817,10 +1981,10 @@ tr:hover::before {
@keyframes breathe {
0%, 100% {
- box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
+ box-shadow: 0 0 20px rgba(25, 118, 210, 0.4);
}
50% {
- box-shadow: 0 0 30px rgba(245, 158, 11, 0.7);
+ box-shadow: 0 0 30px rgba(25, 118, 210, 0.7);
}
}
@@ -1835,28 +1999,28 @@ tr:hover::before {
}
::-webkit-scrollbar-thumb {
- background: var(--primary-orange);
+ background: var(--primary-blue);
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
- background: var(--accent-amber);
+ background: var(--accent-cyan);
}
/* 选中文本样式 */
::selection {
- background: var(--primary-orange);
+ background: var(--primary-blue);
color: white;
}
::-moz-selection {
- background: var(--primary-orange);
+ background: var(--primary-blue);
color: white;
}
/* 焦点可见性优化 */
*:focus-visible {
- outline: 2px solid var(--primary-orange);
+ outline: 2px solid var(--primary-blue);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
@@ -1986,7 +2150,7 @@ img.error {
}
body:not(.dark-theme) .theme-icon-light {
- color: var(--primary-orange);
+ color: var(--primary-blue);
transform: scale(1.2);
}
@@ -1995,10 +2159,82 @@ body:not(.dark-theme) .theme-icon-dark {
}
body.dark-theme .theme-icon-dark {
- color: var(--primary-orange);
+ color: var(--primary-blue);
transform: scale(1.2);
}
body.dark-theme .theme-icon-light {
opacity: 0.5;
}
+
+/* ========== 机器人工作流程可视化 ========== */
+.robot-workflow-visual {
+ margin-bottom: var(--spacing-2xl);
+}
+
+.workflow-step {
+ text-align: center;
+ transition: all var(--transition-base);
+ cursor: pointer;
+}
+
+.workflow-step:hover {
+ transform: translateY(-8px);
+}
+
+.workflow-icon {
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0 auto var(--spacing-md);
+ box-shadow: var(--shadow-lg);
+ transition: all var(--transition-base);
+}
+
+.workflow-step:hover .workflow-icon {
+ box-shadow: var(--shadow-xl), 0 0 30px rgba(0,0,0,0.3);
+ transform: scale(1.1);
+}
+
+.workflow-number {
+ font-size: var(--text-lg);
+ font-weight: var(--font-bold);
+ color: var(--text-gray);
+ margin-bottom: var(--spacing-xs);
+}
+
+.workflow-step h4 {
+ font-size: var(--text-lg);
+ font-weight: var(--font-bold);
+ color: var(--text-light);
+ margin-bottom: var(--spacing-xs);
+}
+
+.workflow-step p {
+ font-size: var(--text-sm);
+ color: var(--text-gray);
+}
+
+@media (max-width: 1024px) {
+ .robot-workflow-visual > div {
+ grid-template-columns: repeat(3, 1fr) !important;
+ }
+}
+
+@media (max-width: 768px) {
+ .robot-workflow-visual > div {
+ grid-template-columns: repeat(2, 1fr) !important;
+ }
+
+ .workflow-icon {
+ width: 60px;
+ height: 60px;
+ }
+
+ .workflow-step h4 {
+ font-size: var(--text-base);
+ }
+}
diff --git a/web_frontend/web_result/order-classes/energy/index.html b/web_frontend/web_result/order-classes/energy/index.html
index 77cf81fa..38d973d1 100644
--- a/web_frontend/web_result/order-classes/energy/index.html
+++ b/web_frontend/web_result/order-classes/energy/index.html
@@ -6,6 +6,179 @@
+
+
+
+ + AI核心能力 +
++ 本项目采用先进的AI技术，实现从数据采集到报告生成的全流程自动化，大幅提升检测效率与准确性。 +
+
+
+
+
+
+ 自动数据清洗
+去噪、校正、标准化
+
+
+
+
+ 智能主判定
+合格/观察/不合格
+
+
+
+
+ 阈值自动比对
+实时对标工艺窗口
+
+
+
+
+ 可信度评估
+0.94平均可信度
+
+
+
+
+ 趋势预测
+工艺偏移预警
+
+
+
+
+ 异常自动预警
+低可信/越界提醒
+
+
+
+
+ 报告一键生成
+≤2分钟出具PDF
+
+
+
持续学习优化
+模型迭代升级
-
-
-
-
-
-
+
+ 3600
- 片/时
-
+
-
- 设计产能
+ 3600片/时
+ 设计产能
-
-
-
-
+ 99.7
- %
-
+
-
- 检出率
+ 99.7%
+ 检出率
-
-
-
-
-
-
-
-
-
+ 0.5
- %
-
+
-
- 误检率
+ 0.5%
+ 误检率
-
-
-
-
+ 300
- ms
-
+
-
检测时间
+ 300ms
+ 检测时间
-
-
-
-
- 智能化生产线
-PLC + 机器视觉 + 机器人协同工作
-
@@ -303,11 +437,6 @@
- 采用西门子TIA Portal V17开发,基于IEC 61131-3标准的SCL+梯形图混合编程。系统划分为6个核心功能模块:启动安全链、物料检测、AOI检测触发、机器人抓取交互、MES数据上传、异常处理。使用DB块结构化数据存储,通过Profinet实时通讯(500ms循环周期)实现PLC-机器人-视觉系统的无缝协同。
- ![控制流程图]()
-
-
- 系统控制流程Mermaid图
-
@@ -347,11 +476,103 @@
-
-
- ![PLC控制流程]()
-
@@ -467,20 +688,12 @@
-
@@ -467,20 +688,12 @@
-
-
-
-
-
- 精密机器人分拣
-±0.02mm定位精度 · ≤0.8秒单次节拍
-
+
+
+
+
+
@@ -497,92 +710,67 @@
- 基于ABB RobotStudio离线编程,使用RAPID语言开发拾取-判断-分拣主程序。系统通过真空吸盘拾取电池片(负压-60kPa),根据PLC传输的检测结果(OK/RW/NG)执行对应分拣路径。采用多点轨迹规划优化节拍(单次循环≤0.8秒),使用WorldZone碰撞检测保障安全,通过TCP精度补偿实现±0.02mm重复定位精度。
- ![光伏面板分拣场景]()
-
-
-
- 
- 机器人分拣路径三维仿真
-
-
分拣逻辑流程
- -
+
+
+
-
-
-
-
-
-
步骤 1
- 等待PLC就绪信号
-检测DI1=1,确认系统准备就绪
-初始化
+
+
+
- 01
+ 等待就绪
+DI1信号检测
-
-
-
-
-
步骤 2
- 移动至拾取点
-机器人移动→开启真空→检测吸附成功
-拾取
+
+
+
- 02
+ 移动拾取
+300mm/s速度
-
-
-
-
-
步骤 3
- 读取检测结果
-从PLC读取DI2-DI3编码,获取质量判定
-判断
+
+
+
- 03
+ 读取结果
+DI2-DI3编码
-
-
-
-
-
步骤 4
- 分支判断路径
-OK→托盘1 | RW→托盘2 | NG→废料箱
-分拣
+
+
+
- 04
+ 路径判断
+OK/RW/NG分支
-
-
-
-
-
-
- 步骤 5
- 到达目标位置
-精确定位→关闭真空→等待释放确认
-放置
+
+
+
- 05
+ 精确放置
+±0.02mm精度
-
@@ -719,17 +907,6 @@
-
-
-
-
步骤 6
- 返回原点并循环
-发送完成信号DO1=1,准备下一次循环
-完成
+
+
+
06
+ 返回循环
+DO1反馈信号
-
-
-
-
- 深度学习视觉检测
-99.7%检出率 · 0.05mm缺陷可检出
-
@@ -926,8 +1103,9 @@
-
-
⚡ 核心技术
+
+
+
⚡ 核心技术
-
@@ -944,8 +1122,9 @@
-
-
📊 性能指标
+
+
+
📊 性能指标
-
@@ -962,8 +1141,9 @@
-
-
🎯 应用成果
+
+
+
🎯 应用成果
-
@@ -988,5 +1168,70 @@
+
+
+