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
424
.superdesign/design_iterations/exhibition_site_1.html
Normal file
424
.superdesign/design_iterations/exhibition_site_1.html
Normal file
@@ -0,0 +1,424 @@
|
||||
<!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>
|
||||
516
.superdesign/design_iterations/exhibition_site_2.html
Normal file
516
.superdesign/design_iterations/exhibition_site_2.html
Normal file
@@ -0,0 +1,516 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>2024长三角国际新能源汽车与智能交通产业博览会 - 设计迭代2</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--primary: oklch(0.7 0.2 150);
|
||||
--secondary: oklch(0.6 0.25 250);
|
||||
--accent: oklch(0.65 0.3 30);
|
||||
--surface: oklch(0.98 0 0);
|
||||
--text: oklch(0.2 0 0);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--primary: oklch(0.65 0.2 150);
|
||||
--secondary: oklch(0.7 0.25 250);
|
||||
--accent: oklch(0.75 0.3 30);
|
||||
--surface: oklch(0.15 0 0);
|
||||
--text: oklch(0.95 0 0);
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.morphism {
|
||||
background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
box-shadow:
|
||||
20px 20px 60px rgba(0,0,0,0.1),
|
||||
-20px -20px 60px rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.neumorphism {
|
||||
background: var(--surface);
|
||||
box-shadow:
|
||||
inset 5px 5px 10px rgba(0,0,0,0.1),
|
||||
inset -5px -5px 10px rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.glow-text {
|
||||
text-shadow:
|
||||
0 0 10px var(--primary),
|
||||
0 0 20px var(--primary),
|
||||
0 0 30px var(--primary);
|
||||
}
|
||||
|
||||
.hover-magnetic {
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@keyframes levitate {
|
||||
0%, 100% { transform: translateY(0) rotateX(0) rotateY(0); }
|
||||
25% { transform: translateY(-10px) rotateX(5deg) rotateY(5deg); }
|
||||
75% { transform: translateY(-5px) rotateX(-5deg) rotateY(-5deg); }
|
||||
}
|
||||
|
||||
.levitate {
|
||||
animation: levitate 4s ease-in-out infinite;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
@keyframes aurora {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
.aurora-bg {
|
||||
background: linear-gradient(
|
||||
-45deg,
|
||||
oklch(0.7 0.2 150 / 0.3),
|
||||
oklch(0.6 0.25 250 / 0.3),
|
||||
oklch(0.65 0.3 30 / 0.3),
|
||||
oklch(0.7 0.2 300 / 0.3)
|
||||
);
|
||||
background-size: 400% 400%;
|
||||
animation: aurora 20s ease infinite;
|
||||
}
|
||||
|
||||
.grid-pattern {
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-10px) rotateX(10deg) scale(1.02);
|
||||
box-shadow:
|
||||
0 30px 60px rgba(0,0,0,0.2),
|
||||
0 0 40px var(--primary);
|
||||
}
|
||||
|
||||
.parallax-container {
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.parallax-layer {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen overflow-x-hidden">
|
||||
<!-- 极光背景 -->
|
||||
<div class="fixed inset-0 aurora-bg opacity-30 -z-10"></div>
|
||||
<div class="fixed inset-0 grid-pattern opacity-10 -z-10"></div>
|
||||
|
||||
<!-- 高级导航栏 -->
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 morphism px-6 py-4">
|
||||
<div class="max-w-7xl mx-auto flex justify-between items-center">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-emerald-400 to-blue-500 flex items-center justify-center text-white font-bold levitate">
|
||||
NE
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-xl font-bold">NEVIT 2024</h1>
|
||||
<p class="text-xs opacity-60">新能源汽车产业博览会</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden lg:flex items-center space-x-8">
|
||||
<a href="#" class="hover-magnetic relative group">
|
||||
<span class="relative z-10">首页</span>
|
||||
<span class="absolute inset-0 bg-gradient-to-r from-emerald-400 to-blue-500 rounded-lg opacity-0 group-hover:opacity-20 transition-opacity"></span>
|
||||
</a>
|
||||
<a href="#" class="hover-magnetic">展会概览</a>
|
||||
<a href="#" class="hover-magnetic">展商服务</a>
|
||||
<a href="#" class="hover-magnetic">观众中心</a>
|
||||
<a href="#" class="hover-magnetic">新闻动态</a>
|
||||
<a href="#" class="hover-magnetic">联系我们</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4">
|
||||
<button id="themeToggle" class="w-10 h-10 rounded-full neumorphism flex items-center justify-center">
|
||||
<span class="text-xl">🌙</span>
|
||||
</button>
|
||||
<button class="px-6 py-2 rounded-full bg-gradient-to-r from-emerald-400 to-blue-500 text-white font-semibold hover:shadow-lg transition-all">
|
||||
立即报名
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 3D英雄区域 -->
|
||||
<section class="min-h-screen flex items-center justify-center pt-20 parallax-container">
|
||||
<div class="text-center px-4 parallax-layer">
|
||||
<div class="mb-8 levitate">
|
||||
<h1 class="text-7xl md:text-9xl font-black mb-4">
|
||||
<span class="block text-gradient">2024</span>
|
||||
<span class="block text-4xl md:text-6xl mt-2">长三角新能源汽车</span>
|
||||
<span class="block text-3xl md:text-5xl mt-2 opacity-80">智能交通产业博览会</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<p class="text-xl md:text-2xl mb-12 opacity-80 max-w-3xl mx-auto">
|
||||
探索未来出行 · 引领产业变革 · 共创绿色生态
|
||||
</p>
|
||||
|
||||
<!-- 3D卡片组 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto mt-20">
|
||||
<div class="morphism rounded-3xl p-8 card-hover">
|
||||
<div class="text-5xl mb-4">⚡</div>
|
||||
<h3 class="text-2xl font-bold mb-2">50,000㎡</h3>
|
||||
<p class="opacity-70">超大展览空间</p>
|
||||
</div>
|
||||
<div class="morphism rounded-3xl p-8 card-hover" style="animation-delay: 0.1s;">
|
||||
<div class="text-5xl mb-4">🚗</div>
|
||||
<h3 class="text-2xl font-bold mb-2">500+</h3>
|
||||
<p class="opacity-70">知名展商</p>
|
||||
</div>
|
||||
<div class="morphism rounded-3xl p-8 card-hover" style="animation-delay: 0.2s;">
|
||||
<div class="text-5xl mb-4">👥</div>
|
||||
<h3 class="text-2xl font-bold mb-2">50,000+</h3>
|
||||
<p class="opacity-70">专业观众</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 悬浮装饰元素 -->
|
||||
<div class="absolute top-20 left-10 w-20 h-20 rounded-full bg-gradient-to-br from-emerald-400 to-emerald-600 opacity-20 levitate"></div>
|
||||
<div class="absolute bottom-20 right-10 w-32 h-32 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 opacity-20 levitate" style="animation-delay: 1s;"></div>
|
||||
<div class="absolute top-1/2 left-20 w-16 h-16 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 opacity-20 levitate" style="animation-delay: 2s;"></div>
|
||||
</section>
|
||||
|
||||
<!-- 特色展区 -->
|
||||
<section class="py-20 px-4">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-5xl font-black text-center mb-4">
|
||||
<span class="text-gradient">核心展区</span>
|
||||
</h2>
|
||||
<p class="text-center text-xl opacity-70 mb-16">六大主题展区，全方位展示产业链创新成果</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<!-- 展区卡片 -->
|
||||
<div class="group relative overflow-hidden rounded-3xl morphism p-8 card-hover">
|
||||
<div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-emerald-400 to-transparent opacity-20 rounded-full -mr-16 -mt-16"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-emerald-400 to-emerald-600 flex items-center justify-center text-white text-2xl mb-6">
|
||||
🔋
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">动力电池展区</h3>
|
||||
<p class="opacity-70 mb-4">固态电池、快充技术、电池管理系统等前沿技术展示</p>
|
||||
<div class="flex items-center text-emerald-500 font-semibold">
|
||||
<span>了解更多</span>
|
||||
<span class="ml-2 transform group-hover:translate-x-2 transition-transform">→</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group relative overflow-hidden rounded-3xl morphism p-8 card-hover">
|
||||
<div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-400 to-transparent opacity-20 rounded-full -mr-16 -mt-16"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white text-2xl mb-6">
|
||||
🤖
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">智能驾驶展区</h3>
|
||||
<p class="opacity-70 mb-4">L3-L5级自动驾驶、激光雷达、高精地图等核心技术</p>
|
||||
<div class="flex items-center text-blue-500 font-semibold">
|
||||
<span>了解更多</span>
|
||||
<span class="ml-2 transform group-hover:translate-x-2 transition-transform">→</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group relative overflow-hidden rounded-3xl morphism p-8 card-hover">
|
||||
<div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-purple-400 to-transparent opacity-20 rounded-full -mr-16 -mt-16"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center text-white text-2xl mb-6">
|
||||
⚡
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">充电设施展区</h3>
|
||||
<p class="opacity-70 mb-4">超级快充、无线充电、换电站等基础设施解决方案</p>
|
||||
<div class="flex items-center text-purple-500 font-semibold">
|
||||
<span>了解更多</span>
|
||||
<span class="ml-2 transform group-hover:translate-x-2 transition-transform">→</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group relative overflow-hidden rounded-3xl morphism p-8 card-hover">
|
||||
<div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-pink-400 to-transparent opacity-20 rounded-full -mr-16 -mt-16"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-pink-400 to-pink-600 flex items-center justify-center text-white text-2xl mb-6">
|
||||
🚗
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">整车制造展区</h3>
|
||||
<p class="opacity-70 mb-4">纯电动、混合动力、氢能源等新能源整车展示</p>
|
||||
<div class="flex items-center text-pink-500 font-semibold">
|
||||
<span>了解更多</span>
|
||||
<span class="ml-2 transform group-hover:translate-x-2 transition-transform">→</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group relative overflow-hidden rounded-3xl morphism p-8 card-hover">
|
||||
<div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-yellow-400 to-transparent opacity-20 rounded-full -mr-16 -mt-16"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-yellow-400 to-yellow-600 flex items-center justify-center text-white text-2xl mb-6">
|
||||
🌐
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">车联网展区</h3>
|
||||
<p class="opacity-70 mb-4">5G-V2X、OTA升级、智能座舱等互联技术展示</p>
|
||||
<div class="flex items-center text-yellow-500 font-semibold">
|
||||
<span>了解更多</span>
|
||||
<span class="ml-2 transform group-hover:translate-x-2 transition-transform">→</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group relative overflow-hidden rounded-3xl morphism p-8 card-hover">
|
||||
<div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-red-400 to-transparent opacity-20 rounded-full -mr-16 -mt-16"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-red-400 to-red-600 flex items-center justify-center text-white text-2xl mb-6">
|
||||
🏭
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">智能制造展区</h3>
|
||||
<p class="opacity-70 mb-4">工业4.0、数字孪生、柔性制造等生产技术</p>
|
||||
<div class="flex items-center text-red-500 font-semibold">
|
||||
<span>了解更多</span>
|
||||
<span class="ml-2 transform group-hover:translate-x-2 transition-transform">→</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 互动式时间线 -->
|
||||
<section class="py-20 px-4">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-5xl font-black text-center mb-16">
|
||||
<span class="text-gradient">精彩日程</span>
|
||||
</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 via-blue-400 to-purple-400 rounded-full"></div>
|
||||
|
||||
<!-- 时间节点 -->
|
||||
<div class="space-y-20">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1 text-right pr-12">
|
||||
<div class="inline-block">
|
||||
<div class="morphism rounded-3xl p-8 card-hover text-left max-w-md">
|
||||
<div class="text-sm text-emerald-500 font-semibold mb-2">DAY 1 - 6月15日</div>
|
||||
<h3 class="text-2xl font-bold mb-3">开幕式暨主论坛</h3>
|
||||
<p class="opacity-70 mb-4">09:00 - 12:00</p>
|
||||
<ul class="space-y-2 opacity-70">
|
||||
<li>• 政府领导致辞</li>
|
||||
<li>• 产业报告发布</li>
|
||||
<li>• 战略合作签约</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-6 h-6 bg-emerald-500 rounded-full border-4 border-white shadow-lg z-10 levitate"></div>
|
||||
<div class="flex-1 pl-12"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1 pr-12"></div>
|
||||
<div class="w-6 h-6 bg-blue-500 rounded-full border-4 border-white shadow-lg z-10 levitate" style="animation-delay: 0.5s;"></div>
|
||||
<div class="flex-1 text-left pl-12">
|
||||
<div class="inline-block">
|
||||
<div class="morphism rounded-3xl p-8 card-hover max-w-md">
|
||||
<div class="text-sm text-blue-500 font-semibold mb-2">DAY 1 - 6月15日</div>
|
||||
<h3 class="text-2xl font-bold mb-3">新品发布会</h3>
|
||||
<p class="opacity-70 mb-4">14:00 - 17:00</p>
|
||||
<ul class="space-y-2 opacity-70">
|
||||
<li>• 20+新车型首发</li>
|
||||
<li>• 技术创新展示</li>
|
||||
<li>• 媒体专访</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1 text-right pr-12">
|
||||
<div class="inline-block">
|
||||
<div class="morphism rounded-3xl p-8 card-hover text-left max-w-md">
|
||||
<div class="text-sm text-purple-500 font-semibold mb-2">DAY 2 - 6月16日</div>
|
||||
<h3 class="text-2xl font-bold mb-3">技术创新峰会</h3>
|
||||
<p class="opacity-70 mb-4">09:00 - 17:00</p>
|
||||
<ul class="space-y-2 opacity-70">
|
||||
<li>• 8大专题论坛</li>
|
||||
<li>• 院士专家演讲</li>
|
||||
<li>• 圆桌讨论</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-6 h-6 bg-purple-500 rounded-full border-4 border-white shadow-lg z-10 levitate" style="animation-delay: 1s;"></div>
|
||||
<div class="flex-1 pl-12"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 合作伙伴展示 -->
|
||||
<section class="py-20 px-4">
|
||||
<div class="max-w-7xl mx-auto text-center">
|
||||
<h2 class="text-5xl font-black mb-4">
|
||||
<span class="text-gradient">战略合作伙伴</span>
|
||||
</h2>
|
||||
<p class="text-xl opacity-70 mb-16">携手行业领军企业，共创产业新生态</p>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8">
|
||||
<div class="morphism rounded-2xl p-6 flex items-center justify-center h-24 card-hover">
|
||||
<span class="text-2xl font-bold opacity-50">比亚迪</span>
|
||||
</div>
|
||||
<div class="morphism rounded-2xl p-6 flex items-center justify-center h-24 card-hover">
|
||||
<span class="text-2xl font-bold opacity-50">特斯拉</span>
|
||||
</div>
|
||||
<div class="morphism rounded-2xl p-6 flex items-center justify-center h-24 card-hover">
|
||||
<span class="text-2xl font-bold opacity-50">蔚来</span>
|
||||
</div>
|
||||
<div class="morphism rounded-2xl p-6 flex items-center justify-center h-24 card-hover">
|
||||
<span class="text-2xl font-bold opacity-50">理想</span>
|
||||
</div>
|
||||
<div class="morphism rounded-2xl p-6 flex items-center justify-center h-24 card-hover">
|
||||
<span class="text-2xl font-bold opacity-50">小鹏</span>
|
||||
</div>
|
||||
<div class="morphism rounded-2xl p-6 flex items-center justify-center h-24 card-hover">
|
||||
<span class="text-2xl font-bold opacity-50">宁德时代</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA区域 -->
|
||||
<section class="py-20 px-4">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="morphism rounded-3xl p-12 md:p-16 text-center">
|
||||
<h2 class="text-4xl md:text-5xl font-black mb-6">
|
||||
<span class="text-gradient">立即加入我们</span>
|
||||
</h2>
|
||||
<p class="text-xl opacity-70 mb-8 max-w-2xl mx-auto">
|
||||
成为2024长三角新能源汽车产业博览会的一部分，共同见证行业变革时刻
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button class="px-8 py-4 rounded-full bg-gradient-to-r from-emerald-400 to-blue-500 text-white font-semibold text-lg hover:shadow-xl transform hover:scale-105 transition-all">
|
||||
申请参展
|
||||
</button>
|
||||
<button class="px-8 py-4 rounded-full morphism font-semibold text-lg hover:shadow-xl transform hover:scale-105 transition-all">
|
||||
观众预登记
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="py-12 px-4 border-t border-white/10">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold mb-4 text-gradient">NEVIT 2024</h3>
|
||||
<p class="opacity-70">引领新能源汽车产业发展方向</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-4">快速链接</h4>
|
||||
<ul class="space-y-2 opacity-70">
|
||||
<li><a href="#" class="hover:opacity-100 transition-opacity">展会介绍</a></li>
|
||||
<li><a href="#" class="hover:opacity-100 transition-opacity">参展指南</a></li>
|
||||
<li><a href="#" class="hover:opacity-100 transition-opacity">媒体中心</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-4">服务支持</h4>
|
||||
<ul class="space-y-2 opacity-70">
|
||||
<li><a href="#" class="hover:opacity-100 transition-opacity">交通指南</a></li>
|
||||
<li><a href="#" class="hover:opacity-100 transition-opacity">酒店预订</a></li>
|
||||
<li><a href="#" class="hover:opacity-100 transition-opacity">展商服务</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-4">联系我们</h4>
|
||||
<ul class="space-y-2 opacity-70">
|
||||
<li>📞 400-888-8888</li>
|
||||
<li>✉️ info@nevit2024.com</li>
|
||||
<li>📍 苏州国际博览中心</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center pt-8 border-t border-white/10">
|
||||
<p class="opacity-50">© 2024 NEVIT. All rights reserved. | 设计迭代版本 2.0</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// 主题切换
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const html = document.documentElement;
|
||||
|
||||
themeToggle.addEventListener('click', () => {
|
||||
const currentTheme = html.getAttribute('data-theme');
|
||||
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
||||
html.setAttribute('data-theme', newTheme);
|
||||
themeToggle.textContent = newTheme === 'light' ? '🌙' : '☀️';
|
||||
});
|
||||
|
||||
// 磁性悬停效果
|
||||
document.querySelectorAll('.hover-magnetic').forEach(element => {
|
||||
element.addEventListener('mousemove', (e) => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left - rect.width / 2;
|
||||
const y = e.clientY - rect.top - rect.height / 2;
|
||||
|
||||
element.style.transform = `translate(${x * 0.1}px, ${y * 0.1}px)`;
|
||||
});
|
||||
|
||||
element.addEventListener('mouseleave', () => {
|
||||
element.style.transform = 'translate(0, 0)';
|
||||
});
|
||||
});
|
||||
|
||||
// 滚动视差效果
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrolled = window.pageYOffset;
|
||||
const parallax = document.querySelectorAll('.parallax-layer');
|
||||
|
||||
parallax.forEach(element => {
|
||||
const speed = element.dataset.speed || 0.5;
|
||||
element.style.transform = `translateY(${scrolled * speed}px)`;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
644
.superdesign/design_iterations/exhibition_site_3.html
Normal file
644
.superdesign/design_iterations/exhibition_site_3.html
Normal file
@@ -0,0 +1,644 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>2024长三角国际新能源汽车与智能交通产业博览会 - 设计迭代3</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Outfit', 'Noto Sans SC', sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
--neon-green: #00ff88;
|
||||
--electric-blue: #00d4ff;
|
||||
--cyber-purple: #9945ff;
|
||||
--hot-pink: #ff00ff;
|
||||
--dark-bg: #0a0a0a;
|
||||
--card-bg: #111111;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--dark-bg);
|
||||
color: #ffffff;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 赛博朋克网格背景 */
|
||||
.cyber-grid {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
linear-gradient(rgba(0,255,136,0.1) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(0,255,136,0.1) 1px, transparent 1px);
|
||||
background-size: 100px 100px;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
/* 霓虹光效 */
|
||||
.neon-text {
|
||||
text-shadow:
|
||||
0 0 10px var(--neon-green),
|
||||
0 0 20px var(--neon-green),
|
||||
0 0 30px var(--neon-green),
|
||||
0 0 40px var(--neon-green);
|
||||
}
|
||||
|
||||
.neon-border {
|
||||
border: 2px solid var(--neon-green);
|
||||
box-shadow:
|
||||
0 0 10px var(--neon-green),
|
||||
inset 0 0 10px rgba(0,255,136,0.2);
|
||||
}
|
||||
|
||||
/* 全息投影效果 */
|
||||
.hologram {
|
||||
background: linear-gradient(45deg,
|
||||
transparent 30%,
|
||||
rgba(0,255,136,0.1) 50%,
|
||||
transparent 70%);
|
||||
background-size: 200% 200%;
|
||||
animation: hologram-scan 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes hologram-scan {
|
||||
0% { background-position: 200% 200%; }
|
||||
100% { background-position: -200% -200%; }
|
||||
}
|
||||
|
||||
/* 故障艺术效果 */
|
||||
.glitch {
|
||||
position: relative;
|
||||
color: white;
|
||||
font-size: 4em;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.glitch::before,
|
||||
.glitch::after {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.glitch::before {
|
||||
animation: glitch-1 0.3s infinite;
|
||||
color: var(--neon-green);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.glitch::after {
|
||||
animation: glitch-2 0.3s infinite;
|
||||
color: var(--hot-pink);
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
@keyframes glitch-1 {
|
||||
0%, 100% { clip: rect(0, 900px, 0, 0); }
|
||||
25% { clip: rect(random(100)px, 900px, random(100)px, 0); transform: translate(-2px, -2px); }
|
||||
50% { clip: rect(random(100)px, 900px, random(100)px, 0); transform: translate(2px, 2px); }
|
||||
75% { clip: rect(random(100)px, 900px, random(100)px, 0); transform: translate(-2px, 2px); }
|
||||
}
|
||||
|
||||
@keyframes glitch-2 {
|
||||
0%, 100% { clip: rect(0, 900px, 0, 0); }
|
||||
25% { clip: rect(random(100)px, 900px, random(100)px, 0); transform: translate(2px, -2px); }
|
||||
50% { clip: rect(random(100)px, 900px, random(100)px, 0); transform: translate(-2px, 2px); }
|
||||
75% { clip: rect(random(100)px, 900px, random(100)px, 0); transform: translate(2px, 2px); }
|
||||
}
|
||||
|
||||
/* 赛博卡片 */
|
||||
.cyber-card {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid rgba(0,255,136,0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.cyber-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
background: linear-gradient(45deg, var(--neon-green), var(--electric-blue), var(--cyber-purple), var(--hot-pink));
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.cyber-card:hover::before {
|
||||
opacity: 1;
|
||||
animation: border-rotate 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes border-rotate {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.cyber-card:hover {
|
||||
transform: translateY(-10px) scale(1.02);
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0,255,136,0.3),
|
||||
0 0 60px rgba(0,255,136,0.2);
|
||||
}
|
||||
|
||||
/* 数据流动画 */
|
||||
.data-stream {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 100px;
|
||||
background: linear-gradient(to bottom, transparent, var(--neon-green), transparent);
|
||||
animation: stream 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes stream {
|
||||
0% { transform: translateY(-100px); }
|
||||
100% { transform: translateY(100vh); }
|
||||
}
|
||||
|
||||
/* 扫描线效果 */
|
||||
.scan-line {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, transparent, var(--neon-green), transparent);
|
||||
animation: scan 3s linear infinite;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes scan {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100vh); }
|
||||
}
|
||||
|
||||
/* 像素化按钮 */
|
||||
.pixel-btn {
|
||||
background: linear-gradient(135deg, var(--neon-green), var(--electric-blue));
|
||||
clip-path: polygon(
|
||||
0 10px, 10px 0,
|
||||
calc(100% - 10px) 0, 100% 10px,
|
||||
100% calc(100% - 10px), calc(100% - 10px) 100%,
|
||||
10px 100%, 0 calc(100% - 10px)
|
||||
);
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.pixel-btn:hover {
|
||||
transform: scale(1.05);
|
||||
filter: brightness(1.2);
|
||||
box-shadow: 0 0 30px var(--neon-green);
|
||||
}
|
||||
|
||||
/* 终端样式文字 */
|
||||
.terminal-text {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: var(--neon-green);
|
||||
}
|
||||
|
||||
.terminal-text::before {
|
||||
content: '> ';
|
||||
color: var(--electric-blue);
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
.cyber-loader {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 3px solid rgba(0,255,136,0.3);
|
||||
border-top-color: var(--neon-green);
|
||||
border-radius: 50%;
|
||||
animation: cyber-spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes cyber-spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 3D透视卡片 */
|
||||
.perspective-card {
|
||||
transform-style: preserve-3d;
|
||||
transform: perspective(1000px) rotateX(10deg) rotateY(-10deg);
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.perspective-card:hover {
|
||||
transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1.05);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 赛博朋克网格背景 -->
|
||||
<div class="cyber-grid"></div>
|
||||
|
||||
<!-- 扫描线效果 -->
|
||||
<div class="scan-line"></div>
|
||||
|
||||
<!-- 数据流 -->
|
||||
<div class="data-stream" style="left: 10%;"></div>
|
||||
<div class="data-stream" style="left: 30%; animation-delay: 0.5s;"></div>
|
||||
<div class="data-stream" style="left: 50%; animation-delay: 1s;"></div>
|
||||
<div class="data-stream" style="left: 70%; animation-delay: 1.5s;"></div>
|
||||
<div class="data-stream" style="left: 90%; animation-delay: 2s;"></div>
|
||||
|
||||
<!-- 赛博朋克导航 -->
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-md border-b border-green-500/30">
|
||||
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-green-400 to-blue-500 rotate-45 flex items-center justify-center">
|
||||
<span class="text-black font-bold -rotate-45">NE</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-xl font-bold neon-text">NEVIT_2024</h1>
|
||||
<p class="text-xs terminal-text">SYSTEM.ONLINE</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden md:flex items-center space-x-6">
|
||||
<a href="#" class="hover:text-green-400 transition-colors terminal-text">HOME</a>
|
||||
<a href="#" class="hover:text-green-400 transition-colors terminal-text">EXHIBITS</a>
|
||||
<a href="#" class="hover:text-green-400 transition-colors terminal-text">SCHEDULE</a>
|
||||
<a href="#" class="hover:text-green-400 transition-colors terminal-text">REGISTER</a>
|
||||
<a href="#" class="hover:text-green-400 transition-colors terminal-text">CONTACT</a>
|
||||
</div>
|
||||
|
||||
<button class="px-6 py-2 pixel-btn text-black font-bold">
|
||||
ENTER_EXPO
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 英雄区域 -->
|
||||
<section class="min-h-screen flex items-center justify-center relative pt-20">
|
||||
<div class="text-center z-10 px-4">
|
||||
<div class="mb-8">
|
||||
<h1 class="glitch text-6xl md:text-8xl mb-4" data-text="NEVIT 2024">NEVIT 2024</h1>
|
||||
<div class="text-2xl md:text-4xl font-light mb-2">
|
||||
<span class="text-green-400">长三角</span>
|
||||
<span class="text-blue-400">新能源汽车</span>
|
||||
</div>
|
||||
<div class="text-xl md:text-3xl font-light">
|
||||
<span class="text-purple-400">智能交通</span>
|
||||
<span class="text-pink-400">产业博览会</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-12">
|
||||
<p class="terminal-text text-xl">INITIALIZING_FUTURE_MOBILITY</p>
|
||||
<p class="text-gray-400 mt-2">2024.06.15-17 | SUZHOU_EXPO_CENTER</p>
|
||||
</div>
|
||||
|
||||
<!-- 数据指标 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 max-w-4xl mx-auto">
|
||||
<div class="cyber-card p-6 rounded-lg">
|
||||
<div class="text-3xl font-bold text-green-400 mb-2">500+</div>
|
||||
<div class="text-xs uppercase tracking-wider">Exhibitors</div>
|
||||
</div>
|
||||
<div class="cyber-card p-6 rounded-lg">
|
||||
<div class="text-3xl font-bold text-blue-400 mb-2">50K</div>
|
||||
<div class="text-xs uppercase tracking-wider">Visitors</div>
|
||||
</div>
|
||||
<div class="cyber-card p-6 rounded-lg">
|
||||
<div class="text-3xl font-bold text-purple-400 mb-2">100+</div>
|
||||
<div class="text-xs uppercase tracking-wider">Events</div>
|
||||
</div>
|
||||
<div class="cyber-card p-6 rounded-lg">
|
||||
<div class="text-3xl font-bold text-pink-400 mb-2">50K㎡</div>
|
||||
<div class="text-xs uppercase tracking-wider">Area</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 全息投影装饰 -->
|
||||
<div class="absolute inset-0 hologram opacity-20 pointer-events-none"></div>
|
||||
</section>
|
||||
|
||||
<!-- 展区矩阵 -->
|
||||
<section class="py-20 px-4">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-5xl font-bold mb-4">
|
||||
<span class="neon-text">EXHIBITION_MATRIX</span>
|
||||
</h2>
|
||||
<p class="terminal-text text-xl">LOADING_SECTORS...</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- 展区卡片 -->
|
||||
<div class="cyber-card p-8 rounded-lg perspective-card">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-2 h-8 bg-green-400 mr-4"></div>
|
||||
<h3 class="text-2xl font-bold">BATTERY_TECH</h3>
|
||||
</div>
|
||||
<p class="text-gray-400 mb-4">固态电池 | 快充技术 | BMS系统</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-green-400 text-sm">STATUS: ACTIVE</span>
|
||||
<span class="text-xs">HALL_A1</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cyber-card p-8 rounded-lg perspective-card">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-2 h-8 bg-blue-400 mr-4"></div>
|
||||
<h3 class="text-2xl font-bold">AUTO_PILOT</h3>
|
||||
</div>
|
||||
<p class="text-gray-400 mb-4">L3-L5自动驾驶 | 激光雷达 | V2X</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-blue-400 text-sm">STATUS: ACTIVE</span>
|
||||
<span class="text-xs">HALL_B2</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cyber-card p-8 rounded-lg perspective-card">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-2 h-8 bg-purple-400 mr-4"></div>
|
||||
<h3 class="text-2xl font-bold">CHARGING_INFRA</h3>
|
||||
</div>
|
||||
<p class="text-gray-400 mb-4">超级快充 | 无线充电 | 换电站</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-purple-400 text-sm">STATUS: ACTIVE</span>
|
||||
<span class="text-xs">HALL_C3</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cyber-card p-8 rounded-lg perspective-card">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-2 h-8 bg-pink-400 mr-4"></div>
|
||||
<h3 class="text-2xl font-bold">VEHICLE_MFG</h3>
|
||||
</div>
|
||||
<p class="text-gray-400 mb-4">纯电动 | 混动 | 氢能源</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-pink-400 text-sm">STATUS: ACTIVE</span>
|
||||
<span class="text-xs">HALL_D4</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cyber-card p-8 rounded-lg perspective-card">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-2 h-8 bg-yellow-400 mr-4"></div>
|
||||
<h3 class="text-2xl font-bold">IOV_TECH</h3>
|
||||
</div>
|
||||
<p class="text-gray-400 mb-4">5G-V2X | OTA | 智能座舱</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-yellow-400 text-sm">STATUS: ACTIVE</span>
|
||||
<span class="text-xs">HALL_E5</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cyber-card p-8 rounded-lg perspective-card">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-2 h-8 bg-red-400 mr-4"></div>
|
||||
<h3 class="text-2xl font-bold">SMART_MFG</h3>
|
||||
</div>
|
||||
<p class="text-gray-400 mb-4">工业4.0 | 数字孪生 | 柔性制造</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-red-400 text-sm">STATUS: ACTIVE</span>
|
||||
<span class="text-xs">HALL_F6</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 时间轴界面 -->
|
||||
<section class="py-20 px-4">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-5xl font-bold mb-4">
|
||||
<span class="neon-text">EVENT_TIMELINE</span>
|
||||
</h2>
|
||||
<p class="terminal-text text-xl">SYNCHRONIZING_SCHEDULE...</p>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<!-- 中心光柱 -->
|
||||
<div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-green-400 via-blue-400 to-purple-400"></div>
|
||||
|
||||
<!-- 时间节点 -->
|
||||
<div class="space-y-12">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1 text-right pr-8">
|
||||
<div class="cyber-card inline-block p-6 rounded-lg">
|
||||
<div class="text-green-400 font-mono text-sm mb-2">[DAY_01] 2024.06.15</div>
|
||||
<h3 class="text-xl font-bold mb-2">OPENING_CEREMONY</h3>
|
||||
<p class="text-gray-400 text-sm">09:00 - 12:00 | MAIN_HALL</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-4 h-4 bg-green-400 rounded-full neon-border relative 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-400 rounded-full neon-border relative z-10"></div>
|
||||
<div class="flex-1 text-left pl-8">
|
||||
<div class="cyber-card inline-block p-6 rounded-lg">
|
||||
<div class="text-blue-400 font-mono text-sm mb-2">[DAY_01] 2024.06.15</div>
|
||||
<h3 class="text-xl font-bold mb-2">PRODUCT_LAUNCH</h3>
|
||||
<p class="text-gray-400 text-sm">14:00 - 17:00 | HALL_A</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1 text-right pr-8">
|
||||
<div class="cyber-card inline-block p-6 rounded-lg">
|
||||
<div class="text-purple-400 font-mono text-sm mb-2">[DAY_02] 2024.06.16</div>
|
||||
<h3 class="text-xl font-bold mb-2">TECH_SUMMIT</h3>
|
||||
<p class="text-gray-400 text-sm">09:00 - 17:00 | MULTI_HALL</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-4 h-4 bg-purple-400 rounded-full neon-border relative 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-400 rounded-full neon-border relative z-10"></div>
|
||||
<div class="flex-1 text-left pl-8">
|
||||
<div class="cyber-card inline-block p-6 rounded-lg">
|
||||
<div class="text-pink-400 font-mono text-sm mb-2">[DAY_03] 2024.06.17</div>
|
||||
<h3 class="text-xl font-bold mb-2">BUSINESS_MATCH</h3>
|
||||
<p class="text-gray-400 text-sm">09:00 - 15:00 | VIP_ZONE</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 注册接口 -->
|
||||
<section class="py-20 px-4">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="cyber-card p-12 rounded-lg">
|
||||
<h2 class="text-4xl font-bold mb-8 text-center">
|
||||
<span class="neon-text">ACCESS_PORTAL</span>
|
||||
</h2>
|
||||
|
||||
<form class="space-y-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="terminal-text block mb-2">COMPANY_NAME</label>
|
||||
<input type="text" class="w-full bg-black/50 border border-green-400/30 rounded px-4 py-3 focus:border-green-400 focus:outline-none transition-colors">
|
||||
</div>
|
||||
<div>
|
||||
<label class="terminal-text block mb-2">CONTACT_PERSON</label>
|
||||
<input type="text" class="w-full bg-black/50 border border-green-400/30 rounded px-4 py-3 focus:border-green-400 focus:outline-none transition-colors">
|
||||
</div>
|
||||
<div>
|
||||
<label class="terminal-text block mb-2">PHONE_NUMBER</label>
|
||||
<input type="tel" class="w-full bg-black/50 border border-green-400/30 rounded px-4 py-3 focus:border-green-400 focus:outline-none transition-colors">
|
||||
</div>
|
||||
<div>
|
||||
<label class="terminal-text block mb-2">EMAIL_ADDRESS</label>
|
||||
<input type="email" class="w-full bg-black/50 border border-green-400/30 rounded px-4 py-3 focus:border-green-400 focus:outline-none transition-colors">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="terminal-text block mb-2">BOOTH_TYPE</label>
|
||||
<select class="w-full bg-black/50 border border-green-400/30 rounded px-4 py-3 focus:border-green-400 focus:outline-none transition-colors">
|
||||
<option>STANDARD_9M2</option>
|
||||
<option>PREMIUM_18M2</option>
|
||||
<option>CUSTOM_36M2</option>
|
||||
<option>OUTDOOR_SPACE</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="terminal-text block mb-2">MESSAGE</label>
|
||||
<textarea rows="4" class="w-full bg-black/50 border border-green-400/30 rounded px-4 py-3 focus:border-green-400 focus:outline-none transition-colors"></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="w-full py-4 pixel-btn text-black font-bold text-lg">
|
||||
SUBMIT_REQUEST
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 赛博页脚 -->
|
||||
<footer class="border-t border-green-400/30 py-12 px-4">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold mb-4 neon-text">NEVIT_2024</h3>
|
||||
<p class="text-gray-400 text-sm">FUTURE_MOBILITY_ECOSYSTEM</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="terminal-text mb-4">QUICK_LINKS</h4>
|
||||
<ul class="space-y-2 text-gray-400 text-sm">
|
||||
<li><a href="#" class="hover:text-green-400 transition-colors">ABOUT</a></li>
|
||||
<li><a href="#" class="hover:text-green-400 transition-colors">EXHIBITORS</a></li>
|
||||
<li><a href="#" class="hover:text-green-400 transition-colors">VISITORS</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="terminal-text mb-4">SERVICES</h4>
|
||||
<ul class="space-y-2 text-gray-400 text-sm">
|
||||
<li><a href="#" class="hover:text-green-400 transition-colors">TRANSPORT</a></li>
|
||||
<li><a href="#" class="hover:text-green-400 transition-colors">HOTEL</a></li>
|
||||
<li><a href="#" class="hover:text-green-400 transition-colors">SUPPORT</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="terminal-text mb-4">CONTACT</h4>
|
||||
<ul class="space-y-2 text-gray-400 text-sm">
|
||||
<li>TEL: 400-888-8888</li>
|
||||
<li>MAIL: info@nevit2024.com</li>
|
||||
<li>LOC: SUZHOU_EXPO</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center pt-8 border-t border-green-400/30">
|
||||
<p class="terminal-text">COPYRIGHT_2024_NEVIT | VERSION_3.0 | DESIGN_ITERATION</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// 故障效果随机化
|
||||
function random(max) {
|
||||
return Math.floor(Math.random() * max);
|
||||
}
|
||||
|
||||
// 打字机效果
|
||||
function typeWriter(element, text, speed = 50) {
|
||||
let i = 0;
|
||||
function type() {
|
||||
if (i < text.length) {
|
||||
element.innerHTML += text.charAt(i);
|
||||
i++;
|
||||
setTimeout(type, speed);
|
||||
}
|
||||
}
|
||||
type();
|
||||
}
|
||||
|
||||
// 页面加载动画
|
||||
window.addEventListener('load', () => {
|
||||
const terminals = document.querySelectorAll('.terminal-text');
|
||||
terminals.forEach(el => {
|
||||
const text = el.innerText;
|
||||
el.innerText = '';
|
||||
typeWriter(el, text, 30);
|
||||
});
|
||||
});
|
||||
|
||||
// 鼠标跟踪光效
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
const x = e.clientX;
|
||||
const y = e.clientY;
|
||||
|
||||
const glow = document.createElement('div');
|
||||
glow.style.position = 'fixed';
|
||||
glow.style.left = x + 'px';
|
||||
glow.style.top = y + 'px';
|
||||
glow.style.width = '20px';
|
||||
glow.style.height = '20px';
|
||||
glow.style.background = 'radial-gradient(circle, rgba(0,255,136,0.5), transparent)';
|
||||
glow.style.pointerEvents = 'none';
|
||||
glow.style.transform = 'translate(-50%, -50%)';
|
||||
glow.style.animation = 'fade-out 1s ease-out forwards';
|
||||
|
||||
document.body.appendChild(glow);
|
||||
|
||||
setTimeout(() => {
|
||||
glow.remove();
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
// 添加淡出动画
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes fade-out {
|
||||
0% { opacity: 1; }
|
||||
100% { opacity: 0; transform: translate(-50%, -50%) scale(3); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
635
.superdesign/design_iterations/exhibition_site_4.html
Normal file
635
.superdesign/design_iterations/exhibition_site_4.html
Normal file
@@ -0,0 +1,635 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>2024长三角国际新能源汽车与智能交通产业博览会 - 设计迭代4</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Mono:wght@400;700&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--background: oklch(0.98 0 0);
|
||||
--foreground: oklch(0.15 0 0);
|
||||
--primary: oklch(0.65 0.2 160);
|
||||
--secondary: oklch(0.70 0.15 220);
|
||||
--accent: oklch(0.75 0.18 40);
|
||||
--muted: oklch(0.95 0.01 0);
|
||||
--border: oklch(0.90 0 0);
|
||||
--radius: 1rem;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'DM Sans', 'Noto Sans SC', system-ui, sans-serif;
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: 'Space Mono', monospace;
|
||||
}
|
||||
|
||||
/* 极简主义网格 */
|
||||
.minimal-grid {
|
||||
background-image:
|
||||
linear-gradient(var(--border) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--border) 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
|
||||
/* 新拟态设计 */
|
||||
.neu-flat {
|
||||
background: var(--background);
|
||||
box-shadow:
|
||||
5px 5px 10px oklch(0.85 0 0),
|
||||
-5px -5px 10px oklch(1 0 0);
|
||||
}
|
||||
|
||||
.neu-pressed {
|
||||
background: var(--background);
|
||||
box-shadow:
|
||||
inset 5px 5px 10px oklch(0.85 0 0),
|
||||
inset -5px -5px 10px oklch(1 0 0);
|
||||
}
|
||||
|
||||
/* 极简渐变 */
|
||||
.minimal-gradient {
|
||||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* 微交互动画 */
|
||||
.micro-interaction {
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.micro-interaction:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.micro-interaction:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* 液态按钮 */
|
||||
.liquid-button {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius);
|
||||
background: var(--foreground);
|
||||
color: var(--background);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.liquid-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s, height 0.6s;
|
||||
}
|
||||
|
||||
.liquid-button:hover::before {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.liquid-button span {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 分割布局 */
|
||||
.split-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.split-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* 悬浮卡片 */
|
||||
.float-card {
|
||||
background: var(--background);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 2rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.float-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
/* 文字描边效果 */
|
||||
.text-outline {
|
||||
-webkit-text-stroke: 2px var(--foreground);
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
/* 极简进度条 */
|
||||
.minimal-progress {
|
||||
height: 2px;
|
||||
background: var(--border);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.minimal-progress::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 30%;
|
||||
background: var(--primary);
|
||||
animation: progress 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes progress {
|
||||
0% { left: -30%; }
|
||||
100% { left: 100%; }
|
||||
}
|
||||
|
||||
/* 分割文字 */
|
||||
.split-text {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.split-text::after {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
color: var(--primary);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* 磁性悬停 */
|
||||
.magnetic {
|
||||
display: inline-block;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* 点阵动画 */
|
||||
@keyframes dot-pulse {
|
||||
0%, 100% { opacity: 0.3; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
.dot-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 8px);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--primary);
|
||||
border-radius: 50%;
|
||||
animation: dot-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.dot:nth-child(2) { animation-delay: 0.1s; }
|
||||
.dot:nth-child(3) { animation-delay: 0.2s; }
|
||||
.dot:nth-child(4) { animation-delay: 0.3s; }
|
||||
.dot:nth-child(5) { animation-delay: 0.4s; }
|
||||
|
||||
/* 渐变边框 */
|
||||
.gradient-border {
|
||||
position: relative;
|
||||
background: var(--background);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.gradient-border::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -2px;
|
||||
border-radius: var(--radius);
|
||||
padding: 2px;
|
||||
background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: exclude;
|
||||
mask-composite: exclude;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 极简导航 -->
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-sm border-b border-gray-200">
|
||||
<div class="max-w-7xl mx-auto px-6 py-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-green-400 to-blue-500"></div>
|
||||
<span class="text-xl font-bold">NEVIT</span>
|
||||
</div>
|
||||
|
||||
<div class="hidden md:flex items-center space-x-8">
|
||||
<a href="#" class="magnetic micro-interaction">首页</a>
|
||||
<a href="#" class="magnetic micro-interaction">展会</a>
|
||||
<a href="#" class="magnetic micro-interaction">日程</a>
|
||||
<a href="#" class="magnetic micro-interaction">服务</a>
|
||||
<a href="#" class="magnetic micro-interaction">关于</a>
|
||||
</div>
|
||||
|
||||
<button class="liquid-button px-6 py-2">
|
||||
<span>立即参展</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 分割英雄区 -->
|
||||
<section class="split-layout pt-20">
|
||||
<!-- 左侧内容 -->
|
||||
<div class="flex items-center justify-center p-12 minimal-grid">
|
||||
<div>
|
||||
<div class="mono text-sm text-gray-500 mb-4">2024.06.15-17</div>
|
||||
<h1 class="text-6xl md:text-7xl font-bold mb-6">
|
||||
<span class="block text-outline">长三角</span>
|
||||
<span class="block minimal-gradient">新能源</span>
|
||||
<span class="block">汽车博览会</span>
|
||||
</h1>
|
||||
<p class="text-xl text-gray-600 mb-8 max-w-md">
|
||||
探索未来出行方式，引领产业创新发展，共创绿色智能生态。
|
||||
</p>
|
||||
<div class="flex items-center space-x-4">
|
||||
<button class="px-8 py-3 neu-flat rounded-full micro-interaction">
|
||||
了解详情
|
||||
</button>
|
||||
<div class="dot-grid">
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧图形 -->
|
||||
<div class="bg-gradient-to-br from-green-50 to-blue-50 flex items-center justify-center">
|
||||
<div class="relative">
|
||||
<!-- 抽象图形组合 -->
|
||||
<div class="w-64 h-64 rounded-full border-4 border-gray-200 absolute -top-8 -left-8"></div>
|
||||
<div class="w-48 h-48 rounded-full bg-gradient-to-br from-green-400 to-blue-500 opacity-20"></div>
|
||||
<div class="w-32 h-32 rounded-full border-2 border-gray-300 absolute bottom-0 right-0"></div>
|
||||
|
||||
<!-- 数据展示 -->
|
||||
<div class="absolute -bottom-8 -right-8 bg-white p-4 rounded-lg shadow-lg">
|
||||
<div class="text-3xl font-bold minimal-gradient">500+</div>
|
||||
<div class="text-sm text-gray-500">展商</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 极简数据展示 -->
|
||||
<section class="py-20 px-6">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||||
<div class="text-center">
|
||||
<div class="text-4xl font-bold mb-2">500+</div>
|
||||
<div class="text-sm text-gray-500 mono">EXHIBITORS</div>
|
||||
<div class="minimal-progress mt-4"></div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-4xl font-bold mb-2">50K</div>
|
||||
<div class="text-sm text-gray-500 mono">VISITORS</div>
|
||||
<div class="minimal-progress mt-4"></div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-4xl font-bold mb-2">100+</div>
|
||||
<div class="text-sm text-gray-500 mono">EVENTS</div>
|
||||
<div class="minimal-progress mt-4"></div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-4xl font-bold mb-2">50K㎡</div>
|
||||
<div class="text-sm text-gray-500 mono">AREA</div>
|
||||
<div class="minimal-progress mt-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 极简展区卡片 -->
|
||||
<section class="py-20 px-6 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl font-bold mb-4">
|
||||
<span class="split-text" data-text="核心展区">核心展区</span>
|
||||
</h2>
|
||||
<p class="text-gray-500">六大主题，全产业链覆盖</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div class="float-card group">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<div class="w-2 h-8 bg-green-400 mb-4"></div>
|
||||
<h3 class="text-xl font-semibold">动力电池</h3>
|
||||
</div>
|
||||
<span class="mono text-sm text-gray-400">01</span>
|
||||
</div>
|
||||
<p class="text-gray-600 mb-4">固态电池、快充技术、电池管理系统</p>
|
||||
<div class="flex items-center text-green-500">
|
||||
<span class="text-sm">展厅 A1</span>
|
||||
<svg class="w-4 h-4 ml-2 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="float-card group">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<div class="w-2 h-8 bg-blue-400 mb-4"></div>
|
||||
<h3 class="text-xl font-semibold">智能驾驶</h3>
|
||||
</div>
|
||||
<span class="mono text-sm text-gray-400">02</span>
|
||||
</div>
|
||||
<p class="text-gray-600 mb-4">L3-L5自动驾驶、激光雷达、V2X</p>
|
||||
<div class="flex items-center text-blue-500">
|
||||
<span class="text-sm">展厅 B2</span>
|
||||
<svg class="w-4 h-4 ml-2 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="float-card group">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<div class="w-2 h-8 bg-purple-400 mb-4"></div>
|
||||
<h3 class="text-xl font-semibold">充电设施</h3>
|
||||
</div>
|
||||
<span class="mono text-sm text-gray-400">03</span>
|
||||
</div>
|
||||
<p class="text-gray-600 mb-4">超级快充、无线充电、换电站</p>
|
||||
<div class="flex items-center text-purple-500">
|
||||
<span class="text-sm">展厅 C3</span>
|
||||
<svg class="w-4 h-4 ml-2 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="float-card group">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<div class="w-2 h-8 bg-pink-400 mb-4"></div>
|
||||
<h3 class="text-xl font-semibold">整车制造</h3>
|
||||
</div>
|
||||
<span class="mono text-sm text-gray-400">04</span>
|
||||
</div>
|
||||
<p class="text-gray-600 mb-4">纯电动、混合动力、氢能源</p>
|
||||
<div class="flex items-center text-pink-500">
|
||||
<span class="text-sm">展厅 D4</span>
|
||||
<svg class="w-4 h-4 ml-2 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="float-card group">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<div class="w-2 h-8 bg-yellow-400 mb-4"></div>
|
||||
<h3 class="text-xl font-semibold">车联网</h3>
|
||||
</div>
|
||||
<span class="mono text-sm text-gray-400">05</span>
|
||||
</div>
|
||||
<p class="text-gray-600 mb-4">5G-V2X、OTA升级、智能座舱</p>
|
||||
<div class="flex items-center text-yellow-500">
|
||||
<span class="text-sm">展厅 E5</span>
|
||||
<svg class="w-4 h-4 ml-2 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="float-card group">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<div class="w-2 h-8 bg-red-400 mb-4"></div>
|
||||
<h3 class="text-xl font-semibold">智能制造</h3>
|
||||
</div>
|
||||
<span class="mono text-sm text-gray-400">06</span>
|
||||
</div>
|
||||
<p class="text-gray-600 mb-4">工业4.0、数字孪生、柔性制造</p>
|
||||
<div class="flex items-center text-red-500">
|
||||
<span class="text-sm">展厅 F6</span>
|
||||
<svg class="w-4 h-4 ml-2 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 极简时间线 -->
|
||||
<section class="py-20 px-6">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl font-bold mb-4">活动日程</h2>
|
||||
<p class="text-gray-500">三天精彩，不容错过</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8">
|
||||
<div class="flex items-start space-x-6">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-12 h-12 rounded-full neu-flat flex items-center justify-center">
|
||||
<span class="mono text-sm">15</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h3 class="text-xl font-semibold">开幕式暨主论坛</h3>
|
||||
<span class="mono text-sm text-gray-400">09:00</span>
|
||||
</div>
|
||||
<p class="text-gray-600">政府领导致辞、产业报告发布、战略合作签约</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-6">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-12 h-12 rounded-full neu-flat flex items-center justify-center">
|
||||
<span class="mono text-sm">15</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h3 class="text-xl font-semibold">新品发布会</h3>
|
||||
<span class="mono text-sm text-gray-400">14:00</span>
|
||||
</div>
|
||||
<p class="text-gray-600">20+品牌新车型全球首发、技术创新展示</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-6">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-12 h-12 rounded-full neu-flat flex items-center justify-center">
|
||||
<span class="mono text-sm">16</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h3 class="text-xl font-semibold">技术创新峰会</h3>
|
||||
<span class="mono text-sm text-gray-400">09:00</span>
|
||||
</div>
|
||||
<p class="text-gray-600">8大专题论坛、院士专家演讲、圆桌讨论</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-6">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-12 h-12 rounded-full neu-flat flex items-center justify-center">
|
||||
<span class="mono text-sm">17</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h3 class="text-xl font-semibold">商务对接会</h3>
|
||||
<span class="mono text-sm text-gray-400">09:00</span>
|
||||
</div>
|
||||
<p class="text-gray-600">供需对接、项目洽谈、签约仪式</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 极简CTA -->
|
||||
<section class="py-20 px-6 bg-gray-50">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<div class="gradient-border p-12">
|
||||
<h2 class="text-4xl font-bold mb-6">加入我们</h2>
|
||||
<p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
|
||||
成为2024长三角新能源汽车产业博览会的一部分
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button class="px-8 py-3 liquid-button rounded-full">
|
||||
<span>申请参展</span>
|
||||
</button>
|
||||
<button class="px-8 py-3 neu-flat rounded-full micro-interaction">
|
||||
观众预登记
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 极简页脚 -->
|
||||
<footer class="py-12 px-6 border-t">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
|
||||
<div>
|
||||
<h3 class="font-bold mb-4">NEVIT 2024</h3>
|
||||
<p class="text-sm text-gray-500">引领新能源汽车产业发展</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-4">快速链接</h4>
|
||||
<ul class="space-y-2 text-sm text-gray-500">
|
||||
<li><a href="#" class="hover:text-gray-900 transition-colors">展会介绍</a></li>
|
||||
<li><a href="#" class="hover:text-gray-900 transition-colors">参展指南</a></li>
|
||||
<li><a href="#" class="hover:text-gray-900 transition-colors">观众服务</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-4">服务支持</h4>
|
||||
<ul class="space-y-2 text-sm text-gray-500">
|
||||
<li><a href="#" class="hover:text-gray-900 transition-colors">交通指南</a></li>
|
||||
<li><a href="#" class="hover:text-gray-900 transition-colors">酒店预订</a></li>
|
||||
<li><a href="#" class="hover:text-gray-900 transition-colors">展商服务</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-4">联系我们</h4>
|
||||
<ul class="space-y-2 text-sm text-gray-500">
|
||||
<li>400-888-8888</li>
|
||||
<li>info@nevit2024.com</li>
|
||||
<li>苏州国际博览中心</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center pt-8 border-t">
|
||||
<p class="text-sm text-gray-400 mono">© 2024 NEVIT | VERSION 4.0 | MINIMAL DESIGN</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// 磁性悬停效果
|
||||
document.querySelectorAll('.magnetic').forEach(element => {
|
||||
element.addEventListener('mousemove', (e) => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left - rect.width / 2;
|
||||
const y = e.clientY - rect.top - rect.height / 2;
|
||||
|
||||
element.style.transform = `translate(${x * 0.2}px, ${y * 0.2}px)`;
|
||||
});
|
||||
|
||||
element.addEventListener('mouseleave', () => {
|
||||
element.style.transform = 'translate(0, 0)';
|
||||
});
|
||||
});
|
||||
|
||||
// 平滑滚动
|
||||
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('.float-card').forEach(el => {
|
||||
el.style.opacity = '0';
|
||||
el.style.transform = 'translateY(20px)';
|
||||
el.style.transition = 'all 0.6s ease-out';
|
||||
observer.observe(el);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
814
.superdesign/design_iterations/exhibition_site_5.html
Normal file
814
.superdesign/design_iterations/exhibition_site_5.html
Normal file
@@ -0,0 +1,814 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>2024长三角国际新能源汽车与智能交通产业博览会 - 终极设计版</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;700&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary: #10b981;
|
||||
--secondary: #3b82f6;
|
||||
--accent: #8b5cf6;
|
||||
--dark: #0f172a;
|
||||
--light: #f8fafc;
|
||||
--gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
--gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
--gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif;
|
||||
background: var(--light);
|
||||
color: var(--dark);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
/* 高级渐变网格 */
|
||||
.gradient-mesh {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.03;
|
||||
z-index: -1;
|
||||
background:
|
||||
radial-gradient(at 20% 80%, var(--primary) 0px, transparent 50%),
|
||||
radial-gradient(at 80% 20%, var(--secondary) 0px, transparent 50%),
|
||||
radial-gradient(at 40% 40%, var(--accent) 0px, transparent 50%),
|
||||
radial-gradient(at 90% 70%, var(--primary) 0px, transparent 50%);
|
||||
}
|
||||
|
||||
/* 高级玻璃态 */
|
||||
.glass-morphism {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
|
||||
}
|
||||
|
||||
.dark-glass {
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 3D卡片翻转 */
|
||||
.card-3d {
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 0.6s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-3d:hover {
|
||||
transform: rotateY(5deg) rotateX(5deg) translateZ(20px);
|
||||
}
|
||||
|
||||
.card-front,
|
||||
.card-back {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.card-back {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
/* 流光动画 */
|
||||
@keyframes flow {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
.flowing-gradient {
|
||||
background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent), var(--primary));
|
||||
background-size: 300% 100%;
|
||||
animation: flow 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 高级悬停效果 */
|
||||
.hover-lift {
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-12px) scale(1.02);
|
||||
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* 粒子背景 */
|
||||
.particle {
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
opacity: 0.3;
|
||||
animation: float-particle 20s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes float-particle {
|
||||
from {
|
||||
transform: translateY(100vh) rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: translateY(-100vh) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 文字渐变动画 */
|
||||
.animated-text-gradient {
|
||||
background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
|
||||
background-size: 200% auto;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: shine 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
to { background-position: 200% center; }
|
||||
}
|
||||
|
||||
/* 高级按钮 */
|
||||
.premium-button {
|
||||
position: relative;
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 9999px;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.premium-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.premium-button:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
/* 滚动指示器 */
|
||||
.scroll-indicator {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--primary);
|
||||
transform-origin: left;
|
||||
z-index: 100;
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
|
||||
/* 数字滚动效果 */
|
||||
@keyframes count-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(50px) rotateX(90deg);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) rotateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.count-animation {
|
||||
animation: count-up 1s ease-out forwards;
|
||||
}
|
||||
|
||||
/* 交错动画 */
|
||||
.stagger-animation {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
animation: stagger-in 0.6s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes stagger-in {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.stagger-animation:nth-child(1) { animation-delay: 0.1s; }
|
||||
.stagger-animation:nth-child(2) { animation-delay: 0.2s; }
|
||||
.stagger-animation:nth-child(3) { animation-delay: 0.3s; }
|
||||
.stagger-animation:nth-child(4) { animation-delay: 0.4s; }
|
||||
.stagger-animation:nth-child(5) { animation-delay: 0.5s; }
|
||||
.stagger-animation:nth-child(6) { animation-delay: 0.6s; }
|
||||
|
||||
/* 波浪动画 */
|
||||
.wave {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%2310b981' fill-opacity='0.3' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,144C960,149,1056,139,1152,128C1248,117,1344,107,1392,101.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
background-size: cover;
|
||||
animation: wave 10s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes wave {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
|
||||
/* 高级工具提示 */
|
||||
.tooltip {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tooltip::after {
|
||||
content: attr(data-tooltip);
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-5px);
|
||||
background: var(--dark);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tooltip:hover::after {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(-10px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 渐变网格背景 -->
|
||||
<div class="gradient-mesh"></div>
|
||||
|
||||
<!-- 粒子动画 -->
|
||||
<div class="particle" style="left: 10%; animation-delay: 0s; width: 4px; height: 4px; background: var(--primary);"></div>
|
||||
<div class="particle" style="left: 30%; animation-delay: 3s; width: 6px; height: 6px; background: var(--secondary);"></div>
|
||||
<div class="particle" style="left: 50%; animation-delay: 6s; width: 3px; height: 3px; background: var(--accent);"></div>
|
||||
<div class="particle" style="left: 70%; animation-delay: 9s; width: 5px; height: 5px; background: var(--primary);"></div>
|
||||
<div class="particle" style="left: 90%; animation-delay: 12s; width: 4px; height: 4px; background: var(--secondary);"></div>
|
||||
|
||||
<!-- 滚动进度条 -->
|
||||
<div class="scroll-indicator" id="scrollIndicator"></div>
|
||||
|
||||
<!-- 高级导航栏 -->
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 glass-morphism transition-all duration-300" id="navbar">
|
||||
<div class="max-w-7xl mx-auto px-6 py-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-12 h-12 rounded-xl flowing-gradient flex items-center justify-center text-white font-bold shadow-lg">
|
||||
<span>NE</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-xl font-bold">NEVIT 2024</h1>
|
||||
<p class="text-xs text-gray-500 mono">NEW ENERGY VEHICLE IT</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden lg:flex items-center space-x-8">
|
||||
<a href="#home" class="nav-link relative py-2 transition-colors hover:text-primary">
|
||||
<span>首页</span>
|
||||
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300"></span>
|
||||
</a>
|
||||
<a href="#about" class="nav-link relative py-2 transition-colors hover:text-primary">
|
||||
<span>关于展会</span>
|
||||
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300"></span>
|
||||
</a>
|
||||
<a href="#exhibits" class="nav-link relative py-2 transition-colors hover:text-primary">
|
||||
<span>展区分布</span>
|
||||
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300"></span>
|
||||
</a>
|
||||
<a href="#schedule" class="nav-link relative py-2 transition-colors hover:text-primary">
|
||||
<span>活动日程</span>
|
||||
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300"></span>
|
||||
</a>
|
||||
<a href="#register" class="nav-link relative py-2 transition-colors hover:text-primary">
|
||||
<span>参展登记</span>
|
||||
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4">
|
||||
<button class="premium-button bg-gradient-to-r from-emerald-500 to-blue-500 text-white">
|
||||
立即参展
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 英雄区域 -->
|
||||
<section id="home" class="min-h-screen flex items-center justify-center relative pt-20 overflow-hidden">
|
||||
<div class="absolute inset-0 wave opacity-20"></div>
|
||||
|
||||
<div class="relative z-10 text-center px-4 max-w-6xl mx-auto">
|
||||
<div class="mb-8">
|
||||
<div class="inline-block px-4 py-2 glass-morphism rounded-full mb-6">
|
||||
<span class="text-sm font-semibold text-gray-600 mono">2024.06.15-17 | SUZHOU EXPO CENTER</span>
|
||||
</div>
|
||||
|
||||
<h1 class="text-6xl md:text-8xl font-black mb-6">
|
||||
<span class="block animated-text-gradient">2024 长三角</span>
|
||||
<span class="block text-gray-800 mt-2">新能源汽车博览会</span>
|
||||
</h1>
|
||||
|
||||
<p class="text-xl md:text-2xl text-gray-600 mb-12 max-w-3xl mx-auto">
|
||||
探索未来出行新模式 · 引领产业创新发展 · 共创绿色智能生态
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-16">
|
||||
<button class="premium-button bg-gradient-to-r from-emerald-500 to-blue-500 text-white text-lg shadow-xl hover:shadow-2xl">
|
||||
申请参展
|
||||
</button>
|
||||
<button class="premium-button glass-morphism text-gray-800 text-lg">
|
||||
下载展会手册
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据展示 -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<div class="glass-morphism rounded-2xl p-6 hover-lift stagger-animation">
|
||||
<div class="text-4xl font-bold mb-2 count-animation animated-text-gradient">500+</div>
|
||||
<div class="text-sm text-gray-600">参展企业</div>
|
||||
</div>
|
||||
<div class="glass-morphism rounded-2xl p-6 hover-lift stagger-animation">
|
||||
<div class="text-4xl font-bold mb-2 count-animation animated-text-gradient">50,000</div>
|
||||
<div class="text-sm text-gray-600">专业观众</div>
|
||||
</div>
|
||||
<div class="glass-morphism rounded-2xl p-6 hover-lift stagger-animation">
|
||||
<div class="text-4xl font-bold mb-2 count-animation animated-text-gradient">100+</div>
|
||||
<div class="text-sm text-gray-600">同期活动</div>
|
||||
</div>
|
||||
<div class="glass-morphism rounded-2xl p-6 hover-lift stagger-animation">
|
||||
<div class="text-4xl font-bold mb-2 count-animation animated-text-gradient">50,000㎡</div>
|
||||
<div class="text-sm text-gray-600">展览面积</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 展区介绍 -->
|
||||
<section id="exhibits" class="py-20 px-6 bg-gradient-to-b from-white to-gray-50">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-5xl font-black mb-4">
|
||||
<span class="animated-text-gradient">核心展区</span>
|
||||
</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="group relative card-3d">
|
||||
<div class="glass-morphism rounded-3xl p-8 hover-lift h-full">
|
||||
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-emerald-400 to-emerald-600 flex items-center justify-center text-white text-2xl mb-6 shadow-lg">
|
||||
🔋
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">动力电池技术</h3>
|
||||
<p class="text-gray-600 mb-4">固态电池、快充技术、电池管理系统、电池回收等前沿技术展示</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-semibold text-emerald-500">展厅 A1-A3</span>
|
||||
<span class="text-sm text-gray-400">150+ 展商</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group relative card-3d">
|
||||
<div class="glass-morphism rounded-3xl p-8 hover-lift h-full">
|
||||
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white text-2xl mb-6 shadow-lg">
|
||||
🤖
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">智能驾驶系统</h3>
|
||||
<p class="text-gray-600 mb-4">L3-L5级自动驾驶、激光雷达、高精地图、车路协同技术展示</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-semibold text-blue-500">展厅 B1-B2</span>
|
||||
<span class="text-sm text-gray-400">80+ 展商</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group relative card-3d">
|
||||
<div class="glass-morphism rounded-3xl p-8 hover-lift h-full">
|
||||
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center text-white text-2xl mb-6 shadow-lg">
|
||||
⚡
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">充电基础设施</h3>
|
||||
<p class="text-gray-600 mb-4">超级快充、无线充电、换电站、充电网络运营管理平台</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-semibold text-purple-500">展厅 C1-C2</span>
|
||||
<span class="text-sm text-gray-400">60+ 展商</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group relative card-3d">
|
||||
<div class="glass-morphism rounded-3xl p-8 hover-lift h-full">
|
||||
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-pink-400 to-pink-600 flex items-center justify-center text-white text-2xl mb-6 shadow-lg">
|
||||
🚗
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">新能源整车</h3>
|
||||
<p class="text-gray-600 mb-4">纯电动、混合动力、氢燃料电池等新能源汽车展示试驾</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-semibold text-pink-500">展厅 D1-D4</span>
|
||||
<span class="text-sm text-gray-400">100+ 展商</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group relative card-3d">
|
||||
<div class="glass-morphism rounded-3xl p-8 hover-lift h-full">
|
||||
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-yellow-400 to-yellow-600 flex items-center justify-center text-white text-2xl mb-6 shadow-lg">
|
||||
🌐
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">车联网技术</h3>
|
||||
<p class="text-gray-600 mb-4">5G-V2X、OTA升级、智能座舱、车载娱乐系统展示体验</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-semibold text-yellow-500">展厅 E1-E2</span>
|
||||
<span class="text-sm text-gray-400">70+ 展商</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group relative card-3d">
|
||||
<div class="glass-morphism rounded-3xl p-8 hover-lift h-full">
|
||||
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-red-400 to-red-600 flex items-center justify-center text-white text-2xl mb-6 shadow-lg">
|
||||
🏭
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">智能制造</h3>
|
||||
<p class="text-gray-600 mb-4">工业4.0、数字孪生、柔性生产线、智能工厂解决方案</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-semibold text-red-500">展厅 F1-F2</span>
|
||||
<span class="text-sm text-gray-400">40+ 展商</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 活动日程 -->
|
||||
<section id="schedule" class="py-20 px-6">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-5xl font-black mb-4">
|
||||
<span class="animated-text-gradient">精彩日程</span>
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600">三天展会，百场活动，不容错过</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- 第一天 -->
|
||||
<div class="glass-morphism rounded-3xl p-8">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-emerald-400 to-emerald-600 flex items-center justify-center text-white font-bold text-xl shadow-lg">
|
||||
15
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h3 class="text-2xl font-bold">Day 1</h3>
|
||||
<p class="text-gray-500">开幕日</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="border-l-4 border-emerald-500 pl-4">
|
||||
<div class="text-sm text-gray-500 mono">09:00-12:00</div>
|
||||
<div class="font-semibold">开幕式暨主论坛</div>
|
||||
<div class="text-sm text-gray-600">主会场</div>
|
||||
</div>
|
||||
<div class="border-l-4 border-emerald-500 pl-4">
|
||||
<div class="text-sm text-gray-500 mono">14:00-17:00</div>
|
||||
<div class="font-semibold">新品发布会</div>
|
||||
<div class="text-sm text-gray-600">发布厅</div>
|
||||
</div>
|
||||
<div class="border-l-4 border-emerald-500 pl-4">
|
||||
<div class="text-sm text-gray-500 mono">18:00-20:00</div>
|
||||
<div class="font-semibold">欢迎晚宴</div>
|
||||
<div class="text-sm text-gray-600">宴会厅</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二天 -->
|
||||
<div class="glass-morphism rounded-3xl p-8">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white font-bold text-xl shadow-lg">
|
||||
16
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h3 class="text-2xl font-bold">Day 2</h3>
|
||||
<p class="text-gray-500">技术日</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="border-l-4 border-blue-500 pl-4">
|
||||
<div class="text-sm text-gray-500 mono">09:00-12:00</div>
|
||||
<div class="font-semibold">技术创新峰会</div>
|
||||
<div class="text-sm text-gray-600">分论坛A-D</div>
|
||||
</div>
|
||||
<div class="border-l-4 border-blue-500 pl-4">
|
||||
<div class="text-sm text-gray-500 mono">14:00-16:00</div>
|
||||
<div class="font-semibold">专题研讨会</div>
|
||||
<div class="text-sm text-gray-600">会议室1-8</div>
|
||||
</div>
|
||||
<div class="border-l-4 border-blue-500 pl-4">
|
||||
<div class="text-sm text-gray-500 mono">16:30-18:00</div>
|
||||
<div class="font-semibold">圆桌讨论</div>
|
||||
<div class="text-sm text-gray-600">主会场</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第三天 -->
|
||||
<div class="glass-morphism rounded-3xl p-8">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center text-white font-bold text-xl shadow-lg">
|
||||
17
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h3 class="text-2xl font-bold">Day 3</h3>
|
||||
<p class="text-gray-500">商务日</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="border-l-4 border-purple-500 pl-4">
|
||||
<div class="text-sm text-gray-500 mono">09:00-12:00</div>
|
||||
<div class="font-semibold">商务对接会</div>
|
||||
<div class="text-sm text-gray-600">VIP洽谈区</div>
|
||||
</div>
|
||||
<div class="border-l-4 border-purple-500 pl-4">
|
||||
<div class="text-sm text-gray-500 mono">14:00-15:30</div>
|
||||
<div class="font-semibold">项目签约仪式</div>
|
||||
<div class="text-sm text-gray-600">主会场</div>
|
||||
</div>
|
||||
<div class="border-l-4 border-purple-500 pl-4">
|
||||
<div class="text-sm text-gray-500 mono">16:00-17:00</div>
|
||||
<div class="font-semibold">闭幕式</div>
|
||||
<div class="text-sm text-gray-600">主会场</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 参展登记 -->
|
||||
<section id="register" class="py-20 px-6 bg-gradient-to-b from-gray-50 to-white">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-5xl font-black mb-4">
|
||||
<span class="animated-text-gradient">立即参展</span>
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600">加入我们，共创新能源汽车产业未来</p>
|
||||
</div>
|
||||
|
||||
<div class="glass-morphism rounded-3xl 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-semibold text-gray-700 mb-2">企业名称 *</label>
|
||||
<input type="text" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 transition-all">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">联系人 *</label>
|
||||
<input type="text" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 transition-all">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">联系电话 *</label>
|
||||
<input type="tel" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 transition-all">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">电子邮箱 *</label>
|
||||
<input type="email" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 transition-all">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">展位类型 *</label>
|
||||
<select class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 transition-all">
|
||||
<option>标准展位 (9㎡) - ¥8,800</option>
|
||||
<option>豪华展位 (18㎡) - ¥16,800</option>
|
||||
<option>特装展位 (36㎡) - ¥32,800</option>
|
||||
<option>室外展位 (定制) - 面议</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">参展类别</label>
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input type="checkbox" class="rounded text-emerald-500 focus:ring-emerald-200">
|
||||
<span class="text-sm">整车制造</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input type="checkbox" class="rounded text-emerald-500 focus:ring-emerald-200">
|
||||
<span class="text-sm">动力电池</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input type="checkbox" class="rounded text-emerald-500 focus:ring-emerald-200">
|
||||
<span class="text-sm">智能驾驶</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input type="checkbox" class="rounded text-emerald-500 focus:ring-emerald-200">
|
||||
<span class="text-sm">充电设施</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input type="checkbox" class="rounded text-emerald-500 focus:ring-emerald-200">
|
||||
<span class="text-sm">车联网</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input type="checkbox" class="rounded text-emerald-500 focus:ring-emerald-200">
|
||||
<span class="text-sm">其他</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">备注说明</label>
|
||||
<textarea rows="4" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 transition-all"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-2">
|
||||
<input type="checkbox" class="rounded text-emerald-500 focus:ring-emerald-200">
|
||||
<label class="text-sm text-gray-600">
|
||||
我已阅读并同意 <a href="#" class="text-emerald-500 hover:underline">展会条款</a> 和 <a href="#" class="text-emerald-500 hover:underline">隐私政策</a>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="w-full py-4 premium-button bg-gradient-to-r from-emerald-500 to-blue-500 text-white text-lg font-semibold shadow-xl">
|
||||
提交申请
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="bg-gradient-to-b from-gray-900 to-black text-white py-16 px-6">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
|
||||
<div>
|
||||
<div class="flex items-center space-x-3 mb-4">
|
||||
<div class="w-10 h-10 rounded-xl flowing-gradient"></div>
|
||||
<h3 class="text-xl font-bold">NEVIT 2024</h3>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm">长三角国际新能源汽车与智能交通产业博览会</p>
|
||||
<div class="flex space-x-4 mt-6">
|
||||
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-emerald-500 transition-colors">
|
||||
<span class="text-sm">微</span>
|
||||
</a>
|
||||
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-emerald-500 transition-colors">
|
||||
<span class="text-sm">博</span>
|
||||
</a>
|
||||
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-emerald-500 transition-colors">
|
||||
<span class="text-sm">in</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-semibold mb-4">快速链接</h4>
|
||||
<ul class="space-y-2 text-gray-400 text-sm">
|
||||
<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>
|
||||
<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 text-sm">
|
||||
<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>
|
||||
<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-3 text-gray-400 text-sm">
|
||||
<li class="flex items-center space-x-2">
|
||||
<span>📞</span>
|
||||
<span>400-888-8888</span>
|
||||
</li>
|
||||
<li class="flex items-center space-x-2">
|
||||
<span>✉️</span>
|
||||
<span>info@nevit2024.com</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-2">
|
||||
<span>📍</span>
|
||||
<span>江苏省苏州市工业园区苏州大道东688号</span>
|
||||
</li>
|
||||
<li class="flex items-center space-x-2">
|
||||
<span>🕐</span>
|
||||
<span>周一至周五 9:00-18:00</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-gray-800 pt-8 text-center">
|
||||
<p class="text-gray-400 text-sm">
|
||||
© 2024 NEVIT. All rights reserved. | 苏ICP备2024XXXXX号 | 终极设计版本 5.0
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// 滚动进度条
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
|
||||
const scrollPercentage = (scrollTop / scrollHeight) * 100;
|
||||
document.getElementById('scrollIndicator').style.transform = `scaleX(${scrollPercentage / 100})`;
|
||||
});
|
||||
|
||||
// 导航栏滚动效果
|
||||
window.addEventListener('scroll', () => {
|
||||
const navbar = document.getElementById('navbar');
|
||||
if (window.scrollY > 100) {
|
||||
navbar.classList.add('shadow-lg');
|
||||
} else {
|
||||
navbar.classList.remove('shadow-lg');
|
||||
}
|
||||
});
|
||||
|
||||
// 导航链接激活状态
|
||||
document.querySelectorAll('.nav-link').forEach(link => {
|
||||
link.addEventListener('mouseenter', function() {
|
||||
this.querySelector('span:last-child').style.width = '100%';
|
||||
});
|
||||
link.addEventListener('mouseleave', function() {
|
||||
if (!this.classList.contains('active')) {
|
||||
this.querySelector('span:last-child').style.width = '0';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 平滑滚动
|
||||
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',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 数字动画
|
||||
const observerOptions = {
|
||||
threshold: 0.5,
|
||||
rootMargin: '0px 0px -100px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('count-animation');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.count-animation').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user