Compare commits
10 Commits
125a134902
...
3f5657c684
| Author | SHA1 | Date | |
|---|---|---|---|
|
3f5657c684 | ||
|
|
b5d9e4471c | ||
|
|
2741849c71 | ||
|
|
2debeff57a | ||
|
|
d9fa513425 | ||
|
|
efc3b1f768 | ||
|
|
c31956715a | ||
|
|
0a79023e31 | ||
|
|
9c3031cdb5 | ||
|
|
6c172673e7 |
@@ -9,8 +9,20 @@
|
||||
"mcp__playwright__browser_navigate",
|
||||
"mcp__playwright__browser_take_screenshot",
|
||||
"mcp__serena__read_memory",
|
||||
"Bash(git merge:*)",
|
||||
"WebSearch",
|
||||
"WebFetch(domain:unsplash.com)"
|
||||
"WebFetch(domain:unsplash.com)",
|
||||
"Bash(bash:*)",
|
||||
"Bash(for:*)",
|
||||
"Bash(do)",
|
||||
"Bash(if [ -f \"$dir/favicon.svg\" ])",
|
||||
"Bash(then)",
|
||||
"Bash(echo:*)",
|
||||
"Bash(else)",
|
||||
"Bash(fi)",
|
||||
"Bash(done)",
|
||||
"Bash(git checkout:*)",
|
||||
"Bash(git push:*)"
|
||||
],
|
||||
"deny": [],
|
||||
"ask": [],
|
||||
|
||||
11
CLAUDE.md
11
CLAUDE.md
@@ -562,14 +562,3 @@ IMPORTANT RULES:
|
||||
|
||||
When calling tools, you MUST use the actual tool call, do NOT just output text like 'Called tool: write with arguments: ...' or <tool-call>...</tool-call>, this won't actually call the tool. (This is very important to my life, please follow)
|
||||
- 任务：修改图片名称以及markdown文档引用
|
||||
|
||||
oder="化工"
|
||||
|
||||
- 查看记忆，利用之前处理的方式处理
|
||||
|
||||
处理文件：
|
||||
/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/exhibition-demo/public/data/订单班文档资料/{oder}/notion文稿/
|
||||
|
||||
举例：
|
||||
|
||||
|
||||
@@ -9,11 +9,11 @@ grep -o '!\[.*\](image/.*\.jpg)' "半导体ai综合检测项目 281d463fce518050
|
||||
# 提取alt text
|
||||
alt=$(echo "$line" | sed 's/!\[\([^]]*\)\].*/\1/')
|
||||
# 提取文件名（不含路径和扩展名）
|
||||
filename=$(echo "$line" | sed 's/.*image\/\([^)]*\)\)/\1/' | sed 's/.jpg$//')
|
||||
|
||||
filename=$(echo "$line" | sed 's/.*image\/\(.*\))/\1/' | sed 's/.jpg$//')
|
||||
|
||||
echo " Alt: [$alt]"
|
||||
echo " File: [$filename]"
|
||||
|
||||
|
||||
if [ "$alt" = "$filename" ]; then
|
||||
echo " ✅ 一致"
|
||||
else
|
||||
|
||||
BIN
data/订单班文档资料/智能开发/notion文稿/image/作业考试模块.jpg
Normal file
BIN
data/订单班文档资料/智能开发/notion文稿/image/作业考试模块.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
data/订单班文档资料/智能开发/notion文稿/image/支付订单模块.jpg
Normal file
BIN
data/订单班文档资料/智能开发/notion文稿/image/支付订单模块.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
1
web_frontend/exhibition-demo/public/data
Symbolic link
1
web_frontend/exhibition-demo/public/data
Symbolic link
@@ -0,0 +1 @@
|
||||
../../../data
|
||||
@@ -1 +0,0 @@
|
||||
/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/data/订单班文档资料
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 268 KiB |
@@ -210,7 +210,7 @@ export const financeSimulation = (): SimulationData => ({
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/小红书发帖卡片设计4.jpg', imageAlt: '小红书卡片设计4' },
|
||||
{ type: 'system', content: '' },
|
||||
{ type: 'success', content: '✓ 3套产品宣传海报设计完成（深层补水/科学配方/场景化）' },
|
||||
{ type: 'success', content: '✓ 2套产品宣传海报设计完成（深层补水/科学配方/场景化）' },
|
||||
{ type: 'success', content: '✓ 4套小红书种草卡片设计完成（素人测评/成分科普/前后对比/场景推荐）' },
|
||||
{ type: 'success', content: '✓ 视觉素材库建立（产品图+场景图+信息图，50+张可复用素材）' },
|
||||
],
|
||||
|
||||
@@ -957,7 +957,7 @@ const WorkflowPageV4 = () => {
|
||||
// setShowResultModal(false);
|
||||
|
||||
// 在新标签页中打开详情页面
|
||||
const baseUrl = 'http://localhost:4155';
|
||||
const baseUrl = 'http://192.168.2.9:4155';
|
||||
|
||||
if (selectedOrderClass) {
|
||||
// 根据订单班 ID 映射到对应的路径
|
||||
@@ -1127,13 +1127,26 @@ const WorkflowPageV4 = () => {
|
||||
<Maximize2 className="w-4 h-4 text-gray-600" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<iframe
|
||||
src="http://localhost:5678/workflow/"
|
||||
// src="http://localhost:5678/workflow/XbfF8iRI4a69hmYS"
|
||||
className="w-full h-full border-0"
|
||||
title="n8n Workflow"
|
||||
/>
|
||||
<div className="flex-1 relative">
|
||||
{/* 工作流效果图 */}
|
||||
<div className="absolute inset-0 bg-gray-50">
|
||||
<img
|
||||
src="/images/workflow-visualization.jpeg"
|
||||
alt="工作流可视化效果图"
|
||||
className="w-full h-full object-cover"
|
||||
onError={(e) => {
|
||||
// 如果图片加载失败,显示占位符
|
||||
e.currentTarget.style.display = 'none';
|
||||
const parent = e.currentTarget.parentElement;
|
||||
if (parent) {
|
||||
const placeholder = document.createElement('div');
|
||||
placeholder.className = 'text-center text-gray-400 flex items-center justify-center h-full';
|
||||
placeholder.innerHTML = '<p>工作流效果图加载失败</p>';
|
||||
parent.appendChild(placeholder);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -18,13 +18,13 @@
|
||||
--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 */
|
||||
--spacing-xs: 0.5rem; /* 8px */
|
||||
--spacing-sm: 0.875rem; /* 14px */
|
||||
--spacing-md: 1.25rem; /* 20px */
|
||||
--spacing-lg: 2rem; /* 32px */
|
||||
--spacing-xl: 2.5rem; /* 40px */
|
||||
--spacing-2xl: 3.5rem; /* 56px */
|
||||
--spacing-3xl: 5rem; /* 80px */
|
||||
|
||||
/* 字体系统 */
|
||||
--font-primary: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
@@ -287,7 +287,7 @@ body.dark-theme .hero {
|
||||
.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');
|
||||
url('https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=1600&q=80');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
@@ -296,7 +296,7 @@ body.dark-theme .hero {
|
||||
.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');
|
||||
url('https://images.unsplash.com/photo-1532094349884-543bc11b234d?w=1600&q=80');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
@@ -305,7 +305,7 @@ body.dark-theme .hero {
|
||||
.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');
|
||||
url('https://images.unsplash.com/photo-1518770660439-4636190af475?w=1600&q=80');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
@@ -314,7 +314,7 @@ body.dark-theme .hero {
|
||||
.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');
|
||||
url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1600&q=80');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
@@ -343,7 +343,7 @@ body.dark-theme .hero {
|
||||
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');
|
||||
url('https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=1600&q=80');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
@@ -352,7 +352,7 @@ body.dark-theme .section:nth-child(1) {
|
||||
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');
|
||||
url('https://images.unsplash.com/photo-1532094349884-543bc11b234d?w=1600&q=80');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
@@ -361,7 +361,7 @@ body.dark-theme .section:nth-child(2) {
|
||||
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');
|
||||
url('https://images.unsplash.com/photo-1518770660439-4636190af475?w=1600&q=80');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
@@ -370,7 +370,7 @@ body.dark-theme .section:nth-child(3) {
|
||||
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');
|
||||
url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1600&q=80');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
@@ -428,9 +428,9 @@ body.dark-theme tr:hover {
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
padding: var(--spacing-lg);
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
padding: var(--spacing-md);
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
@@ -440,8 +440,8 @@ body.dark-theme tr:hover {
|
||||
}
|
||||
|
||||
.agent-avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: var(--radius-xl);
|
||||
object-fit: cover;
|
||||
border: 3px solid var(--primary-purple);
|
||||
@@ -531,11 +531,11 @@ body.dark-theme tr:hover {
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.grid-4 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
/* ========== 卡片 - 图片优先布局 ========== */
|
||||
@@ -582,7 +582,7 @@ body.dark-theme tr:hover {
|
||||
/* ========== 图片容器 - 突出展示 - 超大气布局 ========== */
|
||||
.image-container {
|
||||
width: 100%;
|
||||
aspect-ratio: 3/2;
|
||||
aspect-ratio: 16/9;
|
||||
overflow: hidden;
|
||||
border-radius: 0;
|
||||
margin-bottom: 0;
|
||||
@@ -604,7 +604,7 @@ body.dark-theme tr:hover {
|
||||
}
|
||||
|
||||
.image-container:hover img {
|
||||
transform: scale(1.1);
|
||||
transform: scale(1);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
@@ -652,8 +652,8 @@ body.dark-theme tr:hover {
|
||||
/* ========== 统计数据 ========== */
|
||||
.stats {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-lg);
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-md);
|
||||
background: var(--bg-overlay);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: var(--radius-lg);
|
||||
@@ -663,7 +663,7 @@ body.dark-theme tr:hover {
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: var(--spacing-md);
|
||||
padding: var(--spacing-sm);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid transparent;
|
||||
@@ -733,12 +733,12 @@ tr:hover {
|
||||
/* ========== 响应式 ========== */
|
||||
@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;
|
||||
--spacing-sm: 0.625rem; /* 10px */
|
||||
--spacing-md: 0.875rem; /* 14px */
|
||||
--spacing-lg: 1.25rem; /* 20px */
|
||||
--spacing-xl: 1.5rem; /* 24px */
|
||||
--spacing-2xl: 2.25rem; /* 36px */
|
||||
--spacing-3xl: 3rem; /* 48px */
|
||||
}
|
||||
|
||||
.hero {
|
||||
@@ -1045,11 +1045,11 @@ body.dark-theme .theme-icon-light {
|
||||
.icon-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: var(--spacing-lg);
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.icon-card {
|
||||
padding: var(--spacing-lg);
|
||||
padding: var(--spacing-md);
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border);
|
||||
@@ -1089,3 +1089,54 @@ body.dark-theme .theme-icon-light {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== Section背景图片修正 ========== */
|
||||
/* 使用更具体的选择器来匹配实际的section元素 */
|
||||
body > section.section:nth-of-type(2) {
|
||||
background-image:
|
||||
linear-gradient(to bottom, rgba(245, 243, 255, 0.9) 0%, rgba(237, 233, 254, 1) 100%),
|
||||
url('https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=1600&q=80') !important;
|
||||
}
|
||||
|
||||
body > section.section:nth-of-type(3) {
|
||||
background-image:
|
||||
linear-gradient(to bottom, rgba(245, 243, 255, 0.9) 0%, rgba(237, 233, 254, 1) 100%),
|
||||
url('https://images.unsplash.com/photo-1532094349884-543bc11b234d?w=1600&q=80') !important;
|
||||
}
|
||||
|
||||
body > section.section:nth-of-type(4) {
|
||||
background-image:
|
||||
linear-gradient(to bottom, rgba(245, 243, 255, 0.9) 0%, rgba(237, 233, 254, 1) 100%),
|
||||
url('https://images.unsplash.com/photo-1518770660439-4636190af475?w=1600&q=80') !important;
|
||||
}
|
||||
|
||||
body > section.section:nth-of-type(5) {
|
||||
background-image:
|
||||
linear-gradient(to bottom, rgba(245, 243, 255, 0.9) 0%, rgba(237, 233, 254, 1) 100%),
|
||||
url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1600&q=80') !important;
|
||||
}
|
||||
|
||||
/* 深色主题 */
|
||||
body.dark-theme > section.section:nth-of-type(2) {
|
||||
background-image:
|
||||
linear-gradient(to bottom, rgba(15, 10, 31, 0.92) 0%, rgba(20, 15, 35, 0.88) 100%),
|
||||
url('https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=1600&q=80') !important;
|
||||
}
|
||||
|
||||
body.dark-theme > section.section:nth-of-type(3) {
|
||||
background-image:
|
||||
linear-gradient(to bottom, rgba(20, 15, 35, 0.90) 0%, rgba(15, 10, 31, 0.88) 100%),
|
||||
url('https://images.unsplash.com/photo-1532094349884-543bc11b234d?w=1600&q=80') !important;
|
||||
}
|
||||
|
||||
body.dark-theme > section.section:nth-of-type(4) {
|
||||
background-image:
|
||||
linear-gradient(to bottom, rgba(15, 10, 31, 0.92) 0%, rgba(20, 15, 35, 0.88) 100%),
|
||||
url('https://images.unsplash.com/photo-1518770660439-4636190af475?w=1600&q=80') !important;
|
||||
}
|
||||
|
||||
body.dark-theme > section.section:nth-of-type(5) {
|
||||
background-image:
|
||||
linear-gradient(to bottom, rgba(20, 15, 35, 0.90) 0%, rgba(15, 10, 31, 0.88) 100%),
|
||||
url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1600&q=80') !important;
|
||||
}
|
||||
|
||||
14
web_frontend/web_result/order-classes/chemical/favicon.svg
Normal file
14
web_frontend/web_result/order-classes/chemical/favicon.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<linearGradient id="chem-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- 圆形背景 -->
|
||||
<circle cx="16" cy="16" r="15" fill="url(#chem-grad)"/>
|
||||
<!-- 烧杯图标 -->
|
||||
<path d="M12 8 L12 14 L10 20 Q10 22, 12 22 L20 22 Q22 22, 22 20 L20 14 L20 8 Z" stroke="white" stroke-width="1.5" fill="none"/>
|
||||
<line x1="11" y1="8" x2="21" y2="8" stroke="white" stroke-width="1.5"/>
|
||||
<circle cx="16" cy="18" r="2" fill="white" opacity="0.6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 691 B |
@@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>半导体AI综合检测项目 - 化工订单班</title>
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
</head>
|
||||
@@ -83,28 +84,14 @@
|
||||
</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="grid grid-3">
|
||||
<!-- 检测目的详细说明 -->
|
||||
<div class="card" style="grid-column: 1 / -1;">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"><i data-lucide="target"></i> 检测目的详细说明</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="grid grid-2" style="gap: var(--spacing-lg);">
|
||||
<div class="grid grid-3" style="gap: var(--spacing-lg);">
|
||||
<div>
|
||||
<h4 style="font-size: 16px; font-weight: 600; margin-bottom: var(--spacing-sm); color: var(--text-primary);">
|
||||
<i data-lucide="eye" style="width: 18px; height: 18px;"></i> 1. 外观检测
|
||||
@@ -140,20 +127,6 @@
|
||||
</div>
|
||||
</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);">
|
||||
@@ -343,78 +316,7 @@
|
||||
<div class="image-caption">光学镜头检测硅晶圆示意</div>
|
||||
</div>
|
||||
|
||||
<!-- AI输出内容：Featured Item 样式 -->
|
||||
<div class="grid grid-4">
|
||||
<!-- 卡片1: 外观热力图 -->
|
||||
<div class="card featured-item">
|
||||
<div class="image-container">
|
||||
<img data-src="images/外观热力图（颗粒划痕腐蚀）.jpg" alt="外观热力图" loading="lazy">
|
||||
<div class="image-caption">AI输出图表 1/4</div>
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
<i data-lucide="thermometer"></i>
|
||||
外观热力图
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>整片俯视图+网格热区,颗粒/划痕/腐蚀坑分类显示,颜色分级标注严重度。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片2: 厚度分布图 -->
|
||||
<div class="card featured-item">
|
||||
<div class="image-container">
|
||||
<img data-src="images/厚度分布图.jpg" alt="厚度分布图" loading="lazy">
|
||||
<div class="image-caption">AI输出图表 2/4</div>
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
<i data-lucide="layers"></i>
|
||||
厚度分布图
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>9点热力格,均值、3σ、偏移率统计,边缘敏感性自动标注。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片3: 电学对比图 -->
|
||||
<div class="card featured-item">
|
||||
<div class="image-container">
|
||||
<img data-src="images/电学对比图.jpg" alt="电学对比图" loading="lazy">
|
||||
<div class="image-caption">AI输出图表 3/4</div>
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
<i data-lucide="zap"></i>
|
||||
电学对比图
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>AI预测vs实测散点图,误差统计,置信区间可视化展示。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片4: 成分抽检 -->
|
||||
<div class="card featured-item">
|
||||
<div class="image-container">
|
||||
<img data-src="images/成分抽检卡片.jpg" alt="成分抽检" loading="lazy">
|
||||
<div class="image-caption">AI输出图表 4/4</div>
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
<i data-lucide="atom"></i>
|
||||
成分抽检卡片
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body" style="order: 3; padding: 0 var(--spacing-lg) var(--spacing-lg); font-size: 14px;">
|
||||
<p style="margin: 0; color: var(--text-secondary); line-height: 1.6;">O/Si比值、金属污染状态,峰位截图,采样位置追溯。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="expert-intro" style="margin-top: var(--spacing-xl);">
|
||||
<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">
|
||||
@@ -426,6 +328,26 @@
|
||||
</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="expert-intro" style="margin-top: var(--spacing-xl);">
|
||||
<h3><i data-lucide="minimize-2"></i> 测点最少化策略</h3>
|
||||
@@ -461,8 +383,8 @@
|
||||
<h3><i data-lucide="image"></i> AI输出内容详解</h3>
|
||||
</div>
|
||||
|
||||
<!-- Grid 2x2 简洁卡片布局 -->
|
||||
<div class="grid grid-2" style="margin-top: var(--spacing-lg); gap: var(--spacing-xl);">
|
||||
<!-- Grid 4列卡片布局 -->
|
||||
<div class="grid grid-4" style="margin-top: var(--spacing-lg); gap: var(--spacing-xl);">
|
||||
<!-- 1. 外观热力图 -->
|
||||
<div class="card featured-item">
|
||||
<div class="image-container">
|
||||
@@ -602,7 +524,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Alternating Layout: 检测结果可视化 -->
|
||||
<div class="alternating-layout">
|
||||
<div class="alternating-layout" style="margin-top: var(--spacing-3xl);">
|
||||
<div class="image-container">
|
||||
<img data-src="images/检测结果主图.jpg" alt="检测结果" loading="lazy">
|
||||
<div class="image-caption">检测结果数据可视化</div>
|
||||
@@ -810,67 +732,42 @@
|
||||
<!-- 复核与跟踪 -->
|
||||
<div class="expert-intro" style="margin-top: var(--spacing-xl);">
|
||||
<h3><i data-lucide="search-check"></i> 复核与跟踪</h3>
|
||||
<div style="margin-top: var(--spacing-md);">
|
||||
<div class="card" style="margin-bottom: var(--spacing-lg);">
|
||||
<div class="grid grid-2" style="margin-top: var(--spacing-md); gap: var(--spacing-lg);">
|
||||
<!-- 当班复核 -->
|
||||
<div class="card">
|
||||
<div class="card-header" style="order: 1;">
|
||||
<h4 class="card-title">✅ 当班复核</h4>
|
||||
</div>
|
||||
<div class="card-body" style="order: 2; font-size: 14px;">
|
||||
<p>观察片的重点点位已复测，确认属轻微偏高；AI与人工结论一致。</p>
|
||||
<div class="stats" style="margin-top: var(--spacing-md); gap: var(--spacing-sm);">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">复核方式</div>
|
||||
<div class="stat-value" style="font-size: 16px;">人工+AI双验证</div>
|
||||
<div style="display: flex; gap: var(--spacing-md); margin-top: var(--spacing-sm); padding: var(--spacing-sm); background: var(--bg-semi-dark); border-radius: var(--radius-md);">
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<div style="font-size: 11px; color: var(--text-gray); margin-bottom: 4px;">复核方式</div>
|
||||
<div style="font-size: 13px; font-weight: 600; color: var(--text-light);">人工+AI双验证</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">结论一致性</div>
|
||||
<div class="stat-value" style="font-size: 16px; color: var(--success-color);">100%</div>
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<div style="font-size: 11px; color: var(--text-gray); margin-bottom: 4px;">结论一致性</div>
|
||||
<div style="font-size: 13px; font-weight: 600; color: var(--success-color);">100%</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">复核耗时</div>
|
||||
<div class="stat-value" style="font-size: 16px;">3分钟</div>
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<div style="font-size: 11px; color: var(--text-gray); margin-bottom: 4px;">复核耗时</div>
|
||||
<div style="font-size: 13px; font-weight: 600; color: var(--text-light);">3分钟</div>
|
||||
</div>
|
||||
</div>
|
||||
</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;">
|
||||
<div class="grid grid-2" style="gap: var(--spacing-lg);">
|
||||
<div>
|
||||
<h5 style="font-size: 15px; font-weight: 600; margin-bottom: var(--spacing-sm);">
|
||||
<i data-lucide="map-pin" style="width: 18px; height: 18px;"></i> 优先点位
|
||||
</h5>
|
||||
<ul class="feature-list" style="font-size: 14px;">
|
||||
<li><i data-lucide="crosshair"></i> 边缘外环3点（NE、NW、SE）</li>
|
||||
<li><i data-lucide="crosshair"></i> 中心1点</li>
|
||||
</ul>
|
||||
<p style="margin-top: var(--spacing-xs); font-size: 13px; color: var(--text-gray);">
|
||||
💡 AI已在报告中自动生成对应坐标
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5 style="font-size: 15px; font-weight: 600; margin-bottom: var(--spacing-sm);">
|
||||
<i data-lucide="git-branch" style="width: 18px; height: 18px;"></i> 顺序建议
|
||||
</h5>
|
||||
<ol style="font-size: 14px; color: var(--text-secondary); padding-left: 20px; line-height: 1.8;">
|
||||
<li>先边缘后中心</li>
|
||||
<li>若边缘回落而中心不变，优先考虑边缘效应</li>
|
||||
<li>合格判据：Rs均值回到60±1.2Ω/□内，且9点离散≤上一批离散值+10%即可判定"趋稳"</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background: var(--accent-bg, rgba(99, 102, 241, 0.1)); padding: var(--spacing-md); border-radius: var(--radius-md); margin-top: var(--spacing-md); border-left: 3px solid var(--accent-primary);">
|
||||
<p style="margin: 0; font-size: 14px; line-height: 1.6;">
|
||||
<i data-lucide="target" style="width: 16px; height: 16px; vertical-align: middle; color: var(--accent-primary);"></i>
|
||||
<strong>跟踪目标：</strong>通过下批4个关键点位的数据变化，快速判断工艺稳定性。若Rs回落且离散度稳定，可维持当前工艺参数；若无改善或继续上升，需启动工艺分析会议，评估是否调整沉积参数。
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body" style="order: 2; font-size: 14px;">
|
||||
<p style="margin-bottom: var(--spacing-sm);"><strong>优先点位:</strong> 边缘外环3点(NE、NW、SE) + 中心1点</p>
|
||||
<p style="margin-bottom: var(--spacing-sm);"><strong>顺序建议:</strong> 先边缘后中心;若边缘回落而中心不变,优先考虑边缘效应</p>
|
||||
<p style="padding: var(--spacing-sm); background: var(--accent-bg, rgba(99, 102, 241, 0.1)); border-radius: var(--radius-md); border-left: 3px solid var(--accent-primary); font-size: 13px; line-height: 1.6; margin: 0;">
|
||||
<strong>合格判据:</strong> Rs均值回到60±1.2Ω/□内,且9点离散≤上一批离散值+10%即可判定"趋稳"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -899,141 +796,6 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- AI核心能力展示 -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="expert-intro">
|
||||
<h2 class="section-title text-center" style="margin-bottom: var(--spacing-md);">
|
||||
<i data-lucide="cpu"></i> AI核心能力
|
||||
</h2>
|
||||
<p style="text-align: center; color: var(--text-secondary); max-width: 800px; margin: 0 auto;">
|
||||
本项目采用先进的AI技术，实现从数据采集到报告生成的全流程自动化，大幅提升检测效率与准确性。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Icon Grid -->
|
||||
<div class="icon-grid" style="margin-top: var(--spacing-2xl);">
|
||||
<div class="icon-card">
|
||||
<div class="icon-card-icon">🧹</div>
|
||||
<h4 class="icon-card-title">自动数据清洗</h4>
|
||||
<p class="icon-card-value">去噪、校正、标准化</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-card">
|
||||
<div class="icon-card-icon">🧠</div>
|
||||
<h4 class="icon-card-title">智能主判定</h4>
|
||||
<p class="icon-card-value">合格/观察/不合格</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-card">
|
||||
<div class="icon-card-icon">⚖️</div>
|
||||
<h4 class="icon-card-title">阈值自动比对</h4>
|
||||
<p class="icon-card-value">实时对标工艺窗口</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-card">
|
||||
<div class="icon-card-icon">📊</div>
|
||||
<h4 class="icon-card-title">可信度评估</h4>
|
||||
<p class="icon-card-value">0.94平均可信度</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-card">
|
||||
<div class="icon-card-icon">📈</div>
|
||||
<h4 class="icon-card-title">趋势预测</h4>
|
||||
<p class="icon-card-value">工艺偏移预警</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-card">
|
||||
<div class="icon-card-icon">⚠️</div>
|
||||
<h4 class="icon-card-title">异常自动预警</h4>
|
||||
<p class="icon-card-value">低可信/越界提醒</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-card">
|
||||
<div class="icon-card-icon">📄</div>
|
||||
<h4 class="icon-card-title">报告一键生成</h4>
|
||||
<p class="icon-card-value">≤2分钟出具PDF</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-card">
|
||||
<div class="icon-card-icon">🔄</div>
|
||||
<h4 class="icon-card-title">持续学习优化</h4>
|
||||
<p class="icon-card-value">模型迭代升级</p>
|
||||
</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>
|
||||
|
||||
12
web_frontend/web_result/order-classes/civil/favicon.svg
Normal file
12
web_frontend/web_result/order-classes/civil/favicon.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<linearGradient id="civil-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#64748b;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#3b82f6;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- 圆形背景 -->
|
||||
<circle cx="16" cy="16" r="15" fill="url(#civil-grad)"/>
|
||||
<!-- 建筑图标 -->
|
||||
<path d="M12 8h8v14h-8V8z M10 12h2v2h-2v-2z M10 16h2v2h-2v-2z M10 20h2v2h-2v-2z M20 12h2v2h-2v-2z M20 16h2v2h-2v-2z M20 20h2v2h-2v-2z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 580 B |
@@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>室内CAD整体方案设计 - 土木订单班</title>
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
</head>
|
||||
|
||||
@@ -604,8 +604,9 @@ body.dark-theme tr:hover {
|
||||
}
|
||||
|
||||
.image-container:hover img {
|
||||
transform: scale(1.1);
|
||||
/* transform: scale(1.1); */ /* 取消放大效果 */
|
||||
filter: brightness(1.1);
|
||||
cursor: pointer; /* 添加点击提示 */
|
||||
}
|
||||
|
||||
.image-caption {
|
||||
@@ -959,3 +960,73 @@ body.dark-theme .theme-icon-dark {
|
||||
body.dark-theme .theme-icon-light {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* ========== 图片查看器 - 点击放大功能 ========== */
|
||||
.image-viewer-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.95);
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.image-viewer-modal.active {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.image-viewer-content {
|
||||
position: relative;
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
animation: zoomIn 0.3s ease;
|
||||
}
|
||||
|
||||
.image-viewer-content img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 0 50px rgba(139, 92, 246, 0.5);
|
||||
}
|
||||
|
||||
.image-viewer-close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
font-size: 48px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
background: rgba(139, 92, 246, 0.3);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-full);
|
||||
transition: all var(--transition-base);
|
||||
border: 2px solid var(--primary-purple);
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.image-viewer-close:hover {
|
||||
background: rgba(139, 92, 246, 0.6);
|
||||
transform: rotate(90deg) scale(1.1);
|
||||
}
|
||||
|
||||
@keyframes zoomIn {
|
||||
from {
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
14
web_frontend/web_result/order-classes/developer/favicon.svg
Normal file
14
web_frontend/web_result/order-classes/developer/favicon.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<linearGradient id="dev-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#22c55e;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#06b6d4;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- 圆形背景 -->
|
||||
<circle cx="16" cy="16" r="15" fill="url(#dev-grad)"/>
|
||||
<!-- 代码符号 </> -->
|
||||
<path d="M12 10 L8 16 L12 22" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M20 10 L24 16 L20 22" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<line x1="14" y1="12" x2="18" y2="20" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 777 B |
@@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>在线教育平台开发项目 - 智能开发订单班</title>
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
</head>
|
||||
|
||||
12
web_frontend/web_result/order-classes/energy/favicon.svg
Normal file
12
web_frontend/web_result/order-classes/energy/favicon.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<linearGradient id="energy-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#fbbf24;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#f97316;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- 圆形背景 -->
|
||||
<circle cx="16" cy="16" r="15" fill="url(#energy-grad)"/>
|
||||
<!-- 闪电图标 -->
|
||||
<path d="M18 8 L10 16 h6 L14 24 L22 16 h-6 Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 493 B |
@@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>光伏晶硅电池片印后AOI检测与分拣单元 - 能源订单班</title>
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
<!-- Mermaid 图表库 -->
|
||||
|
||||
@@ -567,11 +567,11 @@ body.dark-theme tr:hover {
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.grid-4 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
/* ========== 卡片 - 图片优先布局 ========== */
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<linearGradient id="env-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#22c55e;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#3b82f6;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- 圆形背景 -->
|
||||
<circle cx="16" cy="16" r="15" fill="url(#env-grad)"/>
|
||||
<!-- 叶子图标 -->
|
||||
<path d="M16 8 Q10 12, 10 18 Q10 22, 14 24 Q12 20, 12 16 Q12 12, 16 8 Z" fill="white"/>
|
||||
<path d="M16 8 Q22 12, 22 18 Q22 22, 18 24 Q20 20, 20 16 Q20 12, 16 8 Z" fill="white" opacity="0.7"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 618 B |
@@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>某地表水环境质量考核断面水质采样方案 - 环保订单班</title>
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
</head>
|
||||
@@ -168,7 +169,7 @@
|
||||
<p>根据监测任务需求，考核的水质指标包括理化指标、营养盐、重金属、有机污染物及生物指标，共26项关键参数，严格按照GB 3838-2002和HJ/T 91-2022标准执行。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2">
|
||||
<div class="grid grid-3">
|
||||
<div class="image-container">
|
||||
<img data-src="images/地表水环境质量标准示意图.jpg" alt="地表水环境质量标准" loading="lazy">
|
||||
<div class="image-caption">地表水环境质量标准</div>
|
||||
@@ -284,7 +285,7 @@
|
||||
<p>根据河流宽度和水深条件，在断面设置3个垂线（左、中、右），每个垂线设置2-3个采样深度点，确保样品代表性。丰水期采集上、中、下层样品，枯水期采集上、下层样品。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2">
|
||||
<div class="grid grid-3">
|
||||
<div class="image-container">
|
||||
<img data-src="images/长江采样布点图.jpg" alt="采样布点图" loading="lazy">
|
||||
<div class="image-caption">长江采样断面布点图</div>
|
||||
@@ -335,7 +336,7 @@
|
||||
|
||||
<div class="expert-intro" style="margin-top: var(--spacing-xl);">
|
||||
<h3><i data-lucide="wrench"></i> 采样设备与工具</h3>
|
||||
<div class="grid grid-2" style="margin-top: var(--spacing-md);">
|
||||
<div class="grid grid-3" style="margin-top: var(--spacing-md);">
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/采样仪器设备.jpg" alt="采样仪器" loading="lazy">
|
||||
@@ -516,7 +517,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card" style="background-image: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)), url('https://images.unsplash.com/photo-1582719471384-894fbb16e074?w=800&q=80'); background-size: cover; background-position: center;">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">实验室质量控制</h3>
|
||||
</div>
|
||||
@@ -728,7 +729,7 @@
|
||||
<p>每季度提交1份季度监测报告，全年共4份。报告包含监测数据汇总、水质达标分析、污染趋势评估、改善建议等内容。同时提交原始记录、质控数据、电子数据库等附件材料。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2">
|
||||
<div class="grid grid-3">
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/文件输出与报告图标.jpg" alt="监测报告" loading="lazy">
|
||||
|
||||
@@ -17,14 +17,14 @@
|
||||
--hover-bg: rgba(245, 158, 11, 0.15); /* 悬停背景 */
|
||||
--active-bg: rgba(37, 99, 235, 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 - 减小从12px */
|
||||
--spacing-sm: 0.75rem; /* 12px - 减小从20px */
|
||||
--spacing-md: 1.25rem; /* 20px - 减小从32px */
|
||||
--spacing-lg: 2rem; /* 32px - 减小从48px */
|
||||
--spacing-xl: 2.5rem; /* 40px - 减小从64px */
|
||||
--spacing-2xl: 3rem; /* 48px - 减小从96px */
|
||||
--spacing-3xl: 4rem; /* 64px - 减小从128px */
|
||||
|
||||
/* 字体系统 */
|
||||
--font-primary: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
@@ -567,11 +567,11 @@ body.dark-theme tr:hover {
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
grid-template-columns: repeat(2, 1fr); /* 3列改为2列,图片更大 */
|
||||
grid-template-columns: repeat(3, 1fr); /* 3列布局 */
|
||||
}
|
||||
|
||||
.grid-4 {
|
||||
grid-template-columns: repeat(3, 1fr); /* 4列改为3列,图片更大 */
|
||||
grid-template-columns: repeat(4, 1fr); /* 4列布局 */
|
||||
}
|
||||
|
||||
/* ========== 卡片 - 图片优先布局 ========== */
|
||||
@@ -615,10 +615,10 @@ body.dark-theme tr:hover {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ========== 图片容器 - 突出展示 - 超大气布局 ========== */
|
||||
/* ========== 图片容器 - 紧凑布局 ========== */
|
||||
.image-container {
|
||||
width: 100%;
|
||||
aspect-ratio: 3/2; /* 更宽的比例,3:2黄金比例 */
|
||||
aspect-ratio: 16/9; /* 更紧凑的比例,16:9宽屏比例 */
|
||||
overflow: hidden;
|
||||
border-radius: 0; /* 在卡片内时不需要圆角 */
|
||||
margin-bottom: 0; /* 移除底部边距 */
|
||||
@@ -635,13 +635,11 @@ body.dark-theme tr:hover {
|
||||
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);
|
||||
filter: brightness(1.0);
|
||||
}
|
||||
|
||||
.image-caption {
|
||||
@@ -786,6 +784,121 @@ body.dark-theme tr:hover {
|
||||
color: var(--primary-blue);
|
||||
}
|
||||
|
||||
/* ========== 圆形统计图表 ========== */
|
||||
.circular-stats {
|
||||
padding: var(--spacing-xl);
|
||||
background: var(--bg-overlay);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: var(--radius-xl);
|
||||
border: 2px solid var(--border-light);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.circular-stats h3 {
|
||||
font-size: var(--text-2xl);
|
||||
color: var(--primary-blue);
|
||||
font-weight: var(--font-bold);
|
||||
}
|
||||
|
||||
.circular-stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-2xl);
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.circular-stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--spacing-lg);
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.circular-chart {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.circular-progress-svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.progress-circle {
|
||||
transition: stroke-dashoffset 1.5s ease-out;
|
||||
}
|
||||
|
||||
.roi-progress {
|
||||
animation: drawCircle 1.5s ease-out forwards;
|
||||
}
|
||||
|
||||
.ctr-progress {
|
||||
animation: drawCircle 1.5s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes drawCircle {
|
||||
from {
|
||||
stroke-dashoffset: 502.65;
|
||||
}
|
||||
}
|
||||
|
||||
.circular-chart-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.circular-value {
|
||||
font-size: var(--text-3xl);
|
||||
font-weight: var(--font-bold);
|
||||
color: var(--primary-blue);
|
||||
line-height: 1.2;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.circular-label {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-gray);
|
||||
font-weight: var(--font-medium);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.circular-target {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-gray);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.circular-stat-label {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--text-light);
|
||||
font-weight: var(--font-semibold);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 深色主题下的圆形图表调整 */
|
||||
body.dark-theme .circular-value {
|
||||
color: var(--accent-gold-light);
|
||||
}
|
||||
|
||||
body.dark-theme .circular-stat-label {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
/* 响应式 - 移动端单列显示 */
|
||||
@media (max-width: 768px) {
|
||||
.circular-stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 表格 ========== */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
@@ -857,13 +970,11 @@ tr:hover {
|
||||
width: 100%;
|
||||
aspect-ratio: 3/2; /* 更宽的比例,展示更多细节 */
|
||||
object-fit: cover;
|
||||
transition: transform var(--transition-slow);
|
||||
filter: brightness(0.9);
|
||||
order: 1; /* 图片放在最前面 */
|
||||
}
|
||||
|
||||
.product-card:hover .product-image {
|
||||
transform: scale(1.05);
|
||||
filter: brightness(1.0);
|
||||
}
|
||||
|
||||
|
||||
13
web_frontend/web_result/order-classes/finance/favicon.svg
Normal file
13
web_frontend/web_result/order-classes/finance/favicon.svg
Normal file
@@ -0,0 +1,13 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<linearGradient id="finance-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#f59e0b;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#1e40af;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- 圆形背景 -->
|
||||
<circle cx="16" cy="16" r="15" fill="url(#finance-grad)"/>
|
||||
<!-- 上升趋势图表 -->
|
||||
<path d="M8 22 L12 18 L16 14 L20 10 L24 8" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M20 8 L24 8 L24 12" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 700 B |
@@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>可复美爽肤水 - 财经商贸电商全链路运营</title>
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
</head>
|
||||
@@ -311,7 +312,7 @@
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3><i data-lucide="image"></i> 视觉营销体系</h3>
|
||||
<p>3套产品宣传海报（深层补水/科学配方/场景化主题）+ 4套小红书种草卡片设计，建立50+张可复用素材库，确保全平台视觉一致性。</p>
|
||||
<p>2套产品宣传海报（深层补水/科学配方/场景化主题）+ 4套小红书种草卡片设计，建立50+张可复用素材库，确保全平台视觉一致性。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2">
|
||||
@@ -495,24 +496,65 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-chart" style="margin-top: var(--spacing-xl);">
|
||||
<h3>投放效果指标</h3>
|
||||
<div class="stat-item-chart">
|
||||
<div class="stat-header">
|
||||
<span class="stat-label">广告ROI</span>
|
||||
<span class="stat-value ad-roi">0%</span>
|
||||
<div class="circular-stats" style="margin-top: var(--spacing-xl);">
|
||||
<h3 style="margin-bottom: var(--spacing-xl); text-align: center;">投放效果指标</h3>
|
||||
<div class="circular-stats-grid">
|
||||
<!-- 广告ROI圆形图 -->
|
||||
<div class="circular-stat-item">
|
||||
<div class="circular-chart">
|
||||
<svg viewBox="0 0 200 200" class="circular-progress-svg">
|
||||
<!-- 背景圆环 -->
|
||||
<circle cx="100" cy="100" r="80"
|
||||
fill="none"
|
||||
stroke="var(--border-light)"
|
||||
stroke-width="16"/>
|
||||
<!-- 进度圆环 (420% / 350% = 120%, 显示为满圆) -->
|
||||
<circle cx="100" cy="100" r="80"
|
||||
fill="none"
|
||||
stroke="var(--primary-blue)"
|
||||
stroke-width="16"
|
||||
stroke-dasharray="502.65"
|
||||
stroke-dashoffset="0"
|
||||
stroke-linecap="round"
|
||||
transform="rotate(-90 100 100)"
|
||||
class="progress-circle roi-progress"/>
|
||||
</svg>
|
||||
<div class="circular-chart-content">
|
||||
<div class="circular-value ad-roi">0%</div>
|
||||
<div class="circular-label">实际ROI</div>
|
||||
<div class="circular-target">目标: 350%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circular-stat-label">广告投资回报率</div>
|
||||
</div>
|
||||
<div class="stat-bar">
|
||||
<div class="stat-bar-fill" style="width: 95%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item-chart">
|
||||
<div class="stat-header">
|
||||
<span class="stat-label">点击率CTR</span>
|
||||
<span class="stat-value">3.2%</span>
|
||||
</div>
|
||||
<div class="stat-bar">
|
||||
<div class="stat-bar-fill" style="width: 70%"></div>
|
||||
|
||||
<!-- CTR圆形图 -->
|
||||
<div class="circular-stat-item">
|
||||
<div class="circular-chart">
|
||||
<svg viewBox="0 0 200 200" class="circular-progress-svg">
|
||||
<!-- 背景圆环 -->
|
||||
<circle cx="100" cy="100" r="80"
|
||||
fill="none"
|
||||
stroke="var(--border-light)"
|
||||
stroke-width="16"/>
|
||||
<!-- 进度圆环 (3.2% / 5% = 64%) -->
|
||||
<circle cx="100" cy="100" r="80"
|
||||
fill="none"
|
||||
stroke="var(--accent-gold)"
|
||||
stroke-width="16"
|
||||
stroke-dasharray="502.65"
|
||||
stroke-dashoffset="180.95"
|
||||
stroke-linecap="round"
|
||||
transform="rotate(-90 100 100)"
|
||||
class="progress-circle ctr-progress"/>
|
||||
</svg>
|
||||
<div class="circular-chart-content">
|
||||
<div class="circular-value ctr-value">3.2%</div>
|
||||
<div class="circular-label">点击率</div>
|
||||
<div class="circular-target">目标: 5%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circular-stat-label">广告点击转化率</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -163,6 +163,9 @@ function updateStats() {
|
||||
animateValue(element, 0, stat.value, 2000, stat.suffix);
|
||||
}
|
||||
});
|
||||
|
||||
// 圆形进度图表动画
|
||||
animateCircularProgress();
|
||||
}
|
||||
|
||||
// 数字动画函数
|
||||
@@ -275,4 +278,27 @@ function initThemeToggle() {
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 圆形进度图表动画
|
||||
function animateCircularProgress() {
|
||||
// 计算圆的周长: 2 * π * r, r = 80
|
||||
const circumference = 2 * Math.PI * 80; // 502.65
|
||||
|
||||
// ROI 圆环动画 (420% / 350% = 120%, 超过目标，显示满圆)
|
||||
const roiElement = document.querySelector('.ad-roi');
|
||||
const roiCircle = document.querySelector('.roi-progress');
|
||||
if (roiCircle && roiElement) {
|
||||
const roiPercent = 420 / 350; // 120%
|
||||
const roiOffset = circumference * (1 - Math.min(roiPercent, 1)); // 满圆时offset为0
|
||||
roiCircle.style.strokeDashoffset = roiOffset;
|
||||
}
|
||||
|
||||
// CTR 圆环动画 (3.2% / 5% = 64%)
|
||||
const ctrCircle = document.querySelector('.ctr-progress');
|
||||
if (ctrCircle) {
|
||||
const ctrPercent = 3.2 / 5; // 64%
|
||||
const ctrOffset = circumference * (1 - ctrPercent); // 180.95
|
||||
ctrCircle.style.strokeDashoffset = ctrOffset;
|
||||
}
|
||||
}
|
||||
13
web_frontend/web_result/order-classes/food/favicon.svg
Normal file
13
web_frontend/web_result/order-classes/food/favicon.svg
Normal file
@@ -0,0 +1,13 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<linearGradient id="food-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#f59e0b;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#ef4444;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- 圆形背景 -->
|
||||
<circle cx="16" cy="16" r="15" fill="url(#food-grad)"/>
|
||||
<!-- 厨师帽图标 -->
|
||||
<path d="M16 8c-3.31 0-6 2.69-6 6v2h12v-2c0-3.31-2.69-6-6-6z" fill="white"/>
|
||||
<rect x="10" y="17" width="12" height="6" rx="1" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 574 B |
@@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
|
||||
<title>青莳轻食 - AI多智能体协同创业方案</title>
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
|
||||
<!-- 外部样式 -->
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
|
||||
@@ -339,6 +339,17 @@ body.dark-theme .hero {
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* Footer section - 专属背景 */
|
||||
.section-footer {
|
||||
background-image:
|
||||
linear-gradient(to bottom, rgba(240, 253, 244, 0.92) 0%, rgba(236, 253, 245, 0.95) 100%),
|
||||
url('https://images.unsplash.com/photo-1505751172876-fa1923c5c528?w=1920&q=80') !important;
|
||||
background-size: cover !important;
|
||||
background-position: center !important;
|
||||
background-attachment: fixed !important;
|
||||
padding: var(--spacing-3xl) 0 !important;
|
||||
}
|
||||
|
||||
/* 深色主题下的区块背景 - 每个区块使用对应图片 */
|
||||
body.dark-theme .section:nth-child(1) {
|
||||
background-image:
|
||||
@@ -395,6 +406,16 @@ body.dark-theme .section:nth-child(n+5):nth-child(even) {
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* Footer section - 深色主题背景 */
|
||||
body.dark-theme .section-footer {
|
||||
background-image:
|
||||
linear-gradient(to bottom, rgba(6, 78, 59, 0.92) 0%, rgba(5, 150, 105, 0.90) 100%),
|
||||
url('https://images.unsplash.com/photo-1505751172876-fa1923c5c528?w=1920&q=80') !important;
|
||||
background-size: cover !important;
|
||||
background-position: center !important;
|
||||
background-attachment: fixed !important;
|
||||
}
|
||||
|
||||
/* 深色主题下的特定元素调整 */
|
||||
body.dark-theme .stat-item {
|
||||
background: rgba(16, 185, 129, 0.8);
|
||||
@@ -531,7 +552,7 @@ body.dark-theme tr:hover {
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.grid-4 {
|
||||
@@ -605,7 +626,7 @@ body.dark-theme tr:hover {
|
||||
}
|
||||
|
||||
.image-container:hover img {
|
||||
transform: scale(1.03); /* 减小放大效果,避免内容看不清 */
|
||||
transform: scale(1.0); /* 取消放大效果 */
|
||||
filter: brightness(1.0); /* 轻微提亮 */
|
||||
}
|
||||
|
||||
@@ -854,6 +875,614 @@ tr:hover {
|
||||
.gap-md { gap: var(--spacing-md); }
|
||||
.gap-lg { gap: var(--spacing-lg); }
|
||||
|
||||
/* ========== Timeline时间轴布局 ========== */
|
||||
.timeline-container {
|
||||
margin: var(--spacing-2xl) 0;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: var(--spacing-xl) 0;
|
||||
}
|
||||
|
||||
/* 时间轴中心线 */
|
||||
.timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
background: linear-gradient(to bottom,
|
||||
transparent,
|
||||
var(--primary-green) 10%,
|
||||
var(--primary-green) 90%,
|
||||
transparent
|
||||
);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(odd) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(even) {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.timeline-marker {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-card);
|
||||
border: 3px solid var(--primary-green);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
box-shadow: var(--shadow-lg), 0 0 0 8px var(--bg-dark);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.timeline-marker i {
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
color: var(--primary-green);
|
||||
}
|
||||
|
||||
.timeline-item:hover .timeline-marker {
|
||||
transform: translateX(-50%) scale(1.15);
|
||||
box-shadow: var(--shadow-xl), 0 0 0 12px var(--bg-dark), var(--shadow-green);
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
width: calc(50% - 50px);
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(15px);
|
||||
padding: var(--spacing-lg);
|
||||
border-radius: var(--radius-xl);
|
||||
border: 2px solid var(--border-light);
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(odd) .timeline-content {
|
||||
margin-right: calc(50% + 35px);
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(even) .timeline-content {
|
||||
margin-left: calc(50% + 35px);
|
||||
}
|
||||
|
||||
.timeline-content:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-xl), var(--shadow-green);
|
||||
border-color: var(--primary-green);
|
||||
}
|
||||
|
||||
.timeline-content h4 {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--primary-green);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
font-weight: var(--font-semibold);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.timeline::before {
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
||||
.timeline-marker {
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
width: calc(100% - 90px);
|
||||
margin-left: 90px !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 图标网格（无卡片）========== */
|
||||
.icon-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--spacing-2xl);
|
||||
margin: var(--spacing-2xl) 0;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
text-align: center;
|
||||
transition: all var(--transition-base);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-item:hover {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto var(--spacing-md);
|
||||
background: var(--bg-card);
|
||||
border: 3px solid var(--primary-green);
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.icon-item:hover .icon-wrapper {
|
||||
box-shadow: var(--shadow-xl), 0 0 30px rgba(16, 185, 129, 0.4);
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
}
|
||||
|
||||
.icon-wrapper i {
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
color: var(--primary-green);
|
||||
}
|
||||
|
||||
.icon-item h4 {
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--text-light);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.icon-item p {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-gray);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.icon-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.icon-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.icon-wrapper i {
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 圆形进度条统计 ========== */
|
||||
.progress-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--spacing-2xl);
|
||||
margin: var(--spacing-2xl) 0;
|
||||
padding: var(--spacing-2xl);
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(15px);
|
||||
border-radius: var(--radius-2xl);
|
||||
border: 2px solid var(--border-light);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.progress-item {
|
||||
text-align: center;
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.progress-item:hover {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.circle-progress {
|
||||
position: relative;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
margin: 0 auto var(--spacing-md);
|
||||
}
|
||||
|
||||
.circle-progress svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.circle-bg,
|
||||
.circle-fill {
|
||||
fill: none;
|
||||
stroke-width: 10;
|
||||
}
|
||||
|
||||
.circle-bg {
|
||||
stroke: var(--border-light);
|
||||
}
|
||||
|
||||
.circle-fill {
|
||||
stroke: var(--primary-green);
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 314; /* 2 * π * r = 2 * π * 50 */
|
||||
stroke-dashoffset: calc(314 * (1 - var(--progress, 0) / 100));
|
||||
transition: stroke-dashoffset 2s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.5));
|
||||
}
|
||||
|
||||
.circle-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.circle-value {
|
||||
font-size: var(--text-3xl);
|
||||
font-weight: var(--font-bold);
|
||||
color: var(--primary-green);
|
||||
line-height: 1;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.circle-unit {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-gray);
|
||||
font-weight: var(--font-medium);
|
||||
}
|
||||
|
||||
.progress-item .stat-label {
|
||||
font-size: var(--text-base);
|
||||
color: var(--text-light);
|
||||
font-weight: var(--font-semibold);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.progress-stats {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.progress-stats {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-lg);
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.circle-progress {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.circle-value {
|
||||
font-size: var(--text-2xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== Section 1 Split Layout + Floating Data Cards ========== */
|
||||
.split-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-2xl);
|
||||
align-items: flex-start;
|
||||
margin: var(--spacing-2xl) 0;
|
||||
}
|
||||
|
||||
.split-column-left,
|
||||
.split-column-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.split-column-left .image-container {
|
||||
aspect-ratio: 4/3; /* 改为4:3比例，更紧凑 */
|
||||
border-radius: var(--radius-2xl);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-xl);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.split-column-left .image-container:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: var(--shadow-xl), var(--shadow-green);
|
||||
}
|
||||
|
||||
.floating-data-card {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(16, 185, 129, 0.12) 0%,
|
||||
rgba(5, 150, 105, 0.08) 100%);
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
padding: var(--spacing-xl);
|
||||
border-radius: var(--radius-xl);
|
||||
border: 2px solid var(--border-light);
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.floating-data-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, transparent 0%, rgba(16, 185, 129, 0.05) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-base);
|
||||
}
|
||||
|
||||
.floating-data-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.floating-data-card:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 12px 32px rgba(16, 185, 129, 0.2),
|
||||
0 6px 16px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--primary-green);
|
||||
}
|
||||
|
||||
.floating-data-value {
|
||||
font-size: var(--text-4xl);
|
||||
font-weight: var(--font-bold);
|
||||
color: var(--primary-green);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
line-height: 1;
|
||||
letter-spacing: -0.02em;
|
||||
text-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
|
||||
}
|
||||
|
||||
body.dark-theme .floating-data-value {
|
||||
color: var(--accent-emerald-light);
|
||||
text-shadow: 0 2px 12px rgba(52, 211, 153, 0.3);
|
||||
}
|
||||
|
||||
.floating-data-label {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--text-gray);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
opacity: 0.85;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.floating-data-note {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-gray);
|
||||
opacity: 0.7;
|
||||
margin-top: var(--spacing-xs);
|
||||
}
|
||||
|
||||
/* 深色主题适配 */
|
||||
body.dark-theme .floating-data-card {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(52, 211, 153, 0.15) 0%,
|
||||
rgba(16, 185, 129, 0.1) 100%);
|
||||
}
|
||||
|
||||
/* 响应式布局 */
|
||||
@media (max-width: 1024px) {
|
||||
.split-layout {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.split-column-left .image-container {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.split-column-left .card {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.floating-data-card {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.floating-data-value {
|
||||
font-size: var(--text-3xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== Section 2 Bento Grid不规则布局 ========== */
|
||||
.section-2-bento {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--spacing-2xl);
|
||||
margin: var(--spacing-2xl) 0;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
/* Bento项目尺寸控制 */
|
||||
.bento-item-large {
|
||||
grid-column: span 2; /* 跨2列 - 突出重要内容 */
|
||||
grid-row: span 1;
|
||||
}
|
||||
|
||||
.bento-item-medium {
|
||||
grid-column: span 1; /* 单列 - 次要内容 */
|
||||
grid-row: span 1;
|
||||
}
|
||||
|
||||
/* Bento卡片样式增强 */
|
||||
.section-2-bento .card {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(16, 185, 129, 0.08) 0%,
|
||||
rgba(5, 150, 105, 0.05) 100%);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 2px solid var(--border-light);
|
||||
border-radius: var(--radius-2xl);
|
||||
padding: var(--spacing-2xl);
|
||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
box-shadow: var(--shadow-md);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.section-2-bento .card:hover {
|
||||
transform: translateY(-12px) scale(1.02);
|
||||
box-shadow: 0 16px 40px rgba(16, 185, 129, 0.25),
|
||||
0 8px 20px rgba(0, 0, 0, 0.12);
|
||||
border-color: var(--primary-green);
|
||||
}
|
||||
|
||||
.section-2-bento .card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, transparent 0%, rgba(16, 185, 129, 0.08) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-base);
|
||||
border-radius: var(--radius-2xl);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.section-2-bento .card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.section-2-bento .card-header {
|
||||
padding: 0 0 var(--spacing-lg) 0;
|
||||
background: transparent;
|
||||
border-bottom: 2px solid var(--border-light);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.section-2-bento .card-title {
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: var(--font-bold);
|
||||
color: var(--primary-green);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.section-2-bento .card-title i {
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
}
|
||||
|
||||
.section-2-bento .card-body {
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.section-2-bento .feature-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.section-2-bento .feature-list li {
|
||||
padding: var(--spacing-md) 0;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
color: var(--text-gray);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-sm);
|
||||
font-size: var(--text-base);
|
||||
line-height: 1.8;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.section-2-bento .feature-list li:hover {
|
||||
color: var(--primary-green);
|
||||
padding-left: var(--spacing-sm);
|
||||
background: rgba(16, 185, 129, 0.05);
|
||||
}
|
||||
|
||||
.section-2-bento .feature-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.section-2-bento .feature-list li i {
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
margin-top: 2px;
|
||||
flex-shrink: 0;
|
||||
color: var(--primary-green);
|
||||
}
|
||||
|
||||
/* 深色主题适配 */
|
||||
body.dark-theme .section-2-bento .card {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(52, 211, 153, 0.15) 0%,
|
||||
rgba(16, 185, 129, 0.1) 100%);
|
||||
}
|
||||
|
||||
body.dark-theme .section-2-bento .card:hover {
|
||||
box-shadow: 0 16px 40px rgba(52, 211, 153, 0.3),
|
||||
0 8px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 响应式布局 */
|
||||
@media (max-width: 1024px) {
|
||||
.section-2-bento {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.bento-item-large {
|
||||
grid-column: span 1; /* 平板设备等宽 */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.section-2-bento {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.section-2-bento .card {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.section-2-bento .card-title {
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
|
||||
.section-2-bento .feature-list li {
|
||||
font-size: var(--text-sm);
|
||||
padding: var(--spacing-sm) 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 图片加载状态 ========== */
|
||||
img {
|
||||
transition: opacity var(--transition-base);
|
||||
|
||||
13
web_frontend/web_result/order-classes/health/favicon.svg
Normal file
13
web_frontend/web_result/order-classes/health/favicon.svg
Normal file
@@ -0,0 +1,13 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<linearGradient id="health-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#10b981;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#06b6d4;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- 圆形背景 -->
|
||||
<circle cx="16" cy="16" r="15" fill="url(#health-grad)"/>
|
||||
<!-- 医疗十字图标 -->
|
||||
<rect x="14" y="8" width="4" height="16" fill="white" rx="1"/>
|
||||
<rect x="8" y="14" width="16" height="4" fill="white" rx="1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 566 B |
@@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>心理咨询服务全流程方案 - 大健康订单班</title>
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
</head>
|
||||
@@ -68,10 +69,18 @@
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3><i data-lucide="user-circle"></i> 来访者基本情况</h3>
|
||||
<p>来访者为27岁女性，互联网公司运营专员，工作半年；独居于一线城市合租公寓，日均通勤45分钟；近期生活节奏紧张，饮食不规律。家庭结构为父母在外地，沟通频率低，情感支持有限。近三个月反复出现社交焦虑症状，严重影响工作表现和生活质量。</p>
|
||||
</div>
|
||||
<p>来访者为27岁女性，互联网公司运营专员，工作半年；独居于一线城市合租公寓，日均通勤45分钟；近期生活节奏紧张，饮食不规律。家庭结构为父母在外地，沟通频率低，情感支持有限。近三个月反复出现社交焦虑症状,严重影响工作表现和生活质量。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2">
|
||||
<!-- Split Layout: 左右分栏 + 浮动数据卡片 -->
|
||||
<div class="split-layout">
|
||||
<!-- 左栏: 大图 + 问题陈述卡片 -->
|
||||
<div class="split-column-left">
|
||||
<div class="image-container">
|
||||
<img data-src="images/情绪数据分析表.jpg" alt="情绪数据分析表" loading="lazy">
|
||||
<div class="image-caption">专业心理测评数据分析报告</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">问题陈述</h3>
|
||||
@@ -86,92 +95,80 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">初步心理测评</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><strong>专业量表评估:</strong></p>
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="alert-triangle"></i> SAS焦虑量表: 65分(中度焦虑)</li>
|
||||
<li><i data-lucide="frown"></i> SDS抑郁量表: 58分(轻度抑郁)</li>
|
||||
<li><i data-lucide="moon"></i> PSQI睡眠指数: 13分(睡眠障碍)</li>
|
||||
<li><i data-lucide="trending-down"></i> 自我效能: 3/10分(偏低)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="image-container" style="margin-top: var(--spacing-xl);">
|
||||
<img data-src="images/情绪数据分析表.jpg" alt="情绪数据分析表" loading="lazy">
|
||||
<div class="image-caption">专业心理测评数据分析报告</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-3" style="margin-top: var(--spacing-xl);">
|
||||
<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="zap"></i> 语速偏快,双手紧握</li>
|
||||
<li><i data-lucide="eye-off"></i> 眼神回避,不敢直视</li>
|
||||
<li><i data-lucide="droplet"></i> 谈到考核时眼眶泛红</li>
|
||||
<li><i data-lucide="activity"></i> 情绪波动明显</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 右栏: 4个浮动数据卡片 -->
|
||||
<div class="split-column-right">
|
||||
<div class="floating-data-card">
|
||||
<div class="floating-data-label">SAS焦虑量表</div>
|
||||
<div class="floating-data-value">65分</div>
|
||||
<div class="floating-data-note">中度焦虑</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="target"></i> 改善公众发言焦虑</li>
|
||||
<li><i data-lucide="briefcase"></i> 试用期前恢复自信</li>
|
||||
<li><i data-lucide="trending-up"></i> 提升工作表现</li>
|
||||
<li><i data-lucide="users"></i> 改善人际关系</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="floating-data-card">
|
||||
<div class="floating-data-label">SDS抑郁量表</div>
|
||||
<div class="floating-data-value">58分</div>
|
||||
<div class="floating-data-note">轻度抑郁</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="clock"></i> 时长: 50分钟/次</li>
|
||||
<li><i data-lucide="calendar"></i> 周期: 8-10次</li>
|
||||
<li><i data-lucide="repeat"></i> 频率: 每周1次</li>
|
||||
<li><i data-lucide="shield"></i> 严格保密原则</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="floating-data-card">
|
||||
<div class="floating-data-label">PSQI睡眠指数</div>
|
||||
<div class="floating-data-value">13分</div>
|
||||
<div class="floating-data-note">睡眠障碍</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats" style="margin-top: var(--spacing-xl);">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">SAS焦虑评分</div>
|
||||
<div class="stat-value sas-score">0分</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">SDS抑郁评分</div>
|
||||
<div class="stat-value sds-score">0分</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">睡眠质量指数</div>
|
||||
<div class="stat-value psqi-score">0分</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">自我效能感</div>
|
||||
<div class="stat-value">3/10</div>
|
||||
<div class="floating-data-card">
|
||||
<div class="floating-data-label">自我效能感</div>
|
||||
<div class="floating-data-value">3/10分</div>
|
||||
<div class="floating-data-note">偏低</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部: 保留三列布局 -->
|
||||
<div class="grid grid-3" style="margin-top: var(--spacing-xl);">
|
||||
<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="zap"></i> 语速偏快,双手紧握</li>
|
||||
<li><i data-lucide="eye-off"></i> 眼神回避,不敢直视</li>
|
||||
<li><i data-lucide="droplet"></i> 谈到考核时眼眶泛红</li>
|
||||
<li><i data-lucide="activity"></i> 情绪波动明显</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="target"></i> 改善公众发言焦虑</li>
|
||||
<li><i data-lucide="briefcase"></i> 试用期前恢复自信</li>
|
||||
<li><i data-lucide="trending-up"></i> 提升工作表现</li>
|
||||
<li><i data-lucide="users"></i> 改善人际关系</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="clock"></i> 时长: 50分钟/次</li>
|
||||
<li><i data-lucide="calendar"></i> 周期: 8-10次</li>
|
||||
<li><i data-lucide="repeat"></i> 频率: 每周1次</li>
|
||||
<li><i data-lucide="shield"></i> 严格保密原则</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 2: 问题评估与目标设定 -->
|
||||
@@ -647,72 +644,222 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer: 项目成果总结 -->
|
||||
<section class="section" style="background: var(--bg-semi-dark); padding: var(--spacing-3xl) 0;">
|
||||
<!-- Footer: 项目成果总结 - 多样化布局 -->
|
||||
<section class="section section-footer">
|
||||
<div class="container">
|
||||
<h2 class="section-title text-center" style="margin-bottom: var(--spacing-2xl);">
|
||||
<!-- 主标题 -->
|
||||
<h2 class="section-title text-center" style="margin-bottom: var(--spacing-3xl);">
|
||||
<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>
|
||||
<!-- 1. Timeline时间轴 - 服务流程 -->
|
||||
<h3 class="text-center" style="font-size: var(--text-3xl); color: var(--primary-green); margin-bottom: var(--spacing-2xl);">
|
||||
💚 完整服务流程
|
||||
</h3>
|
||||
<div class="timeline-container">
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker">
|
||||
<i data-lucide="user-search"></i>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<h4>用户分析与初步接待</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" style="order: 2;">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="user-search"></i> 用户分析与初步接待</li>
|
||||
<li><i data-lucide="clipboard"></i> 专业心理测评体系</li>
|
||||
<li><i data-lucide="target"></i> 问题评估与目标设定</li>
|
||||
<li><i data-lucide="brain"></i> 认知行为疗法(CBT)</li>
|
||||
<li><i data-lucide="heart"></i> 正念减压训练(MBCT)</li>
|
||||
<li><i data-lucide="users"></i> 社交暴露渐进练习</li>
|
||||
<li><i data-lucide="chart-line"></i> 效果评估与数据对比</li>
|
||||
<li><i data-lucide="phone"></i> 后期随访与巩固</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header" style="order: 1;">
|
||||
<h3 class="card-title">⚡ 核心技术</h3>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker">
|
||||
<i data-lucide="clipboard"></i>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<h4>专业心理测评体系</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" style="order: 2;">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="eye"></i> 负性思维识别与重构</li>
|
||||
<li><i data-lucide="wind"></i> 腹式呼吸放松训练</li>
|
||||
<li><i data-lucide="activity"></i> 渐进性肌肉放松</li>
|
||||
<li><i data-lucide="compass"></i> 正念呼吸10分钟/日</li>
|
||||
<li><i data-lucide="users"></i> 模拟会议演练</li>
|
||||
<li><i data-lucide="trending-up"></i> 渐进式暴露疗法</li>
|
||||
<li><i data-lucide="shield"></i> 安全行为消退</li>
|
||||
<li><i data-lucide="book-open"></i> 复发预防计划</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header" style="order: 1;">
|
||||
<h3 class="card-title">🎯 干预成果</h3>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker">
|
||||
<i data-lucide="target"></i>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<h4>问题评估与目标设定</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" style="order: 2;">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="trending-down"></i> SAS焦虑: 65→42分(-35%)</li>
|
||||
<li><i data-lucide="trending-down"></i> SDS抑郁: 58→46分(-20%)</li>
|
||||
<li><i data-lucide="moon"></i> PSQI睡眠: 13→6分(-54%)</li>
|
||||
<li><i data-lucide="trending-up"></i> 自我效能: 3→7.5分(+150%)</li>
|
||||
<li><i data-lucide="message-square"></i> 发言频率: 0→2-3次/周</li>
|
||||
<li><i data-lucide="clock"></i> 咨询周期: 12次/3-4月</li>
|
||||
<li><i data-lucide="check-circle"></i> 目标达成: 短中期✅</li>
|
||||
<li><i data-lucide="phone"></i> 随访计划: 1月+3月</li>
|
||||
</ul>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker">
|
||||
<i data-lucide="brain"></i>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<h4>认知行为疗法(CBT)</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker">
|
||||
<i data-lucide="heart"></i>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<h4>正念减压训练(MBCT)</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker">
|
||||
<i data-lucide="users"></i>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<h4>社交暴露渐进练习</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker">
|
||||
<i data-lucide="chart-line"></i>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<h4>效果评估与数据对比</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker">
|
||||
<i data-lucide="phone"></i>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<h4>后期随访与巩固</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center" style="margin-top: var(--spacing-2xl); color: var(--text-gray);">
|
||||
<p>💚 心理咨询服务全流程方案圆满完成!</p>
|
||||
<p style="margin-top: var(--spacing-sm);">© 2024 大健康订单班 | 专业心理健康服务解决方案</p>
|
||||
<!-- 2. 图标网格 - 核心技术 -->
|
||||
<h3 class="text-center" style="font-size: var(--text-3xl); color: var(--primary-green); margin: var(--spacing-3xl) 0 var(--spacing-2xl);">
|
||||
⚡ 核心技术
|
||||
</h3>
|
||||
<div class="icon-grid">
|
||||
<div class="icon-item">
|
||||
<div class="icon-wrapper">
|
||||
<i data-lucide="eye"></i>
|
||||
</div>
|
||||
<h4>负性思维识别与重构</h4>
|
||||
</div>
|
||||
|
||||
<div class="icon-item">
|
||||
<div class="icon-wrapper">
|
||||
<i data-lucide="wind"></i>
|
||||
</div>
|
||||
<h4>腹式呼吸放松训练</h4>
|
||||
</div>
|
||||
|
||||
<div class="icon-item">
|
||||
<div class="icon-wrapper">
|
||||
<i data-lucide="activity"></i>
|
||||
</div>
|
||||
<h4>渐进性肌肉放松</h4>
|
||||
</div>
|
||||
|
||||
<div class="icon-item">
|
||||
<div class="icon-wrapper">
|
||||
<i data-lucide="compass"></i>
|
||||
</div>
|
||||
<h4>正念呼吸10分钟/日</h4>
|
||||
</div>
|
||||
|
||||
<div class="icon-item">
|
||||
<div class="icon-wrapper">
|
||||
<i data-lucide="users"></i>
|
||||
</div>
|
||||
<h4>模拟会议演练</h4>
|
||||
</div>
|
||||
|
||||
<div class="icon-item">
|
||||
<div class="icon-wrapper">
|
||||
<i data-lucide="trending-up"></i>
|
||||
</div>
|
||||
<h4>渐进式暴露疗法</h4>
|
||||
</div>
|
||||
|
||||
<div class="icon-item">
|
||||
<div class="icon-wrapper">
|
||||
<i data-lucide="shield"></i>
|
||||
</div>
|
||||
<h4>安全行为消退</h4>
|
||||
</div>
|
||||
|
||||
<div class="icon-item">
|
||||
<div class="icon-wrapper">
|
||||
<i data-lucide="book-open"></i>
|
||||
</div>
|
||||
<h4>复发预防计划</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. 圆形进度条 - 干预成果 -->
|
||||
<h3 class="text-center" style="font-size: var(--text-3xl); color: var(--primary-green); margin: var(--spacing-3xl) 0 var(--spacing-2xl);">
|
||||
🎯 干预成果
|
||||
</h3>
|
||||
<div class="progress-stats">
|
||||
<div class="progress-item">
|
||||
<div class="circle-progress" style="--progress: 35;">
|
||||
<svg>
|
||||
<circle class="circle-bg" cx="70" cy="70" r="50"></circle>
|
||||
<circle class="circle-fill" cx="70" cy="70" r="50"></circle>
|
||||
</svg>
|
||||
<div class="circle-text">
|
||||
<div class="circle-value">35%</div>
|
||||
<div class="circle-unit">改善</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-label">SAS焦虑评分<br>65→42分</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-item">
|
||||
<div class="circle-progress" style="--progress: 54;">
|
||||
<svg>
|
||||
<circle class="circle-bg" cx="70" cy="70" r="50"></circle>
|
||||
<circle class="circle-fill" cx="70" cy="70" r="50"></circle>
|
||||
</svg>
|
||||
<div class="circle-text">
|
||||
<div class="circle-value">54%</div>
|
||||
<div class="circle-unit">改善</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-label">PSQI睡眠指数<br>13→6分</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-item">
|
||||
<div class="circle-progress" style="--progress: 75;">
|
||||
<svg>
|
||||
<circle class="circle-bg" cx="70" cy="70" r="50"></circle>
|
||||
<circle class="circle-fill" cx="70" cy="70" r="50"></circle>
|
||||
</svg>
|
||||
<div class="circle-text">
|
||||
<div class="circle-value">150%</div>
|
||||
<div class="circle-unit">提升</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-label">自我效能感<br>3→7.5分</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-item">
|
||||
<div class="circle-progress" style="--progress: 100;">
|
||||
<svg>
|
||||
<circle class="circle-bg" cx="70" cy="70" r="50"></circle>
|
||||
<circle class="circle-fill" cx="70" cy="70" r="50"></circle>
|
||||
</svg>
|
||||
<div class="circle-text">
|
||||
<div class="circle-value">100%</div>
|
||||
<div class="circle-unit">达成</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-label">发言频率提升<br>0→2-3次/周</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部版权信息 -->
|
||||
<div class="text-center" style="margin-top: var(--spacing-3xl); color: var(--text-gray);">
|
||||
<p style="font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--primary-green);">💚 心理咨询服务全流程方案圆满完成!</p>
|
||||
<p style="margin-top: var(--spacing-md); opacity: 0.8;">© 2024 大健康订单班 | 专业心理健康服务解决方案</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<linearGradient id="manu-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1e40af;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#94a3b8;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- 圆形背景 -->
|
||||
<circle cx="16" cy="16" r="15" fill="url(#manu-grad)"/>
|
||||
<!-- 齿轮图标 -->
|
||||
<circle cx="16" cy="16" r="5" fill="white"/>
|
||||
<circle cx="16" cy="16" r="2" fill="url(#manu-grad)"/>
|
||||
<rect x="15" y="8" width="2" height="4" fill="white"/>
|
||||
<rect x="15" y="20" width="2" height="4" fill="white"/>
|
||||
<rect x="8" y="15" width="4" height="2" fill="white"/>
|
||||
<rect x="20" y="15" width="4" height="2" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 760 B |
@@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>物流输送线节拍优化的PLC与机器人联合调试 - 智能制造订单班</title>
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
</head>
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<linearGradient id="transport-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#64748b;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- 圆形背景 -->
|
||||
<circle cx="16" cy="16" r="15" fill="url(#transport-grad)"/>
|
||||
<!-- 卡车图标 -->
|
||||
<path d="M8 12h10v8H8z M18 14h4l2 4v2h-6v-6z" fill="white"/>
|
||||
<circle cx="11" cy="21" r="1.5" fill="white"/>
|
||||
<circle cx="21" cy="21" r="1.5" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 597 B |
@@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>百车级AGV全局交通管制与充电调度系统 - 交通物流订单班</title>
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
</head>
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<linearGradient id="visual-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#ec4899;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- 圆形背景 -->
|
||||
<circle cx="16" cy="16" r="15" fill="url(#visual-grad)"/>
|
||||
<!-- 画笔图标 -->
|
||||
<path d="M8 22 L14 16 L18 20 L24 10" stroke="white" stroke-width="2" fill="none" stroke-linecap="round"/>
|
||||
<circle cx="18" cy="20" r="2" fill="white"/>
|
||||
<path d="M22 8 L24 10 L16 18 L14 16 Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 641 B |
@@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>同里古镇农文旅宣传片策划案 - 视觉设计订单班</title>
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
</head>
|
||||
@@ -1153,212 +1154,202 @@
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3><i data-lucide="calculator"></i> 预算规划说明</h3>
|
||||
<p>本项目总预算为¥273,800元,涵盖前期策划、拍摄制作、后期剪辑等全流程费用。预算分配合理,重点投入在摄影器材租赁和后期制作环节,确保影片品质达到行业一流水平。以下为详细的预算明细与分配方案。</p>
|
||||
<p>本项目总预算为¥273,800元,涵盖前期策划、拍摄制作、后期剪辑等全流程费用。预算分配合理,重点投入在摄影器材租赁和后期制作环节,确保影片品质达到行业一流水平。</p>
|
||||
</div>
|
||||
|
||||
<!-- Accordion 折叠面板容器 -->
|
||||
<div class="accordion-container">
|
||||
<!-- Accordion Item 1: 预算明细 -->
|
||||
<div class="accordion-item active">
|
||||
<div class="accordion-header">
|
||||
<div class="accordion-title">
|
||||
<span class="accordion-icon">💰</span>
|
||||
预算明细与分配
|
||||
<!-- Alternating Layout 1: 左图右文 - 预算概览 -->
|
||||
<div class="alternating-layout">
|
||||
<div class="image-container">
|
||||
<img data-src="images/电影风格参考图.jpg" alt="预算可视化" loading="lazy">
|
||||
<div class="image-caption">预算分配可视化图表</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3 class="card-title">💰 预算分配重点</h3>
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="film"></i> 后期剪辑: ¥50,000 (18.3%) - 最高占比</li>
|
||||
<li><i data-lucide="camera"></i> 器材租赁: ¥45,000 (16.4%)</li>
|
||||
<li><i data-lucide="video"></i> 摄影费用: ¥25,000 (9.1%)</li>
|
||||
<li><i data-lucide="palette"></i> 前期策划: ¥20,000 (7.3%)</li>
|
||||
<li><i data-lucide="music"></i> 音乐音效: ¥20,000 (7.3%)</li>
|
||||
<li><i data-lucide="users"></i> 其他费用: ¥113,800 (41.6%)</li>
|
||||
</ul>
|
||||
<div class="stats" style="margin-top: var(--spacing-lg);">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">总预算</div>
|
||||
<div class="stat-value">¥27.38万</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">核心投入</div>
|
||||
<div class="stat-value">44%</div>
|
||||
</div>
|
||||
<i data-lucide="chevron-down" class="accordion-toggle"></i>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="accordion-content-inner">
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>预算项目</th>
|
||||
<th>明细说明</th>
|
||||
<th>金额(元)</th>
|
||||
<th>占比</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>前期策划费</td>
|
||||
<td>创意策划、脚本撰写、分镜设计</td>
|
||||
<td>20,000</td>
|
||||
<td>7.3%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>导演费用</td>
|
||||
<td>导演统筹、现场执导</td>
|
||||
<td>15,000</td>
|
||||
<td>5.5%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>摄影费用</td>
|
||||
<td>主摄影师、副摄影师</td>
|
||||
<td>25,000</td>
|
||||
<td>9.1%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>器材租赁</td>
|
||||
<td>摄影机、航拍器、灯光、轨道等</td>
|
||||
<td>45,000</td>
|
||||
<td>16.4%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>场地费用</td>
|
||||
<td>拍摄许可、场地租赁</td>
|
||||
<td>12,000</td>
|
||||
<td>4.4%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>演员费用</td>
|
||||
<td>群众演员、特约演员</td>
|
||||
<td>18,000</td>
|
||||
<td>6.6%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>美术置景</td>
|
||||
<td>场景布置、道具准备</td>
|
||||
<td>15,000</td>
|
||||
<td>5.5%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>后期剪辑</td>
|
||||
<td>剪辑、调色、特效</td>
|
||||
<td>50,000</td>
|
||||
<td>18.3%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>音乐音效</td>
|
||||
<td>原创配乐、音效设计</td>
|
||||
<td>20,000</td>
|
||||
<td>7.3%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>配音解说</td>
|
||||
<td>专业配音、解说录制</td>
|
||||
<td>12,000</td>
|
||||
<td>4.4%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>交通食宿</td>
|
||||
<td>团队差旅、食宿安排</td>
|
||||
<td>18,000</td>
|
||||
<td>6.6%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>制作管理</td>
|
||||
<td>统筹协调、行政费用</td>
|
||||
<td>15,000</td>
|
||||
<td>5.5%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>应急备用</td>
|
||||
<td>不可预见费用</td>
|
||||
<td>8,800</td>
|
||||
<td>3.2%</td>
|
||||
</tr>
|
||||
<tr style="font-weight: bold; background: var(--active-bg);">
|
||||
<td>总计</td>
|
||||
<td>-</td>
|
||||
<td>273,800</td>
|
||||
<td>100%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 预算饼图可视化 -->
|
||||
<div class="budget-chart">
|
||||
<div class="chart-item">
|
||||
<div class="chart-label">器材租赁</div>
|
||||
<div class="chart-bar">
|
||||
<div class="chart-fill" style="width: 16.4%"></div>
|
||||
</div>
|
||||
<div class="chart-value">16.4%</div>
|
||||
</div>
|
||||
<div class="chart-item">
|
||||
<div class="chart-label">后期剪辑</div>
|
||||
<div class="chart-bar">
|
||||
<div class="chart-fill" style="width: 18.3%"></div>
|
||||
</div>
|
||||
<div class="chart-value">18.3%</div>
|
||||
</div>
|
||||
<div class="chart-item">
|
||||
<div class="chart-label">摄影费用</div>
|
||||
<div class="chart-bar">
|
||||
<div class="chart-fill" style="width: 9.1%"></div>
|
||||
</div>
|
||||
<div class="chart-value">9.1%</div>
|
||||
</div>
|
||||
<div class="chart-item">
|
||||
<div class="chart-label">前期策划</div>
|
||||
<div class="chart-bar">
|
||||
<div class="chart-fill" style="width: 7.3%"></div>
|
||||
</div>
|
||||
<div class="chart-value">7.3%</div>
|
||||
</div>
|
||||
<div class="chart-item">
|
||||
<div class="chart-label">音乐音效</div>
|
||||
<div class="chart-bar">
|
||||
<div class="chart-fill" style="width: 7.3%"></div>
|
||||
</div>
|
||||
<div class="chart-value">7.3%</div>
|
||||
</div>
|
||||
<!-- Icon Grid - 制作流程 -->
|
||||
<div class="expert-intro" style="margin-top: var(--spacing-2xl);">
|
||||
<h3><i data-lucide="film"></i> 制作全流程</h3>
|
||||
</div>
|
||||
|
||||
<div class="icon-grid" style="margin-top: var(--spacing-xl);">
|
||||
<div class="icon-card">
|
||||
<div class="icon-card-icon">📝</div>
|
||||
<h4 class="icon-card-title">前期策划</h4>
|
||||
<p class="icon-card-value">¥20,000</p>
|
||||
<ul class="feature-list" style="margin-top: var(--spacing-md); text-align: left;">
|
||||
<li><i data-lucide="lightbulb"></i> 创意策划</li>
|
||||
<li><i data-lucide="file-text"></i> 脚本撰写</li>
|
||||
<li><i data-lucide="layout"></i> 分镜设计</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="icon-card">
|
||||
<div class="icon-card-icon">🎬</div>
|
||||
<h4 class="icon-card-title">拍摄制作</h4>
|
||||
<p class="icon-card-value">¥115,000</p>
|
||||
<ul class="feature-list" style="margin-top: var(--spacing-md); text-align: left;">
|
||||
<li><i data-lucide="camera"></i> 摄影器材租赁</li>
|
||||
<li><i data-lucide="users"></i> 导演摄影团队</li>
|
||||
<li><i data-lucide="map-pin"></i> 场地演员费用</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="icon-card">
|
||||
<div class="icon-card-icon">🎨</div>
|
||||
<h4 class="icon-card-title">后期制作</h4>
|
||||
<p class="icon-card-value">¥82,000</p>
|
||||
<ul class="feature-list" style="margin-top: var(--spacing-md); text-align: left;">
|
||||
<li><i data-lucide="film"></i> 剪辑调色特效</li>
|
||||
<li><i data-lucide="music"></i> 配乐音效设计</li>
|
||||
<li><i data-lucide="mic"></i> 配音解说录制</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="icon-card">
|
||||
<div class="icon-card-icon">🛡️</div>
|
||||
<h4 class="icon-card-title">保障管理</h4>
|
||||
<p class="icon-card-value">¥56,800</p>
|
||||
<ul class="feature-list" style="margin-top: var(--spacing-md); text-align: left;">
|
||||
<li><i data-lucide="car"></i> 交通食宿安排</li>
|
||||
<li><i data-lucide="briefcase"></i> 制作统筹管理</li>
|
||||
<li><i data-lucide="shield"></i> 应急预备资金</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alternating Layout 2: 右图左文 - 后期制作流程 -->
|
||||
<div class="alternating-layout" style="margin-top: var(--spacing-2xl);">
|
||||
<div class="image-container">
|
||||
<img data-src="images/同里退思园航拍.jpg" alt="后期制作" loading="lazy">
|
||||
<div class="image-caption">专业后期制作工作室</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3 class="card-title">🎬 后期制作流程</h3>
|
||||
<div class="timeline-layout" style="padding: 0;">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content" style="padding: var(--spacing-md);">
|
||||
<h4 style="color: var(--primary-amber); margin-bottom: var(--spacing-xs);"><i data-lucide="film"></i> Day 1-3: 素材整理与初剪</h4>
|
||||
<p style="color: var(--text-gray); font-size: var(--text-base);">分类整理拍摄素材,根据分镜脚本进行初步剪辑,建立时间线结构</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content" style="padding: var(--spacing-md);">
|
||||
<h4 style="color: var(--primary-amber); margin-bottom: var(--spacing-xs);"><i data-lucide="palette"></i> Day 4-5: 调色处理</h4>
|
||||
<p style="color: var(--text-gray); font-size: var(--text-base);">应用传统色彩体系,统一画面色调,营造古镇意境氛围</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content" style="padding: var(--spacing-md);">
|
||||
<h4 style="color: var(--primary-amber); margin-bottom: var(--spacing-xs);"><i data-lucide="sparkles"></i> Day 6-7: 特效制作</h4>
|
||||
<p style="color: var(--text-gray); font-size: var(--text-base);">添加片头片尾、转场特效、字幕包装等视觉元素</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content" style="padding: var(--spacing-md);">
|
||||
<h4 style="color: var(--primary-amber); margin-bottom: var(--spacing-xs);"><i data-lucide="music"></i> Day 8-10: 配乐音效</h4>
|
||||
<p style="color: var(--text-gray); font-size: var(--text-base);">原创配乐创作,江南丝竹融合现代音乐,音效设计与混音</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content" style="padding: var(--spacing-md);">
|
||||
<h4 style="color: var(--primary-amber); margin-bottom: var(--spacing-xs);"><i data-lucide="check-square"></i> Day 11: 成片交付</h4>
|
||||
<p style="color: var(--text-gray); font-size: var(--text-base);">最终审片,输出4K/高清多版本,完成项目交付</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Accordion Item 5: 后期制作 -->
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-header">
|
||||
<div class="accordion-title">
|
||||
<span class="accordion-icon">🎬</span>
|
||||
后期制作流程
|
||||
</div>
|
||||
<i data-lucide="chevron-down" class="accordion-toggle"></i>
|
||||
<!-- Bento Grid - 质量保障措施 -->
|
||||
<div class="expert-intro" style="margin-top: var(--spacing-2xl);">
|
||||
<h3><i data-lucide="shield"></i> 质量保障体系</h3>
|
||||
</div>
|
||||
|
||||
<div class="bento-grid" style="margin-top: var(--spacing-xl);">
|
||||
<div class="card bento-item">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">📹 拍摄标准</h3>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="accordion-content-inner">
|
||||
<ul class="feature-list" style="font-size: var(--text-lg);">
|
||||
<li><i data-lucide="film"></i> 素材整理与初剪(3天)</li>
|
||||
<li><i data-lucide="palette"></i> 调色处理(2天)</li>
|
||||
<li><i data-lucide="sparkles"></i> 特效制作(2天)</li>
|
||||
<li><i data-lucide="music"></i> 配乐音效(2天)</li>
|
||||
<li><i data-lucide="mic"></i> 配音解说(1天)</li>
|
||||
<li><i data-lucide="check-square"></i> 成片交付(1天)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="award"></i> 4K超高清拍摄标准</li>
|
||||
<li><i data-lucide="camera"></i> 电影级摄影器材</li>
|
||||
<li><i data-lucide="shield"></i> 多机位备份拍摄</li>
|
||||
<li><i data-lucide="layers"></i> Log格式原始素材</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Accordion Item 6: 质量保障 -->
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-header">
|
||||
<div class="accordion-title">
|
||||
<span class="accordion-icon">✅</span>
|
||||
质量保障措施
|
||||
</div>
|
||||
<i data-lucide="chevron-down" class="accordion-toggle"></i>
|
||||
<div class="card bento-item">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">⏰ 进度管理</h3>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="accordion-content-inner">
|
||||
<ul class="feature-list" style="font-size: var(--text-lg);">
|
||||
<li><i data-lucide="award"></i> 4K超高清拍摄标准</li>
|
||||
<li><i data-lucide="shield"></i> 多机位备份拍摄</li>
|
||||
<li><i data-lucide="clock"></i> 严格进度管理</li>
|
||||
<li><i data-lucide="user-check"></i> 客户阶段性审片</li>
|
||||
<li><i data-lucide="refresh-cw"></i> 免费修改2次</li>
|
||||
<li><i data-lucide="star"></i> 行业一流品质保证</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="clock"></i> 严格进度管理</li>
|
||||
<li><i data-lucide="calendar-check"></i> 每日拍摄计划</li>
|
||||
<li><i data-lucide="activity"></i> 实时进度追踪</li>
|
||||
<li><i data-lucide="alert-circle"></i> 应急预案准备</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bento-item">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">✅ 客户服务</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="user-check"></i> 客户阶段性审片</li>
|
||||
<li><i data-lucide="refresh-cw"></i> 免费修改2次</li>
|
||||
<li><i data-lucide="message-square"></i> 实时沟通反馈</li>
|
||||
<li><i data-lucide="phone"></i> 专属项目经理</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bento-item">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">🏆 品质保证</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="star"></i> 行业一流品质保证</li>
|
||||
<li><i data-lucide="award"></i> 专业团队配置</li>
|
||||
<li><i data-lucide="trending-up"></i> 持续质量监控</li>
|
||||
<li><i data-lucide="check-circle"></i> 完善验收流程</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 总结数据展示 -->
|
||||
<div class="stats" style="margin-top: var(--spacing-xl);">
|
||||
<div class="stats" style="margin-top: var(--spacing-2xl);">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">总预算</div>
|
||||
<div class="stat-value">¥27.38万</div>
|
||||
|
||||
12
web_frontend/web_result/order-classes/wenlu/favicon.svg
Normal file
12
web_frontend/web_result/order-classes/wenlu/favicon.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<linearGradient id="wenlu-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#8b5cf6;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#3b82f6;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- 圆形背景 -->
|
||||
<circle cx="16" cy="16" r="15" fill="url(#wenlu-grad)"/>
|
||||
<!-- 地图标记图标 -->
|
||||
<path d="M16 8c-2.76 0-5 2.24-5 5 0 3.75 5 9 5 9s5-5.25 5-9c0-2.76-2.24-5-5-5zm0 7c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 579 B |
@@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
|
||||
<title>2024长三角国际新能源汽车与智能交通产业博览会</title>
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
|
||||
<!-- Base URL for relative paths -->
|
||||
<base href="/order-class/wenlu/">
|
||||
|
||||
Reference in New Issue
Block a user