Duguay/Agent-n8n
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 为12个订单班添加专属SVG图标

Browse Source 
详细说明:
- 为每个订单班创建专属的SVG favicon图标
- 每个图标使用渐变色和专属图形设计
- 在所有订单班的index.html中添加favicon引用
- 图标设计：
  * wenlu(文旅): 紫蓝渐变 + 地图标记
  * food(食品): 橙红渐变 + 厨师帽
  * visual-design(视觉设计): 粉紫渐变 + 画笔
  * civil(土木): 灰蓝渐变 + 建筑
  * health(大健康): 绿青渐变 + 医疗十字
  * energy(能源): 黄橙渐变 + 闪电
  * transportation(交通物流): 蓝色渐变 + 卡车
  * manufacturing(智能制造): 深蓝银色渐变 + 齿轮
  * developer(智能开发): 青绿渐变 + 代码符号
  * finance(财经商贸): 金蓝渐变 + 上升图表
  * environmental(环保): 绿蓝渐变 + 叶子
  * chemical(化工): 蓝紫渐变 + 烧杯
- 修改文件: 12个favicon.svg文件 + 12个index.html文件
- 影响模块: 所有订单班网页的视觉标识系统

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yep_Q
2025-10-10 17:12:22 +08:00
parent 125a134902
commit 6c172673e7
29 changed files with 1076 additions and 499 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web_frontend/web_result/order-classes/visual-design/favicon.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 641 B

363
web_frontend/web_result/order-classes/visual-design/index.html
View File

@@ -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>