1361283492
主要修复: - 删除多余的"立即体验 Duoduo Agent"按钮 - 优化Duoduo Agent设计流程图片展示 - 改善页面文字与背景对比度 详细更改: 1. 布局优化 - 将设计流程从网格布局改为横向滚动 - 图片尺寸从h-48增加到h-64 - 每个卡片固定宽度300px 2. 对比度改善 - text-gray-500 → text-gray-600 - 背景色调整为纯白或浅灰 - 添加font-medium增强可读性 3. 视觉效果 - 移除过于鲜艳的渐变背景 - 使用更专业的配色方案 - 提升整体可读性 影响模块: 会展策划网站运营页面 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1417 lines
82 KiB
HTML
1417 lines
82 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">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<link rel="stylesheet" href="../css/animations.css">
|
||
<style>
|
||
* {
|
||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
}
|
||
|
||
/* 3D展馆效果 */
|
||
.hall-3d {
|
||
perspective: 1000px;
|
||
transform-style: preserve-3d;
|
||
}
|
||
|
||
.hall-card {
|
||
transition: all 0.5s ease;
|
||
transform-style: preserve-3d;
|
||
}
|
||
|
||
.hall-card:hover {
|
||
transform: translateZ(20px) rotateY(5deg);
|
||
box-shadow: 0 25px 50px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
/* 流动光效 */
|
||
.flow-light {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.flow-light::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
|
||
transform: rotate(45deg);
|
||
animation: flowLight 3s linear infinite;
|
||
}
|
||
|
||
@keyframes flowLight {
|
||
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
|
||
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
|
||
}
|
||
|
||
/* 数字滚动效果 */
|
||
.counter {
|
||
animation: countUp 2s ease-out forwards;
|
||
}
|
||
|
||
@keyframes countUp {
|
||
from { opacity: 0; transform: translateY(20px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
/* 时间轴动画 */
|
||
.timeline-item {
|
||
opacity: 0;
|
||
animation: slideInLeft 0.6s ease-out forwards;
|
||
}
|
||
|
||
.timeline-item:nth-child(1) { animation-delay: 0.1s; }
|
||
.timeline-item:nth-child(2) { animation-delay: 0.2s; }
|
||
.timeline-item:nth-child(3) { animation-delay: 0.3s; }
|
||
.timeline-item:nth-child(4) { animation-delay: 0.4s; }
|
||
|
||
@keyframes slideInLeft {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateX(-50px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
/* 悬浮图标动画 */
|
||
.float-icon {
|
||
animation: float 3s ease-in-out infinite;
|
||
}
|
||
|
||
.float-icon:nth-child(odd) {
|
||
animation-delay: 0.5s;
|
||
}
|
||
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0px); }
|
||
50% { transform: translateY(-20px); }
|
||
}
|
||
|
||
/* 脉冲动画 */
|
||
.pulse-dot {
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
transform: scale(1.2);
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
|
||
/* 渐变动画背景 */
|
||
.gradient-animated {
|
||
background: linear-gradient(270deg, #667eea, #764ba2, #f093fb, #667eea);
|
||
background-size: 400% 400%;
|
||
animation: gradientShift 15s ease infinite;
|
||
}
|
||
|
||
@keyframes gradientShift {
|
||
0% { background-position: 0% 50%; }
|
||
50% { background-position: 100% 50%; }
|
||
100% { background-position: 0% 50%; }
|
||
}
|
||
|
||
/* 霓虹灯效果 */
|
||
.neon-glow {
|
||
text-shadow:
|
||
0 0 10px rgba(102, 126, 234, 0.8),
|
||
0 0 20px rgba(102, 126, 234, 0.6),
|
||
0 0 30px rgba(102, 126, 234, 0.4);
|
||
}
|
||
|
||
/* Glass morphism effect */
|
||
.glass-morphism {
|
||
background: rgba(255, 255, 255, 0.9);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-50">
|
||
<!-- Navigation -->
|
||
<nav class="fixed top-0 w-full glass-morphism shadow-md z-50 transition-all duration-300">
|
||
<div class="container mx-auto px-6 py-4">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<div class="w-10 h-10 bg-gradient-to-br from-emerald-400 to-blue-500 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-600 font-medium">新能源汽车产业博览会</p>
|
||
</div>
|
||
</div>
|
||
<div class="hidden md:flex space-x-8">
|
||
<a href="../index.html" class="text-gray-700 hover:text-emerald-500 transition-colors">
|
||
<i class="fas fa-home mr-2"></i>首页
|
||
</a>
|
||
<a href="overview.html" class="text-gray-700 hover:text-emerald-500 transition-colors">
|
||
<i class="fas fa-info-circle mr-2"></i>展会概览
|
||
</a>
|
||
<a href="exhibition.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
|
||
<i class="fas fa-th-large mr-2"></i>展览内容
|
||
</a>
|
||
<a href="marketing.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
|
||
<i class="fas fa-bullhorn mr-2"></i>营销推广
|
||
</a>
|
||
<a href="operation.html" class="nav-link active text-gray-700 hover:text-emerald-500 transition-colors">
|
||
<i class="fas fa-cogs mr-2"></i>运营服务
|
||
</a>
|
||
<a href="budget.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
|
||
<i class="fas fa-chart-pie mr-2"></i>预算分析
|
||
</a>
|
||
<a href="risk.html" class="text-gray-700 hover:text-emerald-500 transition-colors">
|
||
<i class="fas fa-shield-alt mr-2"></i>风险评估
|
||
</a>
|
||
</div>
|
||
<button class="md:hidden text-gray-700">
|
||
<i class="fas fa-bars text-2xl"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Page Header with Background Image -->
|
||
<section class="relative pt-24 pb-16 overflow-hidden">
|
||
<!-- 背景图片 -->
|
||
<div class="absolute inset-0" style="background-image: url('../../data/会展策划/image/博览会.jpg'); background-size: cover; background-position: center;">
|
||
<div class="absolute inset-0 bg-gradient-to-b from-teal-900/90 via-blue-900/80 to-indigo-900/90"></div>
|
||
</div>
|
||
|
||
<!-- 动态粒子背景 -->
|
||
<div class="absolute inset-0">
|
||
<div class="absolute top-10 left-10 w-32 h-32 bg-white/10 rounded-full filter blur-3xl animate-pulse"></div>
|
||
<div class="absolute bottom-10 right-10 w-40 h-40 bg-blue-300/20 rounded-full filter blur-3xl animate-pulse animation-delay-2000"></div>
|
||
<div class="absolute top-1/2 left-1/3 w-24 h-24 bg-emerald-300/10 rounded-full filter blur-2xl animate-pulse animation-delay-4000"></div>
|
||
</div>
|
||
|
||
<div class="container mx-auto px-6 relative z-10">
|
||
<div class="text-center text-white animate-fadeInUp">
|
||
<h1 class="text-5xl md:text-6xl font-bold mb-6 neon-glow">
|
||
<i class="fas fa-warehouse mr-4"></i>
|
||
现场运营方案
|
||
</h1>
|
||
<p class="text-xl md:text-2xl opacity-90 mb-8">
|
||
智能化管理 · 专业化服务 · 数字化体验
|
||
</p>
|
||
<div class="flex flex-wrap justify-center gap-4">
|
||
<div class="glass-morphism px-6 py-3 rounded-full">
|
||
<i class="fas fa-users mr-2"></i>
|
||
预计接待: <span class="font-bold">10万+</span> 专业观众
|
||
</div>
|
||
<div class="glass-morphism px-6 py-3 rounded-full">
|
||
<i class="fas fa-building mr-2"></i>
|
||
展馆面积: <span class="font-bold">50,000㎡</span>
|
||
</div>
|
||
<div class="glass-morphism px-6 py-3 rounded-full">
|
||
<i class="fas fa-user-tie mr-2"></i>
|
||
服务团队: <span class="font-bold">500+</span> 专业人员
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3D Exhibition Hall Layout -->
|
||
<section class="py-20 bg-white relative overflow-hidden">
|
||
<!-- 背景装饰 -->
|
||
<div class="absolute inset-0 opacity-5" style="background-image: url('../../data/会展策划/image/新能源车.jpg'); background-size: cover;"></div>
|
||
|
||
<div class="container mx-auto px-6 relative z-10">
|
||
<div class="text-center mb-12 animate-fadeInUp">
|
||
<h2 class="text-4xl font-bold text-gray-800 mb-4">
|
||
<i class="fas fa-map-marked-alt text-teal-600 mr-3"></i>
|
||
智能展馆布局规划
|
||
</h2>
|
||
<p class="text-xl text-gray-700 font-medium">基于人流动线设计的科学布局</p>
|
||
</div>
|
||
|
||
<!-- 3D展馆可视化 -->
|
||
<div class="hall-3d max-w-7xl mx-auto mb-16">
|
||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
||
<!-- A馆 - 整车展示 -->
|
||
<div class="lg:col-span-2 hall-card">
|
||
<div class="bg-gradient-to-br from-blue-600 to-blue-800 rounded-2xl p-8 text-white shadow-2xl flow-light">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<h3 class="text-2xl font-bold flex items-center">
|
||
<i class="fas fa-car-side mr-3"></i>
|
||
A馆 - 旗舰整车展示区
|
||
</h3>
|
||
<span class="bg-white/20 backdrop-blur px-4 py-2 rounded-full text-lg font-semibold">
|
||
20,000㎡
|
||
</span>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 gap-4 mb-6">
|
||
<div class="bg-white/10 backdrop-blur rounded-xl p-4 hover:bg-white/20 transition">
|
||
<h4 class="font-bold mb-2">特斯拉专区</h4>
|
||
<p class="text-sm opacity-90">Model S/3/X/Y全系展示</p>
|
||
<p class="text-xs mt-2 opacity-75">展位: A01-A10</p>
|
||
</div>
|
||
<div class="bg-white/10 backdrop-blur rounded-xl p-4 hover:bg-white/20 transition">
|
||
<h4 class="font-bold mb-2">比亚迪专区</h4>
|
||
<p class="text-sm opacity-90">王朝/海洋系列</p>
|
||
<p class="text-xs mt-2 opacity-75">展位: A11-A20</p>
|
||
</div>
|
||
<div class="bg-white/10 backdrop-blur rounded-xl p-4 hover:bg-white/20 transition">
|
||
<h4 class="font-bold mb-2">蔚来专区</h4>
|
||
<p class="text-sm opacity-90">ET7/ES8/EC6展示</p>
|
||
<p class="text-xs mt-2 opacity-75">展位: A21-A30</p>
|
||
</div>
|
||
<div class="bg-white/10 backdrop-blur rounded-xl p-4 hover:bg-white/20 transition">
|
||
<h4 class="font-bold mb-2">理想专区</h4>
|
||
<p class="text-sm opacity-90">L9/L8/L7全系</p>
|
||
<p class="text-xs mt-2 opacity-75">展位: A31-A40</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center justify-between text-sm">
|
||
<div class="flex items-center">
|
||
<i class="fas fa-users mr-2"></i>
|
||
容纳人数: 5000人
|
||
</div>
|
||
<div class="flex items-center">
|
||
<i class="fas fa-wifi mr-2"></i>
|
||
5G全覆盖
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- B馆 - 核心零部件 -->
|
||
<div class="hall-card">
|
||
<div class="bg-gradient-to-br from-green-600 to-emerald-700 rounded-2xl p-6 text-white shadow-2xl h-full flow-light">
|
||
<h3 class="text-xl font-bold mb-4 flex items-center">
|
||
<i class="fas fa-microchip mr-2"></i>
|
||
B馆 - 核心零部件
|
||
</h3>
|
||
<span class="inline-block bg-white/20 backdrop-blur px-3 py-1 rounded-full text-sm mb-4">
|
||
15,000㎡
|
||
</span>
|
||
|
||
<div class="space-y-3">
|
||
<div class="bg-white/10 backdrop-blur rounded-lg p-3 hover:bg-white/20 transition">
|
||
<h4 class="font-semibold flex items-center">
|
||
<i class="fas fa-battery-full mr-2 text-yellow-300"></i>
|
||
动力电池展区
|
||
</h4>
|
||
<p class="text-xs mt-1 opacity-90">宁德时代、比亚迪刀片电池</p>
|
||
</div>
|
||
<div class="bg-white/10 backdrop-blur rounded-lg p-3 hover:bg-white/20 transition">
|
||
<h4 class="font-semibold flex items-center">
|
||
<i class="fas fa-cog mr-2 text-blue-300"></i>
|
||
驱动电机展区
|
||
</h4>
|
||
<p class="text-xs mt-1 opacity-90">精进电动、汇川技术</p>
|
||
</div>
|
||
<div class="bg-white/10 backdrop-blur rounded-lg p-3 hover:bg-white/20 transition">
|
||
<h4 class="font-semibold flex items-center">
|
||
<i class="fas fa-brain mr-2 text-purple-300"></i>
|
||
电控系统展区
|
||
</h4>
|
||
<p class="text-xs mt-1 opacity-90">华为、英飞凌、比亚迪半导体</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- C馆 - 智能交通 -->
|
||
<div class="hall-card">
|
||
<div class="bg-gradient-to-br from-purple-600 to-indigo-700 rounded-2xl p-6 text-white shadow-2xl h-full flow-light">
|
||
<h3 class="text-xl font-bold mb-4 flex items-center">
|
||
<i class="fas fa-satellite-dish mr-2"></i>
|
||
C馆 - 智能交通
|
||
</h3>
|
||
<span class="inline-block bg-white/20 backdrop-blur px-3 py-1 rounded-full text-sm mb-4">
|
||
10,000㎡
|
||
</span>
|
||
|
||
<div class="space-y-3">
|
||
<div class="bg-white/10 backdrop-blur rounded-lg p-3 hover:bg-white/20 transition">
|
||
<h4 class="font-semibold flex items-center">
|
||
<i class="fas fa-broadcast-tower mr-2 text-cyan-300"></i>
|
||
V2X通信展示
|
||
</h4>
|
||
<p class="text-xs mt-1 opacity-90">车路协同解决方案</p>
|
||
</div>
|
||
<div class="bg-white/10 backdrop-blur rounded-lg p-3 hover:bg-white/20 transition">
|
||
<h4 class="font-semibold flex items-center">
|
||
<i class="fas fa-road mr-2 text-green-300"></i>
|
||
智慧路网系统
|
||
</h4>
|
||
<p class="text-xs mt-1 opacity-90">智能交通管理平台</p>
|
||
</div>
|
||
<div class="bg-white/10 backdrop-blur rounded-lg p-3 hover:bg-white/20 transition">
|
||
<h4 class="font-semibold flex items-center">
|
||
<i class="fas fa-robot mr-2 text-pink-300"></i>
|
||
自动驾驶技术
|
||
</h4>
|
||
<p class="text-xs mt-1 opacity-90">L4级自动驾驶演示</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 室外展区 -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-6">
|
||
<div class="hall-card">
|
||
<div class="bg-gradient-to-br from-orange-500 to-red-600 rounded-2xl p-6 text-white shadow-2xl flow-light">
|
||
<h3 class="text-lg font-bold mb-3 flex items-center">
|
||
<i class="fas fa-route mr-2"></i>
|
||
室外体验区
|
||
</h3>
|
||
<span class="inline-block bg-white/20 backdrop-blur px-3 py-1 rounded-full text-sm mb-3">
|
||
5,000㎡
|
||
</span>
|
||
<div class="space-y-2 text-sm">
|
||
<div class="flex items-center">
|
||
<i class="fas fa-car mr-2"></i>
|
||
试乘试驾专业赛道
|
||
</div>
|
||
<div class="flex items-center">
|
||
<i class="fas fa-parking mr-2"></i>
|
||
自动泊车演示区
|
||
</div>
|
||
<div class="flex items-center">
|
||
<i class="fas fa-charging-station mr-2"></i>
|
||
超充站体验区
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hall-card">
|
||
<div class="bg-gradient-to-br from-pink-500 to-purple-600 rounded-2xl p-6 text-white shadow-2xl flow-light">
|
||
<h3 class="text-lg font-bold mb-3 flex items-center">
|
||
<i class="fas fa-utensils mr-2"></i>
|
||
配套服务区
|
||
</h3>
|
||
<div class="grid grid-cols-2 gap-2 text-sm">
|
||
<div class="bg-white/10 backdrop-blur rounded p-2 text-center hover:bg-white/20 transition">
|
||
<i class="fas fa-coffee text-xl mb-1"></i>
|
||
<p class="text-xs">咖啡厅</p>
|
||
</div>
|
||
<div class="bg-white/10 backdrop-blur rounded p-2 text-center hover:bg-white/20 transition">
|
||
<i class="fas fa-hamburger text-xl mb-1"></i>
|
||
<p class="text-xs">餐饮区</p>
|
||
</div>
|
||
<div class="bg-white/10 backdrop-blur rounded p-2 text-center hover:bg-white/20 transition">
|
||
<i class="fas fa-couch text-xl mb-1"></i>
|
||
<p class="text-xs">休息区</p>
|
||
</div>
|
||
<div class="bg-white/10 backdrop-blur rounded p-2 text-center hover:bg-white/20 transition">
|
||
<i class="fas fa-shopping-bag text-xl mb-1"></i>
|
||
<p class="text-xs">纪念品店</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hall-card">
|
||
<div class="bg-gradient-to-br from-gray-600 to-gray-800 rounded-2xl p-6 text-white shadow-2xl flow-light">
|
||
<h3 class="text-lg font-bold mb-3 flex items-center">
|
||
<i class="fas fa-briefcase mr-2"></i>
|
||
商务中心
|
||
</h3>
|
||
<div class="space-y-2 text-sm">
|
||
<div class="flex items-center justify-between">
|
||
<span><i class="fas fa-door-open mr-2"></i>VIP会议室</span>
|
||
<span class="text-xs bg-white/20 px-2 py-1 rounded">10间</span>
|
||
</div>
|
||
<div class="flex items-center justify-between">
|
||
<span><i class="fas fa-handshake mr-2"></i>洽谈区</span>
|
||
<span class="text-xs bg-white/20 px-2 py-1 rounded">50位</span>
|
||
</div>
|
||
<div class="flex items-center justify-between">
|
||
<span><i class="fas fa-print mr-2"></i>商务服务</span>
|
||
<span class="text-xs bg-white/20 px-2 py-1 rounded">24h</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 智能导览系统 -->
|
||
<div class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-3xl p-10 mb-16">
|
||
<h3 class="text-3xl font-bold text-center mb-10 text-gray-800">
|
||
<i class="fas fa-compass text-blue-600 mr-3"></i>
|
||
智能导览系统
|
||
</h3>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
<div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
|
||
<div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-2xl flex items-center justify-center mb-4 float-icon">
|
||
<i class="fas fa-mobile-alt text-white text-2xl"></i>
|
||
</div>
|
||
<h4 class="text-lg font-bold mb-2">AR实景导航</h4>
|
||
<p class="text-gray-600 text-sm mb-3">手机扫码即可获得增强现实导航</p>
|
||
<div class="text-xs text-gray-500">
|
||
<div class="flex items-center mb-1">
|
||
<i class="fas fa-check text-green-500 mr-2"></i>
|
||
精准定位展位
|
||
</div>
|
||
<div class="flex items-center">
|
||
<i class="fas fa-check text-green-500 mr-2"></i>
|
||
3D路径指引
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
|
||
<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center mb-4 float-icon">
|
||
<i class="fas fa-brain text-white text-2xl"></i>
|
||
</div>
|
||
<h4 class="text-lg font-bold mb-2">AI智能推荐</h4>
|
||
<p class="text-gray-600 text-sm mb-3">根据兴趣智能规划参观路线</p>
|
||
<div class="text-xs text-gray-500">
|
||
<div class="flex items-center mb-1">
|
||
<i class="fas fa-check text-green-500 mr-2"></i>
|
||
个性化推荐
|
||
</div>
|
||
<div class="flex items-center">
|
||
<i class="fas fa-check text-green-500 mr-2"></i>
|
||
最优路径规划
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
|
||
<div class="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-500 rounded-2xl flex items-center justify-center mb-4 float-icon">
|
||
<i class="fas fa-map-marked-alt text-white text-2xl"></i>
|
||
</div>
|
||
<h4 class="text-lg font-bold mb-2">实时热力图</h4>
|
||
<p class="text-gray-600 text-sm mb-3">显示各展区实时人流密度</p>
|
||
<div class="text-xs text-gray-500">
|
||
<div class="flex items-center mb-1">
|
||
<i class="fas fa-check text-green-500 mr-2"></i>
|
||
避开拥挤区域
|
||
</div>
|
||
<div class="flex items-center">
|
||
<i class="fas fa-check text-green-500 mr-2"></i>
|
||
预估等待时间
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
|
||
<div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-red-500 rounded-2xl flex items-center justify-center mb-4 float-icon">
|
||
<i class="fas fa-language text-white text-2xl"></i>
|
||
</div>
|
||
<h4 class="text-lg font-bold mb-2">多语言服务</h4>
|
||
<p class="text-gray-600 text-sm mb-3">支持8种语言实时翻译</p>
|
||
<div class="text-xs text-gray-500">
|
||
<div class="flex items-center mb-1">
|
||
<i class="fas fa-check text-green-500 mr-2"></i>
|
||
语音导览
|
||
</div>
|
||
<div class="flex items-center">
|
||
<i class="fas fa-check text-green-500 mr-2"></i>
|
||
实时翻译
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 参观动线设计 -->
|
||
<div class="bg-white rounded-3xl shadow-xl p-10">
|
||
<h3 class="text-3xl font-bold text-center mb-10 text-gray-800">
|
||
<i class="fas fa-route text-emerald-600 mr-3"></i>
|
||
科学参观动线设计
|
||
</h3>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
|
||
<div>
|
||
<h4 class="text-xl font-bold mb-6 text-gray-700">主要参观路线</h4>
|
||
<div class="space-y-4">
|
||
<div class="flex items-start timeline-item">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-4 pulse-dot">
|
||
<span class="font-bold">1</span>
|
||
</div>
|
||
<div class="flex-1">
|
||
<h5 class="font-bold text-lg mb-2">主入口 - 形象展示区</h5>
|
||
<p class="text-gray-600 text-sm mb-2">LED巨幕欢迎墙、展会主题展示</p>
|
||
<div class="bg-blue-50 rounded-lg p-3 text-sm">
|
||
<i class="fas fa-clock text-blue-600 mr-2"></i>
|
||
预计停留: 5-10分钟
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-start timeline-item">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-4 pulse-dot">
|
||
<span class="font-bold">2</span>
|
||
</div>
|
||
<div class="flex-1">
|
||
<h5 class="font-bold text-lg mb-2">A馆 - 整车展示</h5>
|
||
<p class="text-gray-600 text-sm mb-2">品牌旗舰车型、新品发布区</p>
|
||
<div class="bg-green-50 rounded-lg p-3 text-sm">
|
||
<i class="fas fa-clock text-green-600 mr-2"></i>
|
||
预计停留: 60-90分钟
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-start timeline-item">
|
||
<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 flex-shrink-0 mr-4 pulse-dot">
|
||
<span class="font-bold">3</span>
|
||
</div>
|
||
<div class="flex-1">
|
||
<h5 class="font-bold text-lg mb-2">B馆 - 核心技术</h5>
|
||
<p class="text-gray-600 text-sm mb-2">三电系统、智能座舱体验</p>
|
||
<div class="bg-purple-50 rounded-lg p-3 text-sm">
|
||
<i class="fas fa-clock text-purple-600 mr-2"></i>
|
||
预计停留: 45-60分钟
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-start timeline-item">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-4 pulse-dot">
|
||
<span class="font-bold">4</span>
|
||
</div>
|
||
<div class="flex-1">
|
||
<h5 class="font-bold text-lg mb-2">室外 - 互动体验</h5>
|
||
<p class="text-gray-600 text-sm mb-2">试乘试驾、充电演示</p>
|
||
<div class="bg-orange-50 rounded-lg p-3 text-sm">
|
||
<i class="fas fa-clock text-orange-600 mr-2"></i>
|
||
预计停留: 30-45分钟
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="text-xl font-bold mb-6 text-gray-700">专业观众路线</h4>
|
||
<div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl p-6">
|
||
<div class="space-y-4">
|
||
<div class="bg-white rounded-xl p-4 shadow hover:shadow-lg transition">
|
||
<h5 class="font-bold mb-2 flex items-center">
|
||
<i class="fas fa-user-tie text-blue-600 mr-2"></i>
|
||
VIP快速通道
|
||
</h5>
|
||
<p class="text-sm text-gray-600">专属入口、快速登记、专人接待</p>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-xl p-4 shadow hover:shadow-lg transition">
|
||
<h5 class="font-bold mb-2 flex items-center">
|
||
<i class="fas fa-handshake text-green-600 mr-2"></i>
|
||
商务洽谈路线
|
||
</h5>
|
||
<p class="text-sm text-gray-600">直达商务中心、预约制参观、一对一对接</p>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-xl p-4 shadow hover:shadow-lg transition">
|
||
<h5 class="font-bold mb-2 flex items-center">
|
||
<i class="fas fa-microscope text-purple-600 mr-2"></i>
|
||
技术交流路线
|
||
</h5>
|
||
<p class="text-sm text-gray-600">技术论坛、专家讲座、研发展示</p>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-xl p-4 shadow hover:shadow-lg transition">
|
||
<h5 class="font-bold mb-2 flex items-center">
|
||
<i class="fas fa-newspaper text-orange-600 mr-2"></i>
|
||
媒体采访路线
|
||
</h5>
|
||
<p class="text-sm text-gray-600">新闻中心、采访间、直播区</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Duoduo Agent 可视化设计流程 -->
|
||
<section class="py-20 bg-white relative overflow-hidden">
|
||
<!-- 背景装饰 -->
|
||
<div class="absolute inset-0 opacity-5">
|
||
<div class="absolute top-20 left-20 w-64 h-64 bg-purple-400 rounded-full filter blur-3xl"></div>
|
||
<div class="absolute bottom-20 right-20 w-64 h-64 bg-blue-400 rounded-full filter blur-3xl"></div>
|
||
</div>
|
||
|
||
<div class="container mx-auto px-6 relative z-10">
|
||
<div class="text-center mb-12 animate-fadeInUp">
|
||
<h2 class="text-4xl font-bold text-gray-800 mb-4">
|
||
<i class="fas fa-robot text-purple-600 mr-3"></i>
|
||
Duoduo Agent 智能设计系统
|
||
</h2>
|
||
<p class="text-xl text-gray-700 font-medium mb-3">从想法到展位概念的完整可视化流程</p>
|
||
<p class="text-lg text-gray-600">让学生直接体验AI驱动的设计革新，快速实现创意落地</p>
|
||
</div>
|
||
|
||
<!-- 流程展示 -->
|
||
<div class="max-w-7xl mx-auto">
|
||
<!-- 流程时间线 -->
|
||
<div class="relative mb-12">
|
||
<div class="absolute left-0 right-0 top-1/2 h-1 bg-gradient-to-r from-purple-400 via-blue-400 to-emerald-400 transform -translate-y-1/2 rounded-full"></div>
|
||
<div class="flex justify-between relative">
|
||
<div class="bg-white rounded-full p-3 shadow-lg border-4 border-purple-400 animate-pulse">
|
||
<i class="fas fa-lightbulb text-purple-600 text-2xl"></i>
|
||
</div>
|
||
<div class="bg-white rounded-full p-3 shadow-lg border-4 border-indigo-400">
|
||
<i class="fas fa-drafting-compass text-indigo-600 text-2xl"></i>
|
||
</div>
|
||
<div class="bg-white rounded-full p-3 shadow-lg border-4 border-blue-400">
|
||
<i class="fas fa-paint-brush text-blue-600 text-2xl"></i>
|
||
</div>
|
||
<div class="bg-white rounded-full p-3 shadow-lg border-4 border-cyan-400">
|
||
<i class="fas fa-cube text-cyan-600 text-2xl"></i>
|
||
</div>
|
||
<div class="bg-white rounded-full p-3 shadow-lg border-4 border-teal-400">
|
||
<i class="fas fa-palette text-teal-600 text-2xl"></i>
|
||
</div>
|
||
<div class="bg-white rounded-full p-3 shadow-lg border-4 border-emerald-400 animate-pulse">
|
||
<i class="fas fa-store text-emerald-600 text-2xl"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 设计阶段展示 - 横向滚动 -->
|
||
<div class="overflow-x-auto pb-6">
|
||
<div class="flex gap-6" style="min-width: 1600px;">
|
||
<!-- Stage 1: CAD设计图 -->
|
||
<div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 300px;">
|
||
<div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl">
|
||
<div class="bg-gradient-to-r from-purple-500 to-purple-600 text-white p-4">
|
||
<h3 class="text-lg font-bold flex items-center">
|
||
<span class="bg-white/20 backdrop-blur rounded-full w-8 h-8 flex items-center justify-center mr-3 text-sm">1</span>
|
||
CAD设计图
|
||
</h3>
|
||
<p class="text-sm opacity-90 mt-1">精确的工程制图</p>
|
||
</div>
|
||
<div class="p-2">
|
||
<div class="relative overflow-hidden rounded-lg">
|
||
<img src="../../data/会展策划/image/Whisk_dcc81c5212.jpg"
|
||
alt="CAD设计图"
|
||
class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-700">
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
||
<div class="absolute bottom-3 left-3 text-white">
|
||
<p class="text-xs">AutoCAD 2024</p>
|
||
<p class="text-xs opacity-75">精度: 0.1mm</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="px-4 pb-4 pt-2">
|
||
<div class="flex items-center justify-between text-xs text-gray-600">
|
||
<span><i class="fas fa-clock mr-1"></i>2小时</span>
|
||
<span><i class="fas fa-check-circle text-green-500 mr-1"></i>已完成</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stage 2: 概念设计图 -->
|
||
<div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 300px;">
|
||
<div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl">
|
||
<div class="bg-gradient-to-r from-indigo-500 to-indigo-600 text-white p-4">
|
||
<h3 class="text-lg font-bold flex items-center">
|
||
<span class="bg-white/20 backdrop-blur rounded-full w-8 h-8 flex items-center justify-center mr-3 text-sm">2</span>
|
||
概念设计图
|
||
</h3>
|
||
<p class="text-sm opacity-90 mt-1">创意概念可视化</p>
|
||
</div>
|
||
<div class="p-2">
|
||
<div class="relative overflow-hidden rounded-lg">
|
||
<img src="../../data/会展策划/image/Whisk_e8f83d1a37.jpg"
|
||
alt="概念设计图"
|
||
class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-700">
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
||
<div class="absolute bottom-3 left-3 text-white">
|
||
<p class="text-xs">Adobe Illustrator</p>
|
||
<p class="text-xs opacity-75">矢量设计</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="px-4 pb-4 pt-2">
|
||
<div class="flex items-center justify-between text-xs text-gray-600">
|
||
<span><i class="fas fa-clock mr-1"></i>3小时</span>
|
||
<span><i class="fas fa-check-circle text-green-500 mr-1"></i>已完成</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stage 3: 三维建模白模 -->
|
||
<div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 300px;">
|
||
<div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl">
|
||
<div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-4">
|
||
<h3 class="text-lg font-bold flex items-center">
|
||
<span class="bg-white/20 backdrop-blur rounded-full w-8 h-8 flex items-center justify-center mr-3 text-sm">3</span>
|
||
三维建模白模
|
||
</h3>
|
||
<p class="text-sm opacity-90 mt-1">空间结构展示</p>
|
||
</div>
|
||
<div class="p-2">
|
||
<div class="relative overflow-hidden rounded-lg">
|
||
<img src="../../data/会展策划/image/Whisk_be64a7b61f.jpg"
|
||
alt="三维建模白模"
|
||
class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-700">
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
||
<div class="absolute bottom-3 left-3 text-white">
|
||
<p class="text-xs">SketchUp Pro</p>
|
||
<p class="text-xs opacity-75">多边形: 128K</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="px-4 pb-4 pt-2">
|
||
<div class="flex items-center justify-between text-xs text-gray-600">
|
||
<span><i class="fas fa-clock mr-1"></i>4小时</span>
|
||
<span><i class="fas fa-check-circle text-green-500 mr-1"></i>已完成</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stage 4: 三维渲染图 -->
|
||
<div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 300px;">
|
||
<div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl">
|
||
<div class="bg-gradient-to-r from-cyan-500 to-cyan-600 text-white p-4">
|
||
<h3 class="text-lg font-bold flex items-center">
|
||
<span class="bg-white/20 backdrop-blur rounded-full w-8 h-8 flex items-center justify-center mr-3 text-sm">4</span>
|
||
三维渲染图
|
||
</h3>
|
||
<p class="text-sm opacity-90 mt-1">真实感材质渲染</p>
|
||
</div>
|
||
<div class="p-2">
|
||
<div class="relative overflow-hidden rounded-lg">
|
||
<img src="../../data/会展策划/image/Whisk_192cdc54bc.jpg"
|
||
alt="三维渲染图"
|
||
class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-700">
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
||
<div class="absolute bottom-3 left-3 text-white">
|
||
<p class="text-xs">V-Ray Next</p>
|
||
<p class="text-xs opacity-75">4K渲染</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="px-4 pb-4 pt-2">
|
||
<div class="flex items-center justify-between text-xs text-gray-600">
|
||
<span><i class="fas fa-clock mr-1"></i>6小时</span>
|
||
<span><i class="fas fa-check-circle text-green-500 mr-1"></i>已完成</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stage 5: 展位概念设计图 -->
|
||
<div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 300px;">
|
||
<div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl ring-4 ring-emerald-400 ring-opacity-50">
|
||
<div class="bg-gradient-to-r from-emerald-500 to-emerald-600 text-white p-4">
|
||
<h3 class="text-lg font-bold flex items-center">
|
||
<span class="bg-white/20 backdrop-blur rounded-full w-8 h-8 flex items-center justify-center mr-3 text-sm">5</span>
|
||
展位概念设计
|
||
</h3>
|
||
<p class="text-sm opacity-90 mt-1">最终展示方案</p>
|
||
</div>
|
||
<div class="p-2">
|
||
<div class="relative overflow-hidden rounded-lg">
|
||
<img src="../../data/会展策划/image/Whisk_c478fe089d.jpg"
|
||
alt="展位概念设计图"
|
||
class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-700">
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
||
<div class="absolute bottom-3 left-3 text-white">
|
||
<p class="text-xs">Final Design</p>
|
||
<p class="text-xs opacity-75">Ready to Build</p>
|
||
</div>
|
||
</div>
|
||
<div class="absolute top-3 right-3">
|
||
<span class="bg-emerald-500 text-white text-xs px-2 py-1 rounded-full animate-pulse">
|
||
<i class="fas fa-star mr-1"></i>最终方案
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="px-4 pb-4 pt-2">
|
||
<div class="flex items-center justify-between text-xs text-gray-600">
|
||
<span><i class="fas fa-clock mr-1"></i>总计: 20小时</span>
|
||
<span><i class="fas fa-trophy text-yellow-500 mr-1"></i>已交付</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI功能特点 -->
|
||
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<div class="bg-white/80 backdrop-blur rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all">
|
||
<div class="flex items-center mb-4">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mr-4">
|
||
<i class="fas fa-brain text-white text-xl"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-gray-800">AI智能生成</h4>
|
||
<p class="text-sm text-gray-600">基于需求自动设计</p>
|
||
</div>
|
||
</div>
|
||
<ul class="space-y-2 text-sm text-gray-600">
|
||
<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>自动识别设计需求</li>
|
||
<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>智能优化空间布局</li>
|
||
<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>实时渲染预览效果</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="bg-white/80 backdrop-blur rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all">
|
||
<div class="flex items-center mb-4">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center mr-4">
|
||
<i class="fas fa-tachometer-alt text-white text-xl"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-gray-800">效率提升90%</h4>
|
||
<p class="text-sm text-gray-600">传统流程需要2周</p>
|
||
</div>
|
||
</div>
|
||
<ul class="space-y-2 text-sm text-gray-600">
|
||
<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>20小时完成全流程</li>
|
||
<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>无需专业设计背景</li>
|
||
<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>一键导出施工图纸</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="bg-white/80 backdrop-blur rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all">
|
||
<div class="flex items-center mb-4">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-xl flex items-center justify-center mr-4">
|
||
<i class="fas fa-users text-white text-xl"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-gray-800">学生即可上手</h4>
|
||
<p class="text-sm text-gray-600">零基础快速掌握</p>
|
||
</div>
|
||
</div>
|
||
<ul class="space-y-2 text-sm text-gray-600">
|
||
<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>可视化操作界面</li>
|
||
<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>智能设计建议</li>
|
||
<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>实时协作功能</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 功能说明 -->
|
||
<div class="text-center mt-12">
|
||
<p class="text-gray-600 text-lg font-medium">
|
||
<i class="fas fa-info-circle mr-2 text-blue-500"></i>
|
||
支持团队协作 · 云端存储 · 版本管理
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 数字化服务体系 -->
|
||
<section class="py-20 bg-gray-50 relative overflow-hidden">
|
||
<div class="absolute inset-0">
|
||
<div class="absolute top-20 left-20 w-64 h-64 bg-blue-200/30 rounded-full filter blur-3xl"></div>
|
||
<div class="absolute bottom-20 right-20 w-80 h-80 bg-purple-200/30 rounded-full filter blur-3xl"></div>
|
||
</div>
|
||
|
||
<div class="container mx-auto px-6 relative z-10">
|
||
<div class="text-center mb-12 animate-fadeInUp">
|
||
<h2 class="text-4xl font-bold text-gray-800 mb-4">
|
||
<i class="fas fa-server text-purple-600 mr-3"></i>
|
||
数字化服务体系
|
||
</h2>
|
||
<p class="text-xl text-gray-600">全方位智能化服务保障</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
<!-- 智能登记系统 -->
|
||
<div class="bg-white rounded-2xl shadow-xl p-8 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-3">
|
||
<div class="w-20 h-20 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-2xl flex items-center justify-center mb-6 mx-auto float-icon">
|
||
<i class="fas fa-qrcode text-white text-3xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-center mb-4">智能登记系统</h3>
|
||
<ul class="space-y-3 text-sm text-gray-600">
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check-circle text-green-500 mr-2"></i>
|
||
人脸识别快速入场
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check-circle text-green-500 mr-2"></i>
|
||
电子证件一键生成
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check-circle text-green-500 mr-2"></i>
|
||
实时数据统计分析
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check-circle text-green-500 mr-2"></i>
|
||
VIP专属快速通道
|
||
</li>
|
||
</ul>
|
||
<div class="mt-6 text-center">
|
||
<div class="text-3xl font-bold text-blue-600 counter">< 30秒</div>
|
||
<div class="text-sm text-gray-500">平均登记时间</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI服务机器人 -->
|
||
<div class="bg-white rounded-2xl shadow-xl p-8 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-3">
|
||
<div class="w-20 h-20 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center mb-6 mx-auto float-icon">
|
||
<i class="fas fa-robot text-white text-3xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-center mb-4">AI服务机器人</h3>
|
||
<ul class="space-y-3 text-sm text-gray-600">
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check-circle text-green-500 mr-2"></i>
|
||
多语言智能问答
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check-circle text-green-500 mr-2"></i>
|
||
展位导航引领
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check-circle text-green-500 mr-2"></i>
|
||
活动信息推送
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check-circle text-green-500 mr-2"></i>
|
||
紧急事件处理
|
||
</li>
|
||
</ul>
|
||
<div class="mt-6 text-center">
|
||
<div class="text-3xl font-bold text-purple-600 counter">50+</div>
|
||
<div class="text-sm text-gray-500">服务机器人数量</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 云端数据中心 -->
|
||
<div class="bg-white rounded-2xl shadow-xl p-8 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-3">
|
||
<div class="w-20 h-20 bg-gradient-to-br from-green-500 to-emerald-500 rounded-2xl flex items-center justify-center mb-6 mx-auto float-icon">
|
||
<i class="fas fa-cloud text-white text-3xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-center mb-4">云端数据中心</h3>
|
||
<ul class="space-y-3 text-sm text-gray-600">
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check-circle text-green-500 mr-2"></i>
|
||
实时客流监控
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check-circle text-green-500 mr-2"></i>
|
||
大数据分析报告
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check-circle text-green-500 mr-2"></i>
|
||
智能预警系统
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check-circle text-green-500 mr-2"></i>
|
||
展商数据服务
|
||
</li>
|
||
</ul>
|
||
<div class="mt-6 text-center">
|
||
<div class="text-3xl font-bold text-green-600 counter">24/7</div>
|
||
<div class="text-sm text-gray-500">全天候监控</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 智慧安防系统 -->
|
||
<div class="bg-white rounded-2xl shadow-xl p-8 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-3">
|
||
<div class="w-20 h-20 bg-gradient-to-br from-orange-500 to-red-500 rounded-2xl flex items-center justify-center mb-6 mx-auto float-icon">
|
||
<i class="fas fa-shield-alt text-white text-3xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-center mb-4">智慧安防系统</h3>
|
||
<ul class="space-y-3 text-sm text-gray-600">
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check-circle text-green-500 mr-2"></i>
|
||
AI视频监控分析
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check-circle text-green-500 mr-2"></i>
|
||
异常行为识别
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check-circle text-green-500 mr-2"></i>
|
||
应急响应联动
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check-circle text-green-500 mr-2"></i>
|
||
密度预警管控
|
||
</li>
|
||
</ul>
|
||
<div class="mt-6 text-center">
|
||
<div class="text-3xl font-bold text-orange-600 counter">1000+</div>
|
||
<div class="text-sm text-gray-500">监控点位</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 特色活动安排 -->
|
||
<section class="py-20 bg-white relative overflow-hidden">
|
||
<div class="absolute inset-0 opacity-5" style="background-image: url('../../data/会展策划/image/充电站.jpg'); background-size: cover;"></div>
|
||
|
||
<div class="container mx-auto px-6 relative z-10">
|
||
<div class="text-center mb-12 animate-fadeInUp">
|
||
<h2 class="text-4xl font-bold text-gray-800 mb-4">
|
||
<i class="fas fa-calendar-alt text-orange-600 mr-3"></i>
|
||
精彩活动安排
|
||
</h2>
|
||
<p class="text-xl text-gray-600">四天展期，精彩不断</p>
|
||
</div>
|
||
|
||
<!-- 开幕式 -->
|
||
<div class="mb-12">
|
||
<div class="gradient-animated rounded-3xl p-10 text-white shadow-2xl">
|
||
<div class="text-center mb-8">
|
||
<h3 class="text-3xl font-bold mb-4">
|
||
<i class="fas fa-crown mr-3"></i>
|
||
盛大开幕典礼
|
||
</h3>
|
||
<p class="text-xl opacity-90">9月12日 09:00-10:30 | 主会场</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<div class="glass-morphism rounded-xl p-6">
|
||
<h4 class="font-bold text-lg mb-3 flex items-center">
|
||
<i class="fas fa-microphone mr-2"></i>
|
||
领导致辞
|
||
</h4>
|
||
<ul class="text-sm space-y-2 opacity-90">
|
||
<li>• 工信部领导致辞</li>
|
||
<li>• 长三角城市群代表发言</li>
|
||
<li>• 行业协会主席讲话</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="glass-morphism rounded-xl p-6">
|
||
<h4 class="font-bold text-lg mb-3 flex items-center">
|
||
<i class="fas fa-rocket mr-2"></i>
|
||
启动仪式
|
||
</h4>
|
||
<ul class="text-sm space-y-2 opacity-90">
|
||
<li>• 展会正式启动</li>
|
||
<li>• 战略合作签约</li>
|
||
<li>• 新品全球首发</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="glass-morphism rounded-xl p-6">
|
||
<h4 class="font-bold text-lg mb-3 flex items-center">
|
||
<i class="fas fa-tv mr-2"></i>
|
||
媒体直播
|
||
</h4>
|
||
<ul class="text-sm space-y-2 opacity-90">
|
||
<li>• 央视新闻直播</li>
|
||
<li>• 50+主流媒体报道</li>
|
||
<li>• 全网同步直播</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 论坛日程 -->
|
||
<div class="bg-gray-50 rounded-3xl p-10">
|
||
<h3 class="text-3xl font-bold text-center mb-10 text-gray-800">
|
||
<i class="fas fa-comments text-blue-600 mr-3"></i>
|
||
高峰论坛日程
|
||
</h3>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||
<!-- Day 1 -->
|
||
<div>
|
||
<div class="bg-white rounded-2xl shadow-lg p-6 mb-6">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h4 class="text-xl font-bold text-gray-800">第一天 - 9月12日</h4>
|
||
<span class="bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-sm font-semibold">
|
||
产业发展日
|
||
</span>
|
||
</div>
|
||
|
||
<div class="space-y-4">
|
||
<div class="border-l-4 border-blue-500 pl-4">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h5 class="font-bold">新能源汽车产业发展论坛</h5>
|
||
<span class="text-sm text-gray-500">10:00-12:00</span>
|
||
</div>
|
||
<p class="text-sm text-gray-600">主题：双碳目标下的产业机遇</p>
|
||
<div class="mt-2 flex items-center text-xs text-gray-500">
|
||
<i class="fas fa-users mr-2"></i>
|
||
预计参会: 500人
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border-l-4 border-green-500 pl-4">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h5 class="font-bold">动力电池技术创新峰会</h5>
|
||
<span class="text-sm text-gray-500">14:00-16:00</span>
|
||
</div>
|
||
<p class="text-sm text-gray-600">主题：固态电池商业化进程</p>
|
||
<div class="mt-2 flex items-center text-xs text-gray-500">
|
||
<i class="fas fa-users mr-2"></i>
|
||
预计参会: 300人
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border-l-4 border-purple-500 pl-4">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h5 class="font-bold">智能座舱体验设计论坛</h5>
|
||
<span class="text-sm text-gray-500">16:30-18:00</span>
|
||
</div>
|
||
<p class="text-sm text-gray-600">主题：人机交互的未来趋势</p>
|
||
<div class="mt-2 flex items-center text-xs text-gray-500">
|
||
<i class="fas fa-users mr-2"></i>
|
||
预计参会: 200人
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Day 2 -->
|
||
<div>
|
||
<div class="bg-white rounded-2xl shadow-lg p-6 mb-6">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h4 class="text-xl font-bold text-gray-800">第二天 - 9月13日</h4>
|
||
<span class="bg-green-100 text-green-600 px-3 py-1 rounded-full text-sm font-semibold">
|
||
技术创新日
|
||
</span>
|
||
</div>
|
||
|
||
<div class="space-y-4">
|
||
<div class="border-l-4 border-orange-500 pl-4">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h5 class="font-bold">自动驾驶技术峰会</h5>
|
||
<span class="text-sm text-gray-500">09:00-11:00</span>
|
||
</div>
|
||
<p class="text-sm text-gray-600">主题：L4级自动驾驶落地实践</p>
|
||
<div class="mt-2 flex items-center text-xs text-gray-500">
|
||
<i class="fas fa-users mr-2"></i>
|
||
预计参会: 400人
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border-l-4 border-pink-500 pl-4">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h5 class="font-bold">充换电基础设施研讨会</h5>
|
||
<span class="text-sm text-gray-500">14:00-16:00</span>
|
||
</div>
|
||
<p class="text-sm text-gray-600">主题：超充网络建设与运营</p>
|
||
<div class="mt-2 flex items-center text-xs text-gray-500">
|
||
<i class="fas fa-users mr-2"></i>
|
||
预计参会: 350人
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border-l-4 border-indigo-500 pl-4">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h5 class="font-bold">车联网安全技术论坛</h5>
|
||
<span class="text-sm text-gray-500">16:30-18:00</span>
|
||
</div>
|
||
<p class="text-sm text-gray-600">主题：智能汽车信息安全挑战</p>
|
||
<div class="mt-2 flex items-center text-xs text-gray-500">
|
||
<i class="fas fa-users mr-2"></i>
|
||
预计参会: 250人
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 服务保障体系 -->
|
||
<section class="py-20 bg-gradient-to-br from-emerald-50 to-blue-50 relative overflow-hidden">
|
||
<div class="container mx-auto px-6 relative z-10">
|
||
<div class="text-center mb-12 animate-fadeInUp">
|
||
<h2 class="text-4xl font-bold text-gray-800 mb-4">
|
||
<i class="fas fa-hand-holding-heart text-emerald-600 mr-3"></i>
|
||
全方位服务保障
|
||
</h2>
|
||
<p class="text-xl text-gray-600">专业团队，贴心服务</p>
|
||
</div>
|
||
|
||
<!-- 服务承诺 -->
|
||
<div class="bg-gradient-to-r from-emerald-600 to-blue-600 rounded-3xl p-10 text-white mb-12 shadow-2xl">
|
||
<h3 class="text-3xl font-bold text-center mb-8">服务承诺标准</h3>
|
||
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
|
||
<div class="glass-morphism rounded-xl p-6">
|
||
<div class="text-4xl font-bold mb-2 counter">< 3</div>
|
||
<div class="text-sm">分钟</div>
|
||
<div class="text-xs mt-2 opacity-80">平均排队时间</div>
|
||
</div>
|
||
|
||
<div class="glass-morphism rounded-xl p-6">
|
||
<div class="text-4xl font-bold mb-2 counter">< 5</div>
|
||
<div class="text-sm">分钟</div>
|
||
<div class="text-xs mt-2 opacity-80">问题响应时间</div>
|
||
</div>
|
||
|
||
<div class="glass-morphism rounded-xl p-6">
|
||
<div class="text-4xl font-bold mb-2 counter">100%</div>
|
||
<div class="text-sm">覆盖</div>
|
||
<div class="text-xs mt-2 opacity-80">WiFi信号覆盖</div>
|
||
</div>
|
||
|
||
<div class="glass-morphism rounded-xl p-6">
|
||
<div class="text-4xl font-bold mb-2 counter">95%+</div>
|
||
<div class="text-sm">满意度</div>
|
||
<div class="text-xs mt-2 opacity-80">服务满意目标</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 服务团队 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
<div class="bg-white rounded-2xl shadow-lg p-8 hover:shadow-2xl transition-all duration-300">
|
||
<div class="text-center mb-6">
|
||
<div class="w-24 h-24 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<i class="fas fa-headset text-white text-3xl"></i>
|
||
</div>
|
||
<h4 class="text-xl font-bold">客服团队</h4>
|
||
</div>
|
||
<ul class="space-y-3 text-sm text-gray-600">
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check text-green-500 mr-3"></i>
|
||
专业客服人员200+
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check text-green-500 mr-3"></i>
|
||
8种语言服务支持
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check text-green-500 mr-3"></i>
|
||
24小时服务热线
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check text-green-500 mr-3"></i>
|
||
现场问题即时处理
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-2xl shadow-lg p-8 hover:shadow-2xl transition-all duration-300">
|
||
<div class="text-center mb-6">
|
||
<div class="w-24 h-24 bg-gradient-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<i class="fas fa-shield-alt text-white text-3xl"></i>
|
||
</div>
|
||
<h4 class="text-xl font-bold">安保团队</h4>
|
||
</div>
|
||
<ul class="space-y-3 text-sm text-gray-600">
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check text-green-500 mr-3"></i>
|
||
专业安保人员300+
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check text-green-500 mr-3"></i>
|
||
AI智能监控系统
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check text-green-500 mr-3"></i>
|
||
应急响应3分钟内
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check text-green-500 mr-3"></i>
|
||
全场无死角覆盖
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-2xl shadow-lg p-8 hover:shadow-2xl transition-all duration-300">
|
||
<div class="text-center mb-6">
|
||
<div class="w-24 h-24 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<i class="fas fa-medkit text-white text-3xl"></i>
|
||
</div>
|
||
<h4 class="text-xl font-bold">医疗团队</h4>
|
||
</div>
|
||
<ul class="space-y-3 text-sm text-gray-600">
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check text-green-500 mr-3"></i>
|
||
医护人员50+
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check text-green-500 mr-3"></i>
|
||
8个医疗服务点
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check text-green-500 mr-3"></i>
|
||
救护车现场待命
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fas fa-check text-green-500 mr-3"></i>
|
||
AED设备全覆盖
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA Section -->
|
||
<section class="py-16 gradient-animated text-white relative overflow-hidden">
|
||
<div class="absolute inset-0">
|
||
<div class="absolute top-10 left-10 w-32 h-32 bg-white/10 rounded-full filter blur-3xl animate-pulse"></div>
|
||
<div class="absolute bottom-10 right-10 w-40 h-40 bg-white/10 rounded-full filter blur-3xl animate-pulse animation-delay-2000"></div>
|
||
</div>
|
||
|
||
<div class="container mx-auto px-6 text-center relative z-10">
|
||
<h2 class="text-4xl font-bold mb-6 neon-glow">专业运营，保障展会成功</h2>
|
||
<p class="text-xl mb-8 opacity-90">了解展会预算规划与投资回报分析</p>
|
||
<a href="budget.html" class="inline-block bg-white text-purple-600 px-10 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transform hover:scale-105 transition-all duration-300 shadow-xl">
|
||
<i class="fas fa-chart-pie mr-2"></i>
|
||
查看预算分析
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="bg-gray-900 text-white py-12">
|
||
<div class="container mx-auto px-6">
|
||
<div class="text-center">
|
||
<p class="text-gray-400">© 2024 长三角国际新能源汽车与智能交通产业博览会. All rights reserved.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- JavaScript for animations -->
|
||
<script>
|
||
// Counter animation
|
||
const observerOptions = {
|
||
threshold: 0.5,
|
||
rootMargin: '0px'
|
||
};
|
||
|
||
const observer = new IntersectionObserver(function(entries) {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('animate');
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
document.querySelectorAll('.counter').forEach(el => {
|
||
observer.observe(el);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |