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,29 +4,14 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>策划概述 - 2024长三角国际新能源汽车展</title>
|
||||
<link rel="stylesheet" href="../css/styles.css">
|
||||
<link rel="stylesheet" href="../css/animations.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 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&display=swap" rel="stylesheet">
|
||||
<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;
|
||||
}
|
||||
.nav-link {
|
||||
position: relative;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: #667eea;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.nav-link:hover::after,
|
||||
.nav-link.active::after {
|
||||
width: 100%;
|
||||
font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
@@ -39,7 +24,7 @@
|
||||
top: 40px;
|
||||
height: calc(100% - 40px);
|
||||
width: 2px;
|
||||
background: #e5e7eb;
|
||||
background: linear-gradient(to bottom, #667eea, #a78bfa);
|
||||
}
|
||||
.timeline-item:last-child::before {
|
||||
display: none;
|
||||
@@ -53,61 +38,153 @@
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
border: 3px solid #667eea;
|
||||
box-shadow: 0 0 0 6px rgba(102, 126, 234, 0.1);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
.slide-in-left {
|
||||
animation: slideInLeft 0.6s ease-out;
|
||||
@keyframes pulse {
|
||||
0% { box-shadow: 0 0 0 6px rgba(102, 126, 234, 0.1); }
|
||||
50% { box-shadow: 0 0 0 12px rgba(102, 126, 234, 0); }
|
||||
100% { box-shadow: 0 0 0 6px rgba(102, 126, 234, 0.1); }
|
||||
}
|
||||
.slide-in-right {
|
||||
animation: slideInRight 0.6s ease-out;
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
@keyframes slideInLeft {
|
||||
from { transform: translateX(-50px); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
.stat-card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@keyframes slideInRight {
|
||||
from { transform: translateX(50px); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
.stat-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
|
||||
animation: rotate 20s linear infinite;
|
||||
}
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<!-- 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">
|
||||
<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 animate-fadeInLeft">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-indigo-600 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 text-gray-700 hover:text-purple-600">首页</a>
|
||||
<a href="overview.html" class="nav-link active text-gray-700 hover:text-purple-600">策划概述</a>
|
||||
<a href="exhibition.html" class="nav-link text-gray-700 hover:text-purple-600">展会介绍</a>
|
||||
<a href="marketing.html" class="nav-link text-gray-700 hover:text-purple-600">营销方案</a>
|
||||
<a href="operation.html" class="nav-link text-gray-700 hover:text-purple-600">现场运营</a>
|
||||
<a href="budget.html" class="nav-link text-gray-700 hover:text-purple-600">预算分析</a>
|
||||
<a href="risk.html" class="nav-link text-gray-700 hover:text-purple-600">风险评估</a>
|
||||
<a href="../index.html" class="nav-link text-gray-700 hover:text-purple-600 transition-colors">
|
||||
<i class="fas fa-home mr-2"></i>首页
|
||||
</a>
|
||||
<a href="overview.html" class="nav-link active text-purple-600 font-semibold">
|
||||
<i class="fas fa-info-circle mr-2"></i>策划概述
|
||||
</a>
|
||||
<a href="exhibition.html" class="nav-link text-gray-700 hover:text-purple-600 transition-colors">
|
||||
<i class="fas fa-th-large mr-2"></i>展会介绍
|
||||
</a>
|
||||
<a href="marketing.html" class="nav-link text-gray-700 hover:text-purple-600 transition-colors">
|
||||
<i class="fas fa-bullhorn mr-2"></i>营销方案
|
||||
</a>
|
||||
<a href="operation.html" class="nav-link text-gray-700 hover:text-purple-600 transition-colors">
|
||||
<i class="fas fa-cogs mr-2"></i>现场运营
|
||||
</a>
|
||||
<a href="budget.html" class="nav-link text-gray-700 hover:text-purple-600 transition-colors">
|
||||
<i class="fas fa-chart-pie mr-2"></i>预算分析
|
||||
</a>
|
||||
<a href="risk.html" class="nav-link text-gray-700 hover:text-purple-600 transition-colors">
|
||||
<i class="fas fa-shield-alt mr-2"></i>风险评估
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Page Header -->
|
||||
<section class="bg-gradient-to-r from-purple-600 to-blue-600 text-white pt-24 pb-12">
|
||||
<div class="container mx-auto px-6">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4">策划概述</h1>
|
||||
<p class="text-xl opacity-90">全面了解展会策划背景、目标与核心价值</p>
|
||||
<section class="relative bg-gradient-to-br from-purple-600 via-indigo-600 to-blue-600 text-white pt-24 pb-16 overflow-hidden">
|
||||
<div class="absolute inset-0">
|
||||
<img src="../../data/会展策划/image/博览会.jpg" alt="博览会背景" class="w-full h-full object-cover opacity-20">
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-purple-900/50"></div>
|
||||
</div>
|
||||
<div class="absolute top-20 left-10 w-32 h-32 bg-white/10 rounded-full blur-3xl animate-float"></div>
|
||||
<div class="absolute bottom-10 right-10 w-40 h-40 bg-blue-400/20 rounded-full blur-3xl animate-float animation-delay-2000"></div>
|
||||
|
||||
<div class="container mx-auto px-6 relative z-10">
|
||||
<div class="animate-fadeInUp">
|
||||
<div class="inline-flex items-center px-4 py-2 bg-white/20 backdrop-blur rounded-full mb-6">
|
||||
<span class="animate-pulse w-2 h-2 bg-white rounded-full mr-2"></span>
|
||||
<span class="text-sm font-semibold">全方位展会规划</span>
|
||||
</div>
|
||||
<h1 class="text-5xl md:text-6xl font-bold mb-4">
|
||||
<span class="block">策划概述</span>
|
||||
</h1>
|
||||
<p class="text-xl opacity-90 max-w-3xl">
|
||||
<i class="fas fa-quote-left mr-2"></i>
|
||||
全面了解展会策划背景、目标与核心价值，打造长三角地区最具影响力的新能源汽车产业盛会
|
||||
<i class="fas fa-quote-right ml-2"></i>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Key Stats -->
|
||||
<section class="py-12 -mt-8 relative z-20">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<div class="stat-card text-white p-6 rounded-2xl shadow-2xl animate-fadeInUp animation-delay-200">
|
||||
<div class="relative z-10">
|
||||
<i class="fas fa-industry text-3xl mb-3 opacity-80"></i>
|
||||
<div class="text-3xl font-bold mb-1">3000+</div>
|
||||
<div class="text-sm opacity-90">产业链企业</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card text-white p-6 rounded-2xl shadow-2xl animate-fadeInUp animation-delay-400">
|
||||
<div class="relative z-10">
|
||||
<i class="fas fa-coins text-3xl mb-3 opacity-80"></i>
|
||||
<div class="text-3xl font-bold mb-1">8000亿</div>
|
||||
<div class="text-sm opacity-90">2023年产值</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card text-white p-6 rounded-2xl shadow-2xl animate-fadeInUp animation-delay-600">
|
||||
<div class="relative z-10">
|
||||
<i class="fas fa-car text-3xl mb-3 opacity-80"></i>
|
||||
<div class="text-3xl font-bold mb-1">900万+</div>
|
||||
<div class="text-sm opacity-90">年产销量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card text-white p-6 rounded-2xl shadow-2xl animate-fadeInUp animation-delay-800">
|
||||
<div class="relative z-10">
|
||||
<i class="fas fa-percentage text-3xl mb-3 opacity-80"></i>
|
||||
<div class="text-3xl font-bold mb-1">40%</div>
|
||||
<div class="text-sm opacity-90">全国占比</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Background Section -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="slide-in-left">
|
||||
<h2 class="text-3xl font-bold text-gray-800 mb-6">策划背景</h2>
|
||||
<div class="animate-fadeInLeft">
|
||||
<h2 class="text-3xl font-bold text-gray-800 mb-6">
|
||||
<i class="fas fa-globe-asia mr-3 text-purple-600"></i>策划背景
|
||||
</h2>
|
||||
<div class="space-y-4 text-gray-600">
|
||||
<p>
|
||||
在全球碳中和目标的大背景下，新能源汽车产业正经历前所未有的发展机遇。中国作为全球最大的新能源汽车市场，2023年产销量均突破900万辆，同比增长超过35%。
|
||||
@@ -126,33 +203,36 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide-in-right">
|
||||
<div class="bg-gradient-to-br from-purple-100 to-blue-100 rounded-2xl p-8">
|
||||
<h3 class="text-2xl font-bold text-gray-800 mb-4">产业发展机遇</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start">
|
||||
<div class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1">1</div>
|
||||
<div class="animate-fadeInRight">
|
||||
<div class="bg-gradient-to-br from-purple-100 to-blue-100 rounded-2xl p-8 relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 w-32 h-32 bg-purple-200/30 rounded-full blur-2xl"></div>
|
||||
<h3 class="text-2xl font-bold text-gray-800 mb-4 relative z-10">
|
||||
<i class="fas fa-rocket mr-2 text-purple-600"></i>产业发展机遇
|
||||
</h3>
|
||||
<div class="space-y-3 relative z-10">
|
||||
<div class="flex items-start group hover:transform hover:translate-x-2 transition-all duration-300">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-purple-500 to-purple-700 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1 group-hover:scale-110 transition-transform">1</div>
|
||||
<div class="ml-3">
|
||||
<h4 class="font-semibold">政策支持力度空前</h4>
|
||||
<p class="text-sm text-gray-600">国家及地方政府出台多项扶持政策，推动产业快速发展</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<div class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1">2</div>
|
||||
<div class="flex items-start group hover:transform hover:translate-x-2 transition-all duration-300">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-purple-500 to-purple-700 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1 group-hover:scale-110 transition-transform">2</div>
|
||||
<div class="ml-3">
|
||||
<h4 class="font-semibold">技术创新加速突破</h4>
|
||||
<p class="text-sm text-gray-600">电池技术、自动驾驶、车联网等关键技术不断革新</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<div class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1">3</div>
|
||||
<div class="flex items-start group hover:transform hover:translate-x-2 transition-all duration-300">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-purple-500 to-purple-700 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1 group-hover:scale-110 transition-transform">3</div>
|
||||
<div class="ml-3">
|
||||
<h4 class="font-semibold">市场需求持续增长</h4>
|
||||
<p class="text-sm text-gray-600">消费者对新能源汽车接受度不断提高，市场潜力巨大</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<div class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1">4</div>
|
||||
<div class="flex items-start group hover:transform hover:translate-x-2 transition-all duration-300">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-purple-500 to-purple-700 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1 group-hover:scale-110 transition-transform">4</div>
|
||||
<div class="ml-3">
|
||||
<h4 class="font-semibold">产业链日趋完善</h4>
|
||||
<p class="text-sm text-gray-600">从研发到制造，从销售到服务，产业生态系统不断成熟</p>
|
||||
@@ -166,18 +246,21 @@
|
||||
</section>
|
||||
|
||||
<!-- Objectives Section -->
|
||||
<section class="py-16 bg-gray-50">
|
||||
<div class="container mx-auto px-6">
|
||||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">策划目标</h2>
|
||||
<section class="py-16 bg-gradient-to-br from-gray-50 via-purple-50 to-indigo-50 relative overflow-hidden">
|
||||
<div class="absolute inset-0 opacity-5">
|
||||
<img src="../../data/会展策划/image/展馆布置图.jpeg" alt="展馆布置" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="container mx-auto px-6 relative z-10">
|
||||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-4 animate-fadeInUp">
|
||||
<i class="fas fa-bullseye mr-3 text-purple-600"></i>策划目标
|
||||
</h2>
|
||||
<p class="text-center text-gray-600 mb-12 animate-fadeInUp animation-delay-200">明确的目标引领，打造专业高效的展会平台</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
|
||||
<path fill-rule="evenodd" d="M4 5a2 2 0 012-2 1 1 0 000 2H6a2 2 0 100 4h2a2 2 0 100-4h-.5a1 1 0 000-2H8a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2h-2v10H6V5z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<div class="bg-white/90 backdrop-blur rounded-xl shadow-xl p-6 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 group animate-fadeInUp animation-delay-300">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-blue-400 to-blue-600 rounded-2xl flex items-center justify-center mb-4 group-hover:rotate-6 transition-transform">
|
||||
<i class="fas fa-award text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">品牌建设</h3>
|
||||
<h3 class="text-xl font-bold mb-2 text-gray-800 group-hover:text-blue-600 transition-colors">品牌建设</h3>
|
||||
<p class="text-gray-600">打造长三角地区新能源汽车与智能交通领域第一展会品牌，成为行业风向标</p>
|
||||
<div class="mt-4 pt-4 border-t">
|
||||
<ul class="text-sm text-gray-500 space-y-1">
|
||||
@@ -188,14 +271,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
|
||||
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"/>
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<div class="bg-white/90 backdrop-blur rounded-xl shadow-xl p-6 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 group animate-fadeInUp animation-delay-400">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-emerald-400 to-green-600 rounded-2xl flex items-center justify-center mb-4 group-hover:rotate-6 transition-transform">
|
||||
<i class="fas fa-chart-line text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">商业价值</h3>
|
||||
<h3 class="text-xl font-bold mb-2 text-gray-800 group-hover:text-emerald-600 transition-colors">商业价值</h3>
|
||||
<p class="text-gray-600">吸引300家优质展商参展，促进产业链上下游合作，实现商业价值最大化</p>
|
||||
<div class="mt-4 pt-4 border-t">
|
||||
<ul class="text-sm text-gray-500 space-y-1">
|
||||
@@ -206,13 +286,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
|
||||
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg class="w-6 h-6 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"/>
|
||||
</svg>
|
||||
<div class="bg-white/90 backdrop-blur rounded-xl shadow-xl p-6 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 group animate-fadeInUp animation-delay-500">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-purple-400 to-purple-600 rounded-2xl flex items-center justify-center mb-4 group-hover:rotate-6 transition-transform">
|
||||
<i class="fas fa-users text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">行业推动</h3>
|
||||
<h3 class="text-xl font-bold mb-2 text-gray-800 group-hover:text-purple-600 transition-colors">行业推动</h3>
|
||||
<p class="text-gray-600">促进技术创新和产业升级，推动新能源汽车产业高质量发展</p>
|
||||
<div class="mt-4 pt-4 border-t">
|
||||
<ul class="text-sm text-gray-500 space-y-1">
|
||||
@@ -223,13 +301,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
|
||||
<div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg class="w-6 h-6 text-orange-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<div class="bg-white/90 backdrop-blur rounded-xl shadow-xl p-6 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 group animate-fadeInUp animation-delay-600">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-orange-400 to-pink-600 rounded-2xl flex items-center justify-center mb-4 group-hover:rotate-6 transition-transform">
|
||||
<i class="fas fa-leaf text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">社会责任</h3>
|
||||
<h3 class="text-xl font-bold mb-2 text-gray-800 group-hover:text-orange-600 transition-colors">社会责任</h3>
|
||||
<p class="text-gray-600">推广绿色出行理念，助力碳中和目标实现，促进可持续发展</p>
|
||||
<div class="mt-4 pt-4 border-t">
|
||||
<ul class="text-sm text-gray-500 space-y-1">
|
||||
@@ -306,12 +382,19 @@
|
||||
</section>
|
||||
|
||||
<!-- Market Analysis -->
|
||||
<section class="py-16 bg-gray-50">
|
||||
<div class="container mx-auto px-6">
|
||||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">市场分析</h2>
|
||||
<section class="py-16 bg-gradient-to-br from-gray-50 to-white relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 w-96 h-96 bg-purple-200/20 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-0 left-0 w-96 h-96 bg-blue-200/20 rounded-full blur-3xl"></div>
|
||||
<div class="container mx-auto px-6 relative z-10">
|
||||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-4 animate-fadeInUp">
|
||||
<i class="fas fa-chart-bar mr-3 text-purple-600"></i>市场分析
|
||||
</h2>
|
||||
<p class="text-center text-gray-600 mb-12 animate-fadeInUp animation-delay-200">深入洞察产业发展趋势，精准把握市场机遇</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="bg-white rounded-xl shadow-lg p-6">
|
||||
<h3 class="text-xl font-bold mb-4 text-purple-600">市场规模</h3>
|
||||
<div class="bg-white/90 backdrop-blur rounded-xl shadow-xl p-6 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 animate-fadeInUp animation-delay-300">
|
||||
<h3 class="text-xl font-bold mb-4 text-purple-600">
|
||||
<i class="fas fa-expand-arrows-alt mr-2"></i>市场规模
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between items-center py-2 border-b">
|
||||
<span class="text-gray-600">2023年销量</span>
|
||||
@@ -332,8 +415,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-lg p-6">
|
||||
<h3 class="text-xl font-bold mb-4 text-purple-600">产业链分布</h3>
|
||||
<div class="bg-white/90 backdrop-blur rounded-xl shadow-xl p-6 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 animate-fadeInUp animation-delay-400">
|
||||
<h3 class="text-xl font-bold mb-4 text-indigo-600">
|
||||
<i class="fas fa-sitemap mr-2"></i>产业链分布
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center">
|
||||
<div class="w-24 text-sm text-gray-600">整车制造</div>
|
||||
@@ -366,8 +451,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-lg p-6">
|
||||
<h3 class="text-xl font-bold mb-4 text-purple-600">展会需求调研</h3>
|
||||
<div class="bg-white/90 backdrop-blur rounded-xl shadow-xl p-6 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 animate-fadeInUp animation-delay-500">
|
||||
<h3 class="text-xl font-bold mb-4 text-emerald-600">
|
||||
<i class="fas fa-poll mr-2"></i>展会需求调研
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="bg-green-50 rounded-lg p-3">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
|
||||
Reference in New Issue
Block a user