Files
Agent-n8n/web_frontend/web_result/pages/exhibition.html
Yep_Q c0644d4bea feat: 完善AI会展策划多Agent协同演示系统
功能实现:
-  添加需求输入弹窗,支持新能源汽车展模板快速填充
-  实现7个AI Agent完整执行序列,包含详细的终端输出
-  添加图片生成过程展示,支持实际图片预览
-  实现结果查看弹窗,展示生成统计和内容章节
-  添加图片骨架屏loading动画,优化加载体验

技术优化:
- 🎨 实现真实的进度条卡顿效果,模拟实际加载过程
- 🎨 优化终端滚动和内容显示,支持多种输出类型
- 🎨 添加Agent头像显示和执行状态指示
- 🎨 实现图片延迟加载,确保执行流程连贯
- 🎨 简化骨架屏动画,提升真实感

文件修改:
- web_frontend/exhibition-demo/src/pages/WorkflowPageV4.tsx
- web_frontend/exhibition-demo/src/components/RequirementModal.tsx
- web_frontend/exhibition-demo/src/components/ResultModal.tsx
- web_frontend/exhibition-demo/public/data/ (添加展会图片资源)

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-08 12:23:45 +08:00

647 lines
39 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>展会介绍 - 2024长三角国际新能源汽车展</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.nav-link {
position: relative;
transition: color 0.3s ease;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: #667eea;
transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.exhibition-card {
transition: all 0.3s ease;
border: 2px solid transparent;
}
.exhibition-card:hover {
border-color: #667eea;
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.scale-in {
animation: scaleIn 0.5s ease-out;
}
@keyframes scaleIn {
from { transform: scale(0.9); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.map-container {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: relative;
overflow: hidden;
}
.map-container::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: rotate 20s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="fixed top-0 w-full bg-white shadow-md z-50">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<svg class="w-8 h-8 mr-3 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z"/>
</svg>
<span class="text-xl font-bold text-gray-800">Green Mobility 2024</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="../index.html" class="nav-link text-gray-700 hover:text-purple-600">首页</a>
<a href="overview.html" class="nav-link text-gray-700 hover:text-purple-600">策划概述</a>
<a href="exhibition.html" class="nav-link active text-gray-700 hover:text-purple-600">展会介绍</a>
<a href="marketing.html" class="nav-link text-gray-700 hover:text-purple-600">营销方案</a>
<a href="operation.html" class="nav-link text-gray-700 hover:text-purple-600">现场运营</a>
<a href="budget.html" class="nav-link text-gray-700 hover:text-purple-600">预算分析</a>
<a href="risk.html" class="nav-link text-gray-700 hover:text-purple-600">风险评估</a>
</div>
</div>
</div>
</nav>
<!-- Page Header -->
<section class="bg-gradient-to-r from-blue-600 to-green-600 text-white pt-24 pb-12">
<div class="container mx-auto px-6">
<h1 class="text-4xl md:text-5xl font-bold mb-4">展会介绍与预期效果</h1>
<p class="text-xl opacity-90">深入了解展会规模、展品范围、参展商与观众构成</p>
</div>
</section>
<!-- Exhibition Theme -->
<section class="py-16 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-gray-800 mb-4">智行未来,绿动长三角</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
2024长三角国际新能源汽车与智能交通产业博览会致力于打造全球新能源汽车产业交流合作的重要平台
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center scale-in">
<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-10 h-10 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
</div>
<h3 class="text-xl font-bold mb-2">专业化</h3>
<p class="text-gray-600">聚焦新能源汽车全产业链,提供专业展示交流平台</p>
</div>
<div class="text-center scale-in" style="animation-delay: 0.1s">
<div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-10 h-10 text-green-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-2a2 2 0 00-2-2 2 2 0 01-2-2 2 2 0 00-1.668-1.973z" clip-rule="evenodd"/>
</svg>
</div>
<h3 class="text-xl font-bold mb-2">国际化</h3>
<p class="text-gray-600">汇聚全球领先企业,促进国际技术交流与合作</p>
</div>
<div class="text-center scale-in" style="animation-delay: 0.2s">
<div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-10 h-10 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
</div>
<h3 class="text-xl font-bold mb-2">品质化</h3>
<p class="text-gray-600">高端展会服务,打造行业标杆展会品牌</p>
</div>
</div>
</div>
</section>
<!-- Venue Information -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">展会场地</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div class="map-container rounded-2xl p-8 text-white relative">
<h3 class="text-2xl font-bold mb-4">国家会展中心(上海)</h3>
<div class="space-y-3 relative z-10">
<div class="flex items-start">
<svg class="w-6 h-6 mr-3 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
<div>
<p class="font-semibold">详细地址</p>
<p class="opacity-90">上海市青浦区崧泽大道333号</p>
</div>
</div>
<div class="flex items-start">
<svg class="w-6 h-6 mr-3 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
<path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/>
<path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z"/>
</svg>
<div>
<p class="font-semibold">交通便利</p>
<p class="opacity-90">地铁2号线直达多条公交线路充足停车位</p>
</div>
</div>
<div class="flex items-start">
<svg class="w-6 h-6 mr-3 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
</svg>
<div>
<p class="font-semibold">场馆规模</p>
<p class="opacity-90">展览面积50万平方米亚洲最大会展综合体</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-2xl shadow-lg p-8">
<h3 class="text-2xl font-bold text-gray-800 mb-6">场馆优势</h3>
<div class="space-y-4">
<div class="flex items-center p-4 bg-blue-50 rounded-lg">
<div class="w-12 h-12 bg-blue-600 text-white rounded-lg flex items-center justify-center mr-4">
01
</div>
<div>
<h4 class="font-semibold">世界级展馆设施</h4>
<p class="text-sm text-gray-600">配备先进的展览设施和智能化管理系统</p>
</div>
</div>
<div class="flex items-center p-4 bg-green-50 rounded-lg">
<div class="w-12 h-12 bg-green-600 text-white rounded-lg flex items-center justify-center mr-4">
02
</div>
<div>
<h4 class="font-semibold">完善的配套服务</h4>
<p class="text-sm text-gray-600">酒店、餐饮、商务中心一应俱全</p>
</div>
</div>
<div class="flex items-center p-4 bg-purple-50 rounded-lg">
<div class="w-12 h-12 bg-purple-600 text-white rounded-lg flex items-center justify-center mr-4">
03
</div>
<div>
<h4 class="font-semibold">丰富的办展经验</h4>
<p class="text-sm text-gray-600">成功举办进博会等大型国际展会</p>
</div>
</div>
<div class="flex items-center p-4 bg-orange-50 rounded-lg">
<div class="w-12 h-12 bg-orange-600 text-white rounded-lg flex items-center justify-center mr-4">
04
</div>
<div>
<h4 class="font-semibold">绿色环保理念</h4>
<p class="text-sm text-gray-600">全馆采用节能环保设计,获得绿色建筑认证</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Exhibition Areas Detail -->
<section class="py-16 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">展品范围</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- 整车展区 -->
<div class="exhibition-card bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-blue-600 text-white rounded-lg flex items-center justify-center mr-4">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/>
<path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z"/>
</svg>
</div>
<h3 class="text-xl font-bold">整车展区</h3>
</div>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<span class="text-blue-600 mr-2"></span>
<span>纯电动汽车轿车、SUV、MPV、商用车</span>
</li>
<li class="flex items-start">
<span class="text-blue-600 mr-2"></span>
<span>插电式混合动力汽车:增程式、并联式、混联式</span>
</li>
<li class="flex items-start">
<span class="text-blue-600 mr-2"></span>
<span>氢燃料电池汽车:乘用车、商用车、专用车</span>
</li>
<li class="flex items-start">
<span class="text-blue-600 mr-2"></span>
<span>智能网联汽车L2-L4级自动驾驶展示车</span>
</li>
</ul>
<div class="mt-4 pt-4 border-t border-blue-200">
<p class="text-sm text-gray-600">展览面积20,000平方米 | 预计展商120家</p>
</div>
</div>
<!-- 核心零部件展区 -->
<div class="exhibition-card bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-green-600 text-white rounded-lg flex items-center justify-center mr-4">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/>
</svg>
</div>
<h3 class="text-xl font-bold">核心零部件展区</h3>
</div>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<span class="text-green-600 mr-2"></span>
<span>动力电池:锂电池、固态电池、钠离子电池</span>
</li>
<li class="flex items-start">
<span class="text-green-600 mr-2"></span>
<span>驱动电机:永磁同步、交流异步、轮毂电机</span>
</li>
<li class="flex items-start">
<span class="text-green-600 mr-2"></span>
<span>电控系统BMS、VCU、MCU、DC/DC转换器</span>
</li>
<li class="flex items-start">
<span class="text-green-600 mr-2"></span>
<span>智能驾驶:激光雷达、毫米波雷达、摄像头、芯片</span>
</li>
</ul>
<div class="mt-4 pt-4 border-t border-green-200">
<p class="text-sm text-gray-600">展览面积15,000平方米 | 预计展商150家</p>
</div>
</div>
<!-- 智能交通展区 -->
<div class="exhibition-card bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-purple-600 text-white rounded-lg flex items-center justify-center mr-4">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 3.5a1.5 1.5 0 013 0V4a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-.5a1.5 1.5 0 000 3h.5a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-.5a1.5 1.5 0 00-3 0v.5a1 1 0 01-1 1H6a1 1 0 01-1-1v-3a1 1 0 00-1-1h-.5a1.5 1.5 0 010-3H4a1 1 0 001-1V6a1 1 0 011-1h3a1 1 0 001-1v-.5z"/>
</svg>
</div>
<h3 class="text-xl font-bold">智能交通展区</h3>
</div>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<span class="text-purple-600 mr-2"></span>
<span>智慧路网:智能交通信号、车路协同系统</span>
</li>
<li class="flex items-start">
<span class="text-purple-600 mr-2"></span>
<span>V2X通信5G-V2X设备、路侧单元RSU</span>
</li>
<li class="flex items-start">
<span class="text-purple-600 mr-2"></span>
<span>智能停车:自动泊车系统、智慧停车场解决方案</span>
</li>
<li class="flex items-start">
<span class="text-purple-600 mr-2"></span>
<span>出行服务MaaS平台、共享出行、智能调度</span>
</li>
</ul>
<div class="mt-4 pt-4 border-t border-purple-200">
<p class="text-sm text-gray-600">展览面积10,000平方米 | 预计展商60家</p>
</div>
</div>
<!-- 配套服务展区 -->
<div class="exhibition-card bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-orange-600 text-white rounded-lg flex items-center justify-center mr-4">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/>
</svg>
</div>
<h3 class="text-xl font-bold">配套服务展区</h3>
</div>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<span class="text-orange-600 mr-2"></span>
<span>充电设施:充电桩、换电站、无线充电</span>
</li>
<li class="flex items-start">
<span class="text-orange-600 mr-2"></span>
<span>金融服务:汽车金融、保险、融资租赁</span>
</li>
<li class="flex items-start">
<span class="text-orange-600 mr-2"></span>
<span>检测认证:第三方检测、认证机构、标准制定</span>
</li>
<li class="flex items-start">
<span class="text-orange-600 mr-2"></span>
<span>后市场服务:维修保养、二手车、汽车改装</span>
</li>
</ul>
<div class="mt-4 pt-4 border-t border-orange-200">
<p class="text-sm text-gray-600">展览面积5,000平方米 | 预计展商20家</p>
</div>
</div>
</div>
</div>
</section>
<!-- Exhibition Schedule -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">展会日程</h2>
<div class="max-w-4xl mx-auto">
<div class="bg-white rounded-2xl shadow-lg overflow-hidden">
<div class="bg-gradient-to-r from-purple-600 to-blue-600 text-white p-6">
<h3 class="text-2xl font-bold">2024年9月12日 - 15日</h3>
<p class="opacity-90">为期4天的行业盛会</p>
</div>
<div class="p-6">
<!-- Day 1 -->
<div class="mb-6 pb-6 border-b">
<div class="flex items-center mb-3">
<div class="w-24 text-sm font-bold text-purple-600">第一天</div>
<div class="text-lg font-semibold">9月12日周四</div>
</div>
<div class="ml-24 space-y-2">
<div class="flex items-center text-gray-700">
<span class="text-sm w-20">09:00</span>
<span>开幕典礼 & 领导致辞</span>
</div>
<div class="flex items-center text-gray-700">
<span class="text-sm w-20">10:00</span>
<span>主题论坛:新能源汽车产业发展高峰论坛</span>
</div>
<div class="flex items-center text-gray-700">
<span class="text-sm w-20">14:00</span>
<span>专业观众参观 & 商务洽谈</span>
</div>
<div class="flex items-center text-gray-700">
<span class="text-sm w-20">16:00</span>
<span>新产品发布会(特斯拉、蔚来等)</span>
</div>
</div>
</div>
<!-- Day 2 -->
<div class="mb-6 pb-6 border-b">
<div class="flex items-center mb-3">
<div class="w-24 text-sm font-bold text-green-600">第二天</div>
<div class="text-lg font-semibold">9月13日周五</div>
</div>
<div class="ml-24 space-y-2">
<div class="flex items-center text-gray-700">
<span class="text-sm w-20">09:30</span>
<span>智能网联汽车技术创新峰会</span>
</div>
<div class="flex items-center text-gray-700">
<span class="text-sm w-20">10:30</span>
<span>自动驾驶体验区开放</span>
</div>
<div class="flex items-center text-gray-700">
<span class="text-sm w-20">14:00</span>
<span>充电基础设施建设研讨会</span>
</div>
<div class="flex items-center text-gray-700">
<span class="text-sm w-20">15:30</span>
<span>供需对接会 & 采购洽谈</span>
</div>
</div>
</div>
<!-- Day 3 -->
<div class="mb-6 pb-6 border-b">
<div class="flex items-center mb-3">
<div class="w-24 text-sm font-bold text-blue-600">第三天</div>
<div class="text-lg font-semibold">9月14日周六</div>
</div>
<div class="ml-24 space-y-2">
<div class="flex items-center text-gray-700">
<span class="text-sm w-20">09:00</span>
<span>公众开放日 - 市民参观体验</span>
</div>
<div class="flex items-center text-gray-700">
<span class="text-sm w-20">10:00</span>
<span>新能源汽车试乘试驾活动</span>
</div>
<div class="flex items-center text-gray-700">
<span class="text-sm w-20">14:00</span>
<span>青少年科技创新大赛</span>
</div>
<div class="flex items-center text-gray-700">
<span class="text-sm w-20">16:00</span>
<span>绿色出行主题活动</span>
</div>
</div>
</div>
<!-- Day 4 -->
<div class="mb-0">
<div class="flex items-center mb-3">
<div class="w-24 text-sm font-bold text-orange-600">第四天</div>
<div class="text-lg font-semibold">9月15日周日</div>
</div>
<div class="ml-24 space-y-2">
<div class="flex items-center text-gray-700">
<span class="text-sm w-20">09:00</span>
<span>产业投资论坛</span>
</div>
<div class="flex items-center text-gray-700">
<span class="text-sm w-20">11:00</span>
<span>项目签约仪式</span>
</div>
<div class="flex items-center text-gray-700">
<span class="text-sm w-20">14:00</span>
<span>行业白皮书发布</span>
</div>
<div class="flex items-center text-gray-700">
<span class="text-sm w-20">16:00</span>
<span>闭幕式 & 成果发布</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Target Participants -->
<section class="py-16 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">目标参与者</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<!-- Target Exhibitors -->
<div>
<h3 class="text-2xl font-bold mb-6 text-purple-600">目标参展商</h3>
<div class="space-y-4">
<div class="bg-gray-50 rounded-lg p-4">
<h4 class="font-semibold mb-2">整车制造企业30%</h4>
<p class="text-sm text-gray-600">特斯拉、比亚迪、上汽、蔚来、理想、小鹏、吉利、长城、广汽等</p>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<h4 class="font-semibold mb-2">核心零部件企业35%</h4>
<p class="text-sm text-gray-600">宁德时代、比亚迪电池、华为智能汽车、百度Apollo、博世、大陆等</p>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<h4 class="font-semibold mb-2">科技企业25%</h4>
<p class="text-sm text-gray-600">阿里巴巴、腾讯、美团、滴滴、科大讯飞、商汤科技等</p>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<h4 class="font-semibold mb-2">服务企业10%</h4>
<p class="text-sm text-gray-600">国家电网、特来电、星星充电、平安保险、建设银行等</p>
</div>
</div>
</div>
<!-- Target Audience -->
<div>
<h3 class="text-2xl font-bold mb-6 text-blue-600">目标观众</h3>
<div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl p-6">
<div class="mb-6">
<h4 class="font-semibold mb-3">专业观众70%</h4>
<ul class="space-y-2 text-sm text-gray-700">
<li class="flex items-start">
<span class="text-blue-600 mr-2"></span>
汽车制造商采购及技术人员
</li>
<li class="flex items-start">
<span class="text-blue-600 mr-2"></span>
经销商和4S店负责人
</li>
<li class="flex items-start">
<span class="text-blue-600 mr-2"></span>
政府部门和行业组织代表
</li>
<li class="flex items-start">
<span class="text-blue-600 mr-2"></span>
投资机构和行业分析师
</li>
<li class="flex items-start">
<span class="text-blue-600 mr-2"></span>
科研院所和高校研究人员
</li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-3">普通观众30%</h4>
<ul class="space-y-2 text-sm text-gray-700">
<li class="flex items-start">
<span class="text-purple-600 mr-2"></span>
新能源汽车潜在消费者
</li>
<li class="flex items-start">
<span class="text-purple-600 mr-2"></span>
科技爱好者和车迷
</li>
<li class="flex items-start">
<span class="text-purple-600 mr-2"></span>
大学生和青少年群体
</li>
<li class="flex items-start">
<span class="text-purple-600 mr-2"></span>
媒体记者和自媒体博主
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Expected Results -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">预期效果</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white rounded-xl shadow-lg p-6 text-center">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-green-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"/>
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd"/>
</svg>
</div>
<h3 class="text-xl font-bold mb-3">经济效益</h3>
<div class="space-y-2 text-gray-600">
<p>现场成交额:<span class="font-bold text-green-600">10亿+</span></p>
<p>意向订单:<span class="font-bold text-green-600">8亿+</span></p>
<p>带动产业收入:<span class="font-bold text-green-600">30亿+</span></p>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 text-center">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-2a2 2 0 00-2-2 2 2 0 01-2-2 2 2 0 00-1.668-1.973z" clip-rule="evenodd"/>
</svg>
</div>
<h3 class="text-xl font-bold mb-3">社会效益</h3>
<div class="space-y-2 text-gray-600">
<p>媒体曝光:<span class="font-bold text-blue-600">1亿+次</span></p>
<p>专业论坛:<span class="font-bold text-blue-600">20场</span></p>
<p>发布白皮书:<span class="font-bold text-blue-600">2份</span></p>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 text-center">
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
</div>
<h3 class="text-xl font-bold mb-3">品牌效益</h3>
<div class="space-y-2 text-gray-600">
<p>参展商满意度:<span class="font-bold text-purple-600">90%+</span></p>
<p>观众回访率:<span class="font-bold text-purple-600">85%+</span></p>
<p>行业影响力:<span class="font-bold text-purple-600">TOP 3</span></p>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 bg-gradient-to-r from-blue-600 to-green-600 text-white">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl font-bold mb-6">加入我们,共创绿色未来</h2>
<p class="text-xl mb-8 opacity-90">立即申请参展,抢占优质展位</p>
<div class="flex justify-center gap-4">
<a href="marketing.html" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
了解营销方案 →
</a>
<a href="operation.html" class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition">
查看现场运营 →
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-6">
<div class="text-center text-sm text-gray-400">
<p>&copy; 2024 长三角国际新能源汽车与智能交通产业博览会. All rights reserved.</p>
</div>
</div>
</footer>
</body>
</html>