2b1ed656cd
主要改进: - 修复星形图标可见性问题，改为黄色高对比度显示 - 移除'立即参展'按钮，清理冗余CTA元素 - 修正背景图片路径并优化透明度(opacity-10) - 为所有容器区域添加hover提示文字 - 删除'立即参与，共创绿色出行未来'整个CTA区块 - 优化页面加载器和图片错误处理 - 修复展会信息卡片文字对比度问题 - 增强多层背景遮罩效果 影响文件: - web_frontend/web_result/index.html - web_frontend/web_result/css/animations.css - web_frontend/web_result/js/main.js - 新增多个页面和样式文件 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
424 lines
22 KiB
HTML
424 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>2024长三角国际新能源汽车与智能交通产业博览会 - 设计迭代1</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<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">
|
||
<style>
|
||
:root {
|
||
--primary: #10b981;
|
||
--secondary: #3b82f6;
|
||
--accent: #8b5cf6;
|
||
--dark: #1e293b;
|
||
--light: #f8fafc;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Inter', 'Noto Sans SC', sans-serif;
|
||
}
|
||
|
||
.gradient-mesh {
|
||
background:
|
||
radial-gradient(at 40% 20%, hsla(162, 74%, 40%, 0.3) 0px, transparent 50%),
|
||
radial-gradient(at 80% 0%, hsla(217, 91%, 60%, 0.2) 0px, transparent 50%),
|
||
radial-gradient(at 0% 50%, hsla(271, 68%, 63%, 0.2) 0px, transparent 50%),
|
||
radial-gradient(at 80% 50%, hsla(189, 100%, 56%, 0.1) 0px, transparent 50%),
|
||
radial-gradient(at 0% 100%, hsla(217, 91%, 60%, 0.2) 0px, transparent 50%);
|
||
}
|
||
|
||
.glass-effect {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.neon-glow {
|
||
text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 40px currentColor;
|
||
}
|
||
|
||
.hover-lift {
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.hover-lift:hover {
|
||
transform: translateY(-8px) scale(1.02);
|
||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||
25% { transform: translateY(-20px) rotate(2deg); }
|
||
75% { transform: translateY(-10px) rotate(-2deg); }
|
||
}
|
||
|
||
.float-animation {
|
||
animation: float 6s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes gradient-shift {
|
||
0% { background-position: 0% 50%; }
|
||
50% { background-position: 100% 50%; }
|
||
100% { background-position: 0% 50%; }
|
||
}
|
||
|
||
.animated-gradient {
|
||
background: linear-gradient(-45deg, #10b981, #3b82f6, #8b5cf6, #ec4899);
|
||
background-size: 400% 400%;
|
||
animation: gradient-shift 15s ease infinite;
|
||
}
|
||
|
||
.card-3d {
|
||
transform-style: preserve-3d;
|
||
transition: transform 0.6s;
|
||
}
|
||
|
||
.card-3d:hover {
|
||
transform: rotateY(10deg) rotateX(10deg);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-50">
|
||
<!-- 固定导航栏 -->
|
||
<nav class="fixed top-0 left-0 right-0 z-50 glass-effect">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="flex justify-between items-center h-16">
|
||
<div class="flex items-center space-x-4">
|
||
<div class="w-10 h-10 animated-gradient rounded-full"></div>
|
||
<span class="text-xl font-bold text-gray-800">NEVIT 2024</span>
|
||
</div>
|
||
<div class="hidden md:flex space-x-8">
|
||
<a href="#home" class="text-gray-700 hover:text-emerald-500 transition-colors">首页</a>
|
||
<a href="#about" class="text-gray-700 hover:text-emerald-500 transition-colors">关于展会</a>
|
||
<a href="#exhibits" class="text-gray-700 hover:text-emerald-500 transition-colors">展览内容</a>
|
||
<a href="#schedule" class="text-gray-700 hover:text-emerald-500 transition-colors">日程安排</a>
|
||
<a href="#register" class="text-gray-700 hover:text-emerald-500 transition-colors">参展登记</a>
|
||
<a href="#contact" class="text-gray-700 hover:text-emerald-500 transition-colors">联系我们</a>
|
||
</div>
|
||
<button class="md:hidden p-2">
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 英雄区域 -->
|
||
<section id="home" class="relative min-h-screen flex items-center justify-center overflow-hidden">
|
||
<div class="absolute inset-0 gradient-mesh"></div>
|
||
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-gray-50"></div>
|
||
|
||
<!-- 动态背景元素 -->
|
||
<div class="absolute inset-0">
|
||
<div class="absolute top-20 left-10 w-72 h-72 bg-emerald-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 float-animation"></div>
|
||
<div class="absolute top-40 right-20 w-96 h-96 bg-blue-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 float-animation" style="animation-delay: 2s;"></div>
|
||
<div class="absolute bottom-20 left-1/2 w-80 h-80 bg-purple-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 float-animation" style="animation-delay: 4s;"></div>
|
||
</div>
|
||
|
||
<div class="relative z-10 text-center px-4 max-w-5xl mx-auto">
|
||
<h1 class="text-6xl md:text-8xl font-black mb-6">
|
||
<span class="block text-transparent bg-clip-text animated-gradient">2024 长三角</span>
|
||
<span class="block text-gray-800 mt-2">新能源汽车博览会</span>
|
||
</h1>
|
||
<p class="text-xl md:text-2xl text-gray-600 mb-8 font-light">
|
||
引领绿色出行新时代 · 共创智能交通新未来
|
||
</p>
|
||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<button class="px-8 py-4 bg-emerald-500 text-white rounded-full font-semibold hover-lift hover:bg-emerald-600 shadow-lg">
|
||
立即参展
|
||
</button>
|
||
<button class="px-8 py-4 glass-effect text-gray-800 rounded-full font-semibold hover-lift">
|
||
了解更多
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 展会信息卡片 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-20">
|
||
<div class="glass-effect rounded-2xl p-6 hover-lift">
|
||
<div class="text-4xl mb-3">📅</div>
|
||
<h3 class="text-lg font-semibold mb-1">展会时间</h3>
|
||
<p class="text-gray-600">2024年6月15-17日</p>
|
||
</div>
|
||
<div class="glass-effect rounded-2xl p-6 hover-lift">
|
||
<div class="text-4xl mb-3">📍</div>
|
||
<h3 class="text-lg font-semibold mb-1">展会地点</h3>
|
||
<p class="text-gray-600">苏州国际博览中心</p>
|
||
</div>
|
||
<div class="glass-effect rounded-2xl p-6 hover-lift">
|
||
<div class="text-4xl mb-3">🏢</div>
|
||
<h3 class="text-lg font-semibold mb-1">展览规模</h3>
|
||
<p class="text-gray-600">50,000平方米</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 数据展示区 -->
|
||
<section class="py-20 bg-white">
|
||
<div class="max-w-7xl mx-auto px-4">
|
||
<h2 class="text-4xl font-bold text-center mb-16">
|
||
<span class="text-transparent bg-clip-text animated-gradient">展会数据一览</span>
|
||
</h2>
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||
<div class="text-center card-3d">
|
||
<div class="text-5xl font-black text-emerald-500 mb-2">500+</div>
|
||
<p class="text-gray-600">参展企业</p>
|
||
</div>
|
||
<div class="text-center card-3d">
|
||
<div class="text-5xl font-black text-blue-500 mb-2">50,000</div>
|
||
<p class="text-gray-600">专业观众</p>
|
||
</div>
|
||
<div class="text-center card-3d">
|
||
<div class="text-5xl font-black text-purple-500 mb-2">100+</div>
|
||
<p class="text-gray-600">同期活动</p>
|
||
</div>
|
||
<div class="text-center card-3d">
|
||
<div class="text-5xl font-black text-pink-500 mb-2">30+</div>
|
||
<p class="text-gray-600">媒体合作</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 展览亮点 -->
|
||
<section class="py-20 bg-gray-50">
|
||
<div class="max-w-7xl mx-auto px-4">
|
||
<h2 class="text-4xl font-bold text-center mb-16">展览亮点</h2>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
<div class="bg-white rounded-2xl p-8 hover-lift shadow-lg">
|
||
<div class="w-16 h-16 bg-gradient-to-br from-emerald-400 to-emerald-600 rounded-xl flex items-center justify-center mb-6">
|
||
<span class="text-2xl">🚗</span>
|
||
</div>
|
||
<h3 class="text-xl font-semibold mb-3">新能源整车</h3>
|
||
<p class="text-gray-600 leading-relaxed">展示最新纯电动、混合动力、氢燃料电池等新能源汽车技术与产品</p>
|
||
</div>
|
||
<div class="bg-white rounded-2xl p-8 hover-lift shadow-lg">
|
||
<div class="w-16 h-16 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl flex items-center justify-center mb-6">
|
||
<span class="text-2xl">🔋</span>
|
||
</div>
|
||
<h3 class="text-xl font-semibold mb-3">动力电池技术</h3>
|
||
<p class="text-gray-600 leading-relaxed">聚焦固态电池、快充技术、电池回收等前沿动力电池解决方案</p>
|
||
</div>
|
||
<div class="bg-white rounded-2xl p-8 hover-lift shadow-lg">
|
||
<div class="w-16 h-16 bg-gradient-to-br from-purple-400 to-purple-600 rounded-xl flex items-center justify-center mb-6">
|
||
<span class="text-2xl">🤖</span>
|
||
</div>
|
||
<h3 class="text-xl font-semibold mb-3">智能驾驶</h3>
|
||
<p class="text-gray-600 leading-relaxed">展示L3-L5级自动驾驶、车路协同、智能座舱等创新技术</p>
|
||
</div>
|
||
<div class="bg-white rounded-2xl p-8 hover-lift shadow-lg">
|
||
<div class="w-16 h-16 bg-gradient-to-br from-pink-400 to-pink-600 rounded-xl flex items-center justify-center mb-6">
|
||
<span class="text-2xl">⚡</span>
|
||
</div>
|
||
<h3 class="text-xl font-semibold mb-3">充电基础设施</h3>
|
||
<p class="text-gray-600 leading-relaxed">超级快充、无线充电、换电站等充电基础设施整体解决方案</p>
|
||
</div>
|
||
<div class="bg-white rounded-2xl p-8 hover-lift shadow-lg">
|
||
<div class="w-16 h-16 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-xl flex items-center justify-center mb-6">
|
||
<span class="text-2xl">🌐</span>
|
||
</div>
|
||
<h3 class="text-xl font-semibold mb-3">车联网技术</h3>
|
||
<p class="text-gray-600 leading-relaxed">5G-V2X、OTA升级、云服务平台等智能网联汽车技术展示</p>
|
||
</div>
|
||
<div class="bg-white rounded-2xl p-8 hover-lift shadow-lg">
|
||
<div class="w-16 h-16 bg-gradient-to-br from-red-400 to-red-600 rounded-xl flex items-center justify-center mb-6">
|
||
<span class="text-2xl">🏭</span>
|
||
</div>
|
||
<h3 class="text-xl font-semibold mb-3">智能制造</h3>
|
||
<p class="text-gray-600 leading-relaxed">工业4.0、柔性生产线、数字孪生等汽车智能制造解决方案</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 日程安排时间线 -->
|
||
<section class="py-20 bg-white">
|
||
<div class="max-w-7xl mx-auto px-4">
|
||
<h2 class="text-4xl font-bold text-center mb-16">活动日程</h2>
|
||
<div class="relative">
|
||
<!-- 时间线 -->
|
||
<div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-emerald-400 to-blue-400"></div>
|
||
|
||
<!-- 日程项 -->
|
||
<div class="space-y-12">
|
||
<div class="flex items-center">
|
||
<div class="flex-1 text-right pr-8">
|
||
<div class="glass-effect rounded-xl p-6 inline-block hover-lift">
|
||
<h3 class="text-xl font-semibold mb-2">开幕式暨主论坛</h3>
|
||
<p class="text-gray-600">6月15日 09:00-12:00</p>
|
||
<p class="text-sm text-gray-500 mt-2">政府领导致辞、产业发展报告发布</p>
|
||
</div>
|
||
</div>
|
||
<div class="w-4 h-4 bg-emerald-500 rounded-full border-4 border-white shadow-lg z-10"></div>
|
||
<div class="flex-1 pl-8"></div>
|
||
</div>
|
||
|
||
<div class="flex items-center">
|
||
<div class="flex-1 pr-8"></div>
|
||
<div class="w-4 h-4 bg-blue-500 rounded-full border-4 border-white shadow-lg z-10"></div>
|
||
<div class="flex-1 text-left pl-8">
|
||
<div class="glass-effect rounded-xl p-6 inline-block hover-lift">
|
||
<h3 class="text-xl font-semibold mb-2">新品发布会</h3>
|
||
<p class="text-gray-600">6月15日 14:00-17:00</p>
|
||
<p class="text-sm text-gray-500 mt-2">20+品牌新车型全球首发</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center">
|
||
<div class="flex-1 text-right pr-8">
|
||
<div class="glass-effect rounded-xl p-6 inline-block hover-lift">
|
||
<h3 class="text-xl font-semibold mb-2">技术创新峰会</h3>
|
||
<p class="text-gray-600">6月16日 09:00-17:00</p>
|
||
<p class="text-sm text-gray-500 mt-2">8大专题论坛并行举办</p>
|
||
</div>
|
||
</div>
|
||
<div class="w-4 h-4 bg-purple-500 rounded-full border-4 border-white shadow-lg z-10"></div>
|
||
<div class="flex-1 pl-8"></div>
|
||
</div>
|
||
|
||
<div class="flex items-center">
|
||
<div class="flex-1 pr-8"></div>
|
||
<div class="w-4 h-4 bg-pink-500 rounded-full border-4 border-white shadow-lg z-10"></div>
|
||
<div class="flex-1 text-left pl-8">
|
||
<div class="glass-effect rounded-xl p-6 inline-block hover-lift">
|
||
<h3 class="text-xl font-semibold mb-2">商务对接会</h3>
|
||
<p class="text-gray-600">6月17日 09:00-15:00</p>
|
||
<p class="text-sm text-gray-500 mt-2">供需对接、项目签约仪式</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 参展登记 -->
|
||
<section id="register" class="py-20 bg-gradient-to-br from-emerald-50 to-blue-50">
|
||
<div class="max-w-4xl mx-auto px-4">
|
||
<h2 class="text-4xl font-bold text-center mb-16">参展登记</h2>
|
||
<div class="bg-white rounded-3xl shadow-2xl p-8 md:p-12">
|
||
<form class="space-y-6">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">企业名称</label>
|
||
<input type="text" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">联系人</label>
|
||
<input type="text" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">联系电话</label>
|
||
<input type="tel" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">电子邮箱</label>
|
||
<input type="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all">
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">展位需求</label>
|
||
<select class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all">
|
||
<option>标准展位 (9㎡)</option>
|
||
<option>豪华展位 (18㎡)</option>
|
||
<option>特装展位 (36㎡)</option>
|
||
<option>室外展位</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">留言</label>
|
||
<textarea rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all"></textarea>
|
||
</div>
|
||
<button type="submit" class="w-full py-4 bg-gradient-to-r from-emerald-500 to-blue-500 text-white rounded-lg font-semibold hover:shadow-xl transform hover:scale-105 transition-all">
|
||
提交申请
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="bg-gray-900 text-white py-12">
|
||
<div class="max-w-7xl mx-auto px-4">
|
||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||
<div>
|
||
<h3 class="text-xl font-bold mb-4">NEVIT 2024</h3>
|
||
<p class="text-gray-400">长三角国际新能源汽车与智能交通产业博览会</p>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold mb-4">快速链接</h4>
|
||
<ul class="space-y-2 text-gray-400">
|
||
<li><a href="#" class="hover:text-emerald-400 transition-colors">展会介绍</a></li>
|
||
<li><a href="#" class="hover:text-emerald-400 transition-colors">参展指南</a></li>
|
||
<li><a href="#" class="hover:text-emerald-400 transition-colors">观众服务</a></li>
|
||
<li><a href="#" class="hover:text-emerald-400 transition-colors">新闻中心</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold mb-4">联系方式</h4>
|
||
<ul class="space-y-2 text-gray-400">
|
||
<li>电话：400-888-8888</li>
|
||
<li>邮箱：info@nevit2024.com</li>
|
||
<li>地址：苏州工业园区苏州大道东688号</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold mb-4">关注我们</h4>
|
||
<div class="flex space-x-4">
|
||
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-emerald-500 transition-colors">
|
||
<span>微</span>
|
||
</a>
|
||
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-emerald-500 transition-colors">
|
||
<span>博</span>
|
||
</a>
|
||
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-emerald-500 transition-colors">
|
||
<span>in</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
|
||
<p>© 2024 NEVIT. All rights reserved. | 设计迭代版本 1.0</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// 平滑滚动
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
target.scrollIntoView({ behavior: 'smooth' });
|
||
}
|
||
});
|
||
});
|
||
|
||
// 滚动动画
|
||
const observerOptions = {
|
||
threshold: 0.1,
|
||
rootMargin: '0px 0px -50px 0px'
|
||
};
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.style.opacity = '1';
|
||
entry.target.style.transform = 'translateY(0)';
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
document.querySelectorAll('.hover-lift').forEach(el => {
|
||
el.style.opacity = '0';
|
||
el.style.transform = 'translateY(20px)';
|
||
el.style.transition = 'all 0.5s ease-out';
|
||
observer.observe(el);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |