2b1ed656cd
主要改进: - 修复星形图标可见性问题，改为黄色高对比度显示 - 移除'立即参展'按钮，清理冗余CTA元素 - 修正背景图片路径并优化透明度(opacity-10) - 为所有容器区域添加hover提示文字 - 删除'立即参与，共创绿色出行未来'整个CTA区块 - 优化页面加载器和图片错误处理 - 修复展会信息卡片文字对比度问题 - 增强多层背景遮罩效果 影响文件: - web_frontend/web_result/index.html - web_frontend/web_result/css/animations.css - web_frontend/web_result/js/main.js - 新增多个页面和样式文件 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
814 lines
39 KiB
HTML
814 lines
39 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>2024长三角国际新能源汽车与智能交通产业博览会 - 终极设计版</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> |