feat: 优化会展网站首页用户体验和视觉效果
主要改进: - 修复星形图标可见性问题，改为黄色高对比度显示 - 移除'立即参展'按钮，清理冗余CTA元素 - 修正背景图片路径并优化透明度(opacity-10) - 为所有容器区域添加hover提示文字 - 删除'立即参与，共创绿色出行未来'整个CTA区块 - 优化页面加载器和图片错误处理 - 修复展会信息卡片文字对比度问题 - 增强多层背景遮罩效果 影响文件: - web_frontend/web_result/index.html - web_frontend/web_result/css/animations.css - web_frontend/web_result/js/main.js - 新增多个页面和样式文件 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yep_Q
@@ -4,11 +4,50 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>展会介绍 - 2024长三角国际新能源汽车展</title>
|
||||
|
||||
<!-- 样式表 -->
|
||||
<link rel="stylesheet" href="../css/animations.css">
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- 字体 -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Font Awesome 图标 -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
* {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
/* 页面加载动画 */
|
||||
.page-enter {
|
||||
animation: pageEnter 0.8s ease-out;
|
||||
}
|
||||
|
||||
@keyframes pageEnter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 玻璃态效果 */
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
|
||||
}
|
||||
.nav-link {
|
||||
position: relative;
|
||||
@@ -70,30 +109,72 @@
|
||||
<nav class="fixed top-0 w-full bg-white shadow-md z-50">
|
||||
<div class="container mx-auto px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-8 h-8 mr-3 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z"/>
|
||||
</svg>
|
||||
<div class="flex items-center group">
|
||||
<div class="relative mr-3">
|
||||
<i class="fas fa-car-side text-2xl text-purple-600 group-hover:scale-110 transition-transform"></i>
|
||||
<i class="fas fa-bolt text-xs text-green-500 absolute -top-1 -right-1 animate-pulse"></i>
|
||||
</div>
|
||||
<span class="text-xl font-bold text-gray-800">Green Mobility 2024</span>
|
||||
</div>
|
||||
<div class="hidden md:flex space-x-8">
|
||||
<a href="../index.html" class="nav-link text-gray-700 hover:text-purple-600">首页</a>
|
||||
<a href="overview.html" class="nav-link text-gray-700 hover:text-purple-600">策划概述</a>
|
||||
<a href="exhibition.html" class="nav-link active text-gray-700 hover:text-purple-600">展会介绍</a>
|
||||
<a href="marketing.html" class="nav-link text-gray-700 hover:text-purple-600">营销方案</a>
|
||||
<a href="operation.html" class="nav-link text-gray-700 hover:text-purple-600">现场运营</a>
|
||||
<a href="budget.html" class="nav-link text-gray-700 hover:text-purple-600">预算分析</a>
|
||||
<a href="risk.html" class="nav-link text-gray-700 hover:text-purple-600">风险评估</a>
|
||||
<a href="../index.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||||
<i class="fas fa-home mr-1"></i>首页
|
||||
</a>
|
||||
<a href="overview.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||||
<i class="fas fa-file-alt mr-1"></i>策划概述
|
||||
</a>
|
||||
<a href="exhibition.html" class="nav-link active text-purple-600 font-semibold">
|
||||
<i class="fas fa-building mr-1"></i>展会介绍
|
||||
</a>
|
||||
<a href="marketing.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||||
<i class="fas fa-bullhorn mr-1"></i>营销方案
|
||||
</a>
|
||||
<a href="operation.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||||
<i class="fas fa-cogs mr-1"></i>现场运营
|
||||
</a>
|
||||
<a href="budget.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||||
<i class="fas fa-calculator mr-1"></i>预算分析
|
||||
</a>
|
||||
<a href="risk.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||||
<i class="fas fa-shield-alt mr-1"></i>风险评估
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Page Header -->
|
||||
<section class="bg-gradient-to-r from-blue-600 to-green-600 text-white pt-24 pb-12">
|
||||
<div class="container mx-auto px-6">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4">展会介绍与预期效果</h1>
|
||||
<p class="text-xl opacity-90">深入了解展会规模、展品范围、参展商与观众构成</p>
|
||||
<section class="relative pt-24 pb-16 overflow-hidden" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
|
||||
<!-- 背景装饰 -->
|
||||
<div class="absolute inset-0">
|
||||
<div class="absolute top-0 left-0 w-96 h-96 bg-white/10 rounded-full filter blur-3xl animate-pulse"></div>
|
||||
<div class="absolute bottom-0 right-0 w-96 h-96 bg-purple-300/20 rounded-full filter blur-3xl animate-pulse animation-delay-2000"></div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-6 relative z-10 page-enter">
|
||||
<div class="flex items-center text-white/80 mb-4">
|
||||
<a href="../index.html" class="hover:text-white transition">首页</a>
|
||||
<i class="fas fa-chevron-right mx-2 text-xs"></i>
|
||||
<span>展会介绍</span>
|
||||
</div>
|
||||
<h1 class="text-4xl md:text-6xl font-bold text-white mb-4 animate-fadeInUp">
|
||||
展会介绍与预期效果
|
||||
</h1>
|
||||
<p class="text-xl text-white/90 animate-fadeInUp animation-delay-200">
|
||||
<i class="fas fa-chart-line mr-2"></i>
|
||||
深入了解展会规模、展品范围、参展商与观众构成
|
||||
</p>
|
||||
<div class="mt-8 flex flex-wrap gap-4 animate-fadeInUp animation-delay-400">
|
||||
<div class="bg-white/20 backdrop-blur px-4 py-2 rounded-full text-sm">
|
||||
<i class="fas fa-calendar mr-2"></i>2024年9月12-15日
|
||||
</div>
|
||||
<div class="bg-white/20 backdrop-blur px-4 py-2 rounded-full text-sm">
|
||||
<i class="fas fa-map-marker-alt mr-2"></i>国家会展中心（上海）
|
||||
</div>
|
||||
<div class="bg-white/20 backdrop-blur px-4 py-2 rounded-full text-sm">
|
||||
<i class="fas fa-users mr-2"></i>预计10万+参观者
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -108,29 +189,23 @@
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="text-center scale-in">
|
||||
<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-10 h-10 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<div class="text-center group animate-fadeInUp animation-delay-200">
|
||||
<div class="w-20 h-20 bg-gradient-to-br from-blue-100 to-blue-200 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform shadow-lg">
|
||||
<i class="fas fa-award text-3xl text-blue-600"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">专业化</h3>
|
||||
<p class="text-gray-600">聚焦新能源汽车全产业链，提供专业展示交流平台</p>
|
||||
</div>
|
||||
<div class="text-center scale-in" style="animation-delay: 0.1s">
|
||||
<div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-10 h-10 text-green-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-2a2 2 0 00-2-2 2 2 0 01-2-2 2 2 0 00-1.668-1.973z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<div class="text-center group animate-fadeInUp animation-delay-400">
|
||||
<div class="w-20 h-20 bg-gradient-to-br from-green-100 to-green-200 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform shadow-lg">
|
||||
<i class="fas fa-globe-asia text-3xl text-green-600"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">国际化</h3>
|
||||
<p class="text-gray-600">汇聚全球领先企业，促进国际技术交流与合作</p>
|
||||
</div>
|
||||
<div class="text-center scale-in" style="animation-delay: 0.2s">
|
||||
<div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-10 h-10 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
||||
</svg>
|
||||
<div class="text-center group animate-fadeInUp animation-delay-600">
|
||||
<div class="w-20 h-20 bg-gradient-to-br from-purple-100 to-purple-200 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform shadow-lg">
|
||||
<i class="fas fa-star text-3xl text-purple-600"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">品质化</h3>
|
||||
<p class="text-gray-600">高端展会服务，打造行业标杆展会品牌</p>
|
||||
@@ -140,36 +215,38 @@
|
||||
</section>
|
||||
|
||||
<!-- Venue Information -->
|
||||
<section class="py-16 bg-gray-50">
|
||||
<div class="container mx-auto px-6">
|
||||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">展会场地</h2>
|
||||
<section class="py-16 bg-gray-50 relative overflow-hidden">
|
||||
<!-- 背景图片 -->
|
||||
<div class="absolute inset-0 opacity-5" style="background-image: url('../../data/会展策划/image/博览会.jpg'); background-size: cover; background-position: center;"></div>
|
||||
|
||||
<div class="container mx-auto px-6 relative z-10">
|
||||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12 animate-fadeInUp">
|
||||
<i class="fas fa-map-marked-alt mr-2 text-purple-600"></i>
|
||||
展会场地
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
<div class="map-container rounded-2xl p-8 text-white relative">
|
||||
<h3 class="text-2xl font-bold mb-4">国家会展中心（上海）</h3>
|
||||
<div class="map-container rounded-2xl p-8 text-white relative glass-card hover:scale-[1.02] transition-all duration-300">
|
||||
<h3 class="text-2xl font-bold mb-4 animate-fadeInLeft">
|
||||
<i class="fas fa-building mr-2"></i>
|
||||
国家会展中心（上海）
|
||||
</h3>
|
||||
<div class="space-y-3 relative z-10">
|
||||
<div class="flex items-start">
|
||||
<svg class="w-6 h-6 mr-3 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<div class="flex items-start animate-fadeInLeft animation-delay-200">
|
||||
<i class="fas fa-map-marker-alt text-xl mr-3 flex-shrink-0 mt-1 animate-pulse"></i>
|
||||
<div>
|
||||
<p class="font-semibold">详细地址</p>
|
||||
<p class="opacity-90">上海市青浦区崧泽大道333号</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<svg class="w-6 h-6 mr-3 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/>
|
||||
<path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z"/>
|
||||
</svg>
|
||||
<div class="flex items-start animate-fadeInLeft animation-delay-400">
|
||||
<i class="fas fa-subway text-xl mr-3 flex-shrink-0 mt-1"></i>
|
||||
<div>
|
||||
<p class="font-semibold">交通便利</p>
|
||||
<p class="opacity-90">地铁2号线直达，多条公交线路，充足停车位</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<svg class="w-6 h-6 mr-3 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
|
||||
</svg>
|
||||
<div class="flex items-start animate-fadeInLeft animation-delay-600">
|
||||
<i class="fas fa-expand-arrows-alt text-xl mr-3 flex-shrink-0 mt-1"></i>
|
||||
<div>
|
||||
<p class="font-semibold">场馆规模</p>
|
||||
<p class="opacity-90">展览面积50万平方米，亚洲最大会展综合体</p>
|
||||
@@ -178,39 +255,42 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl shadow-lg p-8">
|
||||
<h3 class="text-2xl font-bold text-gray-800 mb-6">场馆优势</h3>
|
||||
<div class="bg-white rounded-2xl shadow-lg p-8 glass-card hover:scale-[1.02] transition-all duration-300">
|
||||
<h3 class="text-2xl font-bold text-gray-800 mb-6 animate-fadeInRight">
|
||||
<i class="fas fa-trophy mr-2 text-yellow-500"></i>
|
||||
场馆优势
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center p-4 bg-blue-50 rounded-lg">
|
||||
<div class="w-12 h-12 bg-blue-600 text-white rounded-lg flex items-center justify-center mr-4">
|
||||
01
|
||||
<div class="flex items-center p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors animate-fadeInRight animation-delay-200">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
|
||||
<i class="fas fa-medal text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold">世界级展馆设施</h4>
|
||||
<p class="text-sm text-gray-600">配备先进的展览设施和智能化管理系统</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center p-4 bg-green-50 rounded-lg">
|
||||
<div class="w-12 h-12 bg-green-600 text-white rounded-lg flex items-center justify-center mr-4">
|
||||
02
|
||||
<div class="flex items-center p-4 bg-green-50 rounded-lg hover:bg-green-100 transition-colors animate-fadeInRight animation-delay-400">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
|
||||
<i class="fas fa-concierge-bell text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold">完善的配套服务</h4>
|
||||
<p class="text-sm text-gray-600">酒店、餐饮、商务中心一应俱全</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center p-4 bg-purple-50 rounded-lg">
|
||||
<div class="w-12 h-12 bg-purple-600 text-white rounded-lg flex items-center justify-center mr-4">
|
||||
03
|
||||
<div class="flex items-center p-4 bg-purple-50 rounded-lg hover:bg-purple-100 transition-colors animate-fadeInRight animation-delay-600">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
|
||||
<i class="fas fa-hand-holding-heart text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold">丰富的办展经验</h4>
|
||||
<p class="text-sm text-gray-600">成功举办进博会等大型国际展会</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center p-4 bg-orange-50 rounded-lg">
|
||||
<div class="w-12 h-12 bg-orange-600 text-white rounded-lg flex items-center justify-center mr-4">
|
||||
04
|
||||
<div class="flex items-center p-4 bg-orange-50 rounded-lg hover:bg-orange-100 transition-colors animate-fadeInRight animation-delay-800">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
|
||||
<i class="fas fa-leaf text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold">绿色环保理念</h4>
|
||||
@@ -224,18 +304,24 @@
|
||||
</section>
|
||||
|
||||
<!-- Exhibition Areas Detail -->
|
||||
<section class="py-16 bg-white">
|
||||
<section class="py-16 bg-white relative">
|
||||
<div class="container mx-auto px-6">
|
||||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">展品范围</h2>
|
||||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12 animate-fadeInUp">
|
||||
<i class="fas fa-th-large mr-2 text-blue-600"></i>
|
||||
展品范围
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<!-- 整车展区 -->
|
||||
<div class="exhibition-card bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6">
|
||||
<div class="exhibition-card bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6 animate-fadeInUp animation-delay-200">
|
||||
<div class="relative overflow-hidden rounded-xl mb-4 h-32 bg-gradient-to-r from-blue-400 to-blue-600">
|
||||
<img src="../../data/会展策划/image/3.小米汽车.jpg" alt="整车展示" class="w-full h-full object-cover opacity-60">
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<i class="fas fa-car-side text-5xl text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 bg-blue-600 text-white rounded-lg flex items-center justify-center mr-4">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/>
|
||||
<path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z"/>
|
||||
</svg>
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
|
||||
<i class="fas fa-car text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold">整车展区</h3>
|
||||
</div>
|
||||
@@ -263,12 +349,16 @@
|
||||
</div>
|
||||
|
||||
<!-- 核心零部件展区 -->
|
||||
<div class="exhibition-card bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6">
|
||||
<div class="exhibition-card bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6 animate-fadeInUp animation-delay-400">
|
||||
<div class="relative overflow-hidden rounded-xl mb-4 h-32 bg-gradient-to-r from-green-400 to-green-600">
|
||||
<img src="../../data/会展策划/image/Whisk_8236005bb2.jpg" alt="核心零部件" class="w-full h-full object-cover opacity-60">
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<i class="fas fa-battery-full text-5xl text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 bg-green-600 text-white rounded-lg flex items-center justify-center mr-4">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
|
||||
<i class="fas fa-bolt text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold">核心零部件展区</h3>
|
||||
</div>
|
||||
@@ -296,12 +386,16 @@
|
||||
</div>
|
||||
|
||||
<!-- 智能交通展区 -->
|
||||
<div class="exhibition-card bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6">
|
||||
<div class="exhibition-card bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6 animate-fadeInUp animation-delay-600">
|
||||
<div class="relative overflow-hidden rounded-xl mb-4 h-32 bg-gradient-to-r from-purple-400 to-purple-600">
|
||||
<img src="../../data/会展策划/image/Whisk_5c4b912ea7.jpg" alt="智能交通" class="w-full h-full object-cover opacity-60">
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<i class="fas fa-network-wired text-5xl text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 bg-purple-600 text-white rounded-lg flex items-center justify-center mr-4">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 3.5a1.5 1.5 0 013 0V4a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-.5a1.5 1.5 0 000 3h.5a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-.5a1.5 1.5 0 00-3 0v.5a1 1 0 01-1 1H6a1 1 0 01-1-1v-3a1 1 0 00-1-1h-.5a1.5 1.5 0 010-3H4a1 1 0 001-1V6a1 1 0 011-1h3a1 1 0 001-1v-.5z"/>
|
||||
</svg>
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
|
||||
<i class="fas fa-microchip text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold">智能交通展区</h3>
|
||||
</div>
|
||||
@@ -329,12 +423,16 @@
|
||||
</div>
|
||||
|
||||
<!-- 配套服务展区 -->
|
||||
<div class="exhibition-card bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-6">
|
||||
<div class="exhibition-card bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-6 animate-fadeInUp animation-delay-800">
|
||||
<div class="relative overflow-hidden rounded-xl mb-4 h-32 bg-gradient-to-r from-orange-400 to-orange-600">
|
||||
<img src="../../data/会展策划/image/Whisk_2a9b622636.jpg" alt="配套服务" class="w-full h-full object-cover opacity-60">
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<i class="fas fa-charging-station text-5xl text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 bg-orange-600 text-white rounded-lg flex items-center justify-center mr-4">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
|
||||
<i class="fas fa-tools text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold">配套服务展区</h3>
|
||||
</div>
|
||||
@@ -643,5 +741,83 @@
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="../js/main.js"></script>
|
||||
<script>
|
||||
// 页面加载动画
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 添加页面进入动画
|
||||
document.body.classList.add('page-enter');
|
||||
|
||||
// 图片懒加载
|
||||
const images = document.querySelectorAll('img');
|
||||
images.forEach(img => {
|
||||
img.addEventListener('load', function() {
|
||||
this.classList.add('image-loaded');
|
||||
});
|
||||
img.addEventListener('error', function() {
|
||||
this.classList.add('image-error');
|
||||
this.src = '../data/会展策划/image/博览会.jpg'; // 备用图片
|
||||
});
|
||||
});
|
||||
|
||||
// 滚动动画触发
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -100px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// 观察所有带动画的元素
|
||||
document.querySelectorAll('.animate-fadeInUp, .animate-fadeInLeft, .animate-fadeInRight').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// 数字动画
|
||||
function animateNumbers() {
|
||||
const numbers = [
|
||||
{ el: document.querySelector('.economic-number'), target: 10, suffix: '亿+' },
|
||||
{ el: document.querySelector('.social-number'), target: 1, suffix: '亿+次' },
|
||||
{ el: document.querySelector('.brand-number'), target: 90, suffix: '%+' }
|
||||
];
|
||||
|
||||
numbers.forEach(item => {
|
||||
if (item.el) {
|
||||
let current = 0;
|
||||
const increment = item.target / 50;
|
||||
const timer = setInterval(() => {
|
||||
current += increment;
|
||||
if (current >= item.target) {
|
||||
current = item.target;
|
||||
clearInterval(timer);
|
||||
}
|
||||
item.el.textContent = Math.floor(current) + item.suffix;
|
||||
}, 30);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 触发数字动画
|
||||
const resultsSection = document.querySelector('#expected-results');
|
||||
if (resultsSection) {
|
||||
const resultsObserver = new IntersectionObserver(function(entries) {
|
||||
if (entries[0].isIntersecting) {
|
||||
animateNumbers();
|
||||
resultsObserver.disconnect();
|
||||
}
|
||||
});
|
||||
resultsObserver.observe(resultsSection);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user