Files
Agent-n8n/web_frontend/web_result/pages/exhibition.html

823 lines
46 KiB
HTML
Raw Normal View History

<!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 rel="stylesheet" href="../css/animations.css">
<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;800;900&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<!-- Font Awesome 图标 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* 页面加载动画 */
.page-enter {
animation: pageEnter 0.8s ease-out;
}
@keyframes pageEnter {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 玻璃态效果 */
.glass-card {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
}
.glass-card:hover {
background: rgba(255, 255, 255, 0.95);
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.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 group">
<div class="relative mr-3">
<i class="fas fa-car-side text-2xl text-purple-600 group-hover:scale-110 transition-transform"></i>
<i class="fas fa-bolt text-xs text-green-500 absolute -top-1 -right-1 animate-pulse"></i>
</div>
<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">
<i class="fas fa-home mr-1"></i>首页
</a>
<a href="overview.html" class="nav-link text-gray-700 hover:text-purple-600">
<i class="fas fa-file-alt mr-1"></i>策划概述
</a>
<a href="exhibition.html" class="nav-link active text-purple-600 font-semibold">
<i class="fas fa-building mr-1"></i>展会介绍
</a>
<a href="marketing.html" class="nav-link text-gray-700 hover:text-purple-600">
<i class="fas fa-bullhorn mr-1"></i>营销方案
</a>
<a href="operation.html" class="nav-link text-gray-700 hover:text-purple-600">
<i class="fas fa-cogs mr-1"></i>现场运营
</a>
<a href="budget.html" class="nav-link text-gray-700 hover:text-purple-600">
<i class="fas fa-calculator mr-1"></i>预算分析
</a>
<a href="risk.html" class="nav-link text-gray-700 hover:text-purple-600">
<i class="fas fa-shield-alt mr-1"></i>风险评估
</a>
</div>
</div>
</div>
</nav>
<!-- Page Header -->
<section class="relative pt-24 pb-16 overflow-hidden" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<!-- 背景装饰 -->
<div class="absolute inset-0">
<div class="absolute top-0 left-0 w-96 h-96 bg-white/10 rounded-full filter blur-3xl animate-pulse"></div>
<div class="absolute bottom-0 right-0 w-96 h-96 bg-purple-300/20 rounded-full filter blur-3xl animate-pulse animation-delay-2000"></div>
</div>
<div class="container mx-auto px-6 relative z-10 page-enter">
<div class="flex items-center text-white/80 mb-4">
<a href="../index.html" class="hover:text-white transition">首页</a>
<i class="fas fa-chevron-right mx-2 text-xs"></i>
<span>展会介绍</span>
</div>
<h1 class="text-4xl md:text-6xl font-bold text-white mb-4 animate-fadeInUp">
展会介绍与预期效果
</h1>
<p class="text-xl text-white/90 animate-fadeInUp animation-delay-200">
<i class="fas fa-chart-line mr-2"></i>
深入了解展会规模、展品范围、参展商与观众构成
</p>
<div class="mt-8 flex flex-wrap gap-4 animate-fadeInUp animation-delay-400">
<div class="bg-white/20 backdrop-blur px-4 py-2 rounded-full text-sm">
<i class="fas fa-calendar mr-2"></i>2024年9月12-15日
</div>
<div class="bg-white/20 backdrop-blur px-4 py-2 rounded-full text-sm">
<i class="fas fa-map-marker-alt mr-2"></i>国家会展中心(上海)
</div>
<div class="bg-white/20 backdrop-blur px-4 py-2 rounded-full text-sm">
<i class="fas fa-users mr-2"></i>预计10万+参观者
</div>
</div>
</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 group animate-fadeInUp animation-delay-200">
<div class="w-20 h-20 bg-gradient-to-br from-blue-100 to-blue-200 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform shadow-lg">
<i class="fas fa-award text-3xl text-blue-600"></i>
</div>
<h3 class="text-xl font-bold mb-2">专业化</h3>
<p class="text-gray-600">聚焦新能源汽车全产业链,提供专业展示交流平台</p>
</div>
<div class="text-center group animate-fadeInUp animation-delay-400">
<div class="w-20 h-20 bg-gradient-to-br from-green-100 to-green-200 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform shadow-lg">
<i class="fas fa-globe-asia text-3xl text-green-600"></i>
</div>
<h3 class="text-xl font-bold mb-2">国际化</h3>
<p class="text-gray-600">汇聚全球领先企业,促进国际技术交流与合作</p>
</div>
<div class="text-center group animate-fadeInUp animation-delay-600">
<div class="w-20 h-20 bg-gradient-to-br from-purple-100 to-purple-200 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform shadow-lg">
<i class="fas fa-star text-3xl text-purple-600"></i>
</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 relative overflow-hidden">
<!-- 背景图片 -->
<div class="absolute inset-0 opacity-5" style="background-image: url('../../data/会展策划/image/博览会.jpg'); background-size: cover; background-position: center;"></div>
<div class="container mx-auto px-6 relative z-10">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12 animate-fadeInUp">
<i class="fas fa-map-marked-alt mr-2 text-purple-600"></i>
展会场地
</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div class="map-container rounded-2xl p-8 text-white relative glass-card hover:scale-[1.02] transition-all duration-300">
<h3 class="text-2xl font-bold mb-4 animate-fadeInLeft">
<i class="fas fa-building mr-2"></i>
国家会展中心(上海)
</h3>
<div class="space-y-3 relative z-10">
<div class="flex items-start animate-fadeInLeft animation-delay-200">
<i class="fas fa-map-marker-alt text-xl mr-3 flex-shrink-0 mt-1 animate-pulse"></i>
<div>
<p class="font-semibold">详细地址</p>
<p class="opacity-90">上海市青浦区崧泽大道333号</p>
</div>
</div>
<div class="flex items-start animate-fadeInLeft animation-delay-400">
<i class="fas fa-subway text-xl mr-3 flex-shrink-0 mt-1"></i>
<div>
<p class="font-semibold">交通便利</p>
<p class="opacity-90">地铁2号线直达多条公交线路充足停车位</p>
</div>
</div>
<div class="flex items-start animate-fadeInLeft animation-delay-600">
<i class="fas fa-expand-arrows-alt text-xl mr-3 flex-shrink-0 mt-1"></i>
<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 glass-card hover:scale-[1.02] transition-all duration-300">
<h3 class="text-2xl font-bold text-gray-800 mb-6 animate-fadeInRight">
<i class="fas fa-trophy mr-2 text-yellow-500"></i>
场馆优势
</h3>
<div class="space-y-4">
<div class="flex items-center p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors animate-fadeInRight animation-delay-200">
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
<i class="fas fa-medal text-xl"></i>
</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 hover:bg-green-100 transition-colors animate-fadeInRight animation-delay-400">
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
<i class="fas fa-concierge-bell text-xl"></i>
</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 hover:bg-purple-100 transition-colors animate-fadeInRight animation-delay-600">
<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
<i class="fas fa-hand-holding-heart text-xl"></i>
</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 hover:bg-orange-100 transition-colors animate-fadeInRight animation-delay-800">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
<i class="fas fa-leaf text-xl"></i>
</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 relative">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12 animate-fadeInUp">
<i class="fas fa-th-large mr-2 text-blue-600"></i>
展品范围
</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 animate-fadeInUp animation-delay-200">
<div class="relative overflow-hidden rounded-xl mb-4 h-32 bg-gradient-to-r from-blue-400 to-blue-600">
<img src="../../data/会展策划/image/3.小米汽车.jpg" alt="整车展示" class="w-full h-full object-cover opacity-60">
<div class="absolute inset-0 flex items-center justify-center">
<i class="fas fa-car-side text-5xl text-white"></i>
</div>
</div>
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
<i class="fas fa-car text-xl"></i>
</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 animate-fadeInUp animation-delay-400">
<div class="relative overflow-hidden rounded-xl mb-4 h-32 bg-gradient-to-r from-green-400 to-green-600">
<img src="../../data/会展策划/image/Whisk_8236005bb2.jpg" alt="核心零部件" class="w-full h-full object-cover opacity-60">
<div class="absolute inset-0 flex items-center justify-center">
<i class="fas fa-battery-full text-5xl text-white"></i>
</div>
</div>
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
<i class="fas fa-bolt text-xl"></i>
</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 animate-fadeInUp animation-delay-600">
<div class="relative overflow-hidden rounded-xl mb-4 h-32 bg-gradient-to-r from-purple-400 to-purple-600">
<img src="../../data/会展策划/image/Whisk_5c4b912ea7.jpg" alt="智能交通" class="w-full h-full object-cover opacity-60">
<div class="absolute inset-0 flex items-center justify-center">
<i class="fas fa-network-wired text-5xl text-white"></i>
</div>
</div>
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
<i class="fas fa-microchip text-xl"></i>
</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 animate-fadeInUp animation-delay-800">
<div class="relative overflow-hidden rounded-xl mb-4 h-32 bg-gradient-to-r from-orange-400 to-orange-600">
<img src="../../data/会展策划/image/Whisk_2a9b622636.jpg" alt="配套服务" class="w-full h-full object-cover opacity-60">
<div class="absolute inset-0 flex items-center justify-center">
<i class="fas fa-charging-station text-5xl text-white"></i>
</div>
</div>
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
<i class="fas fa-tools text-xl"></i>
</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>
<!-- JavaScript -->
<script src="../js/main.js"></script>
<script>
// 页面加载动画
document.addEventListener('DOMContentLoaded', function() {
// 添加页面进入动画
document.body.classList.add('page-enter');
// 图片懒加载
const images = document.querySelectorAll('img');
images.forEach(img => {
img.addEventListener('load', function() {
this.classList.add('image-loaded');
});
img.addEventListener('error', function() {
this.classList.add('image-error');
this.src = '../data/会展策划/image/博览会.jpg'; // 备用图片
});
});
// 滚动动画触发
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// 观察所有带动画的元素
document.querySelectorAll('.animate-fadeInUp, .animate-fadeInLeft, .animate-fadeInRight').forEach(el => {
observer.observe(el);
});
// 数字动画
function animateNumbers() {
const numbers = [
{ el: document.querySelector('.economic-number'), target: 10, suffix: '亿+' },
{ el: document.querySelector('.social-number'), target: 1, suffix: '亿+次' },
{ el: document.querySelector('.brand-number'), target: 90, suffix: '%+' }
];
numbers.forEach(item => {
if (item.el) {
let current = 0;
const increment = item.target / 50;
const timer = setInterval(() => {
current += increment;
if (current >= item.target) {
current = item.target;
clearInterval(timer);
}
item.el.textContent = Math.floor(current) + item.suffix;
}, 30);
}
});
}
// 触发数字动画
const resultsSection = document.querySelector('#expected-results');
if (resultsSection) {
const resultsObserver = new IntersectionObserver(function(entries) {
if (entries[0].isIntersecting) {
animateNumbers();
resultsObserver.disconnect();
}
});
resultsObserver.observe(resultsSection);
}
});
</script>
</body>
</html>