3825deb3e0
- 更新settings.local.json，移除冗余的权限设置，添加新的Playwright相关权限。 - 删除exhibition_demo_project_2025.md文档，清理不再使用的文件。 - 更新多个HTML页面，统一viewport设置，添加页面加载动画、错误处理和性能优化脚本。 - 统一使用Tailwind CSS的引入方式，提升页面加载性能。 - 增强导航组件，支持移动端菜单和返回顶部功能，改善用户体验。
856 lines
40 KiB
HTML
856 lines
40 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
|
||
<title>布局设计 - 2024长三角国际新能源汽车展</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
|
||
<!-- GSAP for animations -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||
|
||
<!-- 错误处理（需要最早加载） -->
|
||
<script src="../js/error-handler.js"></script>
|
||
<script src="../js/page-loader.js"></script>
|
||
<script src="../js/mobile-optimize.js"></script>
|
||
<script src="../js/performance-optimizer.js"></script>
|
||
|
||
<style>
|
||
:root {
|
||
--bg-primary: #0a0a0a;
|
||
--bg-secondary: #111111;
|
||
--bg-tertiary: #1a1a1a;
|
||
--accent: #646cff;
|
||
--accent-hover: #535bf2;
|
||
--text-primary: #ffffff;
|
||
--text-secondary: #a1a1aa;
|
||
--border-color: rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
* {
|
||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
background: var(--bg-primary);
|
||
color: var(--text-primary);
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* Smooth scrolling */
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
/* Glass effect */
|
||
.glass {
|
||
background: rgba(255, 255, 255, 0.02);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
|
||
/* Gradient text */
|
||
.gradient-text {
|
||
background: linear-gradient(135deg, #646cff 0%, #b364ff 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
/* Section transitions */
|
||
section {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* Horizontal scroll for Duoduo Agent */
|
||
.horizontal-container {
|
||
width: 400vw;
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
gap: 0;
|
||
will-change: transform;
|
||
backface-visibility: hidden;
|
||
-webkit-backface-visibility: hidden;
|
||
transform: translateZ(0);
|
||
-webkit-transform: translateZ(0);
|
||
}
|
||
|
||
.panel {
|
||
width: 80vw;
|
||
height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
padding: 0 4rem;
|
||
backface-visibility: hidden;
|
||
-webkit-backface-visibility: hidden;
|
||
transform: translateZ(0);
|
||
-webkit-transform: translateZ(0);
|
||
transform-style: preserve-3d;
|
||
-webkit-transform-style: preserve-3d;
|
||
}
|
||
|
||
/* Specific optimization for the last panel */
|
||
.panel:last-child {
|
||
will-change: auto !important;
|
||
transform: translateZ(0);
|
||
}
|
||
|
||
/* Duoduo section pinning optimization */
|
||
#duoduo-section {
|
||
position: relative;
|
||
overflow: hidden;
|
||
will-change: transform;
|
||
transform: translateZ(0);
|
||
transition: none !important;
|
||
}
|
||
|
||
/* Pin spacer optimization */
|
||
.pin-spacer {
|
||
overflow: visible !important;
|
||
}
|
||
|
||
|
||
|
||
/* Progress indicator */
|
||
.progress-dot {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
background: var(--text-secondary);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.progress-dot.active {
|
||
background: var(--accent);
|
||
transform: scale(1.5);
|
||
}
|
||
|
||
/* Subtle animations */
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0px); }
|
||
50% { transform: translateY(-20px); }
|
||
}
|
||
|
||
.float-animation {
|
||
animation: float 6s ease-in-out infinite;
|
||
}
|
||
|
||
/* Custom scrollbar */
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: var(--bg-secondary);
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: var(--accent);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: var(--accent-hover);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Navigation -->
|
||
<nav class="fixed top-0 w-full glass z-50 transition-all duration-300">
|
||
<!-- Content will be dynamically generated by nav-component.js -->
|
||
</nav>
|
||
|
||
<!-- Hero Section -->
|
||
<section class="relative min-h-screen flex items-center justify-center overflow-hidden">
|
||
<!-- Background Image with Overlay -->
|
||
<div class="absolute inset-0">
|
||
<img src="../data/会展策划/image/Whisk_9e8c1f44ac.jpg"
|
||
alt="Exhibition Background"
|
||
class="w-full h-full object-cover opacity-20"
|
||
loading="eager">
|
||
<div class="absolute inset-0 bg-gradient-to-br from-black/80 via-gray-900/70 to-black/80"></div>
|
||
</div>
|
||
|
||
<!-- Subtle gradient overlay -->
|
||
<div class="absolute inset-0 opacity-30">
|
||
<div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-transparent to-blue-900/20"></div>
|
||
</div>
|
||
|
||
<div class="container mx-auto px-6 relative z-10 text-center">
|
||
<h1 class="text-6xl md:text-8xl font-black mb-6">
|
||
AI布局<span class="gradient-text">设计</span>
|
||
</h1>
|
||
<p class="text-xl md:text-2xl text-gray-400 mb-12 max-w-3xl mx-auto">
|
||
基于深度学习的展会空间智能规划系统
|
||
</p>
|
||
|
||
<!-- Key benefits -->
|
||
<div class="flex flex-wrap justify-center gap-12 mt-16 mb-24">
|
||
<div class="text-center">
|
||
<div class="text-5xl font-bold gradient-text mb-2">20小时</div>
|
||
<div class="text-sm text-gray-500 uppercase tracking-wider">完整方案交付</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-5xl font-bold gradient-text mb-2">95%</div>
|
||
<div class="text-sm text-gray-500 uppercase tracking-wider">一次通过率</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-5xl font-bold gradient-text mb-2">80%</div>
|
||
<div class="text-sm text-gray-500 uppercase tracking-wider">成本节约</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scroll indicator (moved outside container) -->
|
||
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 text-gray-400 z-10">
|
||
<div class="flex flex-col items-center">
|
||
<i class="fas fa-chevron-down animate-bounce text-xl mb-2"></i>
|
||
<span class="text-xs">向下滚动</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- How AI Design Works -->
|
||
<section class="py-32 relative">
|
||
<div class="container mx-auto px-6">
|
||
<div class="mb-20">
|
||
<h2 class="text-5xl font-black mb-6">AI设计原理</h2>
|
||
<p class="text-xl text-gray-400 max-w-2xl">三步实现从需求到方案的智能转化</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
<!-- Step 1 -->
|
||
<div class="glass rounded-2xl p-8 hover:transform hover:scale-105 transition-all duration-300">
|
||
<div class="text-6xl font-black gradient-text mb-4">01</div>
|
||
<h3 class="text-2xl font-bold mb-4">需求理解</h3>
|
||
<div class="space-y-3 text-gray-400">
|
||
<p class="text-white">自然语言处理引擎</p>
|
||
<ul class="space-y-2 text-sm">
|
||
<li>• 解析展会规模、预算、风格偏好</li>
|
||
<li>• 提取空间约束和功能需求</li>
|
||
<li>• 识别品牌VI和设计语言</li>
|
||
</ul>
|
||
<div class="mt-4 pt-4 border-t border-gray-700">
|
||
<span class="text-xs text-emerald-400">处理时间: 30秒</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Step 2 -->
|
||
<div class="glass rounded-2xl p-8 hover:transform hover:scale-105 transition-all duration-300">
|
||
<div class="text-6xl font-black gradient-text mb-4">02</div>
|
||
<h3 class="text-2xl font-bold mb-4">方案生成</h3>
|
||
<div class="space-y-3 text-gray-400">
|
||
<p class="text-white">深度学习生成网络</p>
|
||
<ul class="space-y-2 text-sm">
|
||
<li>• 10万+案例知识图谱匹配</li>
|
||
<li>• 多目标优化算法求解</li>
|
||
<li>• 5-10个方案并行生成</li>
|
||
</ul>
|
||
<div class="mt-4 pt-4 border-t border-gray-700">
|
||
<span class="text-xs text-blue-400">处理时间: 15分钟</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Step 3 -->
|
||
<div class="glass rounded-2xl p-8 hover:transform hover:scale-105 transition-all duration-300">
|
||
<div class="text-6xl font-black gradient-text mb-4">03</div>
|
||
<h3 class="text-2xl font-bold mb-4">智能优化</h3>
|
||
<div class="space-y-3 text-gray-400">
|
||
<p class="text-white">规范校验与仿真</p>
|
||
<ul class="space-y-2 text-sm">
|
||
<li>• 消防/建筑规范自动校验</li>
|
||
<li>• 人流动线模拟优化</li>
|
||
<li>• 成本-效果平衡调整</li>
|
||
</ul>
|
||
<div class="mt-4 pt-4 border-t border-gray-700">
|
||
<span class="text-xs text-purple-400">处理时间: 5分钟</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Duoduo Agent System - Full Screen Horizontal Scroll -->
|
||
<section id="duoduo-section" class="relative" style="will-change: transform;">
|
||
<!-- Scroll Mode Toggle Button -->
|
||
<div class="fixed top-24 right-6 z-50">
|
||
<button id="scroll-mode-toggle" class="px-4 py-2 bg-gray-800/90 backdrop-blur hover:bg-gray-700/90 text-white rounded-lg transition-all border border-gray-600 shadow-lg">
|
||
<i class="fas fa-exchange-alt mr-2"></i>
|
||
<span class="mode-text">切换滚动模式</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="sticky top-0 h-screen overflow-hidden" style="transform: translateZ(0); backface-visibility: hidden;">
|
||
<div id="horizontal-container" class="horizontal-container">
|
||
<!-- Panel 1: Introduction -->
|
||
<div class="panel relative overflow-hidden">
|
||
<!-- Background Image with Overlay -->
|
||
<div class="absolute inset-0 z-0">
|
||
<img src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=1920&q=80"
|
||
alt="Exhibition Background"
|
||
class="w-full h-full object-cover opacity-20"
|
||
loading="lazy">
|
||
<div class="absolute inset-0 bg-gradient-to-br from-black/85 via-gray-900/75 to-black/85"></div>
|
||
</div>
|
||
|
||
<div class="text-center max-w-4xl relative z-10">
|
||
<h2 class="text-6xl md:text-8xl font-black mb-8">
|
||
Duoduo <span class="gradient-text">Agent</span>
|
||
</h2>
|
||
<p class="text-2xl text-gray-300 mb-6">
|
||
专业级AI布局设计系统
|
||
</p>
|
||
<p class="text-lg text-gray-400 max-w-2xl mx-auto mb-8">
|
||
基于10万+展会设计案例训练，融合行业最佳实践
|
||
</p>
|
||
<div class="flex justify-center gap-8 mb-12 text-sm">
|
||
<div class="text-center">
|
||
<div class="text-3xl font-bold text-emerald-400">95%</div>
|
||
<div class="text-gray-500">设计准确率</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-3xl font-bold text-blue-400">20h</div>
|
||
<div class="text-gray-500">交付时间</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-3xl font-bold text-purple-400">80%</div>
|
||
<div class="text-gray-500">成本降低</div>
|
||
</div>
|
||
</div>
|
||
<button class="px-8 py-4 bg-gradient-to-r from-emerald-500 to-blue-500 hover:from-emerald-600 hover:to-blue-600 text-white font-bold rounded-full transition-colors shadow-lg">
|
||
<i class="fas fa-play mr-3"></i>开启智能设计之旅
|
||
</button>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<!-- Panel 2: Intelligent Space Analysis -->
|
||
<div class="panel bg-gradient-to-br from-purple-900/10 to-black">
|
||
<div class="flex items-center gap-12 max-w-7xl mx-auto w-full">
|
||
<div class="flex-1">
|
||
<div class="mb-4 text-sm text-emerald-400 uppercase tracking-wider">阶段 01 / 智能空间分析</div>
|
||
<h3 class="text-5xl font-black mb-6">空间规划引擎</h3>
|
||
<p class="text-xl text-gray-400 mb-8">基于深度学习的智能布局算法</p>
|
||
<div class="text-gray-300 mb-8 space-y-3">
|
||
<p class="font-semibold text-white mb-4">🧠 AI如何理解您的空间需求？</p>
|
||
<p>• <span class="text-emerald-400">需求解析：</span>自然语言处理技术理解设计要求</p>
|
||
<p>• <span class="text-emerald-400">空间建模：</span>3D空间识别与约束条件自动提取</p>
|
||
<p>• <span class="text-emerald-400">规范校验：</span>实时对标国家消防、建筑规范</p>
|
||
<p>• <span class="text-emerald-400">优化算法：</span>基于遗传算法的多目标优化</p>
|
||
</div>
|
||
<div class="space-y-4">
|
||
<div class="flex items-center gap-4">
|
||
<div class="w-2 h-2 bg-accent rounded-full"></div>
|
||
<span class="text-gray-400">AutoCAD 2024</span>
|
||
</div>
|
||
<div class="flex items-center gap-4">
|
||
<div class="w-2 h-2 bg-accent rounded-full"></div>
|
||
<span class="text-gray-400">精度: 0.1mm</span>
|
||
</div>
|
||
<div class="flex items-center gap-4">
|
||
<div class="w-2 h-2 bg-accent rounded-full"></div>
|
||
<span class="text-gray-400">用时: 2小时</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-1 max-w-2xl">
|
||
<img src="../data/会展策划/image/Whisk_dcc81c5212.jpg"
|
||
alt="CAD设计图"
|
||
class="w-full rounded-2xl shadow-2xl">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Panel 3: Design Generation -->
|
||
<div class="panel bg-gradient-to-br from-blue-900/10 to-black">
|
||
<div class="flex items-center gap-12 max-w-7xl mx-auto w-full">
|
||
<div class="flex-1">
|
||
<div class="mb-4 text-sm text-blue-400 uppercase tracking-wider">阶段 02 / 方案生成</div>
|
||
<h3 class="text-5xl font-black mb-6">智能设计生成</h3>
|
||
<p class="text-xl text-gray-400 mb-8">多方案并行生成，AI优选最佳方案</p>
|
||
<div class="text-gray-300 mb-8 space-y-3">
|
||
<p class="font-semibold text-white mb-4">⚡ 提效核心技术</p>
|
||
<p>• <span class="text-blue-400">并行计算：</span>同时生成5-10个设计方案</p>
|
||
<p>• <span class="text-blue-400">风格迁移：</span>学习品牌VI，保持设计一致性</p>
|
||
<p>• <span class="text-blue-400">成本优化：</span>实时预算控制，材料智能选择</p>
|
||
<p>• <span class="text-blue-400">人流模拟：</span>基于蒙特卡洛的人流仿真</p>
|
||
</div>
|
||
<div class="bg-gray-800/50 rounded-lg p-4">
|
||
<div class="text-sm text-gray-400 mb-2">效率提升</div>
|
||
<div class="text-2xl font-bold text-white">传统2周 → AI 4小时</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-1 max-w-2xl">
|
||
<img src="../data/会展策划/image/Whisk_e8f83d1a37.jpg"
|
||
alt="概念设计图"
|
||
class="w-full rounded-2xl shadow-2xl">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Panel 4: 3D Visualization -->
|
||
<div class="panel bg-gradient-to-br from-cyan-900/10 to-black">
|
||
<div class="flex items-center gap-12 max-w-7xl mx-auto w-full">
|
||
<div class="flex-1">
|
||
<div class="mb-4 text-sm text-cyan-400 uppercase tracking-wider">阶段 03 / 三维可视化</div>
|
||
<h3 class="text-5xl font-black mb-6">数字孪生建模</h3>
|
||
<p class="text-xl text-gray-400 mb-8">1:1还原真实场景，所见即所得</p>
|
||
<div class="text-gray-300 mb-8 space-y-3">
|
||
<p class="font-semibold text-white mb-4">🎯 设计可靠性保障</p>
|
||
<p>• <span class="text-cyan-400">物理仿真：</span>光照、材质、物理碰撞模拟</p>
|
||
<p>• <span class="text-cyan-400">VR预览：</span>沉浸式体验，提前发现问题</p>
|
||
<p>• <span class="text-cyan-400">细节优化：</span>AI自动优化视觉焦点</p>
|
||
<p>• <span class="text-cyan-400">材料映射：</span>真实材料库，精准还原效果</p>
|
||
</div>
|
||
<div class="bg-gray-800/50 rounded-lg p-4">
|
||
<div class="text-sm text-gray-400 mb-2">渲染精度</div>
|
||
<div class="text-2xl font-bold text-white">8K超高清 + 实时光追</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-1 max-w-2xl">
|
||
<img src="../data/会展策划/image/Whisk_be64a7b61f.jpg"
|
||
alt="3D建模"
|
||
class="w-full rounded-2xl shadow-2xl">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Panel 5: Complete Solution -->
|
||
<div class="panel bg-gradient-to-br from-emerald-900/10 to-black" style="transform: translateZ(0);">
|
||
<div class="flex items-center gap-12 max-w-7xl mx-auto w-full">
|
||
<div class="flex-1">
|
||
<div class="mb-4 text-sm text-emerald-400 uppercase tracking-wider">完整交付 / 一站式解决方案</div>
|
||
<h3 class="text-5xl font-black mb-6">智能设计成果</h3>
|
||
<p class="text-xl text-gray-400 mb-8">从创意到施工的完整设计链路</p>
|
||
<div class="text-gray-300 mb-6 space-y-3">
|
||
<p class="font-semibold text-white mb-4">✅ 交付内容清单</p>
|
||
<p>• <span class="text-emerald-400">设计图纸：</span>CAD施工图 + 3D模型文件</p>
|
||
<p>• <span class="text-emerald-400">物料清单：</span>精确到螺丝的采购清单</p>
|
||
<p>• <span class="text-emerald-400">施工指南：</span>分步骤施工说明书</p>
|
||
<p>• <span class="text-emerald-400">预算报表：</span>透明化成本明细</p>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-4 mt-8">
|
||
<div class="bg-gradient-to-r from-emerald-500/20 to-transparent p-4 rounded-lg">
|
||
<div class="text-3xl font-bold text-emerald-400">100%</div>
|
||
<div class="text-sm text-gray-400">施工可执行率</div>
|
||
</div>
|
||
<div class="bg-gradient-to-r from-blue-500/20 to-transparent p-4 rounded-lg">
|
||
<div class="text-3xl font-bold text-blue-400">0</div>
|
||
<div class="text-sm text-gray-400">设计返工次数</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-1 max-w-2xl">
|
||
<img src="../data/会展策划/image/Whisk_c478fe089d.jpg"
|
||
alt="最终方案"
|
||
class="w-full rounded-2xl shadow-2xl">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Progress Indicator -->
|
||
<div class="fixed bottom-10 left-1/2 transform -translate-x-1/2 z-50 flex gap-4">
|
||
<div class="progress-dot active" data-panel="0"></div>
|
||
<div class="progress-dot" data-panel="1"></div>
|
||
<div class="progress-dot" data-panel="2"></div>
|
||
<div class="progress-dot" data-panel="3"></div>
|
||
<div class="progress-dot" data-panel="4"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Design Tools & Technology -->
|
||
<section class="py-32 relative">
|
||
<div class="container mx-auto px-6">
|
||
<div class="mb-20">
|
||
<h2 class="text-5xl font-black mb-6">设计工具链</h2>
|
||
<p class="text-xl text-gray-400 max-w-2xl">专业级设计软件深度集成，全流程自动化</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||
<div class="glass rounded-2xl p-10">
|
||
<div class="text-4xl mb-6">📐</div>
|
||
<h3 class="text-2xl font-bold mb-4">CAD工程制图</h3>
|
||
<ul class="space-y-3 text-gray-400">
|
||
<li class="flex items-center gap-3">
|
||
<i class="fas fa-check text-accent"></i>
|
||
<span>AutoCAD 2024原生支持</span>
|
||
</li>
|
||
<li class="flex items-center gap-3">
|
||
<i class="fas fa-check text-accent"></i>
|
||
<span>DWG/DXF标准格式输出</span>
|
||
</li>
|
||
<li class="flex items-center gap-3">
|
||
<i class="fas fa-check text-accent"></i>
|
||
<span>施工图自动标注</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="glass rounded-2xl p-10">
|
||
<div class="text-4xl mb-6">🎨</div>
|
||
<h3 class="text-2xl font-bold mb-4">3D建模渲染</h3>
|
||
<ul class="space-y-3 text-gray-400">
|
||
<li class="flex items-center gap-3">
|
||
<i class="fas fa-check text-accent"></i>
|
||
<span>3DS Max + V-Ray引擎</span>
|
||
</li>
|
||
<li class="flex items-center gap-3">
|
||
<i class="fas fa-check text-accent"></i>
|
||
<span>PBR材质库（5000+）</span>
|
||
</li>
|
||
<li class="flex items-center gap-3">
|
||
<i class="fas fa-check text-accent"></i>
|
||
<span>GPU加速实时预览</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="glass rounded-2xl p-10">
|
||
<div class="text-4xl mb-6">🔄</div>
|
||
<h3 class="text-2xl font-bold mb-4">BIM协同设计</h3>
|
||
<ul class="space-y-3 text-gray-400">
|
||
<li class="flex items-center gap-3">
|
||
<i class="fas fa-check text-accent"></i>
|
||
<span>Revit模型同步</span>
|
||
</li>
|
||
<li class="flex items-center gap-3">
|
||
<i class="fas fa-check text-accent"></i>
|
||
<span>多专业协同碰撞检测</span>
|
||
</li>
|
||
<li class="flex items-center gap-3">
|
||
<i class="fas fa-check text-accent"></i>
|
||
<span>IFC标准数据交换</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="glass rounded-2xl p-10">
|
||
<div class="text-4xl mb-6">📊</div>
|
||
<h3 class="text-2xl font-bold mb-4">智能优化算法</h3>
|
||
<ul class="space-y-3 text-gray-400">
|
||
<li class="flex items-center gap-3">
|
||
<i class="fas fa-check text-accent"></i>
|
||
<span>空间利用率优化</span>
|
||
</li>
|
||
<li class="flex items-center gap-3">
|
||
<i class="fas fa-check text-accent"></i>
|
||
<span>人流动线模拟</span>
|
||
</li>
|
||
<li class="flex items-center gap-3">
|
||
<i class="fas fa-check text-accent"></i>
|
||
<span>成本-效果平衡算法</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Service Teams -->
|
||
<!-- Why Choose Our AI -->
|
||
<section class="py-32 relative">
|
||
<div class="container mx-auto px-6">
|
||
<div class="mb-20">
|
||
<h2 class="text-5xl font-black mb-6">为什么选择我们</h2>
|
||
<p class="text-xl text-gray-400 max-w-2xl">经过验证的企业级AI设计解决方案</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
<div class="glass rounded-xl p-6">
|
||
<div class="text-3xl mb-4">🎯</div>
|
||
<h3 class="text-lg font-bold mb-2">精准度高</h3>
|
||
<p class="text-sm text-gray-400">基于实际项目反馈持续优化，设计精准度达95%以上</p>
|
||
</div>
|
||
|
||
<div class="glass rounded-xl p-6">
|
||
<div class="text-3xl mb-4">⚡</div>
|
||
<h3 class="text-lg font-bold mb-2">快速迭代</h3>
|
||
<p class="text-sm text-gray-400">实时修改，秒级响应，支持无限次方案调整</p>
|
||
</div>
|
||
|
||
<div class="glass rounded-xl p-6">
|
||
<div class="text-3xl mb-4">💰</div>
|
||
<h3 class="text-lg font-bold mb-2">成本可控</h3>
|
||
<p class="text-sm text-gray-400">智能材料选择，预算实时监控，降低80%设计成本</p>
|
||
</div>
|
||
|
||
<div class="glass rounded-xl p-6">
|
||
<div class="text-3xl mb-4">🔒</div>
|
||
<h3 class="text-lg font-bold mb-2">合规保障</h3>
|
||
<p class="text-sm text-gray-400">自动对标国家标准，100%符合消防建筑规范</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Success Cases -->
|
||
<div class="mt-20">
|
||
<h3 class="text-3xl font-bold mb-8">成功案例</h3>
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||
<div class="text-center">
|
||
<div class="text-4xl font-bold gradient-text">500+</div>
|
||
<p class="text-sm text-gray-500 mt-2">展会项目</p>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-4xl font-bold gradient-text">50+</div>
|
||
<p class="text-sm text-gray-500 mt-2">世界500强</p>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-4xl font-bold gradient-text">20+</div>
|
||
<p class="text-sm text-gray-500 mt-2">国家级展会</p>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-4xl font-bold gradient-text">98%</div>
|
||
<p class="text-sm text-gray-500 mt-2">客户满意度</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA Section -->
|
||
<section class="py-32 relative">
|
||
<div class="container mx-auto px-6 text-center">
|
||
<h2 class="text-5xl font-black mb-8">开始您的AI设计之旅</h2>
|
||
<p class="text-xl text-gray-400 mb-12 max-w-2xl mx-auto">
|
||
输入需求，20小时后获得完整的展会布局方案
|
||
</p>
|
||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<button class="inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-emerald-500 to-blue-500 hover:from-emerald-600 hover:to-blue-600 text-white font-semibold rounded-xl transition-all duration-300">
|
||
<i class="fas fa-magic"></i>
|
||
免费体验AI设计
|
||
</button>
|
||
<a href="marketing.html" class="inline-flex items-center gap-3 px-8 py-4 bg-gray-800 hover:bg-gray-700 text-white font-semibold rounded-xl transition-all duration-300">
|
||
了解营销推广
|
||
<i class="fas fa-arrow-right"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="py-12 border-t border-gray-800">
|
||
<div class="container mx-auto px-6 text-center text-gray-500">
|
||
<p>© 2024 长三角国际新能源汽车与智能交通产业博览会. All rights reserved.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Back to top button -->
|
||
<button id="backToTop" class="fixed bottom-8 right-8 w-12 h-12 bg-accent hover:bg-accent-hover text-white rounded-full flex items-center justify-center opacity-0 invisible transition-all duration-300 z-50">
|
||
<i class="fas fa-arrow-up"></i>
|
||
</button>
|
||
|
||
<!-- Scripts -->
|
||
<script src="../js/nav-component.js"></script>
|
||
<script src="../js/back-to-top.js"></script>
|
||
|
||
<script>
|
||
// Register GSAP plugins
|
||
gsap.registerPlugin(ScrollTrigger);
|
||
|
||
// Scroll mode management
|
||
let currentScrollMode = 'gsap'; // 'gsap' or 'css'
|
||
let scrollTriggerInstance = null;
|
||
|
||
// Initialize horizontal scroll
|
||
function initGSAPScroll() {
|
||
const horizontalSections = gsap.utils.toArray('#horizontal-container .panel');
|
||
const horizontalContainer = document.querySelector('#horizontal-container');
|
||
|
||
// Clear any existing ScrollTriggers
|
||
ScrollTrigger.getAll().forEach(st => st.kill());
|
||
|
||
// Create new ScrollTrigger
|
||
scrollTriggerInstance = ScrollTrigger.create({
|
||
trigger: "#duoduo-section",
|
||
start: "top top",
|
||
end: "+=3000",
|
||
pin: true,
|
||
scrub: 1,
|
||
animation: gsap.to(horizontalSections, {
|
||
xPercent: -100 * (horizontalSections.length - 1),
|
||
ease: "none"
|
||
}),
|
||
onUpdate: self => {
|
||
const progress = self.progress;
|
||
const currentPanel = Math.round(progress * (horizontalSections.length - 1));
|
||
updateProgressDots(currentPanel);
|
||
}
|
||
});
|
||
}
|
||
|
||
// CSS-only scroll mode
|
||
function initCSSScroll() {
|
||
// Kill GSAP ScrollTrigger
|
||
if (scrollTriggerInstance) {
|
||
scrollTriggerInstance.kill();
|
||
scrollTriggerInstance = null;
|
||
}
|
||
ScrollTrigger.getAll().forEach(st => st.kill());
|
||
|
||
// Reset transforms
|
||
const horizontalSections = gsap.utils.toArray('#horizontal-container .panel');
|
||
const horizontalContainer = document.querySelector('#horizontal-container');
|
||
|
||
gsap.set(horizontalSections, { xPercent: 0, clearProps: "all" });
|
||
gsap.set(horizontalContainer, { x: 0, clearProps: "all" });
|
||
|
||
// Apply CSS scroll-snap
|
||
horizontalContainer.style.scrollSnapType = 'x mandatory';
|
||
horizontalContainer.style.overflowX = 'auto';
|
||
horizontalContainer.style.display = 'flex';
|
||
|
||
horizontalSections.forEach(section => {
|
||
section.style.scrollSnapAlign = 'center';
|
||
section.style.flexShrink = '0';
|
||
});
|
||
|
||
// Update container styles for CSS scrolling
|
||
const duoduoSection = document.querySelector('#duoduo-section');
|
||
duoduoSection.style.height = 'auto';
|
||
duoduoSection.style.position = 'relative';
|
||
|
||
const stickyContainer = duoduoSection.querySelector('.sticky');
|
||
stickyContainer.style.position = 'relative';
|
||
stickyContainer.style.overflow = 'auto';
|
||
}
|
||
|
||
// Update progress dots
|
||
function updateProgressDots(index) {
|
||
document.querySelectorAll('.progress-dot').forEach((dot, i) => {
|
||
if (i === index) {
|
||
dot.classList.add('active');
|
||
} else {
|
||
dot.classList.remove('active');
|
||
}
|
||
});
|
||
}
|
||
|
||
// Toggle scroll mode
|
||
const toggleButton = document.getElementById('scroll-mode-toggle');
|
||
if (toggleButton) {
|
||
toggleButton.addEventListener('click', () => {
|
||
if (currentScrollMode === 'gsap') {
|
||
currentScrollMode = 'css';
|
||
initCSSScroll();
|
||
toggleButton.querySelector('.mode-text').textContent = '切换到GSAP模式';
|
||
console.log('Switched to CSS scroll mode');
|
||
} else {
|
||
currentScrollMode = 'gsap';
|
||
initGSAPScroll();
|
||
toggleButton.querySelector('.mode-text').textContent = '切换到CSS模式';
|
||
console.log('Switched to GSAP scroll mode');
|
||
}
|
||
});
|
||
}
|
||
|
||
// Initialize with GSAP mode
|
||
initGSAPScroll();
|
||
|
||
// Start button functionality
|
||
const startButton = document.querySelector('.panel button');
|
||
if (startButton) {
|
||
startButton.addEventListener('click', () => {
|
||
// Scroll to second panel
|
||
const duoduoSection = document.querySelector('#duoduo-section');
|
||
const scrollDistance = duoduoSection.offsetTop + 600; // Adjust to reach second panel
|
||
|
||
gsap.to(window, {
|
||
scrollTo: {
|
||
y: scrollDistance,
|
||
autoKill: false
|
||
},
|
||
duration: 1.5,
|
||
ease: "power2.inOut"
|
||
});
|
||
});
|
||
}
|
||
|
||
// Progress dots click handler (Manual navigation)
|
||
document.querySelectorAll('.progress-dot').forEach((dot, index) => {
|
||
dot.addEventListener('click', () => {
|
||
// Use smooth scroll to section instead of GSAP
|
||
const targetSection = horizontalSections[index];
|
||
if (targetSection) {
|
||
targetSection.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'center',
|
||
inline: 'center'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// Debug mode - Press 'D' to toggle
|
||
let debugMode = false;
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'd' || e.key === 'D') {
|
||
debugMode = !debugMode;
|
||
if (debugMode) {
|
||
console.log('Debug Mode ON - Check console for ScrollTrigger info');
|
||
ScrollTrigger.getAll().forEach(st => {
|
||
console.log('ScrollTrigger:', {
|
||
trigger: st.trigger,
|
||
start: st.start,
|
||
end: st.end,
|
||
progress: st.progress,
|
||
isActive: st.isActive
|
||
});
|
||
});
|
||
} else {
|
||
console.log('Debug Mode OFF');
|
||
}
|
||
}
|
||
});
|
||
|
||
// Fade in animations for sections
|
||
gsap.utils.toArray('section').forEach(section => {
|
||
gsap.from(section, {
|
||
opacity: 0,
|
||
y: 50,
|
||
duration: 1,
|
||
scrollTrigger: {
|
||
trigger: section,
|
||
start: "top 80%",
|
||
end: "bottom 20%",
|
||
toggleActions: "play none none reverse"
|
||
}
|
||
});
|
||
});
|
||
|
||
// Back to top button
|
||
const backToTopButton = document.getElementById('backToTop');
|
||
|
||
window.addEventListener('scroll', () => {
|
||
if (window.scrollY > 500) {
|
||
backToTopButton.style.opacity = '1';
|
||
backToTopButton.style.visibility = 'visible';
|
||
} else {
|
||
backToTopButton.style.opacity = '0';
|
||
backToTopButton.style.visibility = 'hidden';
|
||
}
|
||
});
|
||
|
||
backToTopButton.addEventListener('click', () => {
|
||
window.scrollTo({
|
||
top: 0,
|
||
behavior: 'smooth'
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |