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>
644 lines
27 KiB
HTML
644 lines
27 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长三角国际新能源汽车与智能交通产业博览会 - 设计迭代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> |