feat: 完成化工订单班半导体AI检测项目展示页面
详细说明: - 创建化工订单班(chemical)展示页面完整结构 - 实现300mm硅晶圆+SiO₂薄膜AI综合检测项目展示 - 使用紫色/紫罗兰科技主题(#7c3aed, #8b5cf6)突出半导体专业特色 - 深色主题采用深邃紫黑色(#0f0a1f)营造科技氛围 核心功能: - 4个展示区块:项目概述、判定标准、检测流程、检测结果 - 4个Agent角色展示:项目经理、质量工程师、AI系统工程师、数据分析师 - 智能数据动画:单片用时6分钟、批次1.5小时、AI可信度94%、合格率95% - 8张专业图片:检测背景、硅晶圆项目、光学检测、热力图等 - 深浅主题切换、平滑滚动、懒加载等交互功能 技术特性: - 玻璃态设计(glassmorphism)配合backdrop-filter - 视差滚动效果(background-attachment: fixed) - Intersection Observer实现动画和懒加载 - LocalStorage持久化主题偏好 - 响应式网格布局适配多屏幕 修复问题: - Agent头像映射:使用现有3个头像文件适配4个角色 - 图片文件名编码:修复全角/半角括号差异(使用sed命令) 文件清单: - web_frontend/web_result/order-classes/chemical/index.html (641行) - web_frontend/web_result/order-classes/chemical/css/styles.css (961行) - web_frontend/web_result/order-classes/chemical/js/main.js (266行) - 软链接:agent-avatars → data/订单班文档资料/化工/agent头像 - 软链接:images → data/订单班文档资料/化工/notion文稿/image 项目数据: - 检测对象:300mm P型硅晶圆20片 - 检测项目:外观(颗粒/划痕/腐蚀)、薄膜(厚度/均匀性)、电学(Rs)、成分(XPS) - 批次结果:19片合格、1片观察、0片不合格 - AI判定规则:≥0.90合格、0.80-0.90观察、<0.80待复核 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yep_Q
1
web_frontend/web_result/order-classes/chemical/agent-avatars
Symbolic link
1
web_frontend/web_result/order-classes/chemical/agent-avatars
Symbolic link
@@ -0,0 +1 @@
|
|||||||
|
../../../exhibition-demo/public/data/订单班文档资料/化工/agent头像
|
||||||
961
web_frontend/web_result/order-classes/chemical/css/styles.css
Normal file
961
web_frontend/web_result/order-classes/chemical/css/styles.css
Normal file
@@ -0,0 +1,961 @@
|
|||||||
|
/* 半导体AI综合检测项目 - 化工订单班科技感设计系统 */
|
||||||
|
|
||||||
|
/* ========== 设计变量 ========== */
|
||||||
|
:root {
|
||||||
|
/* 专业紫蓝主题 - 半导体科技风格 */
|
||||||
|
--bg-dark: #f5f3ff; /* 浅紫背景 */
|
||||||
|
--bg-semi-dark: rgba(245, 243, 255, 0.95); /* 半透明浅紫 */
|
||||||
|
--bg-overlay: rgba(255, 255, 255, 0.85); /* 白色遮罩 */
|
||||||
|
--bg-card: rgba(255, 255, 255, 0.9); /* 卡片背景 */
|
||||||
|
--primary-dark: #4c1d95; /* 主色深紫 */
|
||||||
|
--primary-purple: #7c3aed; /* 主色紫 - 半导体专业 */
|
||||||
|
--accent-violet: #8b5cf6; /* 紫罗兰强调 - 科技主题 */
|
||||||
|
--accent-violet-light: #a78bfa; /* 浅紫罗兰 */
|
||||||
|
--text-light: #1a1a1a; /* 深色文字 */
|
||||||
|
--text-gray: #666666; /* 灰色文字 */
|
||||||
|
--border-light: rgba(124, 58, 237, 0.2); /* 紫色边框 */
|
||||||
|
--hover-bg: rgba(139, 92, 246, 0.15); /* 悬停背景 */
|
||||||
|
--active-bg: rgba(124, 58, 237, 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 */
|
||||||
|
|
||||||
|
/* 字体系统 */
|
||||||
|
--font-primary: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
--font-display: 'Inter', sans-serif;
|
||||||
|
|
||||||
|
/* 字体大小 - 针对大屏幕优化 */
|
||||||
|
--text-xs: 0.875rem; /* 14px */
|
||||||
|
--text-sm: 1rem; /* 16px */
|
||||||
|
--text-base: 1.125rem; /* 18px */
|
||||||
|
--text-lg: 1.375rem; /* 22px */
|
||||||
|
--text-xl: 1.625rem; /* 26px */
|
||||||
|
--text-2xl: 2rem; /* 32px */
|
||||||
|
--text-3xl: 2.5rem; /* 40px */
|
||||||
|
--text-4xl: 3rem; /* 48px */
|
||||||
|
--text-5xl: 4rem; /* 64px */
|
||||||
|
|
||||||
|
/* 字重 */
|
||||||
|
--font-light: 300;
|
||||||
|
--font-normal: 400;
|
||||||
|
--font-medium: 500;
|
||||||
|
--font-semibold: 600;
|
||||||
|
--font-bold: 700;
|
||||||
|
|
||||||
|
/* 圆角 */
|
||||||
|
--radius-sm: 0.375rem;
|
||||||
|
--radius-md: 0.5rem;
|
||||||
|
--radius-lg: 0.75rem;
|
||||||
|
--radius-xl: 1rem;
|
||||||
|
--radius-2xl: 1.5rem;
|
||||||
|
--radius-full: 9999px;
|
||||||
|
|
||||||
|
/* 阴影 - 轻盈专业主题 */
|
||||||
|
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
|
||||||
|
--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-violet: 0 2px 8px rgba(139, 92, 246, 0.15);
|
||||||
|
|
||||||
|
/* 过渡 */
|
||||||
|
--transition-fast: 150ms ease;
|
||||||
|
--transition-base: 250ms ease;
|
||||||
|
--transition-slow: 350ms ease;
|
||||||
|
|
||||||
|
/* 布局 */
|
||||||
|
--container-max: 1600px; /* 增加最大宽度适配1920屏幕 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 深色主题 - 深邃紫蓝配色 ========== */
|
||||||
|
body.dark-theme {
|
||||||
|
--bg-dark: #0f0a1f; /* 深邃紫黑背景 */
|
||||||
|
--bg-semi-dark: rgba(15, 10, 31, 0.95); /* 深紫半透明 */
|
||||||
|
--bg-overlay: rgba(20, 15, 35, 0.85); /* 深紫遮罩层 */
|
||||||
|
--bg-card: rgba(25, 20, 45, 0.9); /* 深紫卡片背景 */
|
||||||
|
--primary-dark: #4c1d95; /* 中度深紫 */
|
||||||
|
--primary-purple: #a78bfa; /* 明亮紫 */
|
||||||
|
--accent-violet: #8b5cf6; /* 深紫罗兰 */
|
||||||
|
--accent-violet-light: #c4b5fd; /* 亮紫罗兰 */
|
||||||
|
--text-light: #e9e5f5; /* 浅色文字 */
|
||||||
|
--text-gray: #a8a29e; /* 灰色文字 */
|
||||||
|
--border-light: rgba(167, 139, 250, 0.25); /* 紫色边框 */
|
||||||
|
--hover-bg: rgba(139, 92, 246, 0.15); /* 悬停背景 */
|
||||||
|
--active-bg: rgba(167, 139, 250, 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-violet: 0 2px 8px rgba(139, 92, 246, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 重置样式 ========== */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-primary);
|
||||||
|
font-size: var(--text-base);
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--text-light);
|
||||||
|
background-color: var(--bg-dark);
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== Hero 区域 - 全屏图片背景 ========== */
|
||||||
|
.hero {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background:
|
||||||
|
linear-gradient(135deg, rgba(245, 243, 255, 0.9) 0%, rgba(237, 233, 254, 0.95) 100%),
|
||||||
|
url('../images/检测背景主图.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 深色主题下的Hero渐变 */
|
||||||
|
body.dark-theme .hero {
|
||||||
|
background:
|
||||||
|
linear-gradient(135deg, rgba(15, 10, 31, 0.9) 0%, rgba(20, 15, 35, 0.8) 100%),
|
||||||
|
url('../images/检测背景主图.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image:
|
||||||
|
radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
|
||||||
|
radial-gradient(circle at 80% 80%, rgba(124, 58, 237, 0.05) 0%, transparent 50%);
|
||||||
|
pointer-events: none;
|
||||||
|
animation: glow 8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes glow {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.6; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
text-align: center;
|
||||||
|
color: var(--text-light);
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
padding: var(--spacing-xl);
|
||||||
|
max-width: 900px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: var(--spacing-md) var(--spacing-xl);
|
||||||
|
background: rgba(139, 92, 246, 0.15);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
margin-bottom: var(--spacing-xl);
|
||||||
|
border: 3px solid var(--accent-violet);
|
||||||
|
box-shadow: var(--shadow-violet);
|
||||||
|
text-transform: uppercase;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-badge:hover {
|
||||||
|
background: rgba(139, 92, 246, 0.25);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-size: clamp(3.5rem, 10vw, 6.5rem);
|
||||||
|
font-weight: var(--font-bold);
|
||||||
|
margin-bottom: var(--spacing-lg);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
line-height: 1.1;
|
||||||
|
color: var(--accent-violet-light);
|
||||||
|
text-shadow: 0 6px 30px rgba(0,0,0,0.8), 0 0 60px rgba(139, 92, 246, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: clamp(1.5rem, 4vw, 2.5rem);
|
||||||
|
font-weight: var(--font-light);
|
||||||
|
opacity: 0.95;
|
||||||
|
margin-bottom: var(--spacing-xl);
|
||||||
|
color: var(--text-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-description {
|
||||||
|
font-size: var(--text-xl);
|
||||||
|
opacity: 0.85;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 导航 - 深色玻璃态 ========== */
|
||||||
|
.nav {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
background: var(--bg-semi-dark);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border-bottom: 1px solid var(--border-light);
|
||||||
|
padding: var(--spacing-md) 0;
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--spacing-sm);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 0 var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
padding: var(--spacing-sm) var(--spacing-lg);
|
||||||
|
background: var(--bg-overlay);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid var(--border-light);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-xs);
|
||||||
|
color: var(--text-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item i {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item span {
|
||||||
|
font-size: var(--text-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item:hover {
|
||||||
|
background: var(--hover-bg);
|
||||||
|
color: var(--accent-violet);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: var(--shadow-violet);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item.active {
|
||||||
|
background: var(--active-bg);
|
||||||
|
color: var(--primary-purple);
|
||||||
|
border-color: var(--primary-purple);
|
||||||
|
box-shadow: var(--shadow-violet);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 内容区块 - 图片背景 ========== */
|
||||||
|
.section {
|
||||||
|
padding: var(--spacing-2xl) 0;
|
||||||
|
background: var(--bg-dark);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 浅色图片背景 - 每个区块使用不同图片 */
|
||||||
|
.section:nth-child(1) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(245, 243, 255, 0.9) 0%, rgba(237, 233, 254, 1) 100%),
|
||||||
|
url('../images/硅晶圆检测项目.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section:nth-child(2) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(245, 243, 255, 0.9) 0%, rgba(237, 233, 254, 1) 100%),
|
||||||
|
url('../images/光学镜头检测硅晶圆示意图.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section:nth-child(3) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(245, 243, 255, 0.9) 0%, rgba(237, 233, 254, 1) 100%),
|
||||||
|
url('../images/外观热力图(颗粒划痕腐蚀).jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section:nth-child(4) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(245, 243, 255, 0.9) 0%, rgba(237, 233, 254, 1) 100%),
|
||||||
|
url('../images/检测结果主图.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 通用奇偶区块（当超过4个section时） */
|
||||||
|
.section:nth-child(n+5):nth-child(odd) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(245, 243, 255, 0.9) 0%, rgba(237, 233, 254, 1) 100%),
|
||||||
|
url('../images/厚度分布图.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section:nth-child(n+5):nth-child(even) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(245, 243, 255, 0.9) 0%, rgba(237, 233, 254, 1) 100%),
|
||||||
|
url('../images/电学对比图.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 深色主题下的区块背景 - 每个区块使用对应图片 */
|
||||||
|
body.dark-theme .section:nth-child(1) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(15, 10, 31, 0.92) 0%, rgba(20, 15, 35, 0.88) 100%),
|
||||||
|
url('../images/硅晶圆检测项目.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .section:nth-child(2) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(20, 15, 35, 0.90) 0%, rgba(15, 10, 31, 0.88) 100%),
|
||||||
|
url('../images/光学镜头检测硅晶圆示意图.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .section:nth-child(3) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(15, 10, 31, 0.92) 0%, rgba(20, 15, 35, 0.88) 100%),
|
||||||
|
url('../images/外观热力图(颗粒划痕腐蚀).jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .section:nth-child(4) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(20, 15, 35, 0.90) 0%, rgba(15, 10, 31, 0.88) 100%),
|
||||||
|
url('../images/检测结果主图.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 通用奇偶区块（当超过4个section时） */
|
||||||
|
body.dark-theme .section:nth-child(n+5):nth-child(odd) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(15, 10, 31, 0.92) 0%, rgba(20, 15, 35, 0.88) 100%),
|
||||||
|
url('../images/厚度分布图.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .section:nth-child(n+5):nth-child(even) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(20, 15, 35, 0.90) 0%, rgba(15, 10, 31, 0.88) 100%),
|
||||||
|
url('../images/电学对比图.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 深色主题下的特定元素调整 */
|
||||||
|
body.dark-theme .stat-item {
|
||||||
|
background: rgba(25, 20, 45, 0.8);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .stat-item:hover {
|
||||||
|
background: rgba(167, 139, 250, 0.15);
|
||||||
|
border-color: var(--primary-purple);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .stat-value {
|
||||||
|
color: var(--accent-violet-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme th {
|
||||||
|
background: rgba(167, 139, 250, 0.12);
|
||||||
|
color: var(--accent-violet-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme tr:hover {
|
||||||
|
background: rgba(167, 139, 250, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: var(--container-max);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-lg);
|
||||||
|
margin-bottom: var(--spacing-xl);
|
||||||
|
padding: var(--spacing-lg);
|
||||||
|
background: var(--bg-card);
|
||||||
|
backdrop-filter: blur(15px);
|
||||||
|
-webkit-backdrop-filter: blur(15px);
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
border: 2px solid var(--border-light);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.agent-avatar {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
object-fit: cover;
|
||||||
|
border: 3px solid var(--primary-purple);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.agent-avatar:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
border-color: var(--accent-violet);
|
||||||
|
}
|
||||||
|
|
||||||
|
.agent-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.agent-name {
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
color: var(--primary-purple);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
margin-bottom: var(--spacing-sm);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: var(--text-4xl);
|
||||||
|
font-weight: var(--font-bold);
|
||||||
|
color: var(--text-light);
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
text-shadow: none;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 180px;
|
||||||
|
height: 4px;
|
||||||
|
background: linear-gradient(90deg, var(--accent-violet), transparent);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-content {
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expert-intro {
|
||||||
|
background: var(--bg-card);
|
||||||
|
backdrop-filter: blur(15px);
|
||||||
|
-webkit-backdrop-filter: blur(15px);
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
padding: var(--spacing-lg);
|
||||||
|
margin-bottom: var(--spacing-xl);
|
||||||
|
border: 2px solid var(--border-light);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.expert-intro h3 {
|
||||||
|
font-size: var(--text-2xl);
|
||||||
|
color: var(--primary-purple);
|
||||||
|
margin-bottom: var(--spacing-lg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.expert-intro p {
|
||||||
|
color: var(--text-gray);
|
||||||
|
line-height: 1.8;
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 网格布局 - 针对大屏幕优化,更大气的布局 ========== */
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--spacing-2xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-2 {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-3 {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-4 {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 卡片 - 图片优先布局 ========== */
|
||||||
|
.card {
|
||||||
|
background: var(--bg-card);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
border-radius: var(--radius-2xl);
|
||||||
|
overflow: hidden;
|
||||||
|
border: 2px solid var(--border-light);
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
transform: translateY(-8px);
|
||||||
|
box-shadow: var(--shadow-xl), var(--shadow-violet);
|
||||||
|
border-color: var(--accent-violet);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
padding: var(--spacing-xl);
|
||||||
|
background: var(--bg-semi-dark);
|
||||||
|
border-bottom: 2px solid var(--border-light);
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: var(--text-2xl);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
color: var(--primary-purple);
|
||||||
|
margin-bottom: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
padding: var(--spacing-xl);
|
||||||
|
order: 3;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 图片容器 - 突出展示 - 超大气布局 ========== */
|
||||||
|
.image-container {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 3/2;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
background: rgba(0,0,0,0.5);
|
||||||
|
position: relative;
|
||||||
|
box-shadow: none;
|
||||||
|
border: none;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
order: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform var(--transition-slow);
|
||||||
|
filter: brightness(0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container:hover img {
|
||||||
|
transform: scale(1.1);
|
||||||
|
filter: brightness(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-caption {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
|
||||||
|
color: var(--text-light);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
text-align: center;
|
||||||
|
transform: translateY(100%);
|
||||||
|
transition: transform var(--transition-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container:hover .image-caption {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 列表 ========== */
|
||||||
|
.feature-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-list li {
|
||||||
|
padding: var(--spacing-sm) 0;
|
||||||
|
border-bottom: 1px solid var(--border-light);
|
||||||
|
color: var(--text-gray);
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-list li:hover {
|
||||||
|
color: var(--primary-purple);
|
||||||
|
padding-left: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-list li:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 统计数据 ========== */
|
||||||
|
.stats {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-md);
|
||||||
|
padding: var(--spacing-lg);
|
||||||
|
background: var(--bg-overlay);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
border: 1px solid var(--border-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 1px solid transparent;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item:hover {
|
||||||
|
background: var(--hover-bg);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: var(--border-light);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--text-gray);
|
||||||
|
margin-bottom: var(--spacing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: var(--text-2xl);
|
||||||
|
font-weight: var(--font-bold);
|
||||||
|
color: var(--primary-purple);
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 表格 ========== */
|
||||||
|
.table-container {
|
||||||
|
overflow-x: auto;
|
||||||
|
margin: var(--spacing-xl) 0;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
background: var(--bg-card);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background: var(--active-bg);
|
||||||
|
color: var(--primary-purple);
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
text-align: left;
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
border-bottom: 2px solid var(--primary-purple);
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
border-bottom: 1px solid var(--border-light);
|
||||||
|
color: var(--text-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:last-child td {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:hover {
|
||||||
|
background: var(--hover-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 响应式 ========== */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
:root {
|
||||||
|
--spacing-sm: 0.75rem;
|
||||||
|
--spacing-md: 1rem;
|
||||||
|
--spacing-lg: 1.5rem;
|
||||||
|
--spacing-xl: 2rem;
|
||||||
|
--spacing-2xl: 3rem;
|
||||||
|
--spacing-3xl: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
background-attachment: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section:nth-child(odd),
|
||||||
|
.section:nth-child(even) {
|
||||||
|
background-attachment: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
padding: var(--spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container {
|
||||||
|
gap: var(--spacing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
padding: var(--spacing-xs) var(--spacing-md);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: var(--spacing-2xl) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-2,
|
||||||
|
.grid-3,
|
||||||
|
.grid-4 {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 动画 ========== */
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% {
|
||||||
|
background-position: -1000px 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: 1000px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in {
|
||||||
|
animation: fadeIn 0.6s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-in {
|
||||||
|
animation: slideIn 0.6s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 工具类 ========== */
|
||||||
|
.text-center { text-align: center; }
|
||||||
|
.text-left { text-align: left; }
|
||||||
|
.text-right { text-align: right; }
|
||||||
|
|
||||||
|
.mt-sm { margin-top: var(--spacing-sm); }
|
||||||
|
.mt-md { margin-top: var(--spacing-md); }
|
||||||
|
.mt-lg { margin-top: var(--spacing-lg); }
|
||||||
|
.mt-xl { margin-top: var(--spacing-xl); }
|
||||||
|
|
||||||
|
.mb-sm { margin-bottom: var(--spacing-sm); }
|
||||||
|
.mb-md { margin-bottom: var(--spacing-md); }
|
||||||
|
.mb-lg { margin-bottom: var(--spacing-lg); }
|
||||||
|
.mb-xl { margin-bottom: var(--spacing-xl); }
|
||||||
|
|
||||||
|
.hidden { display: none; }
|
||||||
|
.block { display: block; }
|
||||||
|
.flex { display: flex; }
|
||||||
|
.grid { display: grid; }
|
||||||
|
|
||||||
|
.gap-sm { gap: var(--spacing-sm); }
|
||||||
|
.gap-md { gap: var(--spacing-md); }
|
||||||
|
.gap-lg { gap: var(--spacing-lg); }
|
||||||
|
|
||||||
|
/* ========== 图片加载状态 ========== */
|
||||||
|
img {
|
||||||
|
transition: opacity var(--transition-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
img.loaded {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.error {
|
||||||
|
opacity: 0.5;
|
||||||
|
filter: grayscale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== SVG图标尺寸统一管理 ========== */
|
||||||
|
.hero-description i[data-lucide] {
|
||||||
|
width: 24px !important;
|
||||||
|
height: 24px !important;
|
||||||
|
display: inline-block !important;
|
||||||
|
vertical-align: middle !important;
|
||||||
|
margin-right: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.agent-name i[data-lucide] {
|
||||||
|
width: 20px !important;
|
||||||
|
height: 20px !important;
|
||||||
|
display: inline-block !important;
|
||||||
|
vertical-align: middle !important;
|
||||||
|
margin-right: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expert-intro h3 i[data-lucide] {
|
||||||
|
width: 40px !important;
|
||||||
|
height: 40px !important;
|
||||||
|
display: inline-block !important;
|
||||||
|
vertical-align: middle !important;
|
||||||
|
margin-right: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-list li i[data-lucide] {
|
||||||
|
width: 18px !important;
|
||||||
|
height: 18px !important;
|
||||||
|
display: inline-block !important;
|
||||||
|
vertical-align: middle !important;
|
||||||
|
margin-right: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item i[data-lucide] {
|
||||||
|
width: 20px !important;
|
||||||
|
height: 20px !important;
|
||||||
|
display: block !important;
|
||||||
|
margin: 0 auto 4px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 主题切换按钮 ========== */
|
||||||
|
.theme-toggle {
|
||||||
|
position: fixed;
|
||||||
|
top: 24px;
|
||||||
|
right: 24px;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle-btn {
|
||||||
|
position: relative;
|
||||||
|
width: 64px;
|
||||||
|
height: 32px;
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 2px solid var(--border-light);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 6px;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle-btn:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle-btn:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-icon {
|
||||||
|
width: 18px !important;
|
||||||
|
height: 18px !important;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
color: var(--text-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
body:not(.dark-theme) .theme-icon-light {
|
||||||
|
color: var(--accent-violet);
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
body:not(.dark-theme) .theme-icon-dark {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .theme-icon-dark {
|
||||||
|
color: var(--primary-purple);
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .theme-icon-light {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
1
web_frontend/web_result/order-classes/chemical/images
Symbolic link
1
web_frontend/web_result/order-classes/chemical/images
Symbolic link
@@ -0,0 +1 @@
|
|||||||
|
../../../exhibition-demo/public/data/订单班文档资料/化工/notion文稿/image
|
||||||
641
web_frontend/web_result/order-classes/chemical/index.html
Normal file
641
web_frontend/web_result/order-classes/chemical/index.html
Normal file
@@ -0,0 +1,641 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>半导体AI综合检测项目 - 化工订单班</title>
|
||||||
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body class="dark-theme">
|
||||||
|
<!-- 主题切换按钮 -->
|
||||||
|
<div class="theme-toggle">
|
||||||
|
<button id="themeToggleBtn" class="theme-toggle-btn">
|
||||||
|
<i data-lucide="sun" class="theme-icon theme-icon-light"></i>
|
||||||
|
<i data-lucide="moon" class="theme-icon theme-icon-dark"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hero 区域 -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="hero-badge">🔬 化工订单班</div>
|
||||||
|
<h1 class="hero-title">半导体AI综合检测项目</h1>
|
||||||
|
<h2 class="hero-subtitle">300mm硅晶圆 + SiO₂薄膜智能质检</h2>
|
||||||
|
<p class="hero-description">
|
||||||
|
<i data-lucide="cpu"></i> AI驱动的全流程自动化检测<br>
|
||||||
|
<i data-lucide="bot"></i> 4大专业Agent协同作业<br>
|
||||||
|
<i data-lucide="check-circle"></i> 95%合格率 + 智能质量预警
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<nav class="nav">
|
||||||
|
<div class="nav-container">
|
||||||
|
<div class="nav-item active">
|
||||||
|
<i data-lucide="file-text"></i>
|
||||||
|
<span>项目概述</span>
|
||||||
|
</div>
|
||||||
|
<div class="nav-item">
|
||||||
|
<i data-lucide="clipboard-check"></i>
|
||||||
|
<span>判定标准</span>
|
||||||
|
</div>
|
||||||
|
<div class="nav-item">
|
||||||
|
<i data-lucide="workflow"></i>
|
||||||
|
<span>检测流程</span>
|
||||||
|
</div>
|
||||||
|
<div class="nav-item">
|
||||||
|
<i data-lucide="chart-line"></i>
|
||||||
|
<span>检测结果</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Section 1: 项目概述 -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<img src="agent-avatars/质量标准与合规专家.jpg" alt="项目经理" class="agent-avatar">
|
||||||
|
<div class="agent-info">
|
||||||
|
<div class="agent-name">
|
||||||
|
<i data-lucide="briefcase"></i> 项目经理
|
||||||
|
</div>
|
||||||
|
<h2 class="section-title">项目概述与检测背景</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-content">
|
||||||
|
<div class="expert-intro">
|
||||||
|
<h3><i data-lucide="info"></i> 检测背景</h3>
|
||||||
|
<p>本项目对单批次 300mm 硅晶圆 + 表面SiO₂薄膜开展一次性质量检测。整套流程由AI引擎主导:负责数据清洗、主判定与自动出具结构化报告;检测员只在低可信或越界时介入复核,最大化保障速度与一致性。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="image-container" style="margin-bottom: var(--spacing-xl);">
|
||||||
|
<img data-src="images/检测背景主图.jpg" alt="检测背景" loading="lazy">
|
||||||
|
<div class="image-caption">AI驱动的智能检测系统</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-2">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">检测目的</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="check-circle"></i> 外观:识别颗粒、划痕、腐蚀缺陷</li>
|
||||||
|
<li><i data-lucide="check-circle"></i> 薄膜:核对厚度均值与均匀性</li>
|
||||||
|
<li><i data-lucide="check-circle"></i> 电学:快速评估方块电阻Rs</li>
|
||||||
|
<li><i data-lucide="check-circle"></i> 成分:XPS抽检确认O/Si比</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">检测信息</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="building"></i> XX半导体第三方实验室</li>
|
||||||
|
<li><i data-lucide="calendar"></i> 2024年10月</li>
|
||||||
|
<li><i data-lucide="file-text"></i> AI-QC-202410-001</li>
|
||||||
|
<li><i data-lucide="package"></i> 300mm P型硅晶圆 20片</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-container" style="margin-top: var(--spacing-xl);">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>项目</th>
|
||||||
|
<th>信息</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>产品</td>
|
||||||
|
<td>300mm P型硅晶圆(表面SiO₂薄膜)</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>批次/数量</td>
|
||||||
|
<td>同批随机抽样20片</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>目标规格</td>
|
||||||
|
<td>SiO₂ 15.0±0.3nm; Rs 60±1.2Ω/□</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>环境</td>
|
||||||
|
<td>ISO 5洁净室,温度22±1℃,湿度45±5%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>AI设置</td>
|
||||||
|
<td>可信度阈值:≥0.90合格,0.80-0.90观察,<0.80待复核</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Section 2: 判定标准 -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<img src="agent-avatars/质量标准与合规专家.jpg" alt="质量工程师" class="agent-avatar">
|
||||||
|
<div class="agent-info">
|
||||||
|
<div class="agent-name">
|
||||||
|
<i data-lucide="shield-check"></i> 质量工程师
|
||||||
|
</div>
|
||||||
|
<h2 class="section-title">检测范围与判定标准</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-content">
|
||||||
|
<div class="expert-intro">
|
||||||
|
<h3><i data-lucide="target"></i> 检测对象与项目</h3>
|
||||||
|
<p>样品类型:300mm硅晶圆+表面SiO₂薄膜。覆盖项目:外观(颗粒/划痕/腐蚀)、薄膜(厚度与均匀性)、电学(方块电阻Rs)、成分(XPS抽检)。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="image-container" style="margin-bottom: var(--spacing-xl);">
|
||||||
|
<img data-src="images/硅晶圆检测项目.jpg" alt="检测项目" loading="lazy">
|
||||||
|
<div class="image-caption">硅晶圆检测项目全景</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-container">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>项目</th>
|
||||||
|
<th>指标</th>
|
||||||
|
<th>判定阈值/范围</th>
|
||||||
|
<th>统计口径</th>
|
||||||
|
<th>结论规则</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>外观</td>
|
||||||
|
<td>颗粒(≥0.3μm)</td>
|
||||||
|
<td>≤35颗/片</td>
|
||||||
|
<td>每片最大值、总数</td>
|
||||||
|
<td>超过即不合格</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>外观</td>
|
||||||
|
<td>划痕</td>
|
||||||
|
<td>>50μm计缺陷</td>
|
||||||
|
<td>最大长度</td>
|
||||||
|
<td>45-50μm观察</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>外观</td>
|
||||||
|
<td>腐蚀坑深度</td>
|
||||||
|
<td>>10nm不合格</td>
|
||||||
|
<td>最大深度</td>
|
||||||
|
<td>8-10nm观察;≤8nm合格</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>薄膜</td>
|
||||||
|
<td>厚度均值</td>
|
||||||
|
<td>15.0±0.3nm</td>
|
||||||
|
<td>9点均值</td>
|
||||||
|
<td>超出窗口即不合格</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>薄膜</td>
|
||||||
|
<td>均匀性(3σ)</td>
|
||||||
|
<td>≤±3%</td>
|
||||||
|
<td>9点3σ</td>
|
||||||
|
<td>>3%不合格;2.5-3%观察</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>电学</td>
|
||||||
|
<td>Rs均值</td>
|
||||||
|
<td>60±1.2Ω/□</td>
|
||||||
|
<td>9点均值</td>
|
||||||
|
<td>超出窗口不合格</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>成分</td>
|
||||||
|
<td>O/Si比</td>
|
||||||
|
<td>2.00±0.05</td>
|
||||||
|
<td>抽检值</td>
|
||||||
|
<td>超出为异常;贴边观察</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>成分</td>
|
||||||
|
<td>金属污染</td>
|
||||||
|
<td><1×10¹⁰atoms/cm²</td>
|
||||||
|
<td>抽检值</td>
|
||||||
|
<td>超阈即异常</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stats" style="margin-top: var(--spacing-xl);">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">判定优先级</div>
|
||||||
|
<div class="stat-value">外观 > 薄膜 > 电学 > 成分</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">AI参与方式</div>
|
||||||
|
<div class="stat-value">自动阈值比对</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">人工复核触发</div>
|
||||||
|
<div class="stat-value">临界/低可信</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Section 3: 检测流程 -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<img src="agent-avatars/检测工程师1+2.jpg" alt="AI系统工程师" class="agent-avatar">
|
||||||
|
<div class="agent-info">
|
||||||
|
<div class="agent-name">
|
||||||
|
<i data-lucide="bot"></i> AI系统工程师
|
||||||
|
</div>
|
||||||
|
<h2 class="section-title">检测流程与AI方法</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-content">
|
||||||
|
<div class="expert-intro">
|
||||||
|
<h3><i data-lucide="workflow"></i> 流程总览</h3>
|
||||||
|
<p>AI数据采集 → AI清洗数据 → AI主判定 → AI对标阈值 → 必要时人工复核 → 自动生成报告。单片目标用时≤6分钟,批次(20片)约1.5小时完成核心判定。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="image-container" style="margin-bottom: var(--spacing-xl);">
|
||||||
|
<img data-src="images/光学镜头检测硅晶圆示意图.jpg" alt="检测流程" loading="lazy">
|
||||||
|
<div class="image-caption">光学镜头检测硅晶圆示意</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-4">
|
||||||
|
<div class="card">
|
||||||
|
<div class="image-container">
|
||||||
|
<img data-src="images/外观热力图(颗粒划痕腐蚀).jpg" alt="外观热力图" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">外观热力图</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<p>整片俯视图+网格热区,颗粒/划痕/腐蚀坑分类显示,颜色分级标注严重度。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="image-container">
|
||||||
|
<img data-src="images/厚度分布图.jpg" alt="厚度分布图" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">厚度分布图</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<p>9点热力格,均值、3σ、偏移率统计,边缘敏感性自动标注。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="image-container">
|
||||||
|
<img data-src="images/电学对比图.jpg" alt="电学对比图" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">电学对比图</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<p>AI预测vs实测散点图,误差统计,置信区间可视化展示。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="image-container">
|
||||||
|
<img data-src="images/成分抽检卡片.jpg" alt="成分抽检" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">成分抽检卡片</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<p>O/Si比值、金属污染状态,峰位截图,采样位置追溯。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="expert-intro" style="margin-top: var(--spacing-xl);">
|
||||||
|
<h3><i data-lucide="cpu"></i> AI判定规则</h3>
|
||||||
|
<div class="grid grid-3" style="margin-top: var(--spacing-md);">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header" style="order: 1;">
|
||||||
|
<h4 class="card-title">≥0.90且达标 → 合格</h4>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" style="order: 2;">
|
||||||
|
<p>自动出报告并归档,无需人工处理。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header" style="order: 1;">
|
||||||
|
<h4 class="card-title">0.80-0.90 → 观察</h4>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" style="order: 2;">
|
||||||
|
<p>自动生成备注与关注点,坐标放入下批复测清单。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header" style="order: 1;">
|
||||||
|
<h4 class="card-title"><0.80或超限 → 待复核</h4>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" style="order: 2;">
|
||||||
|
<p>自动通知检测员复核,复核前不建议放行。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stats" style="margin-top: var(--spacing-xl);">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">单片用时</div>
|
||||||
|
<div class="stat-value single-time">0分钟</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">批次用时(20片)</div>
|
||||||
|
<div class="stat-value batch-time">0小时</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">AI可信度</div>
|
||||||
|
<div class="stat-value ai-confidence">0%</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">异常复核</div>
|
||||||
|
<div class="stat-value">3-5分钟/片</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Section 4: 检测结果 -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<img src="agent-avatars/检测技术员.jpg" alt="数据分析师" class="agent-avatar">
|
||||||
|
<div class="agent-info">
|
||||||
|
<div class="agent-name">
|
||||||
|
<i data-lucide="chart-line"></i> 数据分析师
|
||||||
|
</div>
|
||||||
|
<h2 class="section-title">检测结果与数据分析</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-content">
|
||||||
|
<div class="expert-intro">
|
||||||
|
<h3><i data-lucide="clipboard-check"></i> 批次摘要</h3>
|
||||||
|
<p>本批共20片晶圆,全部完成外观、厚度、Rs三项检测;随机抽取3片补做XPS成分核验。完成度100%,无漏测、无中断记录。总体判定:合格19片、观察1片、不合格0片。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="image-container" style="margin-bottom: var(--spacing-xl);">
|
||||||
|
<img data-src="images/检测结果主图.jpg" alt="检测结果" loading="lazy">
|
||||||
|
<div class="image-caption">检测结果主图</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-container">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>判定</th>
|
||||||
|
<th>片数</th>
|
||||||
|
<th>占比</th>
|
||||||
|
<th>主要原因/特征</th>
|
||||||
|
<th>处置</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>合格</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>95%</td>
|
||||||
|
<td>指标均在阈值内;外观颗粒小、分散</td>
|
||||||
|
<td>直接归档</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>观察</td>
|
||||||
|
<td>1</td>
|
||||||
|
<td>5%</td>
|
||||||
|
<td>Rs接近上限,离散正常;外观、厚度均达标</td>
|
||||||
|
<td>下批优先复测</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>不合格</td>
|
||||||
|
<td>0</td>
|
||||||
|
<td>0%</td>
|
||||||
|
<td>—</td>
|
||||||
|
<td>—</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-container" style="margin-top: var(--spacing-xl);">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>指标</th>
|
||||||
|
<th>结果</th>
|
||||||
|
<th>阈值</th>
|
||||||
|
<th>判定</th>
|
||||||
|
<th>备注</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>颗粒(≥0.3μm,颗/片)</td>
|
||||||
|
<td>24</td>
|
||||||
|
<td>≤35</td>
|
||||||
|
<td>合格</td>
|
||||||
|
<td>主要集中在3象限外环</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>划痕(最大长度,μm)</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>>50计缺陷</td>
|
||||||
|
<td>合格</td>
|
||||||
|
<td>单条、细长型,非功能区</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>腐蚀坑深度(nm)</td>
|
||||||
|
<td>8.6</td>
|
||||||
|
<td>≤10</td>
|
||||||
|
<td>合格</td>
|
||||||
|
<td>无环形腐蚀迹象</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>SiO₂厚度均值(nm)</td>
|
||||||
|
<td>15.07</td>
|
||||||
|
<td>15.0±0.3</td>
|
||||||
|
<td>合格</td>
|
||||||
|
<td>偏移率+0.47%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>厚度均匀性3σ(%)</td>
|
||||||
|
<td>±2.6</td>
|
||||||
|
<td>≤±3.0</td>
|
||||||
|
<td>合格</td>
|
||||||
|
<td>边缘敏感:否</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rs均值(Ω/□)</td>
|
||||||
|
<td>61.1</td>
|
||||||
|
<td>60±1.2</td>
|
||||||
|
<td>观察</td>
|
||||||
|
<td>+1.1(略高),离散2.9Ω/□</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>XPS O/Si原子比</td>
|
||||||
|
<td>2.02</td>
|
||||||
|
<td>2.00±0.05</td>
|
||||||
|
<td>合格</td>
|
||||||
|
<td>3片抽检均正常</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>金属污染(atoms/cm²)</td>
|
||||||
|
<td><7×10⁹</td>
|
||||||
|
<td><1×10¹⁰</td>
|
||||||
|
<td>合格</td>
|
||||||
|
<td>未见可疑峰</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="expert-intro" style="margin-top: var(--spacing-xl);">
|
||||||
|
<h3><i data-lucide="lightbulb"></i> 结论与建议</h3>
|
||||||
|
<div class="grid grid-2" style="margin-top: var(--spacing-md);">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header" style="order: 1;">
|
||||||
|
<h4 class="card-title">总体判定</h4>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" style="order: 2;">
|
||||||
|
<p>最终结论:<strong>合格</strong>。本批20片中,仅1片进入观察带(Rs均值略高但未越界),其余指标均在阈值内。AI主判定平均可信度0.94,异常触发的人工复核与AI结果一致。</p>
|
||||||
|
<p style="margin-top: var(--spacing-sm);">放行建议:本批可整体放行。对"观察片"在生产流转单上加注"下批优先复测"标识。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header" style="order: 1;">
|
||||||
|
<h4 class="card-title">快速优化建议</h4>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" style="order: 2;">
|
||||||
|
<p>若后续批次仍出现Rs略高,可尝试:</p>
|
||||||
|
<ul class="feature-list" style="margin-top: var(--spacing-sm);">
|
||||||
|
<li><i data-lucide="arrow-down"></i> 沉积时间下调1-2%</li>
|
||||||
|
<li><i data-lucide="arrow-up"></i> 腔温上调约2℃</li>
|
||||||
|
<li><i data-lucide="search"></i> 下批优先复测边缘3点+中心1点</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stats" style="margin-top: var(--spacing-xl);">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">批次合格率</div>
|
||||||
|
<div class="stat-value pass-rate">0%</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">AI可信度</div>
|
||||||
|
<div class="stat-value">0.94</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">观察片数</div>
|
||||||
|
<div class="stat-value">1片</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">不合格片数</div>
|
||||||
|
<div class="stat-value">0片</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer: 项目成果总结 -->
|
||||||
|
<section class="section" style="background: var(--bg-semi-dark); padding: var(--spacing-3xl) 0;">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title text-center" style="margin-bottom: var(--spacing-2xl);">
|
||||||
|
<i data-lucide="award"></i> 项目成果总结
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="grid grid-3">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header" style="order: 1;">
|
||||||
|
<h3 class="card-title">📋 检测覆盖</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" style="order: 2;">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="search"></i> 外观全片扫描</li>
|
||||||
|
<li><i data-lucide="ruler"></i> 9点厚度测量</li>
|
||||||
|
<li><i data-lucide="zap"></i> 9点电阻测试</li>
|
||||||
|
<li><i data-lucide="atom"></i> XPS成分抽检</li>
|
||||||
|
<li><i data-lucide="image"></i> 4类可视化图表</li>
|
||||||
|
<li><i data-lucide="file-text"></i> 结构化AI报告</li>
|
||||||
|
<li><i data-lucide="database"></i> 原始数据追溯</li>
|
||||||
|
<li><i data-lucide="shield-check"></i> 全程质量控制</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header" style="order: 1;">
|
||||||
|
<h3 class="card-title">🎯 核心指标</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" style="order: 2;">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="check-circle"></i> 合格率95%</li>
|
||||||
|
<li><i data-lucide="cpu"></i> AI可信度0.94</li>
|
||||||
|
<li><i data-lucide="clock"></i> 单片用时≤6分钟</li>
|
||||||
|
<li><i data-lucide="layers"></i> 批次用时1.5小时</li>
|
||||||
|
<li><i data-lucide="droplet"></i> 颗粒≤35颗/片</li>
|
||||||
|
<li><i data-lucide="minimize"></i> 划痕<50μm</li>
|
||||||
|
<li><i data-lucide="box"></i> 厚度15.0±0.3nm</li>
|
||||||
|
<li><i data-lucide="zap"></i> Rs 60±1.2Ω/□</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header" style="order: 1;">
|
||||||
|
<h3 class="card-title">⚙️ AI能力</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" style="order: 2;">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="wand-2"></i> 自动数据清洗</li>
|
||||||
|
<li><i data-lucide="brain"></i> 智能主判定</li>
|
||||||
|
<li><i data-lucide="git-compare"></i> 阈值自动比对</li>
|
||||||
|
<li><i data-lucide="activity"></i> 可信度评估</li>
|
||||||
|
<li><i data-lucide="line-chart"></i> 趋势预测</li>
|
||||||
|
<li><i data-lucide="alert-triangle"></i> 异常自动预警</li>
|
||||||
|
<li><i data-lucide="file-output"></i> 报告一键生成</li>
|
||||||
|
<li><i data-lucide="repeat"></i> 持续学习优化</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center" style="margin-top: var(--spacing-2xl); color: var(--text-gray);">
|
||||||
|
<p>🔬 半导体AI综合检测项目圆满完成!</p>
|
||||||
|
<p style="margin-top: var(--spacing-sm);">© 2024 化工订单班 | AI驱动的智能质检解决方案</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
266
web_frontend/web_result/order-classes/chemical/js/main.js
Normal file
266
web_frontend/web_result/order-classes/chemical/js/main.js
Normal file
@@ -0,0 +1,266 @@
|
|||||||
|
// 半导体AI综合检测项目 - 主要JavaScript逻辑
|
||||||
|
|
||||||
|
// 页面初始化
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
console.log('🔬 化工订单班半导体检测页面加载完成');
|
||||||
|
|
||||||
|
// 初始化Lucide图标
|
||||||
|
if (typeof lucide !== 'undefined') {
|
||||||
|
lucide.createIcons();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化组件
|
||||||
|
initNavigation();
|
||||||
|
initAnimations();
|
||||||
|
initLazyLoading();
|
||||||
|
initSmoothScroll();
|
||||||
|
updateStats();
|
||||||
|
initThemeToggle();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 导航功能
|
||||||
|
function initNavigation() {
|
||||||
|
const navItems = document.querySelectorAll('.nav-item');
|
||||||
|
const sections = document.querySelectorAll('.section');
|
||||||
|
|
||||||
|
// 点击导航项滚动到对应区块
|
||||||
|
navItems.forEach((item, index) => {
|
||||||
|
item.addEventListener('click', () => {
|
||||||
|
// 移除所有活跃状态
|
||||||
|
navItems.forEach(nav => nav.classList.remove('active'));
|
||||||
|
// 添加当前活跃状态
|
||||||
|
item.classList.add('active');
|
||||||
|
|
||||||
|
// 滚动到对应区块
|
||||||
|
if (sections[index]) {
|
||||||
|
const targetSection = sections[index];
|
||||||
|
const offsetTop = targetSection.offsetTop - 100;
|
||||||
|
|
||||||
|
window.scrollTo({
|
||||||
|
top: offsetTop,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 滚动时更新导航活跃状态
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
let current = '';
|
||||||
|
sections.forEach((section, index) => {
|
||||||
|
const sectionTop = section.offsetTop - 150;
|
||||||
|
if (scrollY >= sectionTop) {
|
||||||
|
current = index;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
navItems.forEach((item, index) => {
|
||||||
|
item.classList.remove('active');
|
||||||
|
if (index === current) {
|
||||||
|
item.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 动画初始化
|
||||||
|
function initAnimations() {
|
||||||
|
// 使用 Intersection Observer 实现滚动动画
|
||||||
|
const observerOptions = {
|
||||||
|
root: null,
|
||||||
|
rootMargin: '0px',
|
||||||
|
threshold: 0.1
|
||||||
|
};
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
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';
|
||||||
|
observer.observe(el);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图片懒加载
|
||||||
|
function initLazyLoading() {
|
||||||
|
const images = document.querySelectorAll('img[data-src]');
|
||||||
|
|
||||||
|
const imageObserver = new IntersectionObserver((entries, observer) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
const img = entry.target;
|
||||||
|
const src = img.getAttribute('data-src');
|
||||||
|
|
||||||
|
// 创建新图片对象来预加载
|
||||||
|
const tempImg = new Image();
|
||||||
|
tempImg.onload = function() {
|
||||||
|
img.src = src;
|
||||||
|
img.classList.add('loaded');
|
||||||
|
};
|
||||||
|
tempImg.onerror = function() {
|
||||||
|
// 如果图片加载失败，使用紫色主题占位图
|
||||||
|
img.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"%3E%3Crect width="400" height="300" fill="%23f5f3ff"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="system-ui" font-size="20" fill="%237c3aed"%3E图片加载中%3C/text%3E%3C/svg%3E';
|
||||||
|
img.classList.add('error');
|
||||||
|
};
|
||||||
|
tempImg.src = src;
|
||||||
|
|
||||||
|
img.removeAttribute('data-src');
|
||||||
|
observer.unobserve(img);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
images.forEach(img => {
|
||||||
|
imageObserver.observe(img);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 平滑滚动
|
||||||
|
function initSmoothScroll() {
|
||||||
|
// 为所有锚点链接添加平滑滚动
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const targetId = this.getAttribute('href');
|
||||||
|
if (targetId === '#') return;
|
||||||
|
|
||||||
|
const target = document.querySelector(targetId);
|
||||||
|
if (target) {
|
||||||
|
target.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'start'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新统计数据 - 半导体检测数据
|
||||||
|
function updateStats() {
|
||||||
|
// 动画数字增长效果 - 半导体AI检测相关数据
|
||||||
|
const stats = [
|
||||||
|
{ selector: '.single-time', value: 6, suffix: '分钟' },
|
||||||
|
{ selector: '.batch-time', value: 1.5, suffix: '小时' },
|
||||||
|
{ selector: '.ai-confidence', value: 94, suffix: '%' },
|
||||||
|
{ selector: '.pass-rate', value: 95, suffix: '%' }
|
||||||
|
];
|
||||||
|
|
||||||
|
stats.forEach(stat => {
|
||||||
|
const element = document.querySelector(stat.selector);
|
||||||
|
if (element) {
|
||||||
|
animateValue(element, 0, stat.value, 2000, stat.suffix);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 数字动画函数
|
||||||
|
function animateValue(element, start, end, duration, suffix = '') {
|
||||||
|
const startTime = performance.now();
|
||||||
|
|
||||||
|
function update(currentTime) {
|
||||||
|
const elapsed = currentTime - startTime;
|
||||||
|
const progress = Math.min(elapsed / duration, 1);
|
||||||
|
|
||||||
|
// 使用缓动函数
|
||||||
|
const easeOutQuad = progress * (2 - progress);
|
||||||
|
let current;
|
||||||
|
|
||||||
|
// 处理小数值（如1.5）
|
||||||
|
if (end < 10 && end % 1 !== 0) {
|
||||||
|
current = (start + (end - start) * easeOutQuad).toFixed(1);
|
||||||
|
} else {
|
||||||
|
current = Math.floor(start + (end - start) * easeOutQuad);
|
||||||
|
}
|
||||||
|
|
||||||
|
element.textContent = current + suffix;
|
||||||
|
|
||||||
|
if (progress < 1) {
|
||||||
|
requestAnimationFrame(update);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
requestAnimationFrame(update);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 错误处理
|
||||||
|
window.addEventListener('error', function(e) {
|
||||||
|
if (e.target.tagName === 'IMG') {
|
||||||
|
console.warn('图片加载失败:', e.target.src);
|
||||||
|
e.target.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"%3E%3Crect width="400" height="300" fill="%23f5f3ff"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="system-ui" font-size="20" fill="%237c3aed"%3E图片暂时无法显示%3C/text%3E%3C/svg%3E';
|
||||||
|
e.target.classList.add('error');
|
||||||
|
}
|
||||||
|
}, true);
|
||||||
|
|
||||||
|
// 移动端优化
|
||||||
|
if ('ontouchstart' in window) {
|
||||||
|
document.body.classList.add('touch-device');
|
||||||
|
|
||||||
|
// 移动端点击优化
|
||||||
|
let touchStartTime;
|
||||||
|
document.addEventListener('touchstart', () => {
|
||||||
|
touchStartTime = Date.now();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('touchend', (e) => {
|
||||||
|
const touchEndTime = Date.now();
|
||||||
|
if (touchEndTime - touchStartTime < 200) {
|
||||||
|
// 快速点击
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 性能监控
|
||||||
|
if (window.performance && window.performance.timing) {
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const timing = window.performance.timing;
|
||||||
|
const loadTime = timing.loadEventEnd - timing.navigationStart;
|
||||||
|
console.log(`页面加载时间: ${loadTime}ms`);
|
||||||
|
|
||||||
|
// 如果加载时间过长，提示用户
|
||||||
|
if (loadTime > 3000) {
|
||||||
|
console.warn('页面加载时间较长，可能需要优化');
|
||||||
|
}
|
||||||
|
}, 0);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 主题切换功能
|
||||||
|
function initThemeToggle() {
|
||||||
|
const themeToggleBtn = document.getElementById('themeToggleBtn');
|
||||||
|
|
||||||
|
// 从localStorage读取用户的主题偏好
|
||||||
|
const savedTheme = localStorage.getItem('theme');
|
||||||
|
// 如果没有保存的偏好，默认使用暗色主题
|
||||||
|
if (savedTheme === 'dark' || savedTheme === null) {
|
||||||
|
document.body.classList.add('dark-theme');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 点击切换主题
|
||||||
|
if (themeToggleBtn) {
|
||||||
|
themeToggleBtn.addEventListener('click', () => {
|
||||||
|
document.body.classList.toggle('dark-theme');
|
||||||
|
|
||||||
|
// 保存用户偏好
|
||||||
|
if (document.body.classList.contains('dark-theme')) {
|
||||||
|
localStorage.setItem('theme', 'dark');
|
||||||
|
} else {
|
||||||
|
localStorage.setItem('theme', 'light');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重新初始化图标以确保正确显示
|
||||||
|
if (typeof lucide !== 'undefined') {
|
||||||
|
lucide.createIcons();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user