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>
516 lines
26 KiB
HTML
516 lines
26 KiB
HTML
<!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> |