feat: 优化会展网站首页用户体验和视觉效果
主要改进: - 修复星形图标可见性问题，改为黄色高对比度显示 - 移除'立即参展'按钮，清理冗余CTA元素 - 修正背景图片路径并优化透明度(opacity-10) - 为所有容器区域添加hover提示文字 - 删除'立即参与，共创绿色出行未来'整个CTA区块 - 优化页面加载器和图片错误处理 - 修复展会信息卡片文字对比度问题 - 增强多层背景遮罩效果 影响文件: - web_frontend/web_result/index.html - web_frontend/web_result/css/animations.css - web_frontend/web_result/js/main.js - 新增多个页面和样式文件 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yep_Q
636
web_frontend/web_result/pages/budget.html
Normal file
636
web_frontend/web_result/pages/budget.html
Normal file
@@ -0,0 +1,636 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>预算分析 - 2024长三角国际新能源汽车展</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
.nav-link {
|
||||
position: relative;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: #667eea;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.nav-link:hover::after,
|
||||
.nav-link.active::after {
|
||||
width: 100%;
|
||||
}
|
||||
.chart-bar {
|
||||
animation: growBar 1s ease-out forwards;
|
||||
}
|
||||
@keyframes growBar {
|
||||
from { width: 0; }
|
||||
}
|
||||
.counter {
|
||||
animation: countUp 2s ease-out forwards;
|
||||
}
|
||||
@keyframes countUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.pie-chart {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
background: conic-gradient(
|
||||
#667eea 0deg 126deg,
|
||||
#10b981 126deg 198deg,
|
||||
#f59e0b 198deg 234deg,
|
||||
#ef4444 234deg 270deg,
|
||||
#8b5cf6 270deg 306deg,
|
||||
#ec4899 306deg 360deg
|
||||
);
|
||||
position: relative;
|
||||
}
|
||||
.roi-indicator {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(1.05); opacity: 0.9; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 w-full bg-white shadow-md z-50">
|
||||
<div class="container mx-auto px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-8 h-8 mr-3 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z"/>
|
||||
</svg>
|
||||
<span class="text-xl font-bold text-gray-800">Green Mobility 2024</span>
|
||||
</div>
|
||||
<div class="hidden md:flex space-x-8">
|
||||
<a href="../index.html" class="nav-link text-gray-700 hover:text-purple-600">首页</a>
|
||||
<a href="overview.html" class="nav-link text-gray-700 hover:text-purple-600">策划概述</a>
|
||||
<a href="exhibition.html" class="nav-link text-gray-700 hover:text-purple-600">展会介绍</a>
|
||||
<a href="marketing.html" class="nav-link text-gray-700 hover:text-purple-600">营销方案</a>
|
||||
<a href="operation.html" class="nav-link text-gray-700 hover:text-purple-600">现场运营</a>
|
||||
<a href="budget.html" class="nav-link active text-gray-700 hover:text-purple-600">预算分析</a>
|
||||
<a href="risk.html" class="nav-link text-gray-700 hover:text-purple-600">风险评估</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Page Header -->
|
||||
<section class="bg-gradient-to-r from-green-600 to-emerald-600 text-white pt-24 pb-12">
|
||||
<div class="container mx-auto px-6">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4">预算与收益分析</h1>
|
||||
<p class="text-xl opacity-90">科学规划预算，实现投资价值最大化</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Budget Overview -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl font-bold text-gray-800 mb-4">预算总览</h2>
|
||||
<p class="text-gray-600">合理配置资源，确保展会成功举办</p>
|
||||
</div>
|
||||
|
||||
<!-- Key Metrics -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
|
||||
<div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6 text-center counter">
|
||||
<div class="text-3xl font-bold text-blue-600 mb-2">900万</div>
|
||||
<div class="text-gray-600">总支出预算</div>
|
||||
<div class="mt-2 text-xs text-gray-500">占预期收入75%</div>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6 text-center counter" style="animation-delay: 0.2s">
|
||||
<div class="text-3xl font-bold text-green-600 mb-2">1200万</div>
|
||||
<div class="text-gray-600">预期总收入</div>
|
||||
<div class="mt-2 text-xs text-gray-500">同比增长20%</div>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6 text-center counter" style="animation-delay: 0.4s">
|
||||
<div class="text-3xl font-bold text-purple-600 mb-2">300万</div>
|
||||
<div class="text-gray-600">预期净利润</div>
|
||||
<div class="mt-2 text-xs text-gray-500">利润率25%</div>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-6 text-center counter roi-indicator" style="animation-delay: 0.6s">
|
||||
<div class="text-3xl font-bold text-orange-600 mb-2">33.3%</div>
|
||||
<div class="text-gray-600">投资回报率</div>
|
||||
<div class="mt-2 text-xs text-gray-500">行业领先水平</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Expenditure Budget -->
|
||||
<section class="py-16 bg-gray-50">
|
||||
<div class="container mx-auto px-6">
|
||||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">支出预算明细</h2>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
<!-- Budget Breakdown Chart -->
|
||||
<div>
|
||||
<div class="bg-white rounded-2xl shadow-lg p-8">
|
||||
<h3 class="text-xl font-bold mb-6">预算分配图</h3>
|
||||
<div class="flex justify-center mb-6">
|
||||
<div class="pie-chart">
|
||||
<div class="absolute inset-4 bg-white rounded-full flex items-center justify-center">
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold">900万</div>
|
||||
<div class="text-xs text-gray-500">总预算</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3 text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="w-3 h-3 bg-purple-600 rounded-full mr-2"></div>
|
||||
<span>场地费用 33.3%</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-3 h-3 bg-green-600 rounded-full mr-2"></div>
|
||||
<span>营销推广 22.2%</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-3 h-3 bg-yellow-600 rounded-full mr-2"></div>
|
||||
<span>人员成本 16.7%</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-3 h-3 bg-red-600 rounded-full mr-2"></div>
|
||||
<span>活动执行 11.1%</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-3 h-3 bg-purple-600 rounded-full mr-2"></div>
|
||||
<span>运营保障 8.9%</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-3 h-3 bg-pink-600 rounded-full mr-2"></div>
|
||||
<span>应急储备 7.8%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Detailed Budget List -->
|
||||
<div>
|
||||
<div class="bg-white rounded-2xl shadow-lg p-8">
|
||||
<h3 class="text-xl font-bold mb-6">详细预算清单</h3>
|
||||
<div class="space-y-4">
|
||||
<!-- 场地费用 -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="font-semibold text-purple-600">场地费用</span>
|
||||
<span class="font-bold">300万</span>
|
||||
</div>
|
||||
<div class="bg-gray-200 rounded-full h-3">
|
||||
<div class="bg-purple-600 h-3 rounded-full chart-bar" style="width: 100%"></div>
|
||||
</div>
|
||||
<div class="mt-2 text-xs text-gray-600 space-y-1">
|
||||
<div class="flex justify-between">
|
||||
<span>展馆租赁</span>
|
||||
<span>200万</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>搭建装修</span>
|
||||
<span>80万</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>设备租赁</span>
|
||||
<span>20万</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 营销推广 -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="font-semibold text-green-600">营销推广</span>
|
||||
<span class="font-bold">200万</span>
|
||||
</div>
|
||||
<div class="bg-gray-200 rounded-full h-3">
|
||||
<div class="bg-green-600 h-3 rounded-full chart-bar" style="width: 66.7%; animation-delay: 0.2s"></div>
|
||||
</div>
|
||||
<div class="mt-2 text-xs text-gray-600 space-y-1">
|
||||
<div class="flex justify-between">
|
||||
<span>线上推广</span>
|
||||
<span>80万</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>线下推广</span>
|
||||
<span>60万</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>媒体合作</span>
|
||||
<span>40万</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>精准邀请</span>
|
||||
<span>20万</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 人员成本 -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="font-semibold text-yellow-600">人员成本</span>
|
||||
<span class="font-bold">150万</span>
|
||||
</div>
|
||||
<div class="bg-gray-200 rounded-full h-3">
|
||||
<div class="bg-yellow-600 h-3 rounded-full chart-bar" style="width: 50%; animation-delay: 0.4s"></div>
|
||||
</div>
|
||||
<div class="mt-2 text-xs text-gray-600 space-y-1">
|
||||
<div class="flex justify-between">
|
||||
<span>项目团队</span>
|
||||
<span>80万</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>临时人员</span>
|
||||
<span>40万</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>专家顾问</span>
|
||||
<span>30万</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 活动执行 -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="font-semibold text-red-600">活动执行</span>
|
||||
<span class="font-bold">100万</span>
|
||||
</div>
|
||||
<div class="bg-gray-200 rounded-full h-3">
|
||||
<div class="bg-red-600 h-3 rounded-full chart-bar" style="width: 33.3%; animation-delay: 0.6s"></div>
|
||||
</div>
|
||||
<div class="mt-2 text-xs text-gray-600 space-y-1">
|
||||
<div class="flex justify-between">
|
||||
<span>开幕典礼</span>
|
||||
<span>30万</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>论坛峰会</span>
|
||||
<span>40万</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>互动活动</span>
|
||||
<span>30万</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Revenue 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-5xl mx-auto">
|
||||
<!-- Revenue Sources -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
|
||||
<div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-6 text-white text-center">
|
||||
<div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">展位收入</h3>
|
||||
<div class="text-3xl font-bold mb-1">700万</div>
|
||||
<div class="text-blue-100 text-sm">占比 58.3%</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl p-6 text-white text-center">
|
||||
<div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">赞助收入</h3>
|
||||
<div class="text-3xl font-bold mb-1">300万</div>
|
||||
<div class="text-green-100 text-sm">占比 25%</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl p-6 text-white text-center">
|
||||
<div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8" 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>
|
||||
<h3 class="text-xl font-bold mb-2">广告收入</h3>
|
||||
<div class="text-3xl font-bold mb-1">100万</div>
|
||||
<div class="text-purple-100 text-sm">占比 8.3%</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl p-6 text-white text-center">
|
||||
<div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">其他收入</h3>
|
||||
<div class="text-3xl font-bold mb-1">100万</div>
|
||||
<div class="text-orange-100 text-sm">占比 8.3%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Revenue Details -->
|
||||
<div class="bg-gray-50 rounded-2xl p-8">
|
||||
<h3 class="text-2xl font-bold mb-6">收入来源详解</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<!-- Exhibition Booth Revenue -->
|
||||
<div class="bg-white rounded-xl p-6">
|
||||
<h4 class="text-lg font-bold mb-4 text-blue-600">展位收入明细</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between py-2 border-b">
|
||||
<span class="text-gray-600">标准展位（9㎡）</span>
|
||||
<div class="text-right">
|
||||
<div class="font-semibold">1200个</div>
|
||||
<div class="text-xs text-gray-500">5000元/个</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between py-2 border-b">
|
||||
<span class="text-gray-600">特装展位</span>
|
||||
<div class="text-right">
|
||||
<div class="font-semibold">20,000㎡</div>
|
||||
<div class="text-xs text-gray-500">500元/㎡</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between py-2">
|
||||
<span class="text-gray-600">室外展位</span>
|
||||
<div class="text-right">
|
||||
<div class="font-semibold">5,000㎡</div>
|
||||
<div class="text-xs text-gray-500">300元/㎡</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sponsorship Revenue -->
|
||||
<div class="bg-white rounded-xl p-6">
|
||||
<h4 class="text-lg font-bold mb-4 text-green-600">赞助收入构成</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between py-2 border-b">
|
||||
<span class="text-gray-600">冠名赞助</span>
|
||||
<div class="text-right">
|
||||
<div class="font-semibold">1家</div>
|
||||
<div class="text-xs text-gray-500">100万元</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between py-2 border-b">
|
||||
<span class="text-gray-600">战略合作</span>
|
||||
<div class="text-right">
|
||||
<div class="font-semibold">3家</div>
|
||||
<div class="text-xs text-gray-500">50万元/家</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between py-2">
|
||||
<span class="text-gray-600">行业赞助</span>
|
||||
<div class="text-right">
|
||||
<div class="font-semibold">10家</div>
|
||||
<div class="text-xs text-gray-500">5万元/家</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ROI Analysis -->
|
||||
<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-6xl mx-auto">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Direct Benefits -->
|
||||
<div class="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="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">直接收益</h3>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="bg-green-50 rounded-lg p-4">
|
||||
<div class="flex justify-between mb-2">
|
||||
<span class="text-gray-600">展会净利润</span>
|
||||
<span class="font-bold text-green-600">300万</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">占总投入33.3%</div>
|
||||
</div>
|
||||
<div class="bg-green-50 rounded-lg p-4">
|
||||
<div class="flex justify-between mb-2">
|
||||
<span class="text-gray-600">现场成交额</span>
|
||||
<span class="font-bold text-green-600">10亿+</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">带动产业发展</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Indirect Benefits -->
|
||||
<div class="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>
|
||||
<div class="space-y-3">
|
||||
<div class="bg-blue-50 rounded-lg p-4">
|
||||
<h4 class="font-semibold mb-2">品牌价值提升</h4>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• 媒体曝光1亿+次</li>
|
||||
<li>• 行业影响力TOP3</li>
|
||||
<li>• 品牌认知度+50%</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-blue-50 rounded-lg p-4">
|
||||
<h4 class="font-semibold mb-2">长期合作机会</h4>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• 战略合作20+项</li>
|
||||
<li>• 客户留存率85%</li>
|
||||
<li>• 复购意向90%</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Benefits -->
|
||||
<div class="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 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>
|
||||
<h3 class="text-xl font-bold">社会效益</h3>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="bg-purple-50 rounded-lg p-4">
|
||||
<h4 class="font-semibold mb-2">产业带动效应</h4>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• 带动相关产业30亿</li>
|
||||
<li>• 创造就业1000+</li>
|
||||
<li>• 税收贡献2000万</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-purple-50 rounded-lg p-4">
|
||||
<h4 class="font-semibold mb-2">行业推动作用</h4>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• 技术成果50+项</li>
|
||||
<li>• 行业白皮书2份</li>
|
||||
<li>• 标准制定参与</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ROI Summary -->
|
||||
<div class="mt-12 bg-gradient-to-r from-green-600 to-emerald-600 rounded-2xl p-8 text-white">
|
||||
<h3 class="text-2xl font-bold mb-6 text-center">综合投资回报</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 text-center">
|
||||
<div>
|
||||
<div class="text-3xl font-bold mb-2">1:1.33</div>
|
||||
<div class="text-green-100">投入产出比</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-3xl font-bold mb-2">6个月</div>
|
||||
<div class="text-green-100">投资回收期</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-3xl font-bold mb-2">1500万</div>
|
||||
<div class="text-green-100">综合价值</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-3xl font-bold mb-2">A+</div>
|
||||
<div class="text-green-100">投资评级</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Cost Control -->
|
||||
<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="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div class="bg-gray-50 rounded-xl p-6">
|
||||
<h3 class="text-lg font-bold mb-4 text-blue-600">预算管控</h3>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 text-green-600 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<div>
|
||||
<p class="font-semibold">分级审批制度</p>
|
||||
<p class="text-sm text-gray-600">10万以下部门审批，10万以上管理层审批</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 text-green-600 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<div>
|
||||
<p class="font-semibold">实时监控系统</p>
|
||||
<p class="text-sm text-gray-600">每周预算执行报告，偏差预警</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 text-green-600 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<div>
|
||||
<p class="font-semibold">成本责任制</p>
|
||||
<p class="text-sm text-gray-600">各部门成本KPI考核</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-xl p-6">
|
||||
<h3 class="text-lg font-bold mb-4 text-purple-600">优化措施</h3>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 text-green-600 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<div>
|
||||
<p class="font-semibold">供应商竞标</p>
|
||||
<p class="text-sm text-gray-600">3家以上比价，优选性价比</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 text-green-600 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<div>
|
||||
<p class="font-semibold">资源共享</p>
|
||||
<p class="text-sm text-gray-600">与合作伙伴资源互换</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 text-green-600 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<div>
|
||||
<p class="font-semibold">数字化管理</p>
|
||||
<p class="text-sm text-gray-600">减少人工成本，提高效率</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="py-16 bg-gradient-to-r from-green-600 to-emerald-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="risk.html" class="inline-block bg-white text-green-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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -4,11 +4,50 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>展会介绍 - 2024长三角国际新能源汽车展</title>
|
||||
|
||||
<!-- 样式表 -->
|
||||
<link rel="stylesheet" href="../css/animations.css">
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- 字体 -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Font Awesome 图标 -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
* {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
/* 页面加载动画 */
|
||||
.page-enter {
|
||||
animation: pageEnter 0.8s ease-out;
|
||||
}
|
||||
|
||||
@keyframes pageEnter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 玻璃态效果 */
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
|
||||
}
|
||||
.nav-link {
|
||||
position: relative;
|
||||
@@ -70,30 +109,72 @@
|
||||
<nav class="fixed top-0 w-full bg-white shadow-md z-50">
|
||||
<div class="container mx-auto px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-8 h-8 mr-3 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z"/>
|
||||
</svg>
|
||||
<div class="flex items-center group">
|
||||
<div class="relative mr-3">
|
||||
<i class="fas fa-car-side text-2xl text-purple-600 group-hover:scale-110 transition-transform"></i>
|
||||
<i class="fas fa-bolt text-xs text-green-500 absolute -top-1 -right-1 animate-pulse"></i>
|
||||
</div>
|
||||
<span class="text-xl font-bold text-gray-800">Green Mobility 2024</span>
|
||||
</div>
|
||||
<div class="hidden md:flex space-x-8">
|
||||
<a href="../index.html" class="nav-link text-gray-700 hover:text-purple-600">首页</a>
|
||||
<a href="overview.html" class="nav-link text-gray-700 hover:text-purple-600">策划概述</a>
|
||||
<a href="exhibition.html" class="nav-link active text-gray-700 hover:text-purple-600">展会介绍</a>
|
||||
<a href="marketing.html" class="nav-link text-gray-700 hover:text-purple-600">营销方案</a>
|
||||
<a href="operation.html" class="nav-link text-gray-700 hover:text-purple-600">现场运营</a>
|
||||
<a href="budget.html" class="nav-link text-gray-700 hover:text-purple-600">预算分析</a>
|
||||
<a href="risk.html" class="nav-link text-gray-700 hover:text-purple-600">风险评估</a>
|
||||
<a href="../index.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||||
<i class="fas fa-home mr-1"></i>首页
|
||||
</a>
|
||||
<a href="overview.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||||
<i class="fas fa-file-alt mr-1"></i>策划概述
|
||||
</a>
|
||||
<a href="exhibition.html" class="nav-link active text-purple-600 font-semibold">
|
||||
<i class="fas fa-building mr-1"></i>展会介绍
|
||||
</a>
|
||||
<a href="marketing.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||||
<i class="fas fa-bullhorn mr-1"></i>营销方案
|
||||
</a>
|
||||
<a href="operation.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||||
<i class="fas fa-cogs mr-1"></i>现场运营
|
||||
</a>
|
||||
<a href="budget.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||||
<i class="fas fa-calculator mr-1"></i>预算分析
|
||||
</a>
|
||||
<a href="risk.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||||
<i class="fas fa-shield-alt mr-1"></i>风险评估
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Page Header -->
|
||||
<section class="bg-gradient-to-r from-blue-600 to-green-600 text-white pt-24 pb-12">
|
||||
<div class="container mx-auto px-6">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4">展会介绍与预期效果</h1>
|
||||
<p class="text-xl opacity-90">深入了解展会规模、展品范围、参展商与观众构成</p>
|
||||
<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>
|
||||
|
||||
@@ -108,29 +189,23 @@
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="text-center scale-in">
|
||||
<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-10 h-10 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<div 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 scale-in" style="animation-delay: 0.1s">
|
||||
<div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-10 h-10 text-green-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-2a2 2 0 00-2-2 2 2 0 01-2-2 2 2 0 00-1.668-1.973z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<div 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 scale-in" style="animation-delay: 0.2s">
|
||||
<div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-10 h-10 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
||||
</svg>
|
||||
<div 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>
|
||||
@@ -140,36 +215,38 @@
|
||||
</section>
|
||||
|
||||
<!-- Venue Information -->
|
||||
<section class="py-16 bg-gray-50">
|
||||
<div class="container mx-auto px-6">
|
||||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">展会场地</h2>
|
||||
<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">
|
||||
<h3 class="text-2xl font-bold mb-4">国家会展中心（上海）</h3>
|
||||
<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">
|
||||
<svg class="w-6 h-6 mr-3 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<div 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">
|
||||
<svg class="w-6 h-6 mr-3 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/>
|
||||
<path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z"/>
|
||||
</svg>
|
||||
<div 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">
|
||||
<svg class="w-6 h-6 mr-3 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
|
||||
</svg>
|
||||
<div 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>
|
||||
@@ -178,39 +255,42 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl shadow-lg p-8">
|
||||
<h3 class="text-2xl font-bold text-gray-800 mb-6">场馆优势</h3>
|
||||
<div class="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">
|
||||
<div class="w-12 h-12 bg-blue-600 text-white rounded-lg flex items-center justify-center mr-4">
|
||||
01
|
||||
<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">
|
||||
<div class="w-12 h-12 bg-green-600 text-white rounded-lg flex items-center justify-center mr-4">
|
||||
02
|
||||
<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">
|
||||
<div class="w-12 h-12 bg-purple-600 text-white rounded-lg flex items-center justify-center mr-4">
|
||||
03
|
||||
<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">
|
||||
<div class="w-12 h-12 bg-orange-600 text-white rounded-lg flex items-center justify-center mr-4">
|
||||
04
|
||||
<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>
|
||||
@@ -224,18 +304,24 @@
|
||||
</section>
|
||||
|
||||
<!-- Exhibition Areas Detail -->
|
||||
<section class="py-16 bg-white">
|
||||
<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">展品范围</h2>
|
||||
<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">
|
||||
<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-blue-600 text-white rounded-lg flex items-center justify-center mr-4">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/>
|
||||
<path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z"/>
|
||||
</svg>
|
||||
<div 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>
|
||||
@@ -263,12 +349,16 @@
|
||||
</div>
|
||||
|
||||
<!-- 核心零部件展区 -->
|
||||
<div class="exhibition-card bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6">
|
||||
<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-green-600 text-white rounded-lg flex items-center justify-center mr-4">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<div 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>
|
||||
@@ -296,12 +386,16 @@
|
||||
</div>
|
||||
|
||||
<!-- 智能交通展区 -->
|
||||
<div class="exhibition-card bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6">
|
||||
<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-purple-600 text-white rounded-lg flex items-center justify-center mr-4">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 3.5a1.5 1.5 0 013 0V4a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-.5a1.5 1.5 0 000 3h.5a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-.5a1.5 1.5 0 00-3 0v.5a1 1 0 01-1 1H6a1 1 0 01-1-1v-3a1 1 0 00-1-1h-.5a1.5 1.5 0 010-3H4a1 1 0 001-1V6a1 1 0 011-1h3a1 1 0 001-1v-.5z"/>
|
||||
</svg>
|
||||
<div 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>
|
||||
@@ -329,12 +423,16 @@
|
||||
</div>
|
||||
|
||||
<!-- 配套服务展区 -->
|
||||
<div class="exhibition-card bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-6">
|
||||
<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-orange-600 text-white rounded-lg flex items-center justify-center mr-4">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<div 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>
|
||||
@@ -643,5 +741,83 @@
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="../js/main.js"></script>
|
||||
<script>
|
||||
// 页面加载动画
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 添加页面进入动画
|
||||
document.body.classList.add('page-enter');
|
||||
|
||||
// 图片懒加载
|
||||
const images = document.querySelectorAll('img');
|
||||
images.forEach(img => {
|
||||
img.addEventListener('load', function() {
|
||||
this.classList.add('image-loaded');
|
||||
});
|
||||
img.addEventListener('error', function() {
|
||||
this.classList.add('image-error');
|
||||
this.src = '../data/会展策划/image/博览会.jpg'; // 备用图片
|
||||
});
|
||||
});
|
||||
|
||||
// 滚动动画触发
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -100px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// 观察所有带动画的元素
|
||||
document.querySelectorAll('.animate-fadeInUp, .animate-fadeInLeft, .animate-fadeInRight').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// 数字动画
|
||||
function animateNumbers() {
|
||||
const numbers = [
|
||||
{ el: document.querySelector('.economic-number'), target: 10, suffix: '亿+' },
|
||||
{ el: document.querySelector('.social-number'), target: 1, suffix: '亿+次' },
|
||||
{ el: document.querySelector('.brand-number'), target: 90, suffix: '%+' }
|
||||
];
|
||||
|
||||
numbers.forEach(item => {
|
||||
if (item.el) {
|
||||
let current = 0;
|
||||
const increment = item.target / 50;
|
||||
const timer = setInterval(() => {
|
||||
current += increment;
|
||||
if (current >= item.target) {
|
||||
current = item.target;
|
||||
clearInterval(timer);
|
||||
}
|
||||
item.el.textContent = Math.floor(current) + item.suffix;
|
||||
}, 30);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 触发数字动画
|
||||
const resultsSection = document.querySelector('#expected-results');
|
||||
if (resultsSection) {
|
||||
const resultsObserver = new IntersectionObserver(function(entries) {
|
||||
if (entries[0].isIntersecting) {
|
||||
animateNumbers();
|
||||
resultsObserver.disconnect();
|
||||
}
|
||||
});
|
||||
resultsObserver.observe(resultsSection);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
805
web_frontend/web_result/pages/marketing.html
Normal file
805
web_frontend/web_result/pages/marketing.html
Normal file
@@ -0,0 +1,805 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>营销方案 - 2024长三角国际新能源汽车展</title>
|
||||
|
||||
<!-- 样式表 -->
|
||||
<link rel="stylesheet" href="../css/animations.css">
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
|
||||
<!-- 字体 -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Font Awesome 图标 -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
* {
|
||||
font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
/* 玻璃态效果 */
|
||||
.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 bg-white shadow-md z-50">
|
||||
<div class="container mx-auto px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center group">
|
||||
<div class="relative mr-3">
|
||||
<i class="fas fa-car-side text-2xl text-purple-600 group-hover:scale-110 transition-transform"></i>
|
||||
<i class="fas fa-bolt text-xs text-green-500 absolute -top-1 -right-1 animate-pulse"></i>
|
||||
</div>
|
||||
<span class="text-xl font-bold text-gray-800">Green Mobility 2024</span>
|
||||
</div>
|
||||
<div class="hidden md:flex space-x-8">
|
||||
<a href="../index.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||||
<i class="fas fa-home mr-1"></i>首页
|
||||
</a>
|
||||
<a href="overview.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||||
<i class="fas fa-file-alt mr-1"></i>策划概述
|
||||
</a>
|
||||
<a href="exhibition.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||||
<i class="fas fa-building mr-1"></i>展会介绍
|
||||
</a>
|
||||
<a href="marketing.html" class="nav-link active text-purple-600 font-semibold">
|
||||
<i class="fas fa-bullhorn mr-1"></i>营销方案
|
||||
</a>
|
||||
<a href="operation.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||||
<i class="fas fa-cogs mr-1"></i>现场运营
|
||||
</a>
|
||||
<a href="budget.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||||
<i class="fas fa-calculator mr-1"></i>预算分析
|
||||
</a>
|
||||
<a href="risk.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||||
<i class="fas fa-shield-alt mr-1"></i>风险评估
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Page Header -->
|
||||
<section class="relative pt-24 pb-16 overflow-hidden" style="background: linear-gradient(135deg, #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>
|
||||
</body>
|
||||
</html>
|
||||
700
web_frontend/web_result/pages/operation.html
Normal file
700
web_frontend/web_result/pages/operation.html
Normal file
@@ -0,0 +1,700 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>现场运营 - 2024长三角国际新能源汽车展</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
.nav-link {
|
||||
position: relative;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: #667eea;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.nav-link:hover::after,
|
||||
.nav-link.active::after {
|
||||
width: 100%;
|
||||
}
|
||||
.area-card {
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
.area-card:hover {
|
||||
transform: scale(1.05);
|
||||
z-index: 10;
|
||||
}
|
||||
.service-icon {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
.service-icon:nth-child(2) { animation-delay: 0.5s; }
|
||||
.service-icon:nth-child(3) { animation-delay: 1s; }
|
||||
.service-icon:nth-child(4) { animation-delay: 1.5s; }
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
.floor-plan {
|
||||
background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
|
||||
linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
|
||||
linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
|
||||
}
|
||||
.activity-timeline {
|
||||
position: relative;
|
||||
}
|
||||
.activity-timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: linear-gradient(to bottom, #667eea, #764ba2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 w-full bg-white shadow-md z-50">
|
||||
<div class="container mx-auto px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-8 h-8 mr-3 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z"/>
|
||||
</svg>
|
||||
<span class="text-xl font-bold text-gray-800">Green Mobility 2024</span>
|
||||
</div>
|
||||
<div class="hidden md:flex space-x-8">
|
||||
<a href="../index.html" class="nav-link text-gray-700 hover:text-purple-600">首页</a>
|
||||
<a href="overview.html" class="nav-link text-gray-700 hover:text-purple-600">策划概述</a>
|
||||
<a href="exhibition.html" class="nav-link text-gray-700 hover:text-purple-600">展会介绍</a>
|
||||
<a href="marketing.html" class="nav-link text-gray-700 hover:text-purple-600">营销方案</a>
|
||||
<a href="operation.html" class="nav-link active text-gray-700 hover:text-purple-600">现场运营</a>
|
||||
<a href="budget.html" class="nav-link text-gray-700 hover:text-purple-600">预算分析</a>
|
||||
<a href="risk.html" class="nav-link text-gray-700 hover:text-purple-600">风险评估</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Page Header -->
|
||||
<section class="bg-gradient-to-r from-teal-600 to-blue-600 text-white pt-24 pb-12">
|
||||
<div class="container mx-auto px-6">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4">现场运营方案</h1>
|
||||
<p class="text-xl opacity-90">专业化展会运营，打造卓越参展体验</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Exhibition Hall Layout -->
|
||||
<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>
|
||||
|
||||
<!-- 3D Floor Plan Visualization -->
|
||||
<div class="max-w-6xl mx-auto mb-12">
|
||||
<div class="floor-plan rounded-2xl p-8 shadow-lg bg-white">
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<!-- Hall A - 整车展示区 -->
|
||||
<div class="area-card col-span-2 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-6 text-white">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-xl font-bold">A馆 - 整车展示区</h3>
|
||||
<span class="bg-white/20 px-3 py-1 rounded-full text-sm">20,000㎡</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3 text-sm">
|
||||
<div class="bg-white/10 rounded p-2">特斯拉展区</div>
|
||||
<div class="bg-white/10 rounded p-2">比亚迪展区</div>
|
||||
<div class="bg-white/10 rounded p-2">蔚来展区</div>
|
||||
<div class="bg-white/10 rounded p-2">理想展区</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hall B - 核心零部件 -->
|
||||
<div class="area-card bg-gradient-to-br from-green-500 to-green-600 rounded-xl p-6 text-white">
|
||||
<h3 class="text-lg font-bold mb-2">B馆 - 核心零部件</h3>
|
||||
<span class="bg-white/20 px-3 py-1 rounded-full text-sm">15,000㎡</span>
|
||||
<div class="mt-3 space-y-1 text-xs">
|
||||
<div>• 动力电池区</div>
|
||||
<div>• 驱动电机区</div>
|
||||
<div>• 电控系统区</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hall C - 智能交通 -->
|
||||
<div class="area-card bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl p-6 text-white">
|
||||
<h3 class="text-lg font-bold mb-2">C馆 - 智能交通</h3>
|
||||
<span class="bg-white/20 px-3 py-1 rounded-full text-sm">10,000㎡</span>
|
||||
<div class="mt-3 space-y-1 text-xs">
|
||||
<div>• V2X展示</div>
|
||||
<div>• 智慧路网</div>
|
||||
<div>• 自动驾驶</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Outdoor Area -->
|
||||
<div class="area-card bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl p-6 text-white">
|
||||
<h3 class="text-lg font-bold mb-2">室外 - 体验区</h3>
|
||||
<span class="bg-white/20 px-3 py-1 rounded-full text-sm">5,000㎡</span>
|
||||
<div class="mt-3 space-y-1 text-xs">
|
||||
<div>• 试乘试驾</div>
|
||||
<div>• 自动泊车</div>
|
||||
<div>• 充电演示</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service Area -->
|
||||
<div class="area-card bg-gradient-to-br from-gray-500 to-gray-600 rounded-xl p-6 text-white">
|
||||
<h3 class="text-lg font-bold mb-2">配套服务区</h3>
|
||||
<div class="mt-3 grid grid-cols-2 gap-2 text-xs">
|
||||
<div class="bg-white/10 rounded p-1">会议室</div>
|
||||
<div class="bg-white/10 rounded p-1">商务中心</div>
|
||||
<div class="bg-white/10 rounded p-1">餐饮区</div>
|
||||
<div class="bg-white/10 rounded p-1">休息区</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Legend -->
|
||||
<div class="mt-6 pt-6 border-t border-gray-200">
|
||||
<div class="flex items-center justify-center space-x-6 text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="w-4 h-4 bg-blue-500 rounded mr-2"></div>
|
||||
<span>整车展示</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-4 h-4 bg-green-500 rounded mr-2"></div>
|
||||
<span>零部件</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-4 h-4 bg-purple-500 rounded mr-2"></div>
|
||||
<span>智能交通</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-4 h-4 bg-orange-500 rounded mr-2"></div>
|
||||
<span>体验区</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Traffic Flow Design -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div class="bg-gray-50 rounded-xl p-6">
|
||||
<h3 class="text-xl font-bold mb-4 text-gray-800">参观动线设计</h3>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-start">
|
||||
<div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-3">1</div>
|
||||
<div>
|
||||
<p class="font-semibold">入口接待区</p>
|
||||
<p class="text-sm text-gray-600">快速登记、资料领取、导览服务</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-3">2</div>
|
||||
<div>
|
||||
<p class="font-semibold">主展示路线</p>
|
||||
<p class="text-sm text-gray-600">整车→零部件→智能交通，单向循环</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-3">3</div>
|
||||
<div>
|
||||
<p class="font-semibold">体验互动区</p>
|
||||
<p class="text-sm text-gray-600">试乘试驾、VR体验、技术演示</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-3">4</div>
|
||||
<div>
|
||||
<p class="font-semibold">商务洽谈区</p>
|
||||
<p class="text-sm text-gray-600">B2B对接、合作洽谈、签约仪式</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-xl p-6">
|
||||
<h3 class="text-xl font-bold mb-4 text-gray-800">智能导览系统</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="bg-white rounded-lg p-4 shadow">
|
||||
<h4 class="font-semibold mb-2">AR导航</h4>
|
||||
<p class="text-sm text-gray-600">手机扫码即可获得AR实景导航，精准定位展位</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg p-4 shadow">
|
||||
<h4 class="font-semibold mb-2">AI推荐</h4>
|
||||
<p class="text-sm text-gray-600">根据观众兴趣智能推荐参观路线和展商</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg p-4 shadow">
|
||||
<h4 class="font-semibold mb-2">实时热力图</h4>
|
||||
<p class="text-sm text-gray-600">显示各展区人流密度，避开拥挤区域</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- On-site Services -->
|
||||
<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-2 lg:grid-cols-4 gap-6">
|
||||
<!-- Registration Service -->
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 text-center service-icon">
|
||||
<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 2a1 1 0 00-1 1v1a1 1 0 002 0V3a1 1 0 00-1-1zM4 4h3a3 3 0 006 0h3a2 2 0 012 2v9a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2zm2.5 7a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm2.45 4a2.5 2.5 0 10-4.9 0h4.9zM12 9a1 1 0 100 2h3a1 1 0 100-2h-3zm-1 4a1 1 0 011-1h2a1 1 0 110 2h-2a1 1 0 01-1-1z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2">登记服务</h3>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• 电子签到系统</li>
|
||||
<li>• 人脸识别入场</li>
|
||||
<li>• VIP快速通道</li>
|
||||
<li>• 实时数据统计</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Consultation Service -->
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 text-center service-icon">
|
||||
<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 fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2">咨询服务</h3>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• 多语言服务台</li>
|
||||
<li>• AI机器人导览</li>
|
||||
<li>• 专业咨询顾问</li>
|
||||
<li>• 24小时热线</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Business Service -->
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 text-center service-icon">
|
||||
<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="M8 2a1 1 0 000 2h2a1 1 0 100-2H8z"/>
|
||||
<path d="M3 5a2 2 0 012-2 1 1 0 000 2H5a2 2 0 100 4h2a2 2 0 100-4h-.5a1 1 0 000-2H8a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2h-5.5a1 1 0 00-.5.5v10z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2">商务服务</h3>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• 会议室租赁</li>
|
||||
<li>• 同声传译</li>
|
||||
<li>• 商务对接</li>
|
||||
<li>• 文印服务</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Logistics Service -->
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 text-center service-icon">
|
||||
<div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-orange-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2">后勤保障</h3>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• 餐饮服务</li>
|
||||
<li>• 医疗急救</li>
|
||||
<li>• 安保服务</li>
|
||||
<li>• 清洁维护</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service Standards -->
|
||||
<div class="mt-12 bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl p-8 text-white">
|
||||
<h3 class="text-2xl font-bold mb-6 text-center">服务标准承诺</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 text-center">
|
||||
<div>
|
||||
<div class="text-3xl font-bold mb-2">< 3分钟</div>
|
||||
<div class="text-blue-100">平均排队时间</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-3xl font-bold mb-2">< 5分钟</div>
|
||||
<div class="text-blue-100">问题响应时间</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-3xl font-bold mb-2">100%</div>
|
||||
<div class="text-blue-100">服务覆盖率</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-3xl font-bold mb-2">95%+</div>
|
||||
<div class="text-blue-100">满意度目标</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Activity Schedule -->
|
||||
<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">
|
||||
<!-- Opening Ceremony -->
|
||||
<div class="mb-8">
|
||||
<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-4">开幕典礼</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<p class="mb-2"><strong>时间：</strong>9月12日 09:00-10:00</p>
|
||||
<p class="mb-2"><strong>地点：</strong>主会场</p>
|
||||
<p><strong>规模：</strong>1000人</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold mb-2">流程安排：</p>
|
||||
<ul class="text-sm space-y-1 opacity-90">
|
||||
<li>• 领导致辞</li>
|
||||
<li>• 启动仪式</li>
|
||||
<li>• 战略签约</li>
|
||||
<li>• 媒体采访</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Forums Timeline -->
|
||||
<div class="activity-timeline">
|
||||
<h3 class="text-2xl font-bold mb-8 text-gray-800">主题论坛</h3>
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- Forum 1 -->
|
||||
<div class="flex items-start ml-12">
|
||||
<div class="w-10 h-10 bg-white border-4 border-blue-600 rounded-full flex items-center justify-center -ml-5 mt-1">
|
||||
<span class="text-xs font-bold">1</span>
|
||||
</div>
|
||||
<div class="ml-6 flex-1">
|
||||
<div class="bg-blue-50 rounded-lg p-5">
|
||||
<h4 class="font-bold text-lg mb-2">新能源汽车产业发展论坛</h4>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<p class="text-gray-600">时间：9月12日 10:00-12:00</p>
|
||||
<p class="text-gray-600">规模：500人</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-600">嘉宾：行业领袖10位</p>
|
||||
<p class="text-gray-600">主题：产业趋势与机遇</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Forum 2 -->
|
||||
<div class="flex items-start ml-12">
|
||||
<div class="w-10 h-10 bg-white border-4 border-green-600 rounded-full flex items-center justify-center -ml-5 mt-1">
|
||||
<span class="text-xs font-bold">2</span>
|
||||
</div>
|
||||
<div class="ml-6 flex-1">
|
||||
<div class="bg-green-50 rounded-lg p-5">
|
||||
<h4 class="font-bold text-lg mb-2">智能网联技术创新峰会</h4>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<p class="text-gray-600">时间：9月13日 09:30-11:30</p>
|
||||
<p class="text-gray-600">规模：400人</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-600">嘉宾：技术专家8位</p>
|
||||
<p class="text-gray-600">主题：自动驾驶与V2X</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Forum 3 -->
|
||||
<div class="flex items-start ml-12">
|
||||
<div class="w-10 h-10 bg-white border-4 border-purple-600 rounded-full flex items-center justify-center -ml-5 mt-1">
|
||||
<span class="text-xs font-bold">3</span>
|
||||
</div>
|
||||
<div class="ml-6 flex-1">
|
||||
<div class="bg-purple-50 rounded-lg p-5">
|
||||
<h4 class="font-bold text-lg mb-2">充电基础设施建设研讨会</h4>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<p class="text-gray-600">时间：9月13日 14:00-16:00</p>
|
||||
<p class="text-gray-600">规模：300人</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-600">嘉宾：运营商代表6位</p>
|
||||
<p class="text-gray-600">主题：充电网络建设</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Forum 4 -->
|
||||
<div class="flex items-start ml-12">
|
||||
<div class="w-10 h-10 bg-white border-4 border-orange-600 rounded-full flex items-center justify-center -ml-5 mt-1">
|
||||
<span class="text-xs font-bold">4</span>
|
||||
</div>
|
||||
<div class="ml-6 flex-1">
|
||||
<div class="bg-orange-50 rounded-lg p-5">
|
||||
<h4 class="font-bold text-lg mb-2">产业投资论坛</h4>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<p class="text-gray-600">时间：9月15日 09:00-11:00</p>
|
||||
<p class="text-gray-600">规模：200人</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-600">嘉宾：投资机构15家</p>
|
||||
<p class="text-gray-600">主题：资本与产业融合</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Interactive Experience -->
|
||||
<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">
|
||||
<!-- Test Drive -->
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
<div class="h-48 bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
|
||||
<svg class="w-20 h-20 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/>
|
||||
<path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-bold mb-3">试乘试驾体验</h3>
|
||||
<p class="text-gray-600 mb-4">专业赛道，30+车型，专业教练指导</p>
|
||||
<ul class="text-sm text-gray-500 space-y-2">
|
||||
<li class="flex items-center">
|
||||
<span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
|
||||
每日500个体验名额
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
|
||||
3公里专业测试赛道
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
|
||||
自动驾驶体验专区
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- VR Experience -->
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
<div class="h-48 bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center">
|
||||
<svg class="w-20 h-20 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
|
||||
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-bold mb-3">VR虚拟体验</h3>
|
||||
<p class="text-gray-600 mb-4">沉浸式体验未来出行场景</p>
|
||||
<ul class="text-sm text-gray-500 space-y-2">
|
||||
<li class="flex items-center">
|
||||
<span class="w-2 h-2 bg-purple-500 rounded-full mr-2"></span>
|
||||
未来城市驾驶模拟
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<span class="w-2 h-2 bg-purple-500 rounded-full mr-2"></span>
|
||||
智能工厂虚拟参观
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<span class="w-2 h-2 bg-purple-500 rounded-full mr-2"></span>
|
||||
新能源技术可视化
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Innovation Contest -->
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
<div class="h-48 bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center">
|
||||
<svg class="w-20 h-20 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-bold mb-3">创新科技大赛</h3>
|
||||
<p class="text-gray-600 mb-4">青少年科技创新竞赛活动</p>
|
||||
<ul class="text-sm text-gray-500 space-y-2">
|
||||
<li class="flex items-center">
|
||||
<span class="w-2 h-2 bg-orange-500 rounded-full mr-2"></span>
|
||||
智能小车编程赛
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<span class="w-2 h-2 bg-orange-500 rounded-full mr-2"></span>
|
||||
新能源创意设计
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<span class="w-2 h-2 bg-orange-500 rounded-full mr-2"></span>
|
||||
总奖金10万元
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Exhibition Design -->
|
||||
<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-5xl mx-auto">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Design Concept -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl p-8">
|
||||
<h3 class="text-2xl font-bold mb-6">设计核心理念</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start">
|
||||
<div class="w-12 h-12 bg-blue-600 text-white rounded-lg flex items-center justify-center flex-shrink-0 mr-4">
|
||||
<span class="font-bold">科技</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-1">科技感设计</h4>
|
||||
<p class="text-sm text-gray-600">运用LED大屏、全息投影、互动装置，营造未来科技氛围</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<div class="w-12 h-12 bg-green-600 text-white rounded-lg flex items-center justify-center flex-shrink-0 mr-4">
|
||||
<span class="font-bold">环保</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-1">绿色环保</h4>
|
||||
<p class="text-sm text-gray-600">采用可回收材料，节能照明系统，体现绿色展会理念</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<div class="w-12 h-12 bg-purple-600 text-white rounded-lg flex items-center justify-center flex-shrink-0 mr-4">
|
||||
<span class="font-bold">未来</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-1">未来感呈现</h4>
|
||||
<p class="text-sm text-gray-600">流线型设计，动态灯光，展现新能源汽车的未来愿景</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Design Elements -->
|
||||
<div>
|
||||
<div class="bg-gradient-to-br from-blue-600 to-purple-600 rounded-2xl p-6 text-white">
|
||||
<h3 class="text-xl font-bold mb-4">视觉元素</h3>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<h4 class="font-semibold mb-1">主色调</h4>
|
||||
<div class="flex space-x-2">
|
||||
<div class="w-8 h-8 bg-blue-500 rounded"></div>
|
||||
<div class="w-8 h-8 bg-green-500 rounded"></div>
|
||||
<div class="w-8 h-8 bg-purple-500 rounded"></div>
|
||||
<div class="w-8 h-8 bg-gray-300 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-1">字体系统</h4>
|
||||
<p class="text-sm opacity-90">思源黑体 / Helvetica</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-1">图形语言</h4>
|
||||
<p class="text-sm opacity-90">几何图形、流线元素</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-1">灯光设计</h4>
|
||||
<p class="text-sm opacity-90">动态LED、氛围照明</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Space Layout -->
|
||||
<div class="mt-8 bg-white rounded-2xl shadow-lg p-8">
|
||||
<h3 class="text-2xl font-bold mb-6">空间布局原则</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="text-center">
|
||||
<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
||||
<svg class="w-10 h-10 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-semibold mb-2">流线型布局</h4>
|
||||
<p class="text-sm text-gray-600">顺畅的参观动线，避免人流交叉</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
||||
<svg class="w-10 h-10 text-green-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zm-.464 5.535a1 1 0 10-1.415-1.414 3 3 0 01-4.242 0 1 1 0 00-1.415 1.414 5 5 0 007.072 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-semibold mb-2">体验式设计</h4>
|
||||
<p class="text-sm text-gray-600">注重互动体验，增强参与感</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-3">
|
||||
<svg class="w-10 h-10 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
|
||||
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-semibold mb-2">视觉聚焦</h4>
|
||||
<p class="text-sm text-gray-600">重点展品突出展示，层次分明</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="py-16 bg-gradient-to-r from-teal-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="budget.html" class="inline-block bg-white text-blue-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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -4,29 +4,14 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>策划概述 - 2024长三角国际新能源汽车展</title>
|
||||
<link rel="stylesheet" href="../css/styles.css">
|
||||
<link rel="stylesheet" href="../css/animations.css">
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
* {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
.nav-link {
|
||||
position: relative;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: #667eea;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.nav-link:hover::after,
|
||||
.nav-link.active::after {
|
||||
width: 100%;
|
||||
font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
@@ -39,7 +24,7 @@
|
||||
top: 40px;
|
||||
height: calc(100% - 40px);
|
||||
width: 2px;
|
||||
background: #e5e7eb;
|
||||
background: linear-gradient(to bottom, #667eea, #a78bfa);
|
||||
}
|
||||
.timeline-item:last-child::before {
|
||||
display: none;
|
||||
@@ -53,61 +38,153 @@
|
||||
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;
|
||||
}
|
||||
.slide-in-left {
|
||||
animation: slideInLeft 0.6s ease-out;
|
||||
@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); }
|
||||
}
|
||||
.slide-in-right {
|
||||
animation: slideInRight 0.6s ease-out;
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
@keyframes slideInLeft {
|
||||
from { transform: translateX(-50px); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
.stat-card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@keyframes slideInRight {
|
||||
from { transform: translateX(50px); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
.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 bg-white shadow-md z-50">
|
||||
<nav class="fixed top-0 w-full glass-morphism shadow-md z-50 transition-all duration-300">
|
||||
<div class="container mx-auto px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-8 h-8 mr-3 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z"/>
|
||||
</svg>
|
||||
<span class="text-xl font-bold text-gray-800">Green Mobility 2024</span>
|
||||
<div class="flex items-center animate-fadeInLeft">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-lg flex items-center justify-center mr-3">
|
||||
<i class="fas fa-charging-station text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-lg font-bold">NEVIT 2024</h1>
|
||||
<p class="text-xs text-gray-500">新能源汽车产业博览会</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:flex space-x-8">
|
||||
<a href="../index.html" class="nav-link text-gray-700 hover:text-purple-600">首页</a>
|
||||
<a href="overview.html" class="nav-link active text-gray-700 hover:text-purple-600">策划概述</a>
|
||||
<a href="exhibition.html" class="nav-link text-gray-700 hover:text-purple-600">展会介绍</a>
|
||||
<a href="marketing.html" class="nav-link text-gray-700 hover:text-purple-600">营销方案</a>
|
||||
<a href="operation.html" class="nav-link text-gray-700 hover:text-purple-600">现场运营</a>
|
||||
<a href="budget.html" class="nav-link text-gray-700 hover:text-purple-600">预算分析</a>
|
||||
<a href="risk.html" class="nav-link text-gray-700 hover:text-purple-600">风险评估</a>
|
||||
<a href="../index.html" class="nav-link text-gray-700 hover:text-purple-600 transition-colors">
|
||||
<i class="fas fa-home mr-2"></i>首页
|
||||
</a>
|
||||
<a href="overview.html" class="nav-link active text-purple-600 font-semibold">
|
||||
<i class="fas fa-info-circle mr-2"></i>策划概述
|
||||
</a>
|
||||
<a href="exhibition.html" class="nav-link text-gray-700 hover:text-purple-600 transition-colors">
|
||||
<i class="fas fa-th-large mr-2"></i>展会介绍
|
||||
</a>
|
||||
<a href="marketing.html" class="nav-link text-gray-700 hover:text-purple-600 transition-colors">
|
||||
<i class="fas fa-bullhorn mr-2"></i>营销方案
|
||||
</a>
|
||||
<a href="operation.html" class="nav-link text-gray-700 hover:text-purple-600 transition-colors">
|
||||
<i class="fas fa-cogs mr-2"></i>现场运营
|
||||
</a>
|
||||
<a href="budget.html" class="nav-link text-gray-700 hover:text-purple-600 transition-colors">
|
||||
<i class="fas fa-chart-pie mr-2"></i>预算分析
|
||||
</a>
|
||||
<a href="risk.html" class="nav-link text-gray-700 hover:text-purple-600 transition-colors">
|
||||
<i class="fas fa-shield-alt mr-2"></i>风险评估
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Page Header -->
|
||||
<section class="bg-gradient-to-r from-purple-600 to-blue-600 text-white pt-24 pb-12">
|
||||
<div class="container mx-auto px-6">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4">策划概述</h1>
|
||||
<p class="text-xl opacity-90">全面了解展会策划背景、目标与核心价值</p>
|
||||
<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="slide-in-left">
|
||||
<h2 class="text-3xl font-bold text-gray-800 mb-6">策划背景</h2>
|
||||
<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%。
|
||||
@@ -126,33 +203,36 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide-in-right">
|
||||
<div class="bg-gradient-to-br from-purple-100 to-blue-100 rounded-2xl p-8">
|
||||
<h3 class="text-2xl font-bold text-gray-800 mb-4">产业发展机遇</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start">
|
||||
<div class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1">1</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">
|
||||
<div class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1">2</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">
|
||||
<div class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1">3</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">
|
||||
<div class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1">4</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>
|
||||
@@ -166,18 +246,21 @@
|
||||
</section>
|
||||
|
||||
<!-- Objectives Section -->
|
||||
<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>
|
||||
<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 rounded-xl shadow-lg p-6 hover:shadow-xl transition">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
|
||||
<path fill-rule="evenodd" d="M4 5a2 2 0 012-2 1 1 0 000 2H6a2 2 0 100 4h2a2 2 0 100-4h-.5a1 1 0 000-2H8a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2h-2v10H6V5z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<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">品牌建设</h3>
|
||||
<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">
|
||||
@@ -188,14 +271,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
|
||||
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg class="w-6 h-6 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 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">商业价值</h3>
|
||||
<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">
|
||||
@@ -206,13 +286,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
|
||||
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg class="w-6 h-6 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 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">行业推动</h3>
|
||||
<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">
|
||||
@@ -223,13 +301,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
|
||||
<div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg class="w-6 h-6 text-orange-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<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">社会责任</h3>
|
||||
<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">
|
||||
@@ -306,12 +382,19 @@
|
||||
</section>
|
||||
|
||||
<!-- Market Analysis -->
|
||||
<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>
|
||||
<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 rounded-xl shadow-lg p-6">
|
||||
<h3 class="text-xl font-bold mb-4 text-purple-600">市场规模</h3>
|
||||
<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>
|
||||
@@ -332,8 +415,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-lg p-6">
|
||||
<h3 class="text-xl font-bold mb-4 text-purple-600">产业链分布</h3>
|
||||
<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>
|
||||
@@ -366,8 +451,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-lg p-6">
|
||||
<h3 class="text-xl font-bold mb-4 text-purple-600">展会需求调研</h3>
|
||||
<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">
|
||||
|
||||
634
web_frontend/web_result/pages/risk.html
Normal file
634
web_frontend/web_result/pages/risk.html
Normal file
@@ -0,0 +1,634 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>风险评估 - 2024长三角国际新能源汽车展</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
.nav-link {
|
||||
position: relative;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: #667eea;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.nav-link:hover::after,
|
||||
.nav-link.active::after {
|
||||
width: 100%;
|
||||
}
|
||||
.risk-card {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.risk-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
|
||||
}
|
||||
.risk-level-high {
|
||||
border-left: 4px solid #ef4444;
|
||||
}
|
||||
.risk-level-medium {
|
||||
border-left: 4px solid #f59e0b;
|
||||
}
|
||||
.risk-level-low {
|
||||
border-left: 4px solid #10b981;
|
||||
}
|
||||
.radar-chart {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
}
|
||||
.radar-chart::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: conic-gradient(from 0deg, #ef4444 0deg 72deg, #f59e0b 72deg 144deg, #3b82f6 144deg 216deg, #10b981 216deg 288deg, #8b5cf6 288deg 360deg);
|
||||
border-radius: 50%;
|
||||
opacity: 0.3;
|
||||
animation: rotate 20s linear infinite;
|
||||
}
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.alert-pulse {
|
||||
animation: alertPulse 2s infinite;
|
||||
}
|
||||
@keyframes alertPulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 w-full bg-white shadow-md z-50">
|
||||
<div class="container mx-auto px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-8 h-8 mr-3 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z"/>
|
||||
</svg>
|
||||
<span class="text-xl font-bold text-gray-800">Green Mobility 2024</span>
|
||||
</div>
|
||||
<div class="hidden md:flex space-x-8">
|
||||
<a href="../index.html" class="nav-link text-gray-700 hover:text-purple-600">首页</a>
|
||||
<a href="overview.html" class="nav-link text-gray-700 hover:text-purple-600">策划概述</a>
|
||||
<a href="exhibition.html" class="nav-link text-gray-700 hover:text-purple-600">展会介绍</a>
|
||||
<a href="marketing.html" class="nav-link text-gray-700 hover:text-purple-600">营销方案</a>
|
||||
<a href="operation.html" class="nav-link text-gray-700 hover:text-purple-600">现场运营</a>
|
||||
<a href="budget.html" class="nav-link text-gray-700 hover:text-purple-600">预算分析</a>
|
||||
<a href="risk.html" class="nav-link active text-gray-700 hover:text-purple-600">风险评估</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Page Header -->
|
||||
<section class="bg-gradient-to-r from-red-600 to-orange-600 text-white pt-24 pb-12">
|
||||
<div class="container mx-auto px-6">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4">风险评估与应急预案</h1>
|
||||
<p class="text-xl opacity-90">全面识别风险，制定应对策略，确保展会安全顺利</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Risk Overview -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl font-bold text-gray-800 mb-4">风险评估总览</h2>
|
||||
<p class="text-gray-600">识别潜在风险，评估影响程度，制定防控措施</p>
|
||||
</div>
|
||||
|
||||
<!-- Risk Level Distribution -->
|
||||
<div class="max-w-4xl mx-auto mb-12">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="bg-red-50 border-2 border-red-200 rounded-xl p-6 text-center">
|
||||
<div class="w-16 h-16 bg-red-500 text-white rounded-full flex items-center justify-center mx-auto mb-3">
|
||||
<span class="text-2xl font-bold">3</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-red-600 mb-1">高风险</h3>
|
||||
<p class="text-sm text-gray-600">需重点关注防控</p>
|
||||
</div>
|
||||
<div class="bg-yellow-50 border-2 border-yellow-200 rounded-xl p-6 text-center">
|
||||
<div class="w-16 h-16 bg-yellow-500 text-white rounded-full flex items-center justify-center mx-auto mb-3">
|
||||
<span class="text-2xl font-bold">5</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-yellow-600 mb-1">中风险</h3>
|
||||
<p class="text-sm text-gray-600">制定应对措施</p>
|
||||
</div>
|
||||
<div class="bg-green-50 border-2 border-green-200 rounded-xl p-6 text-center">
|
||||
<div class="w-16 h-16 bg-green-500 text-white rounded-full flex items-center justify-center mx-auto mb-3">
|
||||
<span class="text-2xl font-bold">4</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-green-600 mb-1">低风险</h3>
|
||||
<p class="text-sm text-gray-600">常规监控管理</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Risk Matrix -->
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="bg-gray-50 rounded-2xl p-8">
|
||||
<h3 class="text-2xl font-bold mb-6 text-center">风险矩阵分析</h3>
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div class="text-center">
|
||||
<div class="font-semibold text-gray-700 mb-2">低概率</div>
|
||||
<div class="space-y-2">
|
||||
<div class="bg-yellow-100 rounded p-2 text-sm">疫情反复</div>
|
||||
<div class="bg-green-100 rounded p-2 text-sm">技术故障</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="font-semibold text-gray-700 mb-2">中概率</div>
|
||||
<div class="space-y-2">
|
||||
<div class="bg-yellow-100 rounded p-2 text-sm">参展商不足</div>
|
||||
<div class="bg-orange-100 rounded p-2 text-sm">恶劣天气</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="font-semibold text-gray-700 mb-2">高概率</div>
|
||||
<div class="space-y-2">
|
||||
<div class="bg-red-100 rounded p-2 text-sm">市场竞争</div>
|
||||
<div class="bg-yellow-100 rounded p-2 text-sm">观众流量</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 pt-6 border-t flex justify-center space-x-8 text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="w-4 h-4 bg-green-200 rounded mr-2"></div>
|
||||
<span>低影响</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-4 h-4 bg-yellow-200 rounded mr-2"></div>
|
||||
<span>中影响</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-4 h-4 bg-red-200 rounded mr-2"></div>
|
||||
<span>高影响</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Market Risk -->
|
||||
<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-6xl mx-auto">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<!-- Risk Factors -->
|
||||
<div>
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 risk-card risk-level-high">
|
||||
<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 fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-bold">行业政策变化</h3>
|
||||
<span class="text-xs bg-red-100 text-red-600 px-2 py-1 rounded">高风险</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="bg-gray-50 rounded-lg p-3">
|
||||
<h4 class="font-semibold text-sm mb-1">风险描述</h4>
|
||||
<p class="text-sm text-gray-600">新能源汽车补贴政策调整，可能影响企业参展意愿</p>
|
||||
</div>
|
||||
<div class="bg-blue-50 rounded-lg p-3">
|
||||
<h4 class="font-semibold text-sm mb-1">应对措施</h4>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• 密切关注政策动向</li>
|
||||
<li>• 调整展会定位和宣传策略</li>
|
||||
<li>• 增加政策解读论坛</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 risk-card risk-level-medium">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mr-4">
|
||||
<svg class="w-6 h-6 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-bold">市场竞争加剧</h3>
|
||||
<span class="text-xs bg-yellow-100 text-yellow-600 px-2 py-1 rounded">中风险</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="bg-gray-50 rounded-lg p-3">
|
||||
<h4 class="font-semibold text-sm mb-1">风险描述</h4>
|
||||
<p class="text-sm text-gray-600">同期其他展会竞争，分流参展商和观众资源</p>
|
||||
</div>
|
||||
<div class="bg-blue-50 rounded-lg p-3">
|
||||
<h4 class="font-semibold text-sm mb-1">应对措施</h4>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• 差异化定位，突出特色</li>
|
||||
<li>• 提升展会品质和服务</li>
|
||||
<li>• 加强营销推广力度</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Operational Risk -->
|
||||
<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-6xl mx-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Exhibitor Risk -->
|
||||
<div class="bg-white border-2 border-gray-200 rounded-xl p-6 hover:border-blue-500 transition">
|
||||
<div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-7 h-7 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
|
||||
<path fill-rule="evenodd" d="M4 5a2 2 0 012-2 1 1 0 000 2H6a2 2 0 100 4h2a2 2 0 100-4h-.5a1 1 0 000-2H8a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2h-5.5z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-center mb-3">参展商管理风险</h3>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex justify-between py-2 border-b">
|
||||
<span class="text-gray-600">招展不足</span>
|
||||
<span class="text-yellow-600 font-semibold">中</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-2 border-b">
|
||||
<span class="text-gray-600">临时退展</span>
|
||||
<span class="text-green-600 font-semibold">低</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-2">
|
||||
<span class="text-gray-600">款项拖欠</span>
|
||||
<span class="text-yellow-600 font-semibold">中</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t">
|
||||
<p class="text-xs text-gray-500">预防措施：签订合同、收取定金、建立黑名单</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Audience Risk -->
|
||||
<div class="bg-white border-2 border-gray-200 rounded-xl p-6 hover:border-green-500 transition">
|
||||
<div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-7 h-7 text-green-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>
|
||||
<h3 class="text-lg font-bold text-center mb-3">观众组织风险</h3>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex justify-between py-2 border-b">
|
||||
<span class="text-gray-600">人数不足</span>
|
||||
<span class="text-yellow-600 font-semibold">中</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-2 border-b">
|
||||
<span class="text-gray-600">质量不高</span>
|
||||
<span class="text-green-600 font-semibold">低</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-2">
|
||||
<span class="text-gray-600">现场拥堵</span>
|
||||
<span class="text-yellow-600 font-semibold">中</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t">
|
||||
<p class="text-xs text-gray-500">预防措施：多渠道推广、预登记系统、分时入场</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service Risk -->
|
||||
<div class="bg-white border-2 border-gray-200 rounded-xl p-6 hover:border-purple-500 transition">
|
||||
<div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-7 h-7 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-center mb-3">服务质量风险</h3>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex justify-between py-2 border-b">
|
||||
<span class="text-gray-600">服务投诉</span>
|
||||
<span class="text-green-600 font-semibold">低</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-2 border-b">
|
||||
<span class="text-gray-600">设备故障</span>
|
||||
<span class="text-yellow-600 font-semibold">中</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-2">
|
||||
<span class="text-gray-600">人员不足</span>
|
||||
<span class="text-green-600 font-semibold">低</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t">
|
||||
<p class="text-xs text-gray-500">预防措施：培训上岗、设备检修、人员储备</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Safety Risk -->
|
||||
<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-5xl mx-auto">
|
||||
<div class="bg-white rounded-2xl shadow-lg p-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<!-- Fire Safety -->
|
||||
<div class="border-2 border-red-200 rounded-xl p-6 alert-pulse">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 bg-red-500 text-white rounded-lg flex items-center justify-center mr-3">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold">消防安全</h3>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="bg-red-50 rounded-lg p-3">
|
||||
<h4 class="font-semibold text-sm mb-1">重点防控</h4>
|
||||
<ul class="text-xs text-gray-600 space-y-1">
|
||||
<li>• 展台搭建材料防火等级</li>
|
||||
<li>• 电气线路安全检查</li>
|
||||
<li>• 消防通道保持畅通</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-lg p-3">
|
||||
<h4 class="font-semibold text-sm mb-1">应急措施</h4>
|
||||
<ul class="text-xs text-gray-600 space-y-1">
|
||||
<li>• 消防器材配备齐全</li>
|
||||
<li>• 专业消防队伍值守</li>
|
||||
<li>• 定期消防演练</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Personnel Safety -->
|
||||
<div class="border-2 border-blue-200 rounded-xl p-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 bg-blue-500 text-white rounded-lg flex items-center justify-center mr-3">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold">人员安全</h3>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="bg-blue-50 rounded-lg p-3">
|
||||
<h4 class="font-semibold text-sm mb-1">安保措施</h4>
|
||||
<ul class="text-xs text-gray-600 space-y-1">
|
||||
<li>• 专业安保团队100人</li>
|
||||
<li>• 安检设备全覆盖</li>
|
||||
<li>• 实名制入场管理</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-lg p-3">
|
||||
<h4 class="font-semibold text-sm mb-1">应急处置</h4>
|
||||
<ul class="text-xs text-gray-600 space-y-1">
|
||||
<li>• 医疗急救点5个</li>
|
||||
<li>• 应急疏散预案</li>
|
||||
<li>• 警务室现场值守</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Emergency Contact -->
|
||||
<div class="mt-8 bg-gradient-to-r from-red-50 to-orange-50 rounded-xl p-6">
|
||||
<h3 class="text-lg font-bold mb-4 text-red-600">应急联系方式</h3>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||
<div>
|
||||
<p class="font-semibold">消防急救</p>
|
||||
<p class="text-red-600 text-lg">119</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">医疗急救</p>
|
||||
<p class="text-red-600 text-lg">120</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">公安报警</p>
|
||||
<p class="text-red-600 text-lg">110</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">现场指挥</p>
|
||||
<p class="text-red-600 text-lg">138****8888</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Force Majeure -->
|
||||
<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-5xl mx-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<!-- Pandemic Response -->
|
||||
<div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl p-8">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="w-12 h-12 bg-purple-600 text-white rounded-full flex items-center justify-center mr-4">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold">疫情防控预案</h3>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="bg-white rounded-lg p-4">
|
||||
<h4 class="font-semibold mb-2">预防措施</h4>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• 健康码查验系统</li>
|
||||
<li>• 体温检测设备</li>
|
||||
<li>• 场馆定时消毒</li>
|
||||
<li>• 人流密度控制</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg p-4">
|
||||
<h4 class="font-semibold mb-2">应急方案</h4>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• 线上线下融合办展</li>
|
||||
<li>• VR云展厅备选</li>
|
||||
<li>• 延期/取消保险</li>
|
||||
<li>• 退款机制完善</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Weather Response -->
|
||||
<div class="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-2xl p-8">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="w-12 h-12 bg-blue-600 text-white rounded-full flex items-center justify-center mr-4">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M5.05 3.636a1 1 0 010 1.414 7 7 0 000 9.9 1 1 0 11-1.414 1.414 9 9 0 010-12.728 1 1 0 011.414 0zm9.9 0a1 1 0 011.414 0 9 9 0 010 12.728 1 1 0 11-1.414-1.414 7 7 0 000-9.9 1 1 0 010-1.414zM7.879 6.464a1 1 0 010 1.414 3 3 0 000 4.243 1 1 0 11-1.415 1.414 5 5 0 010-7.07 1 1 0 011.415 0zm4.242 0a1 1 0 011.415 0 5 5 0 010 7.072 1 1 0 01-1.415-1.415 3 3 0 000-4.242 1 1 0 010-1.415zM10 9a1 1 0 011 1v.01a1 1 0 11-2 0V10a1 1 0 011-1z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold">恶劣天气应对</h3>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="bg-white rounded-lg p-4">
|
||||
<h4 class="font-semibold mb-2">监测预警</h4>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• 天气预报实时监控</li>
|
||||
<li>• 气象部门联动</li>
|
||||
<li>• 提前72小时预警</li>
|
||||
<li>• 多渠道信息发布</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg p-4">
|
||||
<h4 class="font-semibold mb-2">应对措施</h4>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• 室外活动调整方案</li>
|
||||
<li>• 交通疏导预案</li>
|
||||
<li>• 展品保护措施</li>
|
||||
<li>• 参展商损失补偿</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Emergency Plan Summary -->
|
||||
<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-6xl mx-auto">
|
||||
<div class="bg-white rounded-2xl shadow-lg p-8">
|
||||
<!-- Emergency Command Structure -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-2xl font-bold mb-6 text-center">应急指挥体系</h3>
|
||||
<div class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
|
||||
<div>
|
||||
<div class="w-20 h-20 bg-red-500 text-white rounded-full flex items-center justify-center mx-auto mb-3">
|
||||
<span class="text-2xl font-bold">总</span>
|
||||
</div>
|
||||
<h4 class="font-bold mb-2">总指挥</h4>
|
||||
<p class="text-sm text-gray-600">统筹全局决策</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="w-20 h-20 bg-orange-500 text-white rounded-full flex items-center justify-center mx-auto mb-3">
|
||||
<span class="text-2xl font-bold">副</span>
|
||||
</div>
|
||||
<h4 class="font-bold mb-2">副总指挥</h4>
|
||||
<p class="text-sm text-gray-600">协调各部门行动</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="w-20 h-20 bg-yellow-500 text-white rounded-full flex items-center justify-center mx-auto mb-3">
|
||||
<span class="text-2xl font-bold">组</span>
|
||||
</div>
|
||||
<h4 class="font-bold mb-2">应急小组</h4>
|
||||
<p class="text-sm text-gray-600">具体执行处置</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Response Procedures -->
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-4">应急响应流程</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center">
|
||||
<div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-4">1</div>
|
||||
<div class="flex-1 bg-blue-50 rounded-lg p-3">
|
||||
<h4 class="font-semibold">事件发生</h4>
|
||||
<p class="text-sm text-gray-600">现场人员立即上报，启动应急响应</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-8 h-8 bg-green-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-4">2</div>
|
||||
<div class="flex-1 bg-green-50 rounded-lg p-3">
|
||||
<h4 class="font-semibold">评估判断</h4>
|
||||
<p class="text-sm text-gray-600">快速评估事件等级，确定响应级别</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-8 h-8 bg-yellow-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-4">3</div>
|
||||
<div class="flex-1 bg-yellow-50 rounded-lg p-3">
|
||||
<h4 class="font-semibold">应急处置</h4>
|
||||
<p class="text-sm text-gray-600">按预案执行处置，保障人员安全</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-4">4</div>
|
||||
<div class="flex-1 bg-purple-50 rounded-lg p-3">
|
||||
<h4 class="font-semibold">善后恢复</h4>
|
||||
<p class="text-sm text-gray-600">事件处理完毕，恢复正常运营</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Risk Summary -->
|
||||
<section class="py-16 bg-gradient-to-r from-red-600 to-orange-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="grid grid-cols-1 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
|
||||
<div class="bg-white/10 backdrop-blur rounded-lg p-4">
|
||||
<div class="text-2xl font-bold mb-1">12项</div>
|
||||
<div class="text-sm opacity-90">风险识别</div>
|
||||
</div>
|
||||
<div class="bg-white/10 backdrop-blur rounded-lg p-4">
|
||||
<div class="text-2xl font-bold mb-1">48条</div>
|
||||
<div class="text-sm opacity-90">防控措施</div>
|
||||
</div>
|
||||
<div class="bg-white/10 backdrop-blur rounded-lg p-4">
|
||||
<div class="text-2xl font-bold mb-1">100%</div>
|
||||
<div class="text-sm opacity-90">预案覆盖</div>
|
||||
</div>
|
||||
<div class="bg-white/10 backdrop-blur rounded-lg p-4">
|
||||
<div class="text-2xl font-bold mb-1">24H</div>
|
||||
<div class="text-sm opacity-90">应急响应</div>
|
||||
</div>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user