3b8cb3c568
详细说明: - 能源订单班: 重命名7个图片文件为描述性中文名称 - 能源订单班: 更新markdown文档中的所有图片引用 - 智能开发订单班: 优化图片命名结构 - 化工订单班: 整理图片资源 - 新增SuperDesign食品订单班设计迭代文件 - 新增能源订单班终端模拟数据(energy.ts) - 清理web_frontend冗余文档 图片重命名映射: - Whisk_1ebf7115ee180218c354deb8bff7f3eddr.jpg → 光伏面板室外场景图片.jpg - Whisk_582dc133200b175859e4b322295fb3d1dr.jpg → 光伏面板生成画面.jpg - image.jpg → PLC示意图.jpg - Whisk_b35aa11c60670e38bea44dcd9fe7df5fdr.jpg → 工业机器人图片.jpg - Whisk_028f4b832e3496db8814cd48f050ec03dr.jpg → 机器视觉相机图片.jpg - Whisk_eb381c66f5156a4a74f49102095ae534dr.jpg → 输送与治具.jpg - Mermaid_Chart[...].jpg → Mermaid流程图.jpg 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
635 lines
26 KiB
HTML
635 lines
26 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长三角国际新能源汽车与智能交通产业博览会 - 设计迭代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> |