fix: 修复Agent头像显示和结果弹窗问题
主要修复: - 恢复Agent真实头像显示（替换emoji为实际图片） - 删除自动跳转到ResultPageV2的逻辑 - 修改ResultModal支持动态内容显示 - 根据不同订单班显示对应的方案信息 优化内容: - 重构Agent系统，每个订单班独立管理Agent配置 - 删除不需要的ResultPageV2组件 - handleViewDetails改为在新标签页打开 影响模块: - web_frontend/exhibition-demo/src/components/ResultModal.tsx - web_frontend/exhibition-demo/src/pages/WorkflowPageV4.tsx - web_frontend/exhibition-demo/src/App.tsx - web_frontend/exhibition-demo/src/data/terminalSimulations/*.ts 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yep_Q
672
web_frontend/web_result/order-classes/food/index.html
Normal file
672
web_frontend/web_result/order-classes/food/index.html
Normal file
@@ -0,0 +1,672 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>中高端个性化轻食店铺经营方案 - AI Agent生成</title>
|
||||
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- 字体 -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&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', sans-serif;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.05"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
|
||||
}
|
||||
|
||||
.agent-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.agent-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.agent-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.agent-avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.agent-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.agent-status {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #10b981;
|
||||
border: 3px solid white;
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.section-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 2px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 15px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.timeline-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -30px;
|
||||
top: 5px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #667eea;
|
||||
border: 3px solid white;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 4px #f3f4f6;
|
||||
}
|
||||
|
||||
.ai-thinking {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 5px 15px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
animation: thinking 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes thinking {
|
||||
0%, 100% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-card {
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu-card::after {
|
||||
content: '🥗';
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 40px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.price-tag {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 20px;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<!-- 英雄区域 -->
|
||||
<section class="hero-section text-white py-20 relative">
|
||||
<div class="container mx-auto px-4 relative z-10">
|
||||
<div class="text-center">
|
||||
<div class="inline-flex items-center space-x-2 bg-white/20 backdrop-blur px-4 py-2 rounded-full mb-4">
|
||||
<span class="ai-thinking">
|
||||
<i class="fas fa-robot mr-2"></i>
|
||||
AI Agent 协作生成
|
||||
</span>
|
||||
</div>
|
||||
<h1 class="text-5xl font-bold mb-4">中高端个性化轻食店铺</h1>
|
||||
<h2 class="text-3xl font-light mb-6">经营管理完整方案</h2>
|
||||
<p class="text-xl opacity-90 max-w-3xl mx-auto">
|
||||
7位AI专家通过多轮协作，为您打造从市场调研到经营管理的全方位解决方案
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- AI专家团队 -->
|
||||
<section class="container mx-auto px-4 py-12">
|
||||
<div class="text-center mb-10">
|
||||
<h2 class="text-3xl font-bold mb-4">AI专家团队</h2>
|
||||
<p class="text-gray-600">每位专家独立思考，协同工作，确保方案的专业性和完整性</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4">
|
||||
<div class="agent-card text-center">
|
||||
<div class="agent-avatar">
|
||||
<img src="/data/订单班文档资料/食品/agent头像/餐饮市场调研专家.png" alt="市场调研专家">
|
||||
<div class="agent-status"></div>
|
||||
</div>
|
||||
<h3 class="font-semibold">市场调研专家</h3>
|
||||
<p class="text-xs text-gray-500 mt-2">市场分析 · 用户洞察</p>
|
||||
</div>
|
||||
|
||||
<div class="agent-card text-center">
|
||||
<div class="agent-avatar">
|
||||
<img src="/data/订单班文档资料/食品/agent头像/餐饮品牌设计专家.png" alt="品牌设计专家">
|
||||
<div class="agent-status"></div>
|
||||
</div>
|
||||
<h3 class="font-semibold">品牌设计专家</h3>
|
||||
<p class="text-xs text-gray-500 mt-2">品牌策略 · VI设计</p>
|
||||
</div>
|
||||
|
||||
<div class="agent-card text-center">
|
||||
<div class="agent-avatar">
|
||||
<img src="/data/订单班文档资料/食品/agent头像/菜品研发专家.png" alt="菜品研发专家">
|
||||
<div class="agent-status"></div>
|
||||
</div>
|
||||
<h3 class="font-semibold">菜品研发专家</h3>
|
||||
<p class="text-xs text-gray-500 mt-2">菜品创新 · 营养搭配</p>
|
||||
</div>
|
||||
|
||||
<div class="agent-card text-center">
|
||||
<div class="agent-avatar">
|
||||
<img src="/data/订单班文档资料/食品/agent头像/餐厅选址装修专家.png" alt="选址装修专家">
|
||||
<div class="agent-status"></div>
|
||||
</div>
|
||||
<h3 class="font-semibold">选址装修专家</h3>
|
||||
<p class="text-xs text-gray-500 mt-2">选址策略 · 空间设计</p>
|
||||
</div>
|
||||
|
||||
<div class="agent-card text-center">
|
||||
<div class="agent-avatar">
|
||||
<img src="/data/订单班文档资料/食品/agent头像/餐饮团队人员管理专家.png" alt="团队管理专家">
|
||||
<div class="agent-status"></div>
|
||||
</div>
|
||||
<h3 class="font-semibold">团队管理专家</h3>
|
||||
<p class="text-xs text-gray-500 mt-2">组织架构 · 人才培养</p>
|
||||
</div>
|
||||
|
||||
<div class="agent-card text-center">
|
||||
<div class="agent-avatar">
|
||||
<img src="/data/订单班文档资料/食品/agent头像/财务预算专家.png" alt="财务预算专家">
|
||||
<div class="agent-status"></div>
|
||||
</div>
|
||||
<h3 class="font-semibold">财务预算专家</h3>
|
||||
<p class="text-xs text-gray-500 mt-2">成本控制 · 盈利预测</p>
|
||||
</div>
|
||||
|
||||
<div class="agent-card text-center">
|
||||
<div class="agent-avatar">
|
||||
<img src="/data/订单班文档资料/食品/agent头像/轻食店经营管理专家.png" alt="经营管理专家">
|
||||
<div class="agent-status"></div>
|
||||
</div>
|
||||
<h3 class="font-semibold">经营管理专家</h3>
|
||||
<p class="text-xs text-gray-500 mt-2">运营策略 · 业绩提升</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 方案内容 -->
|
||||
<section class="container mx-auto px-4 py-12">
|
||||
<!-- 市场调研分析 -->
|
||||
<div class="section-card">
|
||||
<div class="section-header">
|
||||
<div class="section-icon bg-blue-100 text-blue-600">
|
||||
<i class="fas fa-chart-line"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold">市场调研分析</h3>
|
||||
<p class="text-gray-600">深度洞察轻食市场机遇</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h4 class="font-semibold mb-3">市场规模与增长</h4>
|
||||
<ul class="space-y-2">
|
||||
<li class="flex items-start">
|
||||
<span class="text-green-500 mr-2">✓</span>
|
||||
<span>轻食市场规模达500亿，年增长率25%</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-green-500 mr-2">✓</span>
|
||||
<span>一二线城市渗透率仅15%，增长空间巨大</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-green-500 mr-2">✓</span>
|
||||
<span>健康意识提升带动消费升级</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-semibold mb-3">目标客群画像</h4>
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<div class="mb-2">
|
||||
<span class="font-medium">年龄：</span> 25-40岁都市白领
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium">收入：</span> 月收入8000元以上
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium">特征：</span> 注重健康、追求品质生活
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium">痛点：</span> 缺乏个性化健康餐饮选择
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 品牌设计方案 -->
|
||||
<div class="section-card">
|
||||
<div class="section-header">
|
||||
<div class="section-icon bg-purple-100 text-purple-600">
|
||||
<i class="fas fa-palette"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold">品牌设计方案</h3>
|
||||
<p class="text-gray-600">打造独特的品牌形象</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<h4 class="font-semibold mb-3">品牌定位</h4>
|
||||
<p class="text-gray-600">「轻享生活·悦享健康」</p>
|
||||
<p class="text-sm text-gray-500 mt-2">
|
||||
为追求健康生活方式的都市人群提供个性化、高品质的轻食体验
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-semibold mb-3">视觉识别</h4>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center">
|
||||
<div class="w-8 h-8 bg-green-400 rounded mr-2"></div>
|
||||
<span class="text-sm">主色：清新绿</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-8 h-8 bg-orange-300 rounded mr-2"></div>
|
||||
<span class="text-sm">辅色：活力橙</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-semibold mb-3">品牌理念</h4>
|
||||
<ul class="space-y-1 text-sm">
|
||||
<li>• 新鲜：食材每日配送</li>
|
||||
<li>• 健康：营养科学搭配</li>
|
||||
<li>• 个性：定制化服务</li>
|
||||
<li>• 品质：精选优质食材</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 菜品研发计划 -->
|
||||
<div class="section-card">
|
||||
<div class="section-header">
|
||||
<div class="section-icon bg-green-100 text-green-600">
|
||||
<i class="fas fa-utensils"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold">菜品研发计划</h3>
|
||||
<p class="text-gray-600">创新菜品满足多元需求</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="menu-card">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<h4 class="font-bold text-lg">经典轻食系列</h4>
|
||||
<p class="text-sm text-gray-700 mt-1">凯撒沙拉、藜麦饭、烤鸡胸肉</p>
|
||||
</div>
|
||||
<span class="price-tag">¥35-45</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-card">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<h4 class="font-bold text-lg">创意融合系列</h4>
|
||||
<p class="text-sm text-gray-700 mt-1">墨西哥卷、泰式沙拉、日式便当</p>
|
||||
</div>
|
||||
<span class="price-tag">¥40-55</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-card">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<h4 class="font-bold text-lg">定制营养餐</h4>
|
||||
<p class="text-sm text-gray-700 mt-1">根据个人需求定制，专业营养师配餐</p>
|
||||
</div>
|
||||
<span class="price-tag">¥50-80</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选址与装修设计 -->
|
||||
<div class="section-card">
|
||||
<div class="section-header">
|
||||
<div class="section-icon bg-indigo-100 text-indigo-600">
|
||||
<i class="fas fa-map-marked-alt"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold">选址与装修设计</h3>
|
||||
<p class="text-gray-600">打造舒适用餐环境</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h4 class="font-semibold mb-3">选址策略</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="bg-gray-50 p-3 rounded">
|
||||
<strong>首选区域：</strong>CBD商圈、高端写字楼
|
||||
</div>
|
||||
<div class="bg-gray-50 p-3 rounded">
|
||||
<strong>面积要求：</strong>80-120平方米
|
||||
</div>
|
||||
<div class="bg-gray-50 p-3 rounded">
|
||||
<strong>租金预算：</strong>200-300元/平方米/月
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-semibold mb-3">装修风格</h4>
|
||||
<ul class="space-y-2">
|
||||
<li class="flex items-start">
|
||||
<span class="text-indigo-500 mr-2">◆</span>
|
||||
<span>北欧简约风格，营造轻松氛围</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-indigo-500 mr-2">◆</span>
|
||||
<span>开放式厨房，展示制作过程</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-indigo-500 mr-2">◆</span>
|
||||
<span>绿植装饰，强化健康理念</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-indigo-500 mr-2">◆</span>
|
||||
<span>舒适座椅，满足商务洽谈需求</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 财务预算规划 -->
|
||||
<div class="section-card">
|
||||
<div class="section-header">
|
||||
<div class="section-icon bg-yellow-100 text-yellow-600">
|
||||
<i class="fas fa-calculator"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold">财务预算规划</h3>
|
||||
<p class="text-gray-600">科学规划资金投入</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="bg-blue-50 p-4 rounded-lg">
|
||||
<h4 class="font-semibold text-blue-900 mb-2">初始投资</h4>
|
||||
<p class="text-3xl font-bold text-blue-600">80-120万</p>
|
||||
<ul class="text-sm mt-2 space-y-1">
|
||||
<li>装修：40万</li>
|
||||
<li>设备：25万</li>
|
||||
<li>加盟/品牌：15万</li>
|
||||
<li>流动资金：20万</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-green-50 p-4 rounded-lg">
|
||||
<h4 class="font-semibold text-green-900 mb-2">月度运营</h4>
|
||||
<p class="text-3xl font-bold text-green-600">25-35万</p>
|
||||
<ul class="text-sm mt-2 space-y-1">
|
||||
<li>租金：2.5万</li>
|
||||
<li>人工：8万</li>
|
||||
<li>食材：10万</li>
|
||||
<li>其他：5万</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-purple-50 p-4 rounded-lg">
|
||||
<h4 class="font-semibold text-purple-900 mb-2">预期回报</h4>
|
||||
<p class="text-3xl font-bold text-purple-600">18个月</p>
|
||||
<ul class="text-sm mt-2 space-y-1">
|
||||
<li>日客流：150-200人</li>
|
||||
<li>客单价：45元</li>
|
||||
<li>毛利率：65%</li>
|
||||
<li>净利率：20-25%</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 实施时间线 -->
|
||||
<div class="section-card">
|
||||
<div class="section-header">
|
||||
<div class="section-icon bg-red-100 text-red-600">
|
||||
<i class="fas fa-clock"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold">实施时间线</h3>
|
||||
<p class="text-gray-600">3个月完成开业准备</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<h4 class="font-semibold">第1个月：筹备阶段</h4>
|
||||
<p class="text-gray-600">选址确定、设计方案、办理证照</p>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<h4 class="font-semibold">第2个月：建设阶段</h4>
|
||||
<p class="text-gray-600">装修施工、设备采购、人员招聘</p>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<h4 class="font-semibold">第3个月：试营业</h4>
|
||||
<p class="text-gray-600">员工培训、试营业、营销推广</p>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<h4 class="font-semibold">正式开业</h4>
|
||||
<p class="text-gray-600">盛大开业、会员体系上线、持续优化</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- AI协作说明 -->
|
||||
<section class="bg-gradient-to-br from-purple-600 to-blue-600 text-white py-16">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-10">
|
||||
<h2 class="text-3xl font-bold mb-4">AI Agent 协作过程</h2>
|
||||
<p class="text-xl opacity-90">7位专家如何协同工作</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="bg-white/10 backdrop-blur rounded-lg p-6">
|
||||
<div class="text-3xl mb-4">1️⃣</div>
|
||||
<h3 class="text-xl font-semibold mb-2">独立分析</h3>
|
||||
<p class="opacity-90">每位专家基于自身专业领域，独立分析项目需求，形成初步方案</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/10 backdrop-blur rounded-lg p-6">
|
||||
<div class="text-3xl mb-4">2️⃣</div>
|
||||
<h3 class="text-xl font-semibold mb-2">交叉验证</h3>
|
||||
<p class="opacity-90">专家间相互审阅方案，确保各模块间的协调性和可行性</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/10 backdrop-blur rounded-lg p-6">
|
||||
<div class="text-3xl mb-4">3️⃣</div>
|
||||
<h3 class="text-xl font-semibold mb-2">整合优化</h3>
|
||||
<p class="opacity-90">经营管理专家整合各方案，形成完整的经营管理体系</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 底部行动号召 -->
|
||||
<section class="py-16">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-3xl font-bold mb-6">开启您的轻食创业之旅</h2>
|
||||
<p class="text-xl text-gray-600 mb-8">
|
||||
AI Agent 已为您准备好完整的经营方案，让创业更简单
|
||||
</p>
|
||||
<div class="flex justify-center space-x-4">
|
||||
<button class="bg-gradient-to-r from-purple-600 to-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:shadow-lg transition">
|
||||
下载完整方案
|
||||
</button>
|
||||
<button class="border-2 border-purple-600 text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-purple-50 transition">
|
||||
预约咨询
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 返回顶部按钮 -->
|
||||
<button id="backToTop" class="fixed bottom-8 right-8 bg-purple-600 text-white p-4 rounded-full shadow-lg hover:bg-purple-700 transition opacity-0 invisible">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
</button>
|
||||
|
||||
<script>
|
||||
// 返回顶部功能
|
||||
window.addEventListener('scroll', () => {
|
||||
const backToTop = document.getElementById('backToTop');
|
||||
if (window.scrollY > 300) {
|
||||
backToTop.classList.remove('opacity-0', 'invisible');
|
||||
backToTop.classList.add('opacity-100', 'visible');
|
||||
} else {
|
||||
backToTop.classList.add('opacity-0', 'invisible');
|
||||
backToTop.classList.remove('opacity-100', 'visible');
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('backToTop').addEventListener('click', () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
});
|
||||
|
||||
// AI思考动画
|
||||
const thinkingElements = document.querySelectorAll('.ai-thinking');
|
||||
thinkingElements.forEach(el => {
|
||||
setInterval(() => {
|
||||
const dots = ['', '.', '..', '...'];
|
||||
const currentText = el.textContent;
|
||||
const baseText = currentText.replace(/\.+$/, '');
|
||||
const dotIndex = (dots.indexOf(currentText.slice(baseText.length)) + 1) % dots.length;
|
||||
el.textContent = baseText + dots[dotIndex];
|
||||
}, 500);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1105
web_frontend/web_result/order-classes/wenlu/budget.html
Normal file
1105
web_frontend/web_result/order-classes/wenlu/budget.html
Normal file
File diff suppressed because it is too large
Load Diff
811
web_frontend/web_result/order-classes/wenlu/exhibition.html
Normal file
811
web_frontend/web_result/order-classes/wenlu/exhibition.html
Normal file
@@ -0,0 +1,811 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<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="stylesheet" href="../css/animations.css">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- 字体 -->
|
||||
<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">
|
||||
|
||||
<!-- 页面加载动画 -->
|
||||
<!-- 错误处理（需要最早加载） -->
|
||||
<script src="../js/error-handler.js"></script>
|
||||
|
||||
<script src="../js/page-loader.js"></script>
|
||||
|
||||
<!-- 移动端优化 -->
|
||||
<script src="../js/mobile-optimize.js"></script>
|
||||
|
||||
<!-- 性能优化 -->
|
||||
<script src="../js/performance-optimizer.js"></script>
|
||||
<style>
|
||||
* {
|
||||
font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
/* Glass morphism effect */
|
||||
.glass-morphism {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* 页面加载动画 */
|
||||
.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 glass-morphism shadow-md z-50 transition-all duration-300">
|
||||
<!-- Content will be dynamically generated by nav-component.js -->
|
||||
</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>© 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>
|
||||
<script src="../js/nav-component.js"></script>
|
||||
<script src="../js/back-to-top.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
569
web_frontend/web_result/order-classes/wenlu/index.html
Normal file
569
web_frontend/web_result/order-classes/wenlu/index.html
Normal file
@@ -0,0 +1,569 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<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="preload" href="css/styles.css" as="style">
|
||||
<link rel="preload" href="css/animations.css" as="style">
|
||||
|
||||
<!-- 样式表 -->
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<link rel="stylesheet" href="css/animations.css">
|
||||
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- 字体 -->
|
||||
<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&family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- 错误处理（需要最早加载） -->
|
||||
<script src="js/error-handler.js"></script>
|
||||
|
||||
<!-- 订单班处理器（需要早加载） -->
|
||||
<script src="js/order-class-handler.js"></script>
|
||||
|
||||
<!-- 页面加载动画（需要尽早加载） -->
|
||||
<script src="js/page-loader.js"></script>
|
||||
|
||||
<!-- 移动端优化 -->
|
||||
<script src="js/mobile-optimize.js"></script>
|
||||
|
||||
<!-- 性能优化 -->
|
||||
<script src="js/performance-optimizer.js"></script>
|
||||
|
||||
<!-- 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;
|
||||
}
|
||||
|
||||
.hero-gradient {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(16, 185, 129, 0.1) 0%,
|
||||
rgba(59, 130, 246, 0.1) 50%,
|
||||
rgba(139, 92, 246, 0.1) 100%);
|
||||
}
|
||||
|
||||
.image-shine {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-shine::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
transparent 30%,
|
||||
rgba(255, 255, 255, 0.3) 50%,
|
||||
transparent 70%
|
||||
);
|
||||
transform: rotate(45deg);
|
||||
transition: all 0.6s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.image-shine:hover::before {
|
||||
animation: shine 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); opacity: 0; }
|
||||
50% { opacity: 1; }
|
||||
100% { transform: translateX(100%) translateY(100%) rotate(45deg); opacity: 0; }
|
||||
}
|
||||
|
||||
.floating {
|
||||
animation: floating 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes floating {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
/* 确保页面加载时body不能滚动 */
|
||||
body.loading {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 图片加载优化 */
|
||||
img {
|
||||
background-color: #f3f4f6;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
img.image-loaded {
|
||||
opacity: 1;
|
||||
animation: fadeIn 0.5s ease;
|
||||
}
|
||||
|
||||
img.image-error {
|
||||
opacity: 0.5;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50 loading">
|
||||
<!-- 页面加载器将由page-loader.js动态创建 -->
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 w-full glass-morphism shadow-md z-50 transition-all duration-300" id="navbar">
|
||||
<!-- Content will be dynamically generated by nav-component.js -->
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative min-h-screen flex items-center justify-center overflow-hidden hero-gradient py-32">
|
||||
<!-- 背景图片 -->
|
||||
<div class="absolute inset-0 z-0">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-purple-100 via-blue-50 to-emerald-50"></div>
|
||||
<div class="absolute inset-0 opacity-10" style="background-image: url('../data/会展策划/image/博览会.jpg'); background-size: cover; background-position: center;"></div>
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-white/60 to-white/90"></div>
|
||||
</div>
|
||||
|
||||
<!-- 浮动装饰元素 -->
|
||||
<div class="absolute top-20 left-10 w-20 h-20 bg-emerald-400 rounded-full opacity-20 floating"></div>
|
||||
<div class="absolute bottom-20 right-10 w-32 h-32 bg-blue-400 rounded-full opacity-20 floating" style="animation-delay: 1s;"></div>
|
||||
<div class="absolute top-1/2 left-20 w-16 h-16 bg-purple-400 rounded-full opacity-20 floating" style="animation-delay: 2s;"></div>
|
||||
|
||||
<div class="relative z-10 container mx-auto px-6 text-center py-12">
|
||||
<div class="fade-in-up">
|
||||
<!-- 标签 -->
|
||||
<div class="inline-flex items-center px-4 py-2 bg-white/80 backdrop-blur-sm rounded-full mb-6 shadow-lg">
|
||||
<span class="animate-pulse w-2 h-2 bg-emerald-500 rounded-full mr-2"></span>
|
||||
<span class="text-sm font-semibold text-gray-700">2024年6月15-17日 · 苏州国际博览中心</span>
|
||||
</div>
|
||||
|
||||
<h1 class="text-5xl md:text-7xl font-black mb-6">
|
||||
<span class="block text-gradient-animate" data-order-title>2024长三角国际新能源汽车与智能交通产业博览会</span>
|
||||
<span class="block text-4xl md:text-5xl text-gray-600 mt-2" data-order-subtitle>新能源汽车产业博览会</span>
|
||||
</h1>
|
||||
|
||||
<p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto">
|
||||
<i class="fas fa-quote-left text-emerald-500 mr-2"></i>
|
||||
引领绿色出行新时代 · 共创智能交通新未来
|
||||
<i class="fas fa-quote-right text-emerald-500 ml-2"></i>
|
||||
</p>
|
||||
<!-- 核心信息展示 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12 max-w-5xl mx-auto">
|
||||
<div class="bg-white/95 backdrop-blur-md rounded-2xl p-6 border-2 border-purple-200 hover:border-purple-400 transition-all duration-300 transform hover:scale-105 animate-fadeInUp animation-delay-200 shadow-2xl">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-full flex items-center justify-center mb-3 shadow-lg">
|
||||
<i class="fas fa-calendar-alt text-3xl text-white"></i>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm font-medium mb-2">展会时间</p>
|
||||
<p class="text-gray-900 font-bold text-2xl text-center">2024年9月</p>
|
||||
<p class="text-gray-800 font-bold text-xl">12-15日</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/95 backdrop-blur-md rounded-2xl p-6 border-2 border-blue-200 hover:border-blue-400 transition-all duration-300 transform hover:scale-105 animate-fadeInUp animation-delay-400 shadow-2xl">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center mb-3 shadow-lg">
|
||||
<i class="fas fa-map-marked-alt text-3xl text-white"></i>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm font-medium mb-2">展会地点</p>
|
||||
<p class="text-gray-900 font-bold text-2xl text-center">国家会展中心</p>
|
||||
<p class="text-gray-800 font-bold text-xl">上海</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/95 backdrop-blur-md rounded-2xl p-6 border-2 border-green-200 hover:border-green-400 transition-all duration-300 transform hover:scale-105 animate-fadeInUp animation-delay-600 shadow-2xl">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center mb-3 shadow-lg">
|
||||
<i class="fas fa-expand-arrows-alt text-3xl text-white"></i>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm font-medium mb-2">展览规模</p>
|
||||
<p class="text-gray-900 font-bold text-3xl">50,000</p>
|
||||
<p class="text-gray-800 font-bold text-lg">平方米</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA按钮组 -->
|
||||
<div class="flex flex-col md:flex-row gap-6 justify-center items-center animate-fadeInUp animation-delay-800">
|
||||
<a href="pages/overview.html" class="group relative overflow-hidden bg-white text-purple-700 px-12 py-5 rounded-full font-bold text-xl shadow-2xl hover:shadow-white/30 transition-all duration-300 transform hover:scale-110">
|
||||
<span class="absolute inset-0 bg-gradient-to-r from-purple-600 to-pink-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
|
||||
<span class="relative z-10 flex items-center group-hover:text-white">
|
||||
<i class="fas fa-sparkles mr-3 text-2xl animate-pulse"></i>
|
||||
了解详情
|
||||
<i class="fas fa-arrow-right ml-3 group-hover:translate-x-2 transition-transform"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a href="#highlights" class="group relative overflow-hidden bg-gradient-to-r from-purple-600 to-pink-600 text-white px-12 py-5 rounded-full font-bold text-xl hover:from-purple-700 hover:to-pink-700 transition-all duration-300 transform hover:scale-110 shadow-2xl">
|
||||
<span class="relative z-10 flex items-center">
|
||||
<i class="fas fa-star mr-3 text-2xl text-yellow-300"></i>
|
||||
展会亮点
|
||||
<i class="fas fa-chevron-down ml-3 animate-bounce"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Key Stats Section -->
|
||||
<section class="py-20 -mt-20 relative z-20 bg-gradient-to-br from-white via-gray-50 to-white">
|
||||
<!-- 背景装饰 -->
|
||||
<div class="absolute inset-0 opacity-5" style="background-image: url('../data/会展策划/image/Whisk_9e8c1f44ac.jpg'); background-size: cover; background-position: center;"></div>
|
||||
|
||||
<div class="container mx-auto px-6 relative z-10" title="核心数据展示区">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
|
||||
<div class="text-center group animate-fadeInUp animation-delay-200 transform hover:scale-105 transition-all duration-300">
|
||||
<div class="w-24 h-24 mx-auto mb-4 bg-white rounded-2xl flex items-center justify-center shadow-lg group-hover:shadow-xl border-2 border-purple-200 group-hover:border-purple-400 group-hover:rotate-3 transition-all">
|
||||
<i class="fas fa-building text-4xl text-purple-600"></i>
|
||||
</div>
|
||||
<div class="text-5xl font-bold text-gray-800 mb-2">
|
||||
<span class="counter" data-target="350">0</span>+
|
||||
</div>
|
||||
<div class="text-gray-700 font-semibold text-lg">参展企业</div>
|
||||
</div>
|
||||
<div class="text-center group animate-fadeInUp animation-delay-400 transform hover:scale-105 transition-all duration-300">
|
||||
<div class="w-24 h-24 mx-auto mb-4 bg-white rounded-2xl flex items-center justify-center shadow-lg group-hover:shadow-xl border-2 border-blue-200 group-hover:border-blue-400 group-hover:-rotate-3 transition-all">
|
||||
<i class="fas fa-users text-4xl text-blue-600"></i>
|
||||
</div>
|
||||
<div class="text-5xl font-bold text-gray-800 mb-2">
|
||||
<span class="counter" data-target="50000">0</span>+
|
||||
</div>
|
||||
<div class="text-gray-700 font-semibold text-lg">预计观众</div>
|
||||
</div>
|
||||
<div class="text-center group animate-fadeInUp animation-delay-600 transform hover:scale-105 transition-all duration-300">
|
||||
<div class="w-24 h-24 mx-auto mb-4 bg-white rounded-2xl flex items-center justify-center shadow-lg group-hover:shadow-xl border-2 border-green-200 group-hover:border-green-400 group-hover:rotate-3 transition-all">
|
||||
<i class="fas fa-hand-holding-usd text-4xl text-green-600"></i>
|
||||
</div>
|
||||
<div class="text-5xl font-bold text-gray-800 mb-2">
|
||||
<span class="counter" data-target="10">0</span>亿+
|
||||
</div>
|
||||
<div class="text-gray-700 font-semibold text-lg">预计成交额</div>
|
||||
</div>
|
||||
<div class="text-center group animate-fadeInUp animation-delay-800 transform hover:scale-105 transition-all duration-300">
|
||||
<div class="w-24 h-24 mx-auto mb-4 bg-white rounded-2xl flex items-center justify-center shadow-lg group-hover:shadow-xl border-2 border-orange-200 group-hover:border-orange-400 group-hover:-rotate-3 transition-all">
|
||||
<i class="fas fa-microphone-alt text-4xl text-orange-600"></i>
|
||||
</div>
|
||||
<div class="text-5xl font-bold text-gray-800 mb-2">
|
||||
<span class="counter" data-target="20">0</span>+
|
||||
</div>
|
||||
<div class="text-gray-700 font-semibold text-lg">专业论坛</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Highlights Section -->
|
||||
<section id="highlights" class="py-20 relative overflow-hidden">
|
||||
<!-- 背景图片层 - 降低透明度 -->
|
||||
<div class="absolute inset-0 opacity-20" style="background-image: url('../data/会展策划/image/Whisk_27184afa6e.jpg'); background-size: cover; background-position: center; background-attachment: fixed;"></div>
|
||||
|
||||
<!-- 强化遮罩层 - 确保主体内容清晰 -->
|
||||
<div class="absolute inset-0 bg-white/85"></div>
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-gray-50/95 to-purple-50/95"></div>
|
||||
<div class="absolute inset-0 opacity-10">
|
||||
<div class="absolute top-20 left-20 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl animate-blob"></div>
|
||||
<div class="absolute top-40 right-20 w-72 h-72 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-2000"></div>
|
||||
<div class="absolute -bottom-8 left-40 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-4000"></div>
|
||||
</div>
|
||||
<div class="container mx-auto px-6 relative z-10" title="展会亮点展示区">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-12 animate-fadeInUp">展会亮点</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- Card 1 -->
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl animate-fadeInUp animation-delay-200">
|
||||
<div class="h-48 relative overflow-hidden">
|
||||
<img src="../data/会展策划/image/3.小米汽车.jpg" alt="小米汽车" class="w-full h-full object-cover">
|
||||
<div class="absolute top-4 left-4">
|
||||
<div class="bg-blue-500 text-white px-3 py-1 rounded-full text-xs font-semibold">热门展区</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-800">全产业链展示</h3>
|
||||
<p class="text-gray-600 mb-4">
|
||||
涵盖整车制造、核心零部件、充电设施、智能网联等全产业链环节，打造一站式采购平台。
|
||||
</p>
|
||||
<a href="pages/exhibition.html" class="text-purple-600 font-semibold hover:text-purple-800 flex items-center group">
|
||||
了解更多 <i class="fas fa-arrow-right ml-2 transform transition-transform group-hover:translate-x-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl animate-fadeInUp animation-delay-400">
|
||||
<div class="h-48 relative overflow-hidden">
|
||||
<img src="../data/会展策划/image/2.试驾小景.jpg" alt="试驾体验" class="w-full h-full object-cover">
|
||||
<div class="absolute top-4 left-4">
|
||||
<div class="bg-emerald-500 text-white px-3 py-1 rounded-full text-xs font-semibold">互动体验</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-800">创新技术体验</h3>
|
||||
<p class="text-gray-600 mb-4">
|
||||
设置自动驾驶体验区、智能交通演示区，让观众亲身体验最新科技成果。
|
||||
</p>
|
||||
<a href="pages/operation.html" class="text-emerald-600 font-semibold hover:text-emerald-800 flex items-center group">
|
||||
了解更多 <i class="fas fa-arrow-right ml-2 transform transition-transform group-hover:translate-x-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl animate-fadeInUp animation-delay-600">
|
||||
<div class="h-48 relative overflow-hidden">
|
||||
<img src="../data/会展策划/image/展会内部参观.jpg" alt="论坛峰会" class="w-full h-full object-cover">
|
||||
<div class="absolute top-4 left-4">
|
||||
<div class="bg-purple-500 text-white px-3 py-1 rounded-full text-xs font-semibold">主题论坛</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-800">高端论坛峰会</h3>
|
||||
<p class="text-gray-600 mb-4">
|
||||
汇聚行业领袖、专家学者，探讨产业发展趋势，发布权威研究报告。
|
||||
</p>
|
||||
<a href="pages/marketing.html" class="text-purple-600 font-semibold hover:text-purple-800 flex items-center group">
|
||||
了解更多 <i class="fas fa-arrow-right ml-2 transform transition-transform group-hover:translate-x-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Exhibition Areas -->
|
||||
<section class="py-20 bg-gradient-to-br from-white via-indigo-50 to-purple-50">
|
||||
<div class="container mx-auto px-6">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-4 animate-fadeInUp">展区规划</h2>
|
||||
<p class="text-center text-gray-600 mb-12 animate-fadeInUp animation-delay-200">50,000平方米超大展览空间，打造沉浸式体验</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="group text-center p-6 bg-white/80 backdrop-blur border-2 border-purple-200 rounded-2xl hover:border-purple-500 hover:shadow-2xl transform transition-all duration-300 hover:-translate-y-2 animate-fadeInUp animation-delay-300">
|
||||
<div class="w-20 h-20 bg-gradient-to-br from-blue-400 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:rotate-6 transition-transform duration-300">
|
||||
<i class="fas fa-car text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2 text-gray-800">整车展示区</h3>
|
||||
<p class="text-purple-600 font-bold text-xl mb-1">20,000m²</p>
|
||||
<p class="text-gray-500 text-sm">100+品牌车型</p>
|
||||
<div class="mt-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<span class="inline-block bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-xs">核心展区</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group text-center p-6 bg-white/80 backdrop-blur border-2 border-emerald-200 rounded-2xl hover:border-emerald-500 hover:shadow-2xl transform transition-all duration-300 hover:-translate-y-2 animate-fadeInUp animation-delay-400">
|
||||
<div class="w-20 h-20 bg-gradient-to-br from-emerald-400 to-teal-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:rotate-6 transition-transform duration-300">
|
||||
<i class="fas fa-microchip text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2 text-gray-800">核心零部件区</h3>
|
||||
<p class="text-emerald-600 font-bold text-xl mb-1">15,000m²</p>
|
||||
<p class="text-gray-500 text-sm">500+供应商</p>
|
||||
<div class="mt-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<span class="inline-block bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs">技术展示</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group text-center p-6 bg-white/80 backdrop-blur border-2 border-indigo-200 rounded-2xl hover:border-indigo-500 hover:shadow-2xl transform transition-all duration-300 hover:-translate-y-2 animate-fadeInUp animation-delay-500">
|
||||
<div class="w-20 h-20 bg-gradient-to-br from-indigo-400 to-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:rotate-6 transition-transform duration-300">
|
||||
<i class="fas fa-network-wired text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2 text-gray-800">智能交通区</h3>
|
||||
<p class="text-indigo-600 font-bold text-xl mb-1">10,000m²</p>
|
||||
<p class="text-gray-500 text-sm">50+解决方案</p>
|
||||
<div class="mt-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<span class="inline-block bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full text-xs">创新科技</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group text-center p-6 bg-white/80 backdrop-blur border-2 border-pink-200 rounded-2xl hover:border-pink-500 hover:shadow-2xl transform transition-all duration-300 hover:-translate-y-2 animate-fadeInUp animation-delay-600">
|
||||
<div class="w-20 h-20 bg-gradient-to-br from-pink-400 to-rose-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:rotate-6 transition-transform duration-300">
|
||||
<i class="fas fa-gamepad text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2 text-gray-800">体验互动区</h3>
|
||||
<p class="text-pink-600 font-bold text-xl mb-1">5,000m²</p>
|
||||
<p class="text-gray-500 text-sm">20+互动项目</p>
|
||||
<div class="mt-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<span class="inline-block bg-pink-100 text-pink-700 px-3 py-1 rounded-full text-xs">沉浸体验</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 展馆布置图 -->
|
||||
<div class="mt-12 animate-fadeInUp animation-delay-700">
|
||||
<div class="bg-white/90 backdrop-blur rounded-2xl shadow-xl overflow-hidden">
|
||||
<img src="../data/会展策划/image/展馆布置图.jpeg" alt="展馆布置图" class="w-full h-auto hover:scale-105 transition-transform duration-700">
|
||||
<div class="p-4 bg-gradient-to-r from-purple-600 to-indigo-600 text-white">
|
||||
<p class="text-center font-semibold"><i class="fas fa-map-marked-alt mr-2"></i>展馆3D全景布置图 - 点击查看详情</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Gallery Section -->
|
||||
<section class="py-20 bg-gradient-to-br from-gray-900 to-purple-900 relative overflow-hidden">
|
||||
<div class="absolute inset-0 opacity-10">
|
||||
<div class="absolute top-0 left-0 w-full h-full bg-[url('../data/会展策划/image/展会内部参观.jpg')] bg-cover bg-center bg-fixed"></div>
|
||||
</div>
|
||||
<div class="container mx-auto px-6 relative z-10" title="精彩瞬间展示区">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-center text-white mb-12 animate-fadeInUp">精彩瞬间</h2>
|
||||
<div class="grid md:grid-cols-3 gap-6 mb-8">
|
||||
<div class="group relative overflow-hidden rounded-2xl shadow-2xl animate-fadeInUp animation-delay-200">
|
||||
<img src="../data/会展策划/image/展会内部参观.jpg" alt="展会内部" class="w-full h-64 object-cover transform transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
|
||||
<div class="p-6 text-white transform translate-y-20 group-hover:translate-y-0 transition-transform duration-300">
|
||||
<h3 class="text-xl font-bold mb-2">展馆内部参观</h3>
|
||||
<p class="text-sm">宽敞明亮的展示空间，科技感十足</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group relative overflow-hidden rounded-2xl shadow-2xl animate-fadeInUp animation-delay-400">
|
||||
<img src="../data/会展策划/image/签到.jpg" alt="签到处" class="w-full h-64 object-cover transform transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
|
||||
<div class="p-6 text-white transform translate-y-20 group-hover:translate-y-0 transition-transform duration-300">
|
||||
<h3 class="text-xl font-bold mb-2">智能签到系统</h3>
|
||||
<p class="text-sm">快速便捷的入场体验</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group relative overflow-hidden rounded-2xl shadow-2xl animate-fadeInUp animation-delay-600">
|
||||
<img src="../data/会展策划/image/3.小米汽车.jpg" alt="展品展示" class="w-full h-64 object-cover transform transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
|
||||
<div class="p-6 text-white transform translate-y-20 group-hover:translate-y-0 transition-transform duration-300">
|
||||
<h3 class="text-xl font-bold mb-2">明星展品</h3>
|
||||
<p class="text-sm">最新款新能源汽车亮相</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 更多图片展示 -->
|
||||
<div class="grid md:grid-cols-4 gap-4">
|
||||
<div class="group relative overflow-hidden rounded-xl shadow-xl animate-fadeInUp animation-delay-800">
|
||||
<img src="../data/会展策划/image/Whisk_03282ab7e5.jpg" alt="展品1" class="w-full h-48 object-cover transform transition-all duration-500 group-hover:scale-110 group-hover:rotate-1">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-purple-600/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
|
||||
<div class="p-4 text-white transform translate-y-10 group-hover:translate-y-0 transition-transform duration-300">
|
||||
<h4 class="text-sm font-bold">智能驾驶展示</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative overflow-hidden rounded-xl shadow-xl animate-fadeInUp animation-delay-900">
|
||||
<img src="../data/会展策划/image/Whisk_15f65339bb.jpg" alt="展品2" class="w-full h-48 object-cover transform transition-all duration-500 group-hover:scale-110 group-hover:rotate-1">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-indigo-600/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
|
||||
<div class="p-4 text-white transform translate-y-10 group-hover:translate-y-0 transition-transform duration-300">
|
||||
<h4 class="text-sm font-bold">充电技术革新</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative overflow-hidden rounded-xl shadow-xl animate-fadeInUp animation-delay-1000">
|
||||
<img src="../data/会展策划/image/Whisk_192cdc54bc.jpg" alt="展品3" class="w-full h-48 object-cover transform transition-all duration-500 group-hover:scale-110 group-hover:rotate-1">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-blue-600/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
|
||||
<div class="p-4 text-white transform translate-y-10 group-hover:translate-y-0 transition-transform duration-300">
|
||||
<h4 class="text-sm font-bold">电池技术展览</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative overflow-hidden rounded-xl shadow-xl animate-fadeInUp animation-delay-1100">
|
||||
<img src="../data/会展策划/image/Whisk_1c05424f7f.jpg" alt="展品4" class="w-full h-48 object-cover transform transition-all duration-500 group-hover:scale-110 group-hover:rotate-1">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-cyan-600/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
|
||||
<div class="p-4 text-white transform translate-y-10 group-hover:translate-y-0 transition-transform duration-300">
|
||||
<h4 class="text-sm font-bold">智慧交通系统</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gradient-to-b from-gray-900 to-black text-white py-16 relative overflow-hidden">
|
||||
<!-- 背景装饰 -->
|
||||
<div class="absolute inset-0 opacity-10">
|
||||
<div class="absolute bottom-0 left-0 w-96 h-96 bg-purple-500 rounded-full filter blur-3xl"></div>
|
||||
<div class="absolute top-0 right-0 w-96 h-96 bg-blue-500 rounded-full filter blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-6 relative z-10" title="页脚信息区">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div class="animate-fadeInUp">
|
||||
<div class="flex items-center mb-4">
|
||||
<i class="fas fa-car-side text-2xl text-purple-400 mr-2"></i>
|
||||
<h3 class="text-lg font-semibold">关于展会</h3>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm leading-relaxed">
|
||||
长三角地区最具影响力的新能源汽车与智能交通产业盛会，汇聚全球顶尖企业与技术
|
||||
</p>
|
||||
<div class="mt-4 flex space-x-3">
|
||||
<a href="#" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-purple-600 transition">
|
||||
<i class="fab fa-weixin text-sm"></i>
|
||||
</a>
|
||||
<a href="#" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-600 transition">
|
||||
<i class="fab fa-weibo text-sm"></i>
|
||||
</a>
|
||||
<a href="#" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-600 transition">
|
||||
<i class="fab fa-linkedin text-sm"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="animate-fadeInUp animation-delay-200">
|
||||
<h3 class="text-lg font-semibold mb-4">
|
||||
<i class="fas fa-link text-purple-400 mr-2"></i>快速链接
|
||||
</h3>
|
||||
<ul class="space-y-2 text-sm text-gray-400">
|
||||
<li><a href="pages/overview.html" class="hover:text-purple-400 transition">
|
||||
<i class="fas fa-chevron-right text-xs mr-1"></i>策划概述
|
||||
</a></li>
|
||||
<li><a href="pages/exhibition.html" class="hover:text-purple-400 transition">
|
||||
<i class="fas fa-chevron-right text-xs mr-1"></i>展会介绍
|
||||
</a></li>
|
||||
<li><a href="pages/marketing.html" class="hover:text-purple-400 transition">
|
||||
<i class="fas fa-chevron-right text-xs mr-1"></i>营销方案
|
||||
</a></li>
|
||||
<li><a href="pages/operation.html" class="hover:text-purple-400 transition">
|
||||
<i class="fas fa-chevron-right text-xs mr-1"></i>现场运营
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="animate-fadeInUp animation-delay-400">
|
||||
<h3 class="text-lg font-semibold mb-4">
|
||||
<i class="fas fa-phone-alt text-purple-400 mr-2"></i>联系方式
|
||||
</h3>
|
||||
<ul class="space-y-2 text-sm text-gray-400">
|
||||
<li><i class="fas fa-map-marker-alt text-purple-400 mr-2"></i>上海市青浦区崧泽大道333号</li>
|
||||
<li><i class="fas fa-phone text-purple-400 mr-2"></i>021-12345678</li>
|
||||
<li><i class="fas fa-envelope text-purple-400 mr-2"></i>info@greenmobility2024.com</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="animate-fadeInUp animation-delay-600">
|
||||
<h3 class="text-lg font-semibold mb-4">
|
||||
<i class="fas fa-qrcode text-purple-400 mr-2"></i>关注我们
|
||||
</h3>
|
||||
<div class="flex space-x-4">
|
||||
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700">
|
||||
<span>微信</span>
|
||||
</a>
|
||||
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700">
|
||||
<span>微博</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-sm text-gray-400">
|
||||
<p>© 2024 长三角国际新能源汽车与智能交通产业博览会. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/nav-component.js"></script>
|
||||
<script src="js/back-to-top.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
793
web_frontend/web_result/order-classes/wenlu/marketing.html
Normal file
793
web_frontend/web_result/order-classes/wenlu/marketing.html
Normal file
@@ -0,0 +1,793 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<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="stylesheet" href="../css/animations.css">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- 字体 -->
|
||||
<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">
|
||||
|
||||
<!-- 页面加载动画 -->
|
||||
<!-- 错误处理（需要最早加载） -->
|
||||
<script src="../js/error-handler.js"></script>
|
||||
|
||||
<script src="../js/page-loader.js"></script>
|
||||
|
||||
<!-- 移动端优化 -->
|
||||
<script src="../js/mobile-optimize.js"></script>
|
||||
|
||||
<!-- 性能优化 -->
|
||||
<script src="../js/performance-optimizer.js"></script>
|
||||
<style>
|
||||
* {
|
||||
font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
/* Glass morphism effect */
|
||||
.glass-morphism {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* 玻璃态效果 */
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 3D翻转卡片 */
|
||||
.flip-card {
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.flip-card-inner {
|
||||
transition: transform 0.6s;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.flip-card:hover .flip-card-inner {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.flip-card-front, .flip-card-back {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.flip-card-back {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.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%;
|
||||
}
|
||||
.strategy-card {
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.strategy-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
||||
transition: left 0.6s ease;
|
||||
}
|
||||
.strategy-card:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
.strategy-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
|
||||
}
|
||||
.progress-bar {
|
||||
animation: progressFill 2s ease-out forwards;
|
||||
}
|
||||
@keyframes progressFill {
|
||||
from { width: 0%; }
|
||||
}
|
||||
.pulse-dot {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(1.2); opacity: 0.7; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 w-full glass-morphism shadow-md z-50 transition-all duration-300">
|
||||
<!-- Content will be dynamically generated by nav-component.js -->
|
||||
</nav>
|
||||
|
||||
<!-- Page Header -->
|
||||
<section class="relative pt-24 pb-16 overflow-hidden" style="background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 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-pink-300/20 rounded-full filter blur-3xl animate-pulse animation-delay-2000"></div>
|
||||
<!-- 背景图片 -->
|
||||
<div class="absolute inset-0 opacity-10" style="background-image: url('../../data/会展策划/image/Whisk_1c05424f7f.jpg'); background-size: cover; background-position: center;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-6 relative z-10">
|
||||
<div class="flex items-center text-white/80 mb-4 animate-fadeInUp">
|
||||
<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 animation-delay-200">
|
||||
<i class="fas fa-rocket mr-3"></i>
|
||||
营销推广方案
|
||||
</h1>
|
||||
<p class="text-xl text-white/90 animate-fadeInUp animation-delay-400">
|
||||
全方位、多渠道、精准化的营销策略
|
||||
</p>
|
||||
<div class="mt-8 flex flex-wrap gap-4 animate-fadeInUp animation-delay-600">
|
||||
<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 class="bg-white/20 backdrop-blur px-4 py-2 rounded-full text-sm">
|
||||
<i class="fas fa-chart-line mr-2"></i>预期转化: 30%
|
||||
</div>
|
||||
<div class="bg-white/20 backdrop-blur px-4 py-2 rounded-full text-sm">
|
||||
<i class="fas fa-globe mr-2"></i>覆盖范围: 全国
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Marketing Strategy Timeline -->
|
||||
<section class="py-16 bg-white relative overflow-hidden">
|
||||
<!-- 背景装饰 -->
|
||||
<div class="absolute inset-0 opacity-5" style="background-image: url('../../data/会展策划/image/Whisk_4aabd94ef3.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-calendar-alt mr-2 text-purple-600"></i>
|
||||
整体推广策略
|
||||
</h2>
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="relative">
|
||||
<!-- Timeline Line -->
|
||||
<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-purple-600 to-pink-600"></div>
|
||||
|
||||
<!-- Timeline Items -->
|
||||
<div class="space-y-12">
|
||||
<!-- Phase 1 -->
|
||||
<div class="flex items-center">
|
||||
<div class="w-1/2 pr-8 text-right animate-fadeInLeft">
|
||||
<h3 class="text-xl font-bold text-purple-600">
|
||||
<i class="fas fa-fire mr-1"></i>预热期
|
||||
</h3>
|
||||
<p class="text-gray-600 mt-1">展前6个月</p>
|
||||
<div class="mt-3 bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg p-4 text-left glass-card hover:scale-105 transition-transform">
|
||||
<ul class="text-sm text-gray-700 space-y-1">
|
||||
<li><i class="fas fa-check-circle text-purple-500 mr-1"></i> 品牌造势，建立认知</li>
|
||||
<li><i class="fas fa-check-circle text-purple-500 mr-1"></i> 话题营销，引发关注</li>
|
||||
<li><i class="fas fa-check-circle text-purple-500 mr-1"></i> KOL合作，扩大影响</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex items-center justify-center">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 text-white rounded-full flex items-center justify-center z-10 shadow-lg pulse-dot">
|
||||
<i class="fas fa-flag text-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/2 pl-8"></div>
|
||||
</div>
|
||||
|
||||
<!-- Phase 2 -->
|
||||
<div class="flex items-center">
|
||||
<div class="w-1/2 pr-8"></div>
|
||||
<div class="relative flex items-center justify-center">
|
||||
<div class="w-12 h-12 bg-white border-4 border-pink-600 rounded-full flex items-center justify-center z-10">
|
||||
<span class="text-pink-600 font-bold">2</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/2 pl-8">
|
||||
<h3 class="text-xl font-bold text-pink-600">推广期</h3>
|
||||
<p class="text-gray-600 mt-1">展前3个月</p>
|
||||
<div class="mt-3 bg-pink-50 rounded-lg p-4">
|
||||
<ul class="text-sm text-gray-700 space-y-1">
|
||||
<li>• 精准投放，定向推广</li>
|
||||
<li>• 观众组织，团体邀请</li>
|
||||
<li>• 媒体合作，深度报道</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Phase 3 -->
|
||||
<div class="flex items-center">
|
||||
<div class="w-1/2 pr-8 text-right">
|
||||
<h3 class="text-xl font-bold text-blue-600">冲刺期</h3>
|
||||
<p class="text-gray-600 mt-1">展前1个月</p>
|
||||
<div class="mt-3 bg-blue-50 rounded-lg p-4 text-left">
|
||||
<ul class="text-sm text-gray-700 space-y-1">
|
||||
<li>• 密集宣传，全面覆盖</li>
|
||||
<li>• 氛围营造，期待感拉满</li>
|
||||
<li>• 最后召集，确保参与</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex items-center justify-center">
|
||||
<div class="w-12 h-12 bg-white border-4 border-blue-600 rounded-full flex items-center justify-center z-10">
|
||||
<span class="text-blue-600 font-bold">3</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/2 pl-8"></div>
|
||||
</div>
|
||||
|
||||
<!-- Phase 4 -->
|
||||
<div class="flex items-center">
|
||||
<div class="w-1/2 pr-8"></div>
|
||||
<div class="relative flex items-center justify-center">
|
||||
<div class="w-12 h-12 bg-white border-4 border-green-600 rounded-full flex items-center justify-center z-10">
|
||||
<span class="text-green-600 font-bold">4</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/2 pl-8">
|
||||
<h3 class="text-xl font-bold text-green-600">展期</h3>
|
||||
<p class="text-gray-600 mt-1">9月12-15日</p>
|
||||
<div class="mt-3 bg-green-50 rounded-lg p-4">
|
||||
<ul class="text-sm text-gray-700 space-y-1">
|
||||
<li>• 现场互动，实时传播</li>
|
||||
<li>• 媒体报道，扩大影响</li>
|
||||
<li>• 直播分享，线上参与</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Phase 5 -->
|
||||
<div class="flex items-center">
|
||||
<div class="w-1/2 pr-8 text-right">
|
||||
<h3 class="text-xl font-bold text-orange-600">展后</h3>
|
||||
<p class="text-gray-600 mt-1">展后1个月</p>
|
||||
<div class="mt-3 bg-orange-50 rounded-lg p-4 text-left">
|
||||
<ul class="text-sm text-gray-700 space-y-1">
|
||||
<li>• 持续发酵，延长热度</li>
|
||||
<li>• 成果展示，价值传递</li>
|
||||
<li>• 下届预热，维系关系</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex items-center justify-center">
|
||||
<div class="w-12 h-12 bg-white border-4 border-orange-600 rounded-full flex items-center justify-center z-10">
|
||||
<span class="text-orange-600 font-bold">5</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/2 pl-8"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Online Marketing -->
|
||||
<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>
|
||||
|
||||
<!-- Digital Channels Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
|
||||
<!-- Official Website -->
|
||||
<div class="strategy-card bg-white rounded-xl shadow-lg p-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
|
||||
<svg class="w-6 h-6 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">官方网站</h3>
|
||||
</div>
|
||||
<ul class="space-y-2 text-gray-600 text-sm">
|
||||
<li>✓ 在线注册系统</li>
|
||||
<li>✓ 3D展馆导航</li>
|
||||
<li>✓ VR预览体验</li>
|
||||
<li>✓ 展商数据库</li>
|
||||
<li>✓ 活动预约系统</li>
|
||||
</ul>
|
||||
<div class="mt-4 pt-4 border-t">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-500">预计访问量</span>
|
||||
<span class="font-bold text-blue-600">100万+</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Media -->
|
||||
<div class="strategy-card bg-white rounded-xl shadow-lg p-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
|
||||
<svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"/>
|
||||
<path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold">社交媒体</h3>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="bg-gray-50 rounded-lg p-3">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="text-sm font-semibold">微信</span>
|
||||
<span class="text-xs text-gray-500">50万粉丝</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-600">公众号推送、朋友圈广告</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-lg p-3">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="text-sm font-semibold">微博</span>
|
||||
<span class="text-xs text-gray-500">30万粉丝</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-600">#绿色出行看长三角#</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-lg p-3">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="text-sm font-semibold">抖音/快手</span>
|
||||
<span class="text-xs text-gray-500">80万粉丝</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-600">短视频、直播互动</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Digital Advertising -->
|
||||
<div class="strategy-card bg-white rounded-xl shadow-lg p-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
|
||||
<svg class="w-6 h-6 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.293a1 1 0 00-1.414 1.414L14.586 10l-1.293 1.293a1 1 0 101.414 1.414L16 11.414l1.293 1.293a1 1 0 001.414-1.414L17.414 10l1.293-1.293a1 1 0 00-1.414-1.414L16 8.586l-1.293-1.293z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold">数字广告</h3>
|
||||
</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex items-center justify-between py-2 border-b">
|
||||
<span class="text-gray-600">搜索引擎SEM</span>
|
||||
<span class="font-semibold">200万预算</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-2 border-b">
|
||||
<span class="text-gray-600">信息流广告</span>
|
||||
<span class="font-semibold">150万预算</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-2">
|
||||
<span class="text-gray-600">垂直媒体</span>
|
||||
<span class="font-semibold">100万预算</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email Marketing -->
|
||||
<div class="strategy-card bg-white rounded-xl shadow-lg p-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mr-4">
|
||||
<svg class="w-6 h-6 text-orange-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
|
||||
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold">邮件营销</h3>
|
||||
</div>
|
||||
<div class="bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg p-4">
|
||||
<div class="grid grid-cols-2 gap-4 text-center">
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-orange-600">10万+</div>
|
||||
<div class="text-xs text-gray-600">数据库联系人</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-orange-600">2期/月</div>
|
||||
<div class="text-xs text-gray-600">发送频次</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="mt-4 space-y-1 text-xs text-gray-600">
|
||||
<li>• 展商推介</li>
|
||||
<li>• 活动预告</li>
|
||||
<li>• 行业资讯</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Live Streaming -->
|
||||
<div class="strategy-card bg-white rounded-xl shadow-lg p-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mr-4">
|
||||
<svg class="w-6 h-6 text-red-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold">直播营销</h3>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center">
|
||||
<div class="w-2 h-2 bg-red-600 rounded-full pulse-dot mr-2"></div>
|
||||
<span class="text-sm">展前预热直播：5场</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-2 h-2 bg-red-600 rounded-full pulse-dot mr-2"></div>
|
||||
<span class="text-sm">展期现场直播：全程</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-2 h-2 bg-red-600 rounded-full pulse-dot mr-2"></div>
|
||||
<span class="text-sm">专家访谈：20场</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- KOL Cooperation -->
|
||||
<div class="strategy-card bg-white rounded-xl shadow-lg p-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center mr-4">
|
||||
<svg class="w-6 h-6 text-pink-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold">KOL合作</h3>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="bg-pink-50 rounded-lg p-2 text-center">
|
||||
<div class="text-lg font-bold text-pink-600">50+</div>
|
||||
<div class="text-xs text-gray-600">汽车领域KOL</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2 text-xs">
|
||||
<div class="bg-gray-50 rounded p-2 text-center">
|
||||
<div class="font-semibold">探店视频</div>
|
||||
<div class="text-gray-500">30个</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded p-2 text-center">
|
||||
<div class="font-semibold">测评内容</div>
|
||||
<div class="text-gray-500">50篇</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Online Campaign Performance -->
|
||||
<div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl p-8 text-white">
|
||||
<h3 class="text-2xl font-bold mb-6">线上推广预期效果</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold mb-2">1亿+</div>
|
||||
<div class="text-blue-100">总曝光量</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold mb-2">500万+</div>
|
||||
<div class="text-blue-100">互动量</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold mb-2">10万+</div>
|
||||
<div class="text-blue-100">注册用户</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold mb-2">85%</div>
|
||||
<div class="text-blue-100">转化率</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Offline Marketing -->
|
||||
<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">
|
||||
<!-- Traditional Media -->
|
||||
<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-5">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-10 h-10 bg-blue-600 text-white rounded-lg flex items-center justify-center mr-3">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold">平面媒体</h4>
|
||||
<p class="text-sm text-gray-600">行业杂志、报纸广告</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="text-sm text-gray-700 space-y-1 ml-13">
|
||||
<li>• 《中国汽车报》整版广告 x 3期</li>
|
||||
<li>• 《汽车之家》杂志封面广告</li>
|
||||
<li>• 《新能源汽车》专题报道</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-lg p-5">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-10 h-10 bg-green-600 text-white rounded-lg flex items-center justify-center mr-3">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold">广播电台</h4>
|
||||
<p class="text-sm text-gray-600">交通广播黄金时段</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="text-sm text-gray-700 space-y-1 ml-13">
|
||||
<li>• 上海交通广播早晚高峰广告</li>
|
||||
<li>• 专题访谈节目3期</li>
|
||||
<li>• 路况播报植入</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-lg p-5">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-10 h-10 bg-purple-600 text-white rounded-lg flex items-center justify-center mr-3">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M2 6a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 100 4v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2a2 2 0 100-4V6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold">行业活动</h4>
|
||||
<p class="text-sm text-gray-600">参展推广、论坛宣传</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="text-sm text-gray-700 space-y-1 ml-13">
|
||||
<li>• 北京车展展位推广</li>
|
||||
<li>• 广州车展路演活动</li>
|
||||
<li>• 行业峰会主题演讲</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Outdoor Advertising -->
|
||||
<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="grid grid-cols-2 gap-4 mb-6">
|
||||
<div class="bg-white rounded-lg p-4 text-center">
|
||||
<div class="text-2xl font-bold text-blue-600 mb-1">50块</div>
|
||||
<div class="text-sm text-gray-600">LED大屏广告</div>
|
||||
<div class="text-xs text-gray-500 mt-1">核心商圈覆盖</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg p-4 text-center">
|
||||
<div class="text-2xl font-bold text-purple-600 mb-1">200个</div>
|
||||
<div class="text-sm text-gray-600">地铁灯箱</div>
|
||||
<div class="text-xs text-gray-500 mt-1">2/10/17号线</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg p-4 text-center">
|
||||
<div class="text-2xl font-bold text-green-600 mb-1">30块</div>
|
||||
<div class="text-sm text-gray-600">高速广告牌</div>
|
||||
<div class="text-xs text-gray-500 mt-1">沪宁、沪杭高速</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg p-4 text-center">
|
||||
<div class="text-2xl font-bold text-orange-600 mb-1">100辆</div>
|
||||
<div class="text-sm text-gray-600">公交车身</div>
|
||||
<div class="text-xs text-gray-500 mt-1">主要线路</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg p-4">
|
||||
<h4 class="font-semibold mb-3">投放策略</h4>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="w-4 h-4 bg-blue-600 rounded-full mr-2"></div>
|
||||
<span>展前3个月开始投放</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-4 h-4 bg-purple-600 rounded-full mr-2"></div>
|
||||
<span>重点覆盖长三角核心城市</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-4 h-4 bg-green-600 rounded-full mr-2"></div>
|
||||
<span>高频次、多触点接触</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Precision Invitation -->
|
||||
<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">
|
||||
<!-- Invitation Process -->
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden mb-8">
|
||||
<div class="bg-gradient-to-r from-green-600 to-teal-600 text-white p-6">
|
||||
<h3 class="text-2xl font-bold">专业观众邀请体系</h3>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="text-center">
|
||||
<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 d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-semibold mb-2">呼叫中心</h4>
|
||||
<p class="text-sm text-gray-600">20人专业团队</p>
|
||||
<p class="text-xs text-gray-500 mt-1">日均呼叫1000+</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<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 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-semibold mb-2">一对一邀请</h4>
|
||||
<p class="text-sm text-gray-600">VIP客户定制</p>
|
||||
<p class="text-xs text-gray-500 mt-1">500+重点客户</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<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="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-semibold mb-2">团体邀请</h4>
|
||||
<p class="text-sm text-gray-600">协会组织参观</p>
|
||||
<p class="text-xs text-gray-500 mt-1">50+团体</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Buyer Matching Service -->
|
||||
<div class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl p-8 text-white">
|
||||
<h3 class="text-2xl font-bold mb-6">买家匹配服务</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="bg-white/10 backdrop-blur rounded-lg p-4">
|
||||
<h4 class="font-semibold mb-2">会前</h4>
|
||||
<ul class="text-sm space-y-1 opacity-90">
|
||||
<li>• 在线预约系统</li>
|
||||
<li>• AI智能匹配</li>
|
||||
<li>• 需求精准对接</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-white/10 backdrop-blur rounded-lg p-4">
|
||||
<h4 class="font-semibold mb-2">展中</h4>
|
||||
<ul class="text-sm space-y-1 opacity-90">
|
||||
<li>• 商务洽谈区</li>
|
||||
<li>• 专场对接会</li>
|
||||
<li>• 现场撮合服务</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-white/10 backdrop-blur rounded-lg p-4">
|
||||
<h4 class="font-semibold mb-2">展后</h4>
|
||||
<ul class="text-sm space-y-1 opacity-90">
|
||||
<li>• 持续跟进</li>
|
||||
<li>• 促成交易</li>
|
||||
<li>• 效果评估</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Marketing Budget -->
|
||||
<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="max-w-3xl mx-auto">
|
||||
<div class="bg-gray-50 rounded-2xl p-8">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between mb-2">
|
||||
<span class="font-semibold">线上推广</span>
|
||||
<span class="text-purple-600 font-bold">80万</span>
|
||||
</div>
|
||||
<div class="bg-gray-200 rounded-full h-4">
|
||||
<div class="bg-purple-600 h-4 rounded-full progress-bar" style="width: 40%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between mb-2">
|
||||
<span class="font-semibold">线下推广</span>
|
||||
<span class="text-blue-600 font-bold">60万</span>
|
||||
</div>
|
||||
<div class="bg-gray-200 rounded-full h-4">
|
||||
<div class="bg-blue-600 h-4 rounded-full progress-bar" style="width: 30%; animation-delay: 0.2s"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between mb-2">
|
||||
<span class="font-semibold">媒体合作</span>
|
||||
<span class="text-green-600 font-bold">40万</span>
|
||||
</div>
|
||||
<div class="bg-gray-200 rounded-full h-4">
|
||||
<div class="bg-green-600 h-4 rounded-full progress-bar" style="width: 20%; animation-delay: 0.4s"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between mb-2">
|
||||
<span class="font-semibold">精准邀请</span>
|
||||
<span class="text-orange-600 font-bold">20万</span>
|
||||
</div>
|
||||
<div class="bg-gray-200 rounded-full h-4">
|
||||
<div class="bg-orange-600 h-4 rounded-full progress-bar" style="width: 10%; animation-delay: 0.6s"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 pt-6 border-t text-center">
|
||||
<div class="text-3xl font-bold text-gray-800">总预算：200万元</div>
|
||||
<div class="text-gray-600 mt-2">预期ROI：500%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="py-16 bg-gradient-to-r from-pink-600 to-purple-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>
|
||||
<a href="operation.html" class="inline-block bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
|
||||
查看现场运营 →
|
||||
</a>
|
||||
</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>© 2024 长三角国际新能源汽车与智能交通产业博览会. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="../js/nav-component.js"></script>
|
||||
<script src="../js/back-to-top.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
856
web_frontend/web_result/order-classes/wenlu/operation.html
Normal file
856
web_frontend/web_result/order-classes/wenlu/operation.html
Normal file
@@ -0,0 +1,856 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<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>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
|
||||
<!-- GSAP for animations -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||
|
||||
<!-- 错误处理（需要最早加载） -->
|
||||
<script src="../js/error-handler.js"></script>
|
||||
<script src="../js/page-loader.js"></script>
|
||||
<script src="../js/mobile-optimize.js"></script>
|
||||
<script src="../js/performance-optimizer.js"></script>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg-primary: #0a0a0a;
|
||||
--bg-secondary: #111111;
|
||||
--bg-tertiary: #1a1a1a;
|
||||
--accent: #646cff;
|
||||
--accent-hover: #535bf2;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #a1a1aa;
|
||||
--border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Smooth scrolling */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Glass effect */
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* Gradient text */
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #646cff 0%, #b364ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Section transitions */
|
||||
section {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Horizontal scroll for Duoduo Agent */
|
||||
.horizontal-container {
|
||||
width: 400vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 0;
|
||||
will-change: transform;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
transform: translateZ(0);
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
|
||||
.panel {
|
||||
width: 80vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
padding: 0 4rem;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
transform: translateZ(0);
|
||||
-webkit-transform: translateZ(0);
|
||||
transform-style: preserve-3d;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
/* Specific optimization for the last panel */
|
||||
.panel:last-child {
|
||||
will-change: auto !important;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
/* Duoduo section pinning optimization */
|
||||
#duoduo-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
will-change: transform;
|
||||
transform: translateZ(0);
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
/* Pin spacer optimization */
|
||||
.pin-spacer {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Progress indicator */
|
||||
.progress-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-secondary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-dot.active {
|
||||
background: var(--accent);
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
/* Subtle animations */
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
.float-animation {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--accent);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 w-full glass z-50 transition-all duration-300">
|
||||
<!-- Content will be dynamically generated by nav-component.js -->
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative min-h-screen flex items-center justify-center overflow-hidden">
|
||||
<!-- Background Image with Overlay -->
|
||||
<div class="absolute inset-0">
|
||||
<img src="../data/会展策划/image/Whisk_9e8c1f44ac.jpg"
|
||||
alt="Exhibition Background"
|
||||
class="w-full h-full object-cover opacity-20"
|
||||
loading="eager">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-black/80 via-gray-900/70 to-black/80"></div>
|
||||
</div>
|
||||
|
||||
<!-- Subtle gradient overlay -->
|
||||
<div class="absolute inset-0 opacity-30">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-transparent to-blue-900/20"></div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-6 relative z-10 text-center">
|
||||
<h1 class="text-6xl md:text-8xl font-black mb-6">
|
||||
AI布局<span class="gradient-text">设计</span>
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl text-gray-400 mb-12 max-w-3xl mx-auto">
|
||||
基于深度学习的展会空间智能规划系统
|
||||
</p>
|
||||
|
||||
<!-- Key benefits -->
|
||||
<div class="flex flex-wrap justify-center gap-12 mt-16 mb-24">
|
||||
<div class="text-center">
|
||||
<div class="text-5xl font-bold gradient-text mb-2">20小时</div>
|
||||
<div class="text-sm text-gray-500 uppercase tracking-wider">完整方案交付</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-5xl font-bold gradient-text mb-2">95%</div>
|
||||
<div class="text-sm text-gray-500 uppercase tracking-wider">一次通过率</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-5xl font-bold gradient-text mb-2">80%</div>
|
||||
<div class="text-sm text-gray-500 uppercase tracking-wider">成本节约</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scroll indicator (moved outside container) -->
|
||||
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 text-gray-400 z-10">
|
||||
<div class="flex flex-col items-center">
|
||||
<i class="fas fa-chevron-down animate-bounce text-xl mb-2"></i>
|
||||
<span class="text-xs">向下滚动</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- How AI Design Works -->
|
||||
<section class="py-32 relative">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="mb-20">
|
||||
<h2 class="text-5xl font-black mb-6">AI设计原理</h2>
|
||||
<p class="text-xl text-gray-400 max-w-2xl">三步实现从需求到方案的智能转化</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- Step 1 -->
|
||||
<div class="glass rounded-2xl p-8 hover:transform hover:scale-105 transition-all duration-300">
|
||||
<div class="text-6xl font-black gradient-text mb-4">01</div>
|
||||
<h3 class="text-2xl font-bold mb-4">需求理解</h3>
|
||||
<div class="space-y-3 text-gray-400">
|
||||
<p class="text-white">自然语言处理引擎</p>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li>• 解析展会规模、预算、风格偏好</li>
|
||||
<li>• 提取空间约束和功能需求</li>
|
||||
<li>• 识别品牌VI和设计语言</li>
|
||||
</ul>
|
||||
<div class="mt-4 pt-4 border-t border-gray-700">
|
||||
<span class="text-xs text-emerald-400">处理时间: 30秒</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2 -->
|
||||
<div class="glass rounded-2xl p-8 hover:transform hover:scale-105 transition-all duration-300">
|
||||
<div class="text-6xl font-black gradient-text mb-4">02</div>
|
||||
<h3 class="text-2xl font-bold mb-4">方案生成</h3>
|
||||
<div class="space-y-3 text-gray-400">
|
||||
<p class="text-white">深度学习生成网络</p>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li>• 10万+案例知识图谱匹配</li>
|
||||
<li>• 多目标优化算法求解</li>
|
||||
<li>• 5-10个方案并行生成</li>
|
||||
</ul>
|
||||
<div class="mt-4 pt-4 border-t border-gray-700">
|
||||
<span class="text-xs text-blue-400">处理时间: 15分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3 -->
|
||||
<div class="glass rounded-2xl p-8 hover:transform hover:scale-105 transition-all duration-300">
|
||||
<div class="text-6xl font-black gradient-text mb-4">03</div>
|
||||
<h3 class="text-2xl font-bold mb-4">智能优化</h3>
|
||||
<div class="space-y-3 text-gray-400">
|
||||
<p class="text-white">规范校验与仿真</p>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li>• 消防/建筑规范自动校验</li>
|
||||
<li>• 人流动线模拟优化</li>
|
||||
<li>• 成本-效果平衡调整</li>
|
||||
</ul>
|
||||
<div class="mt-4 pt-4 border-t border-gray-700">
|
||||
<span class="text-xs text-purple-400">处理时间: 5分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Duoduo Agent System - Full Screen Horizontal Scroll -->
|
||||
<section id="duoduo-section" class="relative" style="will-change: transform;">
|
||||
<!-- Scroll Mode Toggle Button -->
|
||||
<div class="fixed top-24 right-6 z-50">
|
||||
<button id="scroll-mode-toggle" class="px-4 py-2 bg-gray-800/90 backdrop-blur hover:bg-gray-700/90 text-white rounded-lg transition-all border border-gray-600 shadow-lg">
|
||||
<i class="fas fa-exchange-alt mr-2"></i>
|
||||
<span class="mode-text">切换滚动模式</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="sticky top-0 h-screen overflow-hidden" style="transform: translateZ(0); backface-visibility: hidden;">
|
||||
<div id="horizontal-container" class="horizontal-container">
|
||||
<!-- Panel 1: Introduction -->
|
||||
<div class="panel relative overflow-hidden">
|
||||
<!-- Background Image with Overlay -->
|
||||
<div class="absolute inset-0 z-0">
|
||||
<img src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=1920&q=80"
|
||||
alt="Exhibition Background"
|
||||
class="w-full h-full object-cover opacity-20"
|
||||
loading="lazy">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-black/85 via-gray-900/75 to-black/85"></div>
|
||||
</div>
|
||||
|
||||
<div class="text-center max-w-4xl relative z-10">
|
||||
<h2 class="text-6xl md:text-8xl font-black mb-8">
|
||||
Duoduo <span class="gradient-text">Agent</span>
|
||||
</h2>
|
||||
<p class="text-2xl text-gray-300 mb-6">
|
||||
专业级AI布局设计系统
|
||||
</p>
|
||||
<p class="text-lg text-gray-400 max-w-2xl mx-auto mb-8">
|
||||
基于10万+展会设计案例训练，融合行业最佳实践
|
||||
</p>
|
||||
<div class="flex justify-center gap-8 mb-12 text-sm">
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold text-emerald-400">95%</div>
|
||||
<div class="text-gray-500">设计准确率</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold text-blue-400">20h</div>
|
||||
<div class="text-gray-500">交付时间</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold text-purple-400">80%</div>
|
||||
<div class="text-gray-500">成本降低</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="px-8 py-4 bg-gradient-to-r from-emerald-500 to-blue-500 hover:from-emerald-600 hover:to-blue-600 text-white font-bold rounded-full transition-colors shadow-lg">
|
||||
<i class="fas fa-play mr-3"></i>开启智能设计之旅
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Panel 2: Intelligent Space Analysis -->
|
||||
<div class="panel bg-gradient-to-br from-purple-900/10 to-black">
|
||||
<div class="flex items-center gap-12 max-w-7xl mx-auto w-full">
|
||||
<div class="flex-1">
|
||||
<div class="mb-4 text-sm text-emerald-400 uppercase tracking-wider">阶段 01 / 智能空间分析</div>
|
||||
<h3 class="text-5xl font-black mb-6">空间规划引擎</h3>
|
||||
<p class="text-xl text-gray-400 mb-8">基于深度学习的智能布局算法</p>
|
||||
<div class="text-gray-300 mb-8 space-y-3">
|
||||
<p class="font-semibold text-white mb-4">🧠 AI如何理解您的空间需求？</p>
|
||||
<p>• <span class="text-emerald-400">需求解析：</span>自然语言处理技术理解设计要求</p>
|
||||
<p>• <span class="text-emerald-400">空间建模：</span>3D空间识别与约束条件自动提取</p>
|
||||
<p>• <span class="text-emerald-400">规范校验：</span>实时对标国家消防、建筑规范</p>
|
||||
<p>• <span class="text-emerald-400">优化算法：</span>基于遗传算法的多目标优化</p>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-2 h-2 bg-accent rounded-full"></div>
|
||||
<span class="text-gray-400">AutoCAD 2024</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-2 h-2 bg-accent rounded-full"></div>
|
||||
<span class="text-gray-400">精度: 0.1mm</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-2 h-2 bg-accent rounded-full"></div>
|
||||
<span class="text-gray-400">用时: 2小时</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 max-w-2xl">
|
||||
<img src="../data/会展策划/image/Whisk_dcc81c5212.jpg"
|
||||
alt="CAD设计图"
|
||||
class="w-full rounded-2xl shadow-2xl">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Panel 3: Design Generation -->
|
||||
<div class="panel bg-gradient-to-br from-blue-900/10 to-black">
|
||||
<div class="flex items-center gap-12 max-w-7xl mx-auto w-full">
|
||||
<div class="flex-1">
|
||||
<div class="mb-4 text-sm text-blue-400 uppercase tracking-wider">阶段 02 / 方案生成</div>
|
||||
<h3 class="text-5xl font-black mb-6">智能设计生成</h3>
|
||||
<p class="text-xl text-gray-400 mb-8">多方案并行生成，AI优选最佳方案</p>
|
||||
<div class="text-gray-300 mb-8 space-y-3">
|
||||
<p class="font-semibold text-white mb-4">⚡ 提效核心技术</p>
|
||||
<p>• <span class="text-blue-400">并行计算：</span>同时生成5-10个设计方案</p>
|
||||
<p>• <span class="text-blue-400">风格迁移：</span>学习品牌VI，保持设计一致性</p>
|
||||
<p>• <span class="text-blue-400">成本优化：</span>实时预算控制，材料智能选择</p>
|
||||
<p>• <span class="text-blue-400">人流模拟：</span>基于蒙特卡洛的人流仿真</p>
|
||||
</div>
|
||||
<div class="bg-gray-800/50 rounded-lg p-4">
|
||||
<div class="text-sm text-gray-400 mb-2">效率提升</div>
|
||||
<div class="text-2xl font-bold text-white">传统2周 → AI 4小时</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 max-w-2xl">
|
||||
<img src="../data/会展策划/image/Whisk_e8f83d1a37.jpg"
|
||||
alt="概念设计图"
|
||||
class="w-full rounded-2xl shadow-2xl">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Panel 4: 3D Visualization -->
|
||||
<div class="panel bg-gradient-to-br from-cyan-900/10 to-black">
|
||||
<div class="flex items-center gap-12 max-w-7xl mx-auto w-full">
|
||||
<div class="flex-1">
|
||||
<div class="mb-4 text-sm text-cyan-400 uppercase tracking-wider">阶段 03 / 三维可视化</div>
|
||||
<h3 class="text-5xl font-black mb-6">数字孪生建模</h3>
|
||||
<p class="text-xl text-gray-400 mb-8">1:1还原真实场景，所见即所得</p>
|
||||
<div class="text-gray-300 mb-8 space-y-3">
|
||||
<p class="font-semibold text-white mb-4">🎯 设计可靠性保障</p>
|
||||
<p>• <span class="text-cyan-400">物理仿真：</span>光照、材质、物理碰撞模拟</p>
|
||||
<p>• <span class="text-cyan-400">VR预览：</span>沉浸式体验，提前发现问题</p>
|
||||
<p>• <span class="text-cyan-400">细节优化：</span>AI自动优化视觉焦点</p>
|
||||
<p>• <span class="text-cyan-400">材料映射：</span>真实材料库，精准还原效果</p>
|
||||
</div>
|
||||
<div class="bg-gray-800/50 rounded-lg p-4">
|
||||
<div class="text-sm text-gray-400 mb-2">渲染精度</div>
|
||||
<div class="text-2xl font-bold text-white">8K超高清 + 实时光追</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 max-w-2xl">
|
||||
<img src="../data/会展策划/image/Whisk_be64a7b61f.jpg"
|
||||
alt="3D建模"
|
||||
class="w-full rounded-2xl shadow-2xl">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Panel 5: Complete Solution -->
|
||||
<div class="panel bg-gradient-to-br from-emerald-900/10 to-black" style="transform: translateZ(0);">
|
||||
<div class="flex items-center gap-12 max-w-7xl mx-auto w-full">
|
||||
<div class="flex-1">
|
||||
<div class="mb-4 text-sm text-emerald-400 uppercase tracking-wider">完整交付 / 一站式解决方案</div>
|
||||
<h3 class="text-5xl font-black mb-6">智能设计成果</h3>
|
||||
<p class="text-xl text-gray-400 mb-8">从创意到施工的完整设计链路</p>
|
||||
<div class="text-gray-300 mb-6 space-y-3">
|
||||
<p class="font-semibold text-white mb-4">✅ 交付内容清单</p>
|
||||
<p>• <span class="text-emerald-400">设计图纸：</span>CAD施工图 + 3D模型文件</p>
|
||||
<p>• <span class="text-emerald-400">物料清单：</span>精确到螺丝的采购清单</p>
|
||||
<p>• <span class="text-emerald-400">施工指南：</span>分步骤施工说明书</p>
|
||||
<p>• <span class="text-emerald-400">预算报表：</span>透明化成本明细</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4 mt-8">
|
||||
<div class="bg-gradient-to-r from-emerald-500/20 to-transparent p-4 rounded-lg">
|
||||
<div class="text-3xl font-bold text-emerald-400">100%</div>
|
||||
<div class="text-sm text-gray-400">施工可执行率</div>
|
||||
</div>
|
||||
<div class="bg-gradient-to-r from-blue-500/20 to-transparent p-4 rounded-lg">
|
||||
<div class="text-3xl font-bold text-blue-400">0</div>
|
||||
<div class="text-sm text-gray-400">设计返工次数</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 max-w-2xl">
|
||||
<img src="../data/会展策划/image/Whisk_c478fe089d.jpg"
|
||||
alt="最终方案"
|
||||
class="w-full rounded-2xl shadow-2xl">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress Indicator -->
|
||||
<div class="fixed bottom-10 left-1/2 transform -translate-x-1/2 z-50 flex gap-4">
|
||||
<div class="progress-dot active" data-panel="0"></div>
|
||||
<div class="progress-dot" data-panel="1"></div>
|
||||
<div class="progress-dot" data-panel="2"></div>
|
||||
<div class="progress-dot" data-panel="3"></div>
|
||||
<div class="progress-dot" data-panel="4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Design Tools & Technology -->
|
||||
<section class="py-32 relative">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="mb-20">
|
||||
<h2 class="text-5xl font-black mb-6">设计工具链</h2>
|
||||
<p class="text-xl text-gray-400 max-w-2xl">专业级设计软件深度集成，全流程自动化</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
<div class="glass rounded-2xl p-10">
|
||||
<div class="text-4xl mb-6">📐</div>
|
||||
<h3 class="text-2xl font-bold mb-4">CAD工程制图</h3>
|
||||
<ul class="space-y-3 text-gray-400">
|
||||
<li class="flex items-center gap-3">
|
||||
<i class="fas fa-check text-accent"></i>
|
||||
<span>AutoCAD 2024原生支持</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<i class="fas fa-check text-accent"></i>
|
||||
<span>DWG/DXF标准格式输出</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<i class="fas fa-check text-accent"></i>
|
||||
<span>施工图自动标注</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="glass rounded-2xl p-10">
|
||||
<div class="text-4xl mb-6">🎨</div>
|
||||
<h3 class="text-2xl font-bold mb-4">3D建模渲染</h3>
|
||||
<ul class="space-y-3 text-gray-400">
|
||||
<li class="flex items-center gap-3">
|
||||
<i class="fas fa-check text-accent"></i>
|
||||
<span>3DS Max + V-Ray引擎</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<i class="fas fa-check text-accent"></i>
|
||||
<span>PBR材质库（5000+）</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<i class="fas fa-check text-accent"></i>
|
||||
<span>GPU加速实时预览</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="glass rounded-2xl p-10">
|
||||
<div class="text-4xl mb-6">🔄</div>
|
||||
<h3 class="text-2xl font-bold mb-4">BIM协同设计</h3>
|
||||
<ul class="space-y-3 text-gray-400">
|
||||
<li class="flex items-center gap-3">
|
||||
<i class="fas fa-check text-accent"></i>
|
||||
<span>Revit模型同步</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<i class="fas fa-check text-accent"></i>
|
||||
<span>多专业协同碰撞检测</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<i class="fas fa-check text-accent"></i>
|
||||
<span>IFC标准数据交换</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="glass rounded-2xl p-10">
|
||||
<div class="text-4xl mb-6">📊</div>
|
||||
<h3 class="text-2xl font-bold mb-4">智能优化算法</h3>
|
||||
<ul class="space-y-3 text-gray-400">
|
||||
<li class="flex items-center gap-3">
|
||||
<i class="fas fa-check text-accent"></i>
|
||||
<span>空间利用率优化</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<i class="fas fa-check text-accent"></i>
|
||||
<span>人流动线模拟</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<i class="fas fa-check text-accent"></i>
|
||||
<span>成本-效果平衡算法</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Service Teams -->
|
||||
<!-- Why Choose Our AI -->
|
||||
<section class="py-32 relative">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="mb-20">
|
||||
<h2 class="text-5xl font-black mb-6">为什么选择我们</h2>
|
||||
<p class="text-xl text-gray-400 max-w-2xl">经过验证的企业级AI设计解决方案</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="glass rounded-xl p-6">
|
||||
<div class="text-3xl mb-4">🎯</div>
|
||||
<h3 class="text-lg font-bold mb-2">精准度高</h3>
|
||||
<p class="text-sm text-gray-400">基于实际项目反馈持续优化，设计精准度达95%以上</p>
|
||||
</div>
|
||||
|
||||
<div class="glass rounded-xl p-6">
|
||||
<div class="text-3xl mb-4">⚡</div>
|
||||
<h3 class="text-lg font-bold mb-2">快速迭代</h3>
|
||||
<p class="text-sm text-gray-400">实时修改，秒级响应，支持无限次方案调整</p>
|
||||
</div>
|
||||
|
||||
<div class="glass rounded-xl p-6">
|
||||
<div class="text-3xl mb-4">💰</div>
|
||||
<h3 class="text-lg font-bold mb-2">成本可控</h3>
|
||||
<p class="text-sm text-gray-400">智能材料选择，预算实时监控，降低80%设计成本</p>
|
||||
</div>
|
||||
|
||||
<div class="glass rounded-xl p-6">
|
||||
<div class="text-3xl mb-4">🔒</div>
|
||||
<h3 class="text-lg font-bold mb-2">合规保障</h3>
|
||||
<p class="text-sm text-gray-400">自动对标国家标准，100%符合消防建筑规范</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success Cases -->
|
||||
<div class="mt-20">
|
||||
<h3 class="text-3xl font-bold mb-8">成功案例</h3>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||||
<div class="text-center">
|
||||
<div class="text-4xl font-bold gradient-text">500+</div>
|
||||
<p class="text-sm text-gray-500 mt-2">展会项目</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-4xl font-bold gradient-text">50+</div>
|
||||
<p class="text-sm text-gray-500 mt-2">世界500强</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-4xl font-bold gradient-text">20+</div>
|
||||
<p class="text-sm text-gray-500 mt-2">国家级展会</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-4xl font-bold gradient-text">98%</div>
|
||||
<p class="text-sm text-gray-500 mt-2">客户满意度</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="py-32 relative">
|
||||
<div class="container mx-auto px-6 text-center">
|
||||
<h2 class="text-5xl font-black mb-8">开始您的AI设计之旅</h2>
|
||||
<p class="text-xl text-gray-400 mb-12 max-w-2xl mx-auto">
|
||||
输入需求，20小时后获得完整的展会布局方案
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button class="inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-emerald-500 to-blue-500 hover:from-emerald-600 hover:to-blue-600 text-white font-semibold rounded-xl transition-all duration-300">
|
||||
<i class="fas fa-magic"></i>
|
||||
免费体验AI设计
|
||||
</button>
|
||||
<a href="marketing.html" class="inline-flex items-center gap-3 px-8 py-4 bg-gray-800 hover:bg-gray-700 text-white font-semibold rounded-xl transition-all duration-300">
|
||||
了解营销推广
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-12 border-t border-gray-800">
|
||||
<div class="container mx-auto px-6 text-center text-gray-500">
|
||||
<p>© 2024 长三角国际新能源汽车与智能交通产业博览会. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Back to top button -->
|
||||
<button id="backToTop" class="fixed bottom-8 right-8 w-12 h-12 bg-accent hover:bg-accent-hover text-white rounded-full flex items-center justify-center opacity-0 invisible transition-all duration-300 z-50">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
</button>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="../js/nav-component.js"></script>
|
||||
<script src="../js/back-to-top.js"></script>
|
||||
|
||||
<script>
|
||||
// Register GSAP plugins
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
// Scroll mode management
|
||||
let currentScrollMode = 'gsap'; // 'gsap' or 'css'
|
||||
let scrollTriggerInstance = null;
|
||||
|
||||
// Initialize horizontal scroll
|
||||
function initGSAPScroll() {
|
||||
const horizontalSections = gsap.utils.toArray('#horizontal-container .panel');
|
||||
const horizontalContainer = document.querySelector('#horizontal-container');
|
||||
|
||||
// Clear any existing ScrollTriggers
|
||||
ScrollTrigger.getAll().forEach(st => st.kill());
|
||||
|
||||
// Create new ScrollTrigger
|
||||
scrollTriggerInstance = ScrollTrigger.create({
|
||||
trigger: "#duoduo-section",
|
||||
start: "top top",
|
||||
end: "+=3000",
|
||||
pin: true,
|
||||
scrub: 1,
|
||||
animation: gsap.to(horizontalSections, {
|
||||
xPercent: -100 * (horizontalSections.length - 1),
|
||||
ease: "none"
|
||||
}),
|
||||
onUpdate: self => {
|
||||
const progress = self.progress;
|
||||
const currentPanel = Math.round(progress * (horizontalSections.length - 1));
|
||||
updateProgressDots(currentPanel);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// CSS-only scroll mode
|
||||
function initCSSScroll() {
|
||||
// Kill GSAP ScrollTrigger
|
||||
if (scrollTriggerInstance) {
|
||||
scrollTriggerInstance.kill();
|
||||
scrollTriggerInstance = null;
|
||||
}
|
||||
ScrollTrigger.getAll().forEach(st => st.kill());
|
||||
|
||||
// Reset transforms
|
||||
const horizontalSections = gsap.utils.toArray('#horizontal-container .panel');
|
||||
const horizontalContainer = document.querySelector('#horizontal-container');
|
||||
|
||||
gsap.set(horizontalSections, { xPercent: 0, clearProps: "all" });
|
||||
gsap.set(horizontalContainer, { x: 0, clearProps: "all" });
|
||||
|
||||
// Apply CSS scroll-snap
|
||||
horizontalContainer.style.scrollSnapType = 'x mandatory';
|
||||
horizontalContainer.style.overflowX = 'auto';
|
||||
horizontalContainer.style.display = 'flex';
|
||||
|
||||
horizontalSections.forEach(section => {
|
||||
section.style.scrollSnapAlign = 'center';
|
||||
section.style.flexShrink = '0';
|
||||
});
|
||||
|
||||
// Update container styles for CSS scrolling
|
||||
const duoduoSection = document.querySelector('#duoduo-section');
|
||||
duoduoSection.style.height = 'auto';
|
||||
duoduoSection.style.position = 'relative';
|
||||
|
||||
const stickyContainer = duoduoSection.querySelector('.sticky');
|
||||
stickyContainer.style.position = 'relative';
|
||||
stickyContainer.style.overflow = 'auto';
|
||||
}
|
||||
|
||||
// Update progress dots
|
||||
function updateProgressDots(index) {
|
||||
document.querySelectorAll('.progress-dot').forEach((dot, i) => {
|
||||
if (i === index) {
|
||||
dot.classList.add('active');
|
||||
} else {
|
||||
dot.classList.remove('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Toggle scroll mode
|
||||
const toggleButton = document.getElementById('scroll-mode-toggle');
|
||||
if (toggleButton) {
|
||||
toggleButton.addEventListener('click', () => {
|
||||
if (currentScrollMode === 'gsap') {
|
||||
currentScrollMode = 'css';
|
||||
initCSSScroll();
|
||||
toggleButton.querySelector('.mode-text').textContent = '切换到GSAP模式';
|
||||
console.log('Switched to CSS scroll mode');
|
||||
} else {
|
||||
currentScrollMode = 'gsap';
|
||||
initGSAPScroll();
|
||||
toggleButton.querySelector('.mode-text').textContent = '切换到CSS模式';
|
||||
console.log('Switched to GSAP scroll mode');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize with GSAP mode
|
||||
initGSAPScroll();
|
||||
|
||||
// Start button functionality
|
||||
const startButton = document.querySelector('.panel button');
|
||||
if (startButton) {
|
||||
startButton.addEventListener('click', () => {
|
||||
// Scroll to second panel
|
||||
const duoduoSection = document.querySelector('#duoduo-section');
|
||||
const scrollDistance = duoduoSection.offsetTop + 600; // Adjust to reach second panel
|
||||
|
||||
gsap.to(window, {
|
||||
scrollTo: {
|
||||
y: scrollDistance,
|
||||
autoKill: false
|
||||
},
|
||||
duration: 1.5,
|
||||
ease: "power2.inOut"
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Progress dots click handler (Manual navigation)
|
||||
document.querySelectorAll('.progress-dot').forEach((dot, index) => {
|
||||
dot.addEventListener('click', () => {
|
||||
// Use smooth scroll to section instead of GSAP
|
||||
const targetSection = horizontalSections[index];
|
||||
if (targetSection) {
|
||||
targetSection.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center',
|
||||
inline: 'center'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Debug mode - Press 'D' to toggle
|
||||
let debugMode = false;
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'd' || e.key === 'D') {
|
||||
debugMode = !debugMode;
|
||||
if (debugMode) {
|
||||
console.log('Debug Mode ON - Check console for ScrollTrigger info');
|
||||
ScrollTrigger.getAll().forEach(st => {
|
||||
console.log('ScrollTrigger:', {
|
||||
trigger: st.trigger,
|
||||
start: st.start,
|
||||
end: st.end,
|
||||
progress: st.progress,
|
||||
isActive: st.isActive
|
||||
});
|
||||
});
|
||||
} else {
|
||||
console.log('Debug Mode OFF');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Fade in animations for sections
|
||||
gsap.utils.toArray('section').forEach(section => {
|
||||
gsap.from(section, {
|
||||
opacity: 0,
|
||||
y: 50,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: section,
|
||||
start: "top 80%",
|
||||
end: "bottom 20%",
|
||||
toggleActions: "play none none reverse"
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Back to top button
|
||||
const backToTopButton = document.getElementById('backToTop');
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 500) {
|
||||
backToTopButton.style.opacity = '1';
|
||||
backToTopButton.style.visibility = 'visible';
|
||||
} else {
|
||||
backToTopButton.style.opacity = '0';
|
||||
backToTopButton.style.visibility = 'hidden';
|
||||
}
|
||||
});
|
||||
|
||||
backToTopButton.addEventListener('click', () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
499
web_frontend/web_result/order-classes/wenlu/overview.html
Normal file
499
web_frontend/web_result/order-classes/wenlu/overview.html
Normal file
@@ -0,0 +1,499 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<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="stylesheet" href="../css/styles.css">
|
||||
<link rel="stylesheet" href="../css/animations.css">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<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">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
|
||||
<!-- 页面加载动画 -->
|
||||
<!-- 错误处理（需要最早加载） -->
|
||||
<script src="../js/error-handler.js"></script>
|
||||
|
||||
<script src="../js/page-loader.js"></script>
|
||||
|
||||
<!-- 移动端优化 -->
|
||||
<script src="../js/mobile-optimize.js"></script>
|
||||
|
||||
<!-- 性能优化 -->
|
||||
<script src="../js/performance-optimizer.js"></script>
|
||||
<style>
|
||||
* {
|
||||
font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
/* Glass morphism effect */
|
||||
.glass-morphism {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
}
|
||||
.timeline-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
top: 40px;
|
||||
height: calc(100% - 40px);
|
||||
width: 2px;
|
||||
background: linear-gradient(to bottom, #667eea, #a78bfa);
|
||||
}
|
||||
.timeline-item:last-child::before {
|
||||
display: none;
|
||||
}
|
||||
.timeline-dot {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 8px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
border: 3px solid #667eea;
|
||||
box-shadow: 0 0 0 6px rgba(102, 126, 234, 0.1);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% { box-shadow: 0 0 0 6px rgba(102, 126, 234, 0.1); }
|
||||
50% { box-shadow: 0 0 0 12px rgba(102, 126, 234, 0); }
|
||||
100% { box-shadow: 0 0 0 6px rgba(102, 126, 234, 0.1); }
|
||||
}
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.stat-card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.stat-card::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 glass-morphism shadow-md z-50 transition-all duration-300">
|
||||
<!-- Content will be dynamically generated by nav-component.js -->
|
||||
</nav>
|
||||
|
||||
<!-- Page Header -->
|
||||
<section class="relative bg-gradient-to-br from-purple-600 via-indigo-600 to-blue-600 text-white pt-24 pb-16 overflow-hidden">
|
||||
<div class="absolute inset-0">
|
||||
<img src="../../data/会展策划/image/博览会.jpg" alt="博览会背景" class="w-full h-full object-cover opacity-20">
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-purple-900/50"></div>
|
||||
</div>
|
||||
<div class="absolute top-20 left-10 w-32 h-32 bg-white/10 rounded-full blur-3xl animate-float"></div>
|
||||
<div class="absolute bottom-10 right-10 w-40 h-40 bg-blue-400/20 rounded-full blur-3xl animate-float animation-delay-2000"></div>
|
||||
|
||||
<div class="container mx-auto px-6 relative z-10">
|
||||
<div class="animate-fadeInUp">
|
||||
<div class="inline-flex items-center px-4 py-2 bg-white/20 backdrop-blur rounded-full mb-6">
|
||||
<span class="animate-pulse w-2 h-2 bg-white rounded-full mr-2"></span>
|
||||
<span class="text-sm font-semibold">全方位展会规划</span>
|
||||
</div>
|
||||
<h1 class="text-5xl md:text-6xl font-bold mb-4">
|
||||
<span class="block">策划概述</span>
|
||||
</h1>
|
||||
<p class="text-xl opacity-90 max-w-3xl">
|
||||
<i class="fas fa-quote-left mr-2"></i>
|
||||
全面了解展会策划背景、目标与核心价值，打造长三角地区最具影响力的新能源汽车产业盛会
|
||||
<i class="fas fa-quote-right ml-2"></i>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Key Stats -->
|
||||
<section class="py-12 -mt-8 relative z-20">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<div class="stat-card text-white p-6 rounded-2xl shadow-2xl animate-fadeInUp animation-delay-200">
|
||||
<div class="relative z-10">
|
||||
<i class="fas fa-industry text-3xl mb-3 opacity-80"></i>
|
||||
<div class="text-3xl font-bold mb-1">3000+</div>
|
||||
<div class="text-sm opacity-90">产业链企业</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card text-white p-6 rounded-2xl shadow-2xl animate-fadeInUp animation-delay-400">
|
||||
<div class="relative z-10">
|
||||
<i class="fas fa-coins text-3xl mb-3 opacity-80"></i>
|
||||
<div class="text-3xl font-bold mb-1">8000亿</div>
|
||||
<div class="text-sm opacity-90">2023年产值</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card text-white p-6 rounded-2xl shadow-2xl animate-fadeInUp animation-delay-600">
|
||||
<div class="relative z-10">
|
||||
<i class="fas fa-car text-3xl mb-3 opacity-80"></i>
|
||||
<div class="text-3xl font-bold mb-1">900万+</div>
|
||||
<div class="text-sm opacity-90">年产销量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card text-white p-6 rounded-2xl shadow-2xl animate-fadeInUp animation-delay-800">
|
||||
<div class="relative z-10">
|
||||
<i class="fas fa-percentage text-3xl mb-3 opacity-80"></i>
|
||||
<div class="text-3xl font-bold mb-1">40%</div>
|
||||
<div class="text-sm opacity-90">全国占比</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Background Section -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="animate-fadeInLeft">
|
||||
<h2 class="text-3xl font-bold text-gray-800 mb-6">
|
||||
<i class="fas fa-globe-asia mr-3 text-purple-600"></i>策划背景
|
||||
</h2>
|
||||
<div class="space-y-4 text-gray-600">
|
||||
<p>
|
||||
在全球碳中和目标的大背景下，新能源汽车产业正经历前所未有的发展机遇。中国作为全球最大的新能源汽车市场，2023年产销量均突破900万辆，同比增长超过35%。
|
||||
</p>
|
||||
<p>
|
||||
长三角地区作为中国经济最发达、创新能力最强的区域之一，在新能源汽车产业发展中占据举足轻重的地位。该地区聚集了特斯拉、上汽、蔚来、理想、小鹏等众多知名车企，以及宁德时代、华为等核心零部件供应商。
|
||||
</p>
|
||||
<div class="bg-purple-50 border-l-4 border-purple-600 p-4 rounded">
|
||||
<p class="font-semibold mb-2">核心数据：</p>
|
||||
<ul class="space-y-2">
|
||||
<li>• 长三角新能源汽车产量占全国40%以上</li>
|
||||
<li>• 区域内新能源汽车产业链企业超过3000家</li>
|
||||
<li>• 2023年产值突破8000亿元</li>
|
||||
<li>• 智能网联汽车测试里程超过500万公里</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="animate-fadeInRight">
|
||||
<div class="bg-gradient-to-br from-purple-100 to-blue-100 rounded-2xl p-8 relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 w-32 h-32 bg-purple-200/30 rounded-full blur-2xl"></div>
|
||||
<h3 class="text-2xl font-bold text-gray-800 mb-4 relative z-10">
|
||||
<i class="fas fa-rocket mr-2 text-purple-600"></i>产业发展机遇
|
||||
</h3>
|
||||
<div class="space-y-3 relative z-10">
|
||||
<div class="flex items-start group hover:transform hover:translate-x-2 transition-all duration-300">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-purple-500 to-purple-700 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1 group-hover:scale-110 transition-transform">1</div>
|
||||
<div class="ml-3">
|
||||
<h4 class="font-semibold">政策支持力度空前</h4>
|
||||
<p class="text-sm text-gray-600">国家及地方政府出台多项扶持政策，推动产业快速发展</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start group hover:transform hover:translate-x-2 transition-all duration-300">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-purple-500 to-purple-700 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1 group-hover:scale-110 transition-transform">2</div>
|
||||
<div class="ml-3">
|
||||
<h4 class="font-semibold">技术创新加速突破</h4>
|
||||
<p class="text-sm text-gray-600">电池技术、自动驾驶、车联网等关键技术不断革新</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start group hover:transform hover:translate-x-2 transition-all duration-300">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-purple-500 to-purple-700 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1 group-hover:scale-110 transition-transform">3</div>
|
||||
<div class="ml-3">
|
||||
<h4 class="font-semibold">市场需求持续增长</h4>
|
||||
<p class="text-sm text-gray-600">消费者对新能源汽车接受度不断提高，市场潜力巨大</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start group hover:transform hover:translate-x-2 transition-all duration-300">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-purple-500 to-purple-700 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1 group-hover:scale-110 transition-transform">4</div>
|
||||
<div class="ml-3">
|
||||
<h4 class="font-semibold">产业链日趋完善</h4>
|
||||
<p class="text-sm text-gray-600">从研发到制造，从销售到服务，产业生态系统不断成熟</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Objectives Section -->
|
||||
<section class="py-16 bg-gradient-to-br from-gray-50 via-purple-50 to-indigo-50 relative overflow-hidden">
|
||||
<div class="absolute inset-0 opacity-5">
|
||||
<img src="../../data/会展策划/image/展馆布置图.jpeg" alt="展馆布置" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="container mx-auto px-6 relative z-10">
|
||||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-4 animate-fadeInUp">
|
||||
<i class="fas fa-bullseye mr-3 text-purple-600"></i>策划目标
|
||||
</h2>
|
||||
<p class="text-center text-gray-600 mb-12 animate-fadeInUp animation-delay-200">明确的目标引领，打造专业高效的展会平台</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="bg-white/90 backdrop-blur rounded-xl shadow-xl p-6 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 group animate-fadeInUp animation-delay-300">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-blue-400 to-blue-600 rounded-2xl flex items-center justify-center mb-4 group-hover:rotate-6 transition-transform">
|
||||
<i class="fas fa-award text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2 text-gray-800 group-hover:text-blue-600 transition-colors">品牌建设</h3>
|
||||
<p class="text-gray-600">打造长三角地区新能源汽车与智能交通领域第一展会品牌，成为行业风向标</p>
|
||||
<div class="mt-4 pt-4 border-t">
|
||||
<ul class="text-sm text-gray-500 space-y-1">
|
||||
<li>• 品牌知名度提升50%</li>
|
||||
<li>• 媒体曝光量超1亿次</li>
|
||||
<li>• 行业认可度达90%</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/90 backdrop-blur rounded-xl shadow-xl p-6 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 group animate-fadeInUp animation-delay-400">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-emerald-400 to-green-600 rounded-2xl flex items-center justify-center mb-4 group-hover:rotate-6 transition-transform">
|
||||
<i class="fas fa-chart-line text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2 text-gray-800 group-hover:text-emerald-600 transition-colors">商业价值</h3>
|
||||
<p class="text-gray-600">吸引300家优质展商参展，促进产业链上下游合作，实现商业价值最大化</p>
|
||||
<div class="mt-4 pt-4 border-t">
|
||||
<ul class="text-sm text-gray-500 space-y-1">
|
||||
<li>• 现场成交额超10亿元</li>
|
||||
<li>• 意向订单8亿元</li>
|
||||
<li>• 投资回报率33.3%</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/90 backdrop-blur rounded-xl shadow-xl p-6 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 group animate-fadeInUp animation-delay-500">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-purple-400 to-purple-600 rounded-2xl flex items-center justify-center mb-4 group-hover:rotate-6 transition-transform">
|
||||
<i class="fas fa-users text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2 text-gray-800 group-hover:text-purple-600 transition-colors">行业推动</h3>
|
||||
<p class="text-gray-600">促进技术创新和产业升级，推动新能源汽车产业高质量发展</p>
|
||||
<div class="mt-4 pt-4 border-t">
|
||||
<ul class="text-sm text-gray-500 space-y-1">
|
||||
<li>• 发布行业白皮书2份</li>
|
||||
<li>• 专业论坛20场</li>
|
||||
<li>• 技术成果发布50项</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/90 backdrop-blur rounded-xl shadow-xl p-6 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 group animate-fadeInUp animation-delay-600">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-orange-400 to-pink-600 rounded-2xl flex items-center justify-center mb-4 group-hover:rotate-6 transition-transform">
|
||||
<i class="fas fa-leaf text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2 text-gray-800 group-hover:text-orange-600 transition-colors">社会责任</h3>
|
||||
<p class="text-gray-600">推广绿色出行理念，助力碳中和目标实现，促进可持续发展</p>
|
||||
<div class="mt-4 pt-4 border-t">
|
||||
<ul class="text-sm text-gray-500 space-y-1">
|
||||
<li>• 碳减排宣传覆盖10万人</li>
|
||||
<li>• 绿色出行体验5万人次</li>
|
||||
<li>• 环保倡议签名3万人</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Policy Support Section -->
|
||||
<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="max-w-4xl mx-auto">
|
||||
<div class="space-y-6">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="bg-gray-50 rounded-lg p-6">
|
||||
<h3 class="text-xl font-bold mb-2">《新能源汽车产业发展规划（2021-2035年）》</h3>
|
||||
<p class="text-gray-600 mb-3">国务院办公厅发布，明确了新能源汽车产业发展的指导思想、基本原则和发展愿景。</p>
|
||||
<div class="bg-white rounded p-3">
|
||||
<p class="text-sm text-gray-500">
|
||||
<strong>核心目标：</strong>到2025年，新能源汽车新车销售量达到汽车新车销售总量的20%左右；到2035年，纯电动汽车成为新销售车辆的主流。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="bg-gray-50 rounded-lg p-6">
|
||||
<h3 class="text-xl font-bold mb-2">《上海市加快新能源汽车产业发展实施计划》</h3>
|
||||
<p class="text-gray-600 mb-3">上海市人民政府印发，提出打造国际新能源汽车发展高地的具体措施。</p>
|
||||
<div class="bg-white rounded p-3">
|
||||
<p class="text-sm text-gray-500">
|
||||
<strong>发展目标：</strong>到2025年，上海新能源汽车年产量超过120万辆，产值突破3500亿元，打造3-5家具有国际竞争力的整车企业。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="bg-gray-50 rounded-lg p-6">
|
||||
<h3 class="text-xl font-bold mb-2">《长三角地区新能源汽车产业链协同发展规划》</h3>
|
||||
<p class="text-gray-600 mb-3">长三角一体化示范区执委会发布，推动区域产业协同发展。</p>
|
||||
<div class="bg-white rounded p-3">
|
||||
<p class="text-sm text-gray-500">
|
||||
<strong>协同重点：</strong>建立跨区域产业协作机制，共建新能源汽车产业创新平台，推动充电基础设施互联互通。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="bg-gray-50 rounded-lg p-6">
|
||||
<h3 class="text-xl font-bold mb-2">《智能网联汽车道路测试与示范应用管理规范》</h3>
|
||||
<p class="text-gray-600 mb-3">工业和信息化部、公安部、交通运输部联合发布，规范智能网联汽车测试与应用。</p>
|
||||
<div class="bg-white rounded p-3">
|
||||
<p class="text-sm text-gray-500">
|
||||
<strong>示范应用：</strong>在长三角地区建设5个国家级智能网联汽车测试示范区，累计开放测试道路超过1000公里。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Market Analysis -->
|
||||
<section class="py-16 bg-gradient-to-br from-gray-50 to-white relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 w-96 h-96 bg-purple-200/20 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-0 left-0 w-96 h-96 bg-blue-200/20 rounded-full blur-3xl"></div>
|
||||
<div class="container mx-auto px-6 relative z-10">
|
||||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-4 animate-fadeInUp">
|
||||
<i class="fas fa-chart-bar mr-3 text-purple-600"></i>市场分析
|
||||
</h2>
|
||||
<p class="text-center text-gray-600 mb-12 animate-fadeInUp animation-delay-200">深入洞察产业发展趋势，精准把握市场机遇</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="bg-white/90 backdrop-blur rounded-xl shadow-xl p-6 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 animate-fadeInUp animation-delay-300">
|
||||
<h3 class="text-xl font-bold mb-4 text-purple-600">
|
||||
<i class="fas fa-expand-arrows-alt mr-2"></i>市场规模
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between items-center py-2 border-b">
|
||||
<span class="text-gray-600">2023年销量</span>
|
||||
<span class="font-bold">949.5万辆</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-2 border-b">
|
||||
<span class="text-gray-600">同比增长</span>
|
||||
<span class="font-bold text-green-600">+37.9%</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-2 border-b">
|
||||
<span class="text-gray-600">市场渗透率</span>
|
||||
<span class="font-bold">31.6%</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-2">
|
||||
<span class="text-gray-600">2025年预测</span>
|
||||
<span class="font-bold">1500万辆</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/90 backdrop-blur rounded-xl shadow-xl p-6 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 animate-fadeInUp animation-delay-400">
|
||||
<h3 class="text-xl font-bold mb-4 text-indigo-600">
|
||||
<i class="fas fa-sitemap mr-2"></i>产业链分布
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center">
|
||||
<div class="w-24 text-sm text-gray-600">整车制造</div>
|
||||
<div class="flex-1 bg-gray-200 rounded-full h-4 ml-3">
|
||||
<div class="bg-purple-600 h-4 rounded-full" style="width: 85%"></div>
|
||||
</div>
|
||||
<span class="ml-2 text-sm font-bold">85家</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-24 text-sm text-gray-600">电池电机</div>
|
||||
<div class="flex-1 bg-gray-200 rounded-full h-4 ml-3">
|
||||
<div class="bg-purple-600 h-4 rounded-full" style="width: 70%"></div>
|
||||
</div>
|
||||
<span class="ml-2 text-sm font-bold">156家</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-24 text-sm text-gray-600">智能网联</div>
|
||||
<div class="flex-1 bg-gray-200 rounded-full h-4 ml-3">
|
||||
<div class="bg-purple-600 h-4 rounded-full" style="width: 60%"></div>
|
||||
</div>
|
||||
<span class="ml-2 text-sm font-bold">234家</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-24 text-sm text-gray-600">充电设施</div>
|
||||
<div class="flex-1 bg-gray-200 rounded-full h-4 ml-3">
|
||||
<div class="bg-purple-600 h-4 rounded-full" style="width: 50%"></div>
|
||||
</div>
|
||||
<span class="ml-2 text-sm font-bold">189家</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/90 backdrop-blur rounded-xl shadow-xl p-6 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 animate-fadeInUp animation-delay-500">
|
||||
<h3 class="text-xl font-bold mb-4 text-emerald-600">
|
||||
<i class="fas fa-poll mr-2"></i>展会需求调研
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="bg-green-50 rounded-lg p-3">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="text-sm text-gray-600">有参展意向</span>
|
||||
<span class="font-bold text-green-600">89%</span>
|
||||
</div>
|
||||
<div class="bg-gray-200 rounded-full h-2">
|
||||
<div class="bg-green-600 h-2 rounded-full" style="width: 89%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-blue-50 rounded-lg p-3">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="text-sm text-gray-600">需要B2B对接</span>
|
||||
<span class="font-bold text-blue-600">76%</span>
|
||||
</div>
|
||||
<div class="bg-gray-200 rounded-full h-2">
|
||||
<div class="bg-blue-600 h-2 rounded-full" style="width: 76%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-purple-50 rounded-lg p-3">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="text-sm text-gray-600">关注技术交流</span>
|
||||
<span class="font-bold text-purple-600">82%</span>
|
||||
</div>
|
||||
<div class="bg-gray-200 rounded-full h-2">
|
||||
<div class="bg-purple-600 h-2 rounded-full" style="width: 82%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="py-16 bg-gradient-to-r from-purple-600 to-blue-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>
|
||||
<a href="exhibition.html" class="inline-block bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
|
||||
查看展会介绍 →
|
||||
</a>
|
||||
</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>© 2024 长三角国际新能源汽车与智能交通产业博览会. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="../js/nav-component.js"></script>
|
||||
<script src="../js/back-to-top.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1058
web_frontend/web_result/order-classes/wenlu/risk.html
Normal file
1058
web_frontend/web_result/order-classes/wenlu/risk.html
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user