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
@@ -4,106 +4,248 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>2024长三角国际新能源汽车与智能交通产业博览会</title>
|
||||
|
||||
<!-- 预加载关键资源 -->
|
||||
<link rel="preload" href="css/styles.css" as="style">
|
||||
<link rel="preload" href="css/animations.css" as="style">
|
||||
|
||||
<!-- 样式表 -->
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<link rel="stylesheet" href="css/animations.css">
|
||||
|
||||
<!-- Tailwind CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
|
||||
<!-- 字体 -->
|
||||
<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&family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Font Awesome 图标 -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
* {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
.hero-gradient {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: linear-gradient(135deg,
|
||||
rgba(16, 185, 129, 0.1) 0%,
|
||||
rgba(59, 130, 246, 0.1) 50%,
|
||||
rgba(139, 92, 246, 0.1) 100%);
|
||||
}
|
||||
.card-hover {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.card-hover:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
||||
}
|
||||
.nav-link {
|
||||
|
||||
.image-shine {
|
||||
position: relative;
|
||||
transition: color 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nav-link::after {
|
||||
|
||||
.image-shine::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: #667eea;
|
||||
transition: width 0.3s ease;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
transparent 30%,
|
||||
rgba(255, 255, 255, 0.3) 50%,
|
||||
transparent 70%
|
||||
);
|
||||
transform: rotate(45deg);
|
||||
transition: all 0.6s;
|
||||
opacity: 0;
|
||||
}
|
||||
.nav-link:hover::after,
|
||||
.nav-link.active::after {
|
||||
width: 100%;
|
||||
|
||||
.image-shine:hover::before {
|
||||
animation: shine 0.6s ease-in-out;
|
||||
}
|
||||
.fade-in {
|
||||
animation: fadeIn 0.8s ease-in;
|
||||
|
||||
@keyframes shine {
|
||||
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); opacity: 0; }
|
||||
50% { opacity: 1; }
|
||||
100% { transform: translateX(100%) translateY(100%) rotate(45deg); opacity: 0; }
|
||||
}
|
||||
|
||||
.floating {
|
||||
animation: floating 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes floating {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
/* 确保页面加载时body不能滚动 */
|
||||
body.loading {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 图片加载优化 */
|
||||
img {
|
||||
background-color: #f3f4f6;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
img.image-loaded {
|
||||
opacity: 1;
|
||||
animation: fadeIn 0.5s ease;
|
||||
}
|
||||
|
||||
img.image-error {
|
||||
opacity: 0.5;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<body class="bg-gray-50 loading">
|
||||
<!-- 页面加载器 -->
|
||||
<div class="page-loader" id="pageLoader">
|
||||
<div class="loader-content">
|
||||
<div class="loader-logo">
|
||||
<i class="fas fa-car text-4xl text-emerald-500"></i>
|
||||
</div>
|
||||
<div class="loader-text">加载中...</div>
|
||||
<div class="loader-progress">
|
||||
<div class="loader-progress-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 w-full bg-white shadow-md z-50">
|
||||
<nav class="fixed top-0 w-full glass-morphism shadow-md z-50 transition-all duration-300" id="navbar">
|
||||
<div class="container mx-auto px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-8 h-8 mr-3 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z"/>
|
||||
</svg>
|
||||
<span class="text-xl font-bold text-gray-800">Green Mobility 2024</span>
|
||||
<div class="flex items-center fade-in-left">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-emerald-400 to-blue-500 rounded-lg flex items-center justify-center mr-3">
|
||||
<i class="fas fa-charging-station text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-lg font-bold">NEVIT 2024</h1>
|
||||
<p class="text-xs text-gray-500">新能源汽车产业博览会</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:flex space-x-8">
|
||||
<a href="index.html" class="nav-link active text-gray-700 hover:text-purple-600">首页</a>
|
||||
<a href="pages/overview.html" class="nav-link text-gray-700 hover:text-purple-600">策划概述</a>
|
||||
<a href="pages/exhibition.html" class="nav-link text-gray-700 hover:text-purple-600">展会介绍</a>
|
||||
<a href="pages/marketing.html" class="nav-link text-gray-700 hover:text-purple-600">营销方案</a>
|
||||
<a href="pages/operation.html" class="nav-link text-gray-700 hover:text-purple-600">现场运营</a>
|
||||
<a href="pages/budget.html" class="nav-link text-gray-700 hover:text-purple-600">预算分析</a>
|
||||
<a href="pages/risk.html" class="nav-link text-gray-700 hover:text-purple-600">风险评估</a>
|
||||
<a href="index.html" class="nav-link active text-gray-700 hover:text-emerald-500 transition-colors">
|
||||
<i class="fas fa-home mr-2"></i>首页
|
||||
</a>
|
||||
<a href="pages/overview.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
|
||||
<i class="fas fa-info-circle mr-2"></i>展会概览
|
||||
</a>
|
||||
<a href="pages/exhibition.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
|
||||
<i class="fas fa-th-large mr-2"></i>展览内容
|
||||
</a>
|
||||
<a href="pages/marketing.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
|
||||
<i class="fas fa-bullhorn mr-2"></i>营销推广
|
||||
</a>
|
||||
<a href="pages/operation.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
|
||||
<i class="fas fa-cogs mr-2"></i>运营服务
|
||||
</a>
|
||||
<a href="pages/budget.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
|
||||
<i class="fas fa-chart-pie mr-2"></i>预算分析
|
||||
</a>
|
||||
<a href="pages/risk.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
|
||||
<i class="fas fa-shield-alt mr-2"></i>风险评估
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<button class="md:hidden p-2" id="mobileMenuBtn">
|
||||
<i class="fas fa-bars text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
<button class="md:hidden">
|
||||
<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>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-gradient text-white pt-24 pb-20">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="fade-in">
|
||||
<h1 class="text-5xl md:text-6xl font-bold mb-6">
|
||||
智行未来，绿动长三角
|
||||
<section class="relative min-h-screen flex items-center justify-center overflow-hidden hero-gradient py-32">
|
||||
<!-- 背景图片 -->
|
||||
<div class="absolute inset-0 z-0">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-purple-100 via-blue-50 to-emerald-50"></div>
|
||||
<div class="absolute inset-0 opacity-10" style="background-image: url('../data/会展策划/image/博览会.jpg'); background-size: cover; background-position: center;"></div>
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-white/60 to-white/90"></div>
|
||||
</div>
|
||||
|
||||
<!-- 浮动装饰元素 -->
|
||||
<div class="absolute top-20 left-10 w-20 h-20 bg-emerald-400 rounded-full opacity-20 floating"></div>
|
||||
<div class="absolute bottom-20 right-10 w-32 h-32 bg-blue-400 rounded-full opacity-20 floating" style="animation-delay: 1s;"></div>
|
||||
<div class="absolute top-1/2 left-20 w-16 h-16 bg-purple-400 rounded-full opacity-20 floating" style="animation-delay: 2s;"></div>
|
||||
|
||||
<div class="relative z-10 container mx-auto px-6 text-center py-12">
|
||||
<div class="fade-in-up">
|
||||
<!-- 标签 -->
|
||||
<div class="inline-flex items-center px-4 py-2 bg-white/80 backdrop-blur-sm rounded-full mb-6 shadow-lg">
|
||||
<span class="animate-pulse w-2 h-2 bg-emerald-500 rounded-full mr-2"></span>
|
||||
<span class="text-sm font-semibold text-gray-700">2024年6月15-17日 · 苏州国际博览中心</span>
|
||||
</div>
|
||||
|
||||
<h1 class="text-5xl md:text-7xl font-black mb-6">
|
||||
<span class="block text-gradient-animate">2024 长三角国际</span>
|
||||
<span class="block text-gray-800 mt-2">新能源汽车与智能交通</span>
|
||||
<span class="block text-4xl md:text-5xl text-gray-600 mt-2">产业博览会</span>
|
||||
</h1>
|
||||
<h2 class="text-2xl md:text-3xl mb-8 opacity-90">
|
||||
2024长三角国际新能源汽车与智能交通产业博览会
|
||||
</h2>
|
||||
<div class="flex flex-wrap gap-4 mb-12">
|
||||
<div class="bg-white/20 backdrop-blur-sm rounded-lg px-6 py-3">
|
||||
<span class="font-semibold">📅 时间：</span>2024年9月12日-15日
|
||||
|
||||
<p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto">
|
||||
<i class="fas fa-quote-left text-emerald-500 mr-2"></i>
|
||||
引领绿色出行新时代 · 共创智能交通新未来
|
||||
<i class="fas fa-quote-right text-emerald-500 ml-2"></i>
|
||||
</p>
|
||||
<!-- 核心信息展示 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12 max-w-5xl mx-auto">
|
||||
<div class="bg-white/95 backdrop-blur-md rounded-2xl p-6 border-2 border-purple-200 hover:border-purple-400 transition-all duration-300 transform hover:scale-105 animate-fadeInUp animation-delay-200 shadow-2xl">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-full flex items-center justify-center mb-3 shadow-lg">
|
||||
<i class="fas fa-calendar-alt text-3xl text-white"></i>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm font-medium mb-2">展会时间</p>
|
||||
<p class="text-gray-900 font-bold text-2xl text-center">2024年9月</p>
|
||||
<p class="text-gray-800 font-bold text-xl">12-15日</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white/20 backdrop-blur-sm rounded-lg px-6 py-3">
|
||||
<span class="font-semibold">📍 地点：</span>国家会展中心（上海）
|
||||
|
||||
<div class="bg-white/95 backdrop-blur-md rounded-2xl p-6 border-2 border-blue-200 hover:border-blue-400 transition-all duration-300 transform hover:scale-105 animate-fadeInUp animation-delay-400 shadow-2xl">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center mb-3 shadow-lg">
|
||||
<i class="fas fa-map-marked-alt text-3xl text-white"></i>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm font-medium mb-2">展会地点</p>
|
||||
<p class="text-gray-900 font-bold text-2xl text-center">国家会展中心</p>
|
||||
<p class="text-gray-800 font-bold text-xl">上海</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white/20 backdrop-blur-sm rounded-lg px-6 py-3">
|
||||
<span class="font-semibold">🏢 规模：</span>50,000平方米
|
||||
|
||||
<div class="bg-white/95 backdrop-blur-md rounded-2xl p-6 border-2 border-green-200 hover:border-green-400 transition-all duration-300 transform hover:scale-105 animate-fadeInUp animation-delay-600 shadow-2xl">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center mb-3 shadow-lg">
|
||||
<i class="fas fa-expand-arrows-alt text-3xl text-white"></i>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm font-medium mb-2">展览规模</p>
|
||||
<p class="text-gray-900 font-bold text-3xl">50,000</p>
|
||||
<p class="text-gray-800 font-bold text-lg">平方米</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<a href="pages/overview.html" class="bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
|
||||
了解详情
|
||||
|
||||
<!-- CTA按钮组 -->
|
||||
<div class="flex flex-col md:flex-row gap-6 justify-center items-center animate-fadeInUp animation-delay-800">
|
||||
<a href="pages/overview.html" class="group relative overflow-hidden bg-white text-purple-700 px-12 py-5 rounded-full font-bold text-xl shadow-2xl hover:shadow-white/30 transition-all duration-300 transform hover:scale-110">
|
||||
<span class="absolute inset-0 bg-gradient-to-r from-purple-600 to-pink-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
|
||||
<span class="relative z-10 flex items-center group-hover:text-white">
|
||||
<i class="fas fa-sparkles mr-3 text-2xl animate-pulse"></i>
|
||||
了解详情
|
||||
<i class="fas fa-arrow-right ml-3 group-hover:translate-x-2 transition-transform"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a href="#highlights" class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-purple-600 transition">
|
||||
展会亮点
|
||||
<a href="#highlights" class="group relative overflow-hidden bg-gradient-to-r from-purple-600 to-pink-600 text-white px-12 py-5 rounded-full font-bold text-xl hover:from-purple-700 hover:to-pink-700 transition-all duration-300 transform hover:scale-110 shadow-2xl">
|
||||
<span class="relative z-10 flex items-center">
|
||||
<i class="fas fa-star mr-3 text-2xl text-yellow-300"></i>
|
||||
展会亮点
|
||||
<i class="fas fa-chevron-down ml-3 animate-bounce"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -111,72 +253,124 @@
|
||||
</section>
|
||||
|
||||
<!-- Key Stats Section -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div class="text-center fade-in">
|
||||
<div class="text-4xl font-bold text-purple-600 mb-2">350+</div>
|
||||
<div class="text-gray-600">参展企业</div>
|
||||
<section class="py-20 -mt-20 relative z-20 bg-gradient-to-br from-white via-gray-50 to-white">
|
||||
<!-- 背景装饰 -->
|
||||
<div class="absolute inset-0 opacity-5" style="background-image: url('../data/会展策划/image/Whisk_9e8c1f44ac.jpg'); background-size: cover; background-position: center;"></div>
|
||||
|
||||
<div class="container mx-auto px-6 relative z-10" title="核心数据展示区">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
|
||||
<div class="text-center group animate-fadeInUp animation-delay-200 transform hover:scale-105 transition-all duration-300">
|
||||
<div class="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-2xl group-hover:shadow-purple-500/30 group-hover:rotate-3 transition-all">
|
||||
<i class="fas fa-building text-4xl text-white"></i>
|
||||
</div>
|
||||
<div class="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600 mb-2">
|
||||
<span class="counter" data-target="350">0</span>+
|
||||
</div>
|
||||
<div class="text-gray-700 font-semibold text-lg">参展企业</div>
|
||||
</div>
|
||||
<div class="text-center fade-in">
|
||||
<div class="text-4xl font-bold text-purple-600 mb-2">50,000+</div>
|
||||
<div class="text-gray-600">预计观众</div>
|
||||
<div class="text-center group animate-fadeInUp animation-delay-400 transform hover:scale-105 transition-all duration-300">
|
||||
<div class="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center shadow-2xl group-hover:shadow-blue-500/30 group-hover:-rotate-3 transition-all">
|
||||
<i class="fas fa-users text-4xl text-white"></i>
|
||||
</div>
|
||||
<div class="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-cyan-600 mb-2">
|
||||
<span class="counter" data-target="50000">0</span>+
|
||||
</div>
|
||||
<div class="text-gray-700 font-semibold text-lg">预计观众</div>
|
||||
</div>
|
||||
<div class="text-center fade-in">
|
||||
<div class="text-4xl font-bold text-purple-600 mb-2">10亿+</div>
|
||||
<div class="text-gray-600">预计成交额</div>
|
||||
<div class="text-center group animate-fadeInUp animation-delay-600 transform hover:scale-105 transition-all duration-300">
|
||||
<div class="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl flex items-center justify-center shadow-2xl group-hover:shadow-green-500/30 group-hover:rotate-3 transition-all">
|
||||
<i class="fas fa-hand-holding-usd text-4xl text-white"></i>
|
||||
</div>
|
||||
<div class="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-600 to-emerald-600 mb-2">
|
||||
<span class="counter" data-target="10">0</span>亿+
|
||||
</div>
|
||||
<div class="text-gray-700 font-semibold text-lg">预计成交额</div>
|
||||
</div>
|
||||
<div class="text-center fade-in">
|
||||
<div class="text-4xl font-bold text-purple-600 mb-2">20+</div>
|
||||
<div class="text-gray-600">专业论坛</div>
|
||||
<div class="text-center group animate-fadeInUp animation-delay-800 transform hover:scale-105 transition-all duration-300">
|
||||
<div class="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-orange-500 to-orange-600 rounded-2xl flex items-center justify-center shadow-2xl group-hover:shadow-orange-500/30 group-hover:-rotate-3 transition-all">
|
||||
<i class="fas fa-microphone-alt text-4xl text-white"></i>
|
||||
</div>
|
||||
<div class="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-red-600 mb-2">
|
||||
<span class="counter" data-target="20">0</span>+
|
||||
</div>
|
||||
<div class="text-gray-700 font-semibold text-lg">专业论坛</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Highlights Section -->
|
||||
<section id="highlights" class="py-20 bg-gray-50">
|
||||
<div class="container mx-auto px-6">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-12">展会亮点</h2>
|
||||
<section id="highlights" class="py-20 relative overflow-hidden">
|
||||
<!-- 背景图片层 - 降低透明度 -->
|
||||
<div class="absolute inset-0 opacity-20" style="background-image: url('../data/会展策划/image/Whisk_27184afa6e.jpg'); background-size: cover; background-position: center; background-attachment: fixed;"></div>
|
||||
|
||||
<!-- 强化遮罩层 - 确保主体内容清晰 -->
|
||||
<div class="absolute inset-0 bg-white/85"></div>
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-gray-50/95 to-purple-50/95"></div>
|
||||
<div class="absolute inset-0 opacity-10">
|
||||
<div class="absolute top-20 left-20 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl animate-blob"></div>
|
||||
<div class="absolute top-40 right-20 w-72 h-72 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-2000"></div>
|
||||
<div class="absolute -bottom-8 left-40 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-4000"></div>
|
||||
</div>
|
||||
<div class="container mx-auto px-6 relative z-10" title="展会亮点展示区">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-12 animate-fadeInUp">展会亮点</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- Card 1 -->
|
||||
<div class="card-hover bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
<div class="h-48 bg-gradient-to-br from-blue-500 to-cyan-600"></div>
|
||||
<div class="card-hover bg-white/90 backdrop-blur rounded-xl shadow-xl overflow-hidden group animate-fadeInUp animation-delay-200">
|
||||
<div class="h-48 relative overflow-hidden">
|
||||
<img src="../data/会展策划/image/3.小米汽车.jpg" alt="小米汽车" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
|
||||
<div class="absolute bottom-4 left-4 text-white">
|
||||
<div class="bg-blue-500 px-3 py-1 rounded-full text-xs font-semibold inline-block mb-2">热门展区</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-bold mb-3">全产业链展示</h3>
|
||||
<h3 class="text-xl font-bold mb-3 group-hover:text-purple-600 transition-colors">全产业链展示</h3>
|
||||
<p class="text-gray-600 mb-4">
|
||||
涵盖整车制造、核心零部件、充电设施、智能网联等全产业链环节，打造一站式采购平台。
|
||||
</p>
|
||||
<a href="pages/exhibition.html" class="text-purple-600 font-semibold hover:text-purple-800">
|
||||
了解更多 →
|
||||
<a href="pages/exhibition.html" class="text-purple-600 font-semibold hover:text-purple-800 flex items-center group/link">
|
||||
了解更多 <i class="fas fa-arrow-right ml-2 transform transition-transform group-hover/link:translate-x-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="card-hover bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
<div class="h-48 bg-gradient-to-br from-green-500 to-emerald-600"></div>
|
||||
<div class="card-hover bg-white/90 backdrop-blur rounded-xl shadow-xl overflow-hidden group animate-fadeInUp animation-delay-400">
|
||||
<div class="h-48 relative overflow-hidden">
|
||||
<img src="../data/会展策划/image/2.试驾小景.jpg" alt="试驾体验" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
|
||||
<div class="absolute bottom-4 left-4 text-white">
|
||||
<div class="bg-emerald-500 px-3 py-1 rounded-full text-xs font-semibold inline-block mb-2">互动体验</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-bold mb-3">创新技术体验</h3>
|
||||
<h3 class="text-xl font-bold mb-3 group-hover:text-emerald-600 transition-colors">创新技术体验</h3>
|
||||
<p class="text-gray-600 mb-4">
|
||||
设置自动驾驶体验区、智能交通演示区，让观众亲身体验最新科技成果。
|
||||
</p>
|
||||
<a href="pages/operation.html" class="text-purple-600 font-semibold hover:text-purple-800">
|
||||
了解更多 →
|
||||
<a href="pages/operation.html" class="text-emerald-600 font-semibold hover:text-emerald-800 flex items-center group/link">
|
||||
了解更多 <i class="fas fa-arrow-right ml-2 transform transition-transform group-hover/link:translate-x-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="card-hover bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
<div class="h-48 bg-gradient-to-br from-purple-500 to-pink-600"></div>
|
||||
<div class="card-hover bg-white/90 backdrop-blur rounded-xl shadow-xl overflow-hidden group animate-fadeInUp animation-delay-600">
|
||||
<div class="h-48 relative overflow-hidden">
|
||||
<img src="../data/会展策划/image/展会内部参观.jpg" alt="论坛峰会" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
|
||||
<div class="absolute bottom-4 left-4 text-white">
|
||||
<div class="bg-purple-500 px-3 py-1 rounded-full text-xs font-semibold inline-block mb-2">主题论坛</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-bold mb-3">高端论坛峰会</h3>
|
||||
<h3 class="text-xl font-bold mb-3 group-hover:text-purple-600 transition-colors">高端论坛峰会</h3>
|
||||
<p class="text-gray-600 mb-4">
|
||||
汇聚行业领袖、专家学者，探讨产业发展趋势，发布权威研究报告。
|
||||
</p>
|
||||
<a href="pages/marketing.html" class="text-purple-600 font-semibold hover:text-purple-800">
|
||||
了解更多 →
|
||||
<a href="pages/marketing.html" class="text-purple-600 font-semibold hover:text-purple-800 flex items-center group/link">
|
||||
了解更多 <i class="fas fa-arrow-right ml-2 transform transition-transform group-hover/link:translate-x-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -185,96 +379,197 @@
|
||||
</section>
|
||||
|
||||
<!-- Exhibition Areas -->
|
||||
<section class="py-20 bg-white">
|
||||
<section class="py-20 bg-gradient-to-br from-white via-indigo-50 to-purple-50">
|
||||
<div class="container mx-auto px-6">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-12">展区规划</h2>
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-4 animate-fadeInUp">展区规划</h2>
|
||||
<p class="text-center text-gray-600 mb-12 animate-fadeInUp animation-delay-200">50,000平方米超大展览空间，打造沉浸式体验</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="text-center p-6 border-2 border-purple-200 rounded-lg hover:border-purple-500 transition">
|
||||
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/>
|
||||
<path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z"/>
|
||||
</svg>
|
||||
<div class="group text-center p-6 bg-white/80 backdrop-blur border-2 border-purple-200 rounded-2xl hover:border-purple-500 hover:shadow-2xl transform transition-all duration-300 hover:-translate-y-2 animate-fadeInUp animation-delay-300">
|
||||
<div class="w-20 h-20 bg-gradient-to-br from-blue-400 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:rotate-6 transition-transform duration-300">
|
||||
<i class="fas fa-car text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2 text-gray-800">整车展示区</h3>
|
||||
<p class="text-purple-600 font-bold text-xl mb-1">20,000m²</p>
|
||||
<p class="text-gray-500 text-sm">100+品牌车型</p>
|
||||
<div class="mt-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<span class="inline-block bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-xs">核心展区</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold mb-2">整车展示区</h3>
|
||||
<p class="text-gray-600 text-sm">20,000平方米</p>
|
||||
</div>
|
||||
<div class="text-center p-6 border-2 border-purple-200 rounded-lg hover:border-purple-500 transition">
|
||||
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
||||
<div class="group text-center p-6 bg-white/80 backdrop-blur border-2 border-emerald-200 rounded-2xl hover:border-emerald-500 hover:shadow-2xl transform transition-all duration-300 hover:-translate-y-2 animate-fadeInUp animation-delay-400">
|
||||
<div class="w-20 h-20 bg-gradient-to-br from-emerald-400 to-teal-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:rotate-6 transition-transform duration-300">
|
||||
<i class="fas fa-microchip text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2 text-gray-800">核心零部件区</h3>
|
||||
<p class="text-emerald-600 font-bold text-xl mb-1">15,000m²</p>
|
||||
<p class="text-gray-500 text-sm">500+供应商</p>
|
||||
<div class="mt-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<span class="inline-block bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs">技术展示</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold mb-2">核心零部件区</h3>
|
||||
<p class="text-gray-600 text-sm">15,000平方米</p>
|
||||
</div>
|
||||
<div class="text-center p-6 border-2 border-purple-200 rounded-lg hover:border-purple-500 transition">
|
||||
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 3.5a1.5 1.5 0 013 0V4a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-.5a1.5 1.5 0 000 3h.5a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-.5a1.5 1.5 0 00-3 0v.5a1 1 0 01-1 1H6a1 1 0 01-1-1v-3a1 1 0 00-1-1h-.5a1.5 1.5 0 010-3H4a1 1 0 001-1V6a1 1 0 011-1h3a1 1 0 001-1v-.5z"/>
|
||||
</svg>
|
||||
|
||||
<div class="group text-center p-6 bg-white/80 backdrop-blur border-2 border-indigo-200 rounded-2xl hover:border-indigo-500 hover:shadow-2xl transform transition-all duration-300 hover:-translate-y-2 animate-fadeInUp animation-delay-500">
|
||||
<div class="w-20 h-20 bg-gradient-to-br from-indigo-400 to-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:rotate-6 transition-transform duration-300">
|
||||
<i class="fas fa-network-wired text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2 text-gray-800">智能交通区</h3>
|
||||
<p class="text-indigo-600 font-bold text-xl mb-1">10,000m²</p>
|
||||
<p class="text-gray-500 text-sm">50+解决方案</p>
|
||||
<div class="mt-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<span class="inline-block bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full text-xs">创新科技</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold mb-2">智能交通区</h3>
|
||||
<p class="text-gray-600 text-sm">10,000平方米</p>
|
||||
</div>
|
||||
<div class="text-center p-6 border-2 border-purple-200 rounded-lg hover:border-purple-500 transition">
|
||||
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
||||
<div class="group text-center p-6 bg-white/80 backdrop-blur border-2 border-pink-200 rounded-2xl hover:border-pink-500 hover:shadow-2xl transform transition-all duration-300 hover:-translate-y-2 animate-fadeInUp animation-delay-600">
|
||||
<div class="w-20 h-20 bg-gradient-to-br from-pink-400 to-rose-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:rotate-6 transition-transform duration-300">
|
||||
<i class="fas fa-gamepad text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2 text-gray-800">体验互动区</h3>
|
||||
<p class="text-pink-600 font-bold text-xl mb-1">5,000m²</p>
|
||||
<p class="text-gray-500 text-sm">20+互动项目</p>
|
||||
<div class="mt-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<span class="inline-block bg-pink-100 text-pink-700 px-3 py-1 rounded-full text-xs">沉浸体验</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 展馆布置图 -->
|
||||
<div class="mt-12 animate-fadeInUp animation-delay-700">
|
||||
<div class="bg-white/90 backdrop-blur rounded-2xl shadow-xl overflow-hidden">
|
||||
<img src="../data/会展策划/image/展馆布置图.jpeg" alt="展馆布置图" class="w-full h-auto hover:scale-105 transition-transform duration-700">
|
||||
<div class="p-4 bg-gradient-to-r from-purple-600 to-indigo-600 text-white">
|
||||
<p class="text-center font-semibold"><i class="fas fa-map-marked-alt mr-2"></i>展馆3D全景布置图 - 点击查看详情</p>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold mb-2">体验互动区</h3>
|
||||
<p class="text-gray-600 text-sm">5,000平方米</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="py-20 bg-gradient-to-r from-purple-600 to-pink-600 text-white">
|
||||
<div class="container mx-auto px-6 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">立即参与，共创绿色出行未来</h2>
|
||||
<p class="text-xl mb-8 opacity-90">加入我们，共同推动新能源汽车产业发展</p>
|
||||
<div class="flex justify-center gap-4">
|
||||
<a href="pages/exhibition.html" class="bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
|
||||
参展申请
|
||||
</a>
|
||||
<a href="pages/marketing.html" class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-purple-600 transition">
|
||||
观众预登记
|
||||
</a>
|
||||
<!-- Gallery Section -->
|
||||
<section class="py-20 bg-gradient-to-br from-gray-900 to-purple-900 relative overflow-hidden">
|
||||
<div class="absolute inset-0 opacity-10">
|
||||
<div class="absolute top-0 left-0 w-full h-full bg-[url('../data/会展策划/image/展会内部参观.jpg')] bg-cover bg-center bg-fixed"></div>
|
||||
</div>
|
||||
<div class="container mx-auto px-6 relative z-10" title="精彩瞬间展示区">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-center text-white mb-12 animate-fadeInUp">精彩瞬间</h2>
|
||||
<div class="grid md:grid-cols-3 gap-6 mb-8">
|
||||
<div class="group relative overflow-hidden rounded-2xl shadow-2xl animate-fadeInUp animation-delay-200">
|
||||
<img src="../data/会展策划/image/展会内部参观.jpg" alt="展会内部" class="w-full h-64 object-cover transform transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
|
||||
<h3 class="text-xl font-bold mb-2">展馆内部参观</h3>
|
||||
<p class="text-sm">宽敞明亮的展示空间，科技感十足</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group relative overflow-hidden rounded-2xl shadow-2xl animate-fadeInUp animation-delay-400">
|
||||
<img src="../data/会展策划/image/签到.jpg" alt="签到处" class="w-full h-64 object-cover transform transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
|
||||
<h3 class="text-xl font-bold mb-2">智能签到系统</h3>
|
||||
<p class="text-sm">快速便捷的入场体验</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group relative overflow-hidden rounded-2xl shadow-2xl animate-fadeInUp animation-delay-600">
|
||||
<img src="../data/会展策划/image/3.小米汽车.jpg" alt="展品展示" class="w-full h-64 object-cover transform transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
|
||||
<h3 class="text-xl font-bold mb-2">明星展品</h3>
|
||||
<p class="text-sm">最新款新能源汽车亮相</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 更多图片展示 -->
|
||||
<div class="grid md:grid-cols-4 gap-4">
|
||||
<div class="group relative overflow-hidden rounded-xl shadow-xl animate-fadeInUp animation-delay-800">
|
||||
<img src="../data/会展策划/image/Whisk_03282ab7e5.jpg" alt="展品1" class="w-full h-48 object-cover transform transition-all duration-500 group-hover:scale-110 group-hover:rotate-1">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-purple-600/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
</div>
|
||||
<div class="group relative overflow-hidden rounded-xl shadow-xl animate-fadeInUp animation-delay-900">
|
||||
<img src="../data/会展策划/image/Whisk_15f65339bb.jpg" alt="展品2" class="w-full h-48 object-cover transform transition-all duration-500 group-hover:scale-110 group-hover:rotate-1">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-indigo-600/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
</div>
|
||||
<div class="group relative overflow-hidden rounded-xl shadow-xl animate-fadeInUp animation-delay-1000">
|
||||
<img src="../data/会展策划/image/Whisk_192cdc54bc.jpg" alt="展品3" class="w-full h-48 object-cover transform transition-all duration-500 group-hover:scale-110 group-hover:rotate-1">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-blue-600/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
</div>
|
||||
<div class="group relative overflow-hidden rounded-xl shadow-xl animate-fadeInUp animation-delay-1100">
|
||||
<img src="../data/会展策划/image/Whisk_1c05424f7f.jpg" alt="展品4" class="w-full h-48 object-cover transform transition-all duration-500 group-hover:scale-110 group-hover:rotate-1">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-cyan-600/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-white py-12">
|
||||
<div class="container mx-auto px-6">
|
||||
<footer class="bg-gradient-to-b from-gray-900 to-black text-white py-16 relative overflow-hidden">
|
||||
<!-- 背景装饰 -->
|
||||
<div class="absolute inset-0 opacity-10">
|
||||
<div class="absolute bottom-0 left-0 w-96 h-96 bg-purple-500 rounded-full filter blur-3xl"></div>
|
||||
<div class="absolute top-0 right-0 w-96 h-96 bg-blue-500 rounded-full filter blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-6 relative z-10" title="页脚信息区">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4">关于展会</h3>
|
||||
<p class="text-gray-400 text-sm">
|
||||
长三角地区最具影响力的新能源汽车与智能交通产业盛会
|
||||
<div class="animate-fadeInUp">
|
||||
<div class="flex items-center mb-4">
|
||||
<i class="fas fa-car-side text-2xl text-purple-400 mr-2"></i>
|
||||
<h3 class="text-lg font-semibold">关于展会</h3>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm leading-relaxed">
|
||||
长三角地区最具影响力的新能源汽车与智能交通产业盛会，汇聚全球顶尖企业与技术
|
||||
</p>
|
||||
<div class="mt-4 flex space-x-3">
|
||||
<a href="#" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-purple-600 transition">
|
||||
<i class="fab fa-weixin text-sm"></i>
|
||||
</a>
|
||||
<a href="#" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-600 transition">
|
||||
<i class="fab fa-weibo text-sm"></i>
|
||||
</a>
|
||||
<a href="#" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-600 transition">
|
||||
<i class="fab fa-linkedin text-sm"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4">快速链接</h3>
|
||||
<div class="animate-fadeInUp animation-delay-200">
|
||||
<h3 class="text-lg font-semibold mb-4">
|
||||
<i class="fas fa-link text-purple-400 mr-2"></i>快速链接
|
||||
</h3>
|
||||
<ul class="space-y-2 text-sm text-gray-400">
|
||||
<li><a href="pages/overview.html" class="hover:text-white">策划概述</a></li>
|
||||
<li><a href="pages/exhibition.html" class="hover:text-white">展会介绍</a></li>
|
||||
<li><a href="pages/marketing.html" class="hover:text-white">营销方案</a></li>
|
||||
<li><a href="pages/operation.html" class="hover:text-white">现场运营</a></li>
|
||||
<li><a href="pages/overview.html" class="hover:text-purple-400 transition">
|
||||
<i class="fas fa-chevron-right text-xs mr-1"></i>策划概述
|
||||
</a></li>
|
||||
<li><a href="pages/exhibition.html" class="hover:text-purple-400 transition">
|
||||
<i class="fas fa-chevron-right text-xs mr-1"></i>展会介绍
|
||||
</a></li>
|
||||
<li><a href="pages/marketing.html" class="hover:text-purple-400 transition">
|
||||
<i class="fas fa-chevron-right text-xs mr-1"></i>营销方案
|
||||
</a></li>
|
||||
<li><a href="pages/operation.html" class="hover:text-purple-400 transition">
|
||||
<i class="fas fa-chevron-right text-xs mr-1"></i>现场运营
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4">联系方式</h3>
|
||||
<div class="animate-fadeInUp animation-delay-400">
|
||||
<h3 class="text-lg font-semibold mb-4">
|
||||
<i class="fas fa-phone-alt text-purple-400 mr-2"></i>联系方式
|
||||
</h3>
|
||||
<ul class="space-y-2 text-sm text-gray-400">
|
||||
<li>📍 上海市青浦区崧泽大道333号</li>
|
||||
<li>📞 021-12345678</li>
|
||||
<li>✉️ info@greenmobility2024.com</li>
|
||||
<li><i class="fas fa-map-marker-alt text-purple-400 mr-2"></i>上海市青浦区崧泽大道333号</li>
|
||||
<li><i class="fas fa-phone text-purple-400 mr-2"></i>021-12345678</li>
|
||||
<li><i class="fas fa-envelope text-purple-400 mr-2"></i>info@greenmobility2024.com</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4">关注我们</h3>
|
||||
<div class="animate-fadeInUp animation-delay-600">
|
||||
<h3 class="text-lg font-semibold mb-4">
|
||||
<i class="fas fa-qrcode text-purple-400 mr-2"></i>关注我们
|
||||
</h3>
|
||||
<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-gray-700">
|
||||
<span>微信</span>
|
||||
|
||||
Reference in New Issue
Block a user