2b1ed656cd
主要改进: - 修复星形图标可见性问题，改为黄色高对比度显示 - 移除'立即参展'按钮，清理冗余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>
700 lines
40 KiB
HTML
700 lines
40 KiB
HTML
<!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> |