2025-09-10 02:35:16 +08:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
|
|
|
|
|
|
<title>现场运营 - 2024长三角国际新能源汽车展</title>
|
|
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 页面加载动画 -->
|
|
|
|
|
|
<!-- 错误处理（需要最早加载） -->
|
|
|
|
|
|
<script src="../js/error-handler.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="../js/page-loader.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 移动端优化 -->
|
|
|
|
|
|
<script src="../js/mobile-optimize.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 性能优化 -->
|
|
|
|
|
|
<script src="../js/performance-optimizer.js"></script>
|
|
|
|
|
|
<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">
|
|
|
|
|
|
<!-- Content will be dynamically generated by nav-component.js -->
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Page Header with Background Image -->
|
|
|
|
|
|
<section class="relative pt-24 pb-16 overflow-hidden">
|
|
|
|
|
|
<!-- 背景图片 -->
|
2025-10-01 19:11:14 +08:00
|
|
|
|
<div class="absolute inset-0" style="background-image: url('../../data/订单班文档资料/文旅/notion文稿/image/博览会.jpg'); background-size: cover; background-position: center;">
|
2025-09-10 02:35:16 +08:00
|
|
|
|
<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="bg-gradient-to-r from-emerald-500 to-emerald-600 text-white px-8 py-4 rounded-xl shadow-lg">
|
|
|
|
|
|
<i class="fas fa-users mr-2 text-lg"></i>
|
|
|
|
|
|
<span class="text-lg font-medium">预计接待:</span> <span class="font-bold text-xl">10万+</span> <span class="text-lg">专业观众</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white px-8 py-4 rounded-xl shadow-lg">
|
|
|
|
|
|
<i class="fas fa-building mr-2 text-lg"></i>
|
|
|
|
|
|
<span class="text-lg font-medium">展馆面积:</span> <span class="font-bold text-xl">50,000㎡</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-gradient-to-r from-purple-500 to-purple-600 text-white px-8 py-4 rounded-xl shadow-lg">
|
|
|
|
|
|
<i class="fas fa-user-tie mr-2 text-lg"></i>
|
|
|
|
|
|
<span class="text-lg font-medium">服务团队:</span> <span class="font-bold text-xl">500+</span> <span class="text-lg">专业人员</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 3D Exhibition Hall Layout -->
|
|
|
|
|
|
<section class="py-20 bg-white relative overflow-hidden">
|
|
|
|
|
|
<!-- 背景装饰 -->
|
2025-10-01 19:11:14 +08:00
|
|
|
|
<div class="absolute inset-0 opacity-5" style="background-image: url('../../data/订单班文档资料/文旅/notion文稿/image/新能源车.jpg'); background-size: cover;"></div>
|
2025-09-10 02:35:16 +08:00
|
|
|
|
|
|
|
|
|
|
<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: 380px;">
|
|
|
|
|
|
<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">
|
2025-10-01 19:11:14 +08:00
|
|
|
|
<div class="relative overflow-hidden rounded-lg cursor-pointer" onclick="openImageModal('../../data/订单班文档资料/文旅/notion文稿/image/Whisk_dcc81c5212.jpg', 'CAD设计图')">
|
|
|
|
|
|
<img src="../../data/订单班文档资料/文旅/notion文稿/image/Whisk_dcc81c5212.jpg"
|
2025-09-10 02:35:16 +08:00
|
|
|
|
alt="CAD设计图"
|
|
|
|
|
|
class="w-full h-80 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: 380px;">
|
|
|
|
|
|
<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">
|
2025-10-01 19:11:14 +08:00
|
|
|
|
<div class="relative overflow-hidden rounded-lg cursor-pointer" onclick="openImageModal('../../data/订单班文档资料/文旅/notion文稿/image/Whisk_e8f83d1a37.jpg', '概念设计图')">
|
|
|
|
|
|
<img src="../../data/订单班文档资料/文旅/notion文稿/image/Whisk_e8f83d1a37.jpg"
|
2025-09-10 02:35:16 +08:00
|
|
|
|
alt="概念设计图"
|
|
|
|
|
|
class="w-full h-80 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: 380px;">
|
|
|
|
|
|
<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">
|
2025-10-01 19:11:14 +08:00
|
|
|
|
<div class="relative overflow-hidden rounded-lg cursor-pointer" onclick="openImageModal('../../data/订单班文档资料/文旅/notion文稿/image/Whisk_be64a7b61f.jpg', '三维建模白模')">
|
|
|
|
|
|
<img src="../../data/订单班文档资料/文旅/notion文稿/image/Whisk_be64a7b61f.jpg"
|
2025-09-10 02:35:16 +08:00
|
|
|
|
alt="三维建模白模"
|
|
|
|
|
|
class="w-full h-80 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: 380px;">
|
|
|
|
|
|
<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">
|
2025-10-01 19:11:14 +08:00
|
|
|
|
<div class="relative overflow-hidden rounded-lg cursor-pointer" onclick="openImageModal('../../data/订单班文档资料/文旅/notion文稿/image/Whisk_192cdc54bc.jpg', '三维渲染图')">
|
|
|
|
|
|
<img src="../../data/订单班文档资料/文旅/notion文稿/image/Whisk_192cdc54bc.jpg"
|
2025-09-10 02:35:16 +08:00
|
|
|
|
alt="三维渲染图"
|
|
|
|
|
|
class="w-full h-80 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: 380px;">
|
|
|
|
|
|
<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">
|
2025-10-01 19:11:14 +08:00
|
|
|
|
<div class="relative overflow-hidden rounded-lg cursor-pointer" onclick="openImageModal('../../data/订单班文档资料/文旅/notion文稿/image/Whisk_c478fe089d.jpg', '展位概念设计图')">
|
|
|
|
|
|
<img src="../../data/订单班文档资料/文旅/notion文稿/image/Whisk_c478fe089d.jpg"
|
2025-09-10 02:35:16 +08:00
|
|
|
|
alt="展位概念设计图"
|
|
|
|
|
|
class="w-full h-80 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">
|
2025-10-01 19:11:14 +08:00
|
|
|
|
<div class="absolute inset-0 opacity-5" style="background-image: url('../../data/订单班文档资料/文旅/notion文稿/image/充电站.jpg'); background-size: cover;"></div>
|
2025-09-10 02:35:16 +08:00
|
|
|
|
|
|
|
|
|
|
<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="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>
|
|
|
|
|
|
<script src="../js/nav-component.js"></script>
|
|
|
|
|
|
<script src="../js/back-to-top.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 图片放大模态框 -->
|
|
|
|
|
|
<div id="imageModal" class="fixed inset-0 z-[9999] hidden">
|
|
|
|
|
|
<div class="absolute inset-0 bg-black/90 backdrop-blur" onclick="closeImageModal()"></div>
|
|
|
|
|
|
<div class="relative w-full h-full flex items-center justify-center p-8">
|
|
|
|
|
|
<img id="modalImage" src="" alt="" class="max-w-full max-h-full object-contain">
|
|
|
|
|
|
<button onclick="closeImageModal()" class="absolute top-8 right-8 text-white text-3xl hover:text-gray-300 transition-colors">
|
|
|
|
|
|
<i class="fas fa-times"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<div id="modalCaption" class="absolute bottom-8 left-1/2 transform -translate-x-1/2 text-white text-xl font-bold bg-black/50 px-6 py-3 rounded-lg"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
// 图片弹窗功能
|
|
|
|
|
|
function openImageModal(imageSrc, caption) {
|
|
|
|
|
|
const modal = document.getElementById('imageModal');
|
|
|
|
|
|
const modalImg = document.getElementById('modalImage');
|
|
|
|
|
|
const modalCaption = document.getElementById('modalCaption');
|
|
|
|
|
|
|
|
|
|
|
|
modal.classList.remove('hidden');
|
|
|
|
|
|
modalImg.src = imageSrc;
|
|
|
|
|
|
modalCaption.textContent = caption;
|
|
|
|
|
|
|
|
|
|
|
|
// 禁止页面滚动
|
|
|
|
|
|
document.body.style.overflow = 'hidden';
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function closeImageModal() {
|
|
|
|
|
|
const modal = document.getElementById('imageModal');
|
|
|
|
|
|
modal.classList.add('hidden');
|
|
|
|
|
|
|
|
|
|
|
|
// 恢复页面滚动
|
|
|
|
|
|
document.body.style.overflow = '';
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ESC键关闭弹窗
|
|
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
|
|
|
|
if (e.key === 'Escape') {
|
|
|
|
|
|
closeImageModal();
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
