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>
805 lines
45 KiB
HTML
805 lines
45 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长三角国际新能源汽车展</title>
|
||
|
||
<!-- 样式表 -->
|
||
<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;800;900&family=Noto+Sans+SC:wght@300;400;500;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', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
}
|
||
|
||
/* 玻璃态效果 */
|
||
.glass-card {
|
||
background: rgba(255, 255, 255, 0.9);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
/* 3D翻转卡片 */
|
||
.flip-card {
|
||
perspective: 1000px;
|
||
}
|
||
|
||
.flip-card-inner {
|
||
transition: transform 0.6s;
|
||
transform-style: preserve-3d;
|
||
}
|
||
|
||
.flip-card:hover .flip-card-inner {
|
||
transform: rotateY(180deg);
|
||
}
|
||
|
||
.flip-card-front, .flip-card-back {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
-webkit-backface-visibility: hidden;
|
||
backface-visibility: hidden;
|
||
}
|
||
|
||
.flip-card-back {
|
||
transform: rotateY(180deg);
|
||
}
|
||
.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%;
|
||
}
|
||
.strategy-card {
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.strategy-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
||
transition: left 0.6s ease;
|
||
}
|
||
.strategy-card:hover::before {
|
||
left: 100%;
|
||
}
|
||
.strategy-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
|
||
}
|
||
.progress-bar {
|
||
animation: progressFill 2s ease-out forwards;
|
||
}
|
||
@keyframes progressFill {
|
||
from { width: 0%; }
|
||
}
|
||
.pulse-dot {
|
||
animation: pulse 2s infinite;
|
||
}
|
||
@keyframes pulse {
|
||
0%, 100% { transform: scale(1); opacity: 1; }
|
||
50% { transform: scale(1.2); opacity: 0.7; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-50">
|
||
<!-- Navigation -->
|
||
<nav class="fixed top-0 w-full bg-white shadow-md z-50">
|
||
<div class="container mx-auto px-6 py-4">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center group">
|
||
<div class="relative mr-3">
|
||
<i class="fas fa-car-side text-2xl text-purple-600 group-hover:scale-110 transition-transform"></i>
|
||
<i class="fas fa-bolt text-xs text-green-500 absolute -top-1 -right-1 animate-pulse"></i>
|
||
</div>
|
||
<span class="text-xl font-bold text-gray-800">Green Mobility 2024</span>
|
||
</div>
|
||
<div class="hidden md:flex space-x-8">
|
||
<a href="../index.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||
<i class="fas fa-home mr-1"></i>首页
|
||
</a>
|
||
<a href="overview.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||
<i class="fas fa-file-alt mr-1"></i>策划概述
|
||
</a>
|
||
<a href="exhibition.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||
<i class="fas fa-building mr-1"></i>展会介绍
|
||
</a>
|
||
<a href="marketing.html" class="nav-link active text-purple-600 font-semibold">
|
||
<i class="fas fa-bullhorn mr-1"></i>营销方案
|
||
</a>
|
||
<a href="operation.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||
<i class="fas fa-cogs mr-1"></i>现场运营
|
||
</a>
|
||
<a href="budget.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||
<i class="fas fa-calculator mr-1"></i>预算分析
|
||
</a>
|
||
<a href="risk.html" class="nav-link text-gray-700 hover:text-purple-600">
|
||
<i class="fas fa-shield-alt mr-1"></i>风险评估
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Page Header -->
|
||
<section class="relative pt-24 pb-16 overflow-hidden" style="background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);">
|
||
<!-- 背景装饰 -->
|
||
<div class="absolute inset-0">
|
||
<div class="absolute top-0 left-0 w-96 h-96 bg-white/10 rounded-full filter blur-3xl animate-pulse"></div>
|
||
<div class="absolute bottom-0 right-0 w-96 h-96 bg-pink-300/20 rounded-full filter blur-3xl animate-pulse animation-delay-2000"></div>
|
||
<!-- 背景图片 -->
|
||
<div class="absolute inset-0 opacity-10" style="background-image: url('../../data/会展策划/image/Whisk_1c05424f7f.jpg'); background-size: cover; background-position: center;"></div>
|
||
</div>
|
||
|
||
<div class="container mx-auto px-6 relative z-10">
|
||
<div class="flex items-center text-white/80 mb-4 animate-fadeInUp">
|
||
<a href="../index.html" class="hover:text-white transition">首页</a>
|
||
<i class="fas fa-chevron-right mx-2 text-xs"></i>
|
||
<span>营销方案</span>
|
||
</div>
|
||
<h1 class="text-4xl md:text-6xl font-bold text-white mb-4 animate-fadeInUp animation-delay-200">
|
||
<i class="fas fa-rocket mr-3"></i>
|
||
营销推广方案
|
||
</h1>
|
||
<p class="text-xl text-white/90 animate-fadeInUp animation-delay-400">
|
||
全方位、多渠道、精准化的营销策略
|
||
</p>
|
||
<div class="mt-8 flex flex-wrap gap-4 animate-fadeInUp animation-delay-600">
|
||
<div class="bg-white/20 backdrop-blur px-4 py-2 rounded-full text-sm">
|
||
<i class="fas fa-users mr-2"></i>目标观众: 10万+
|
||
</div>
|
||
<div class="bg-white/20 backdrop-blur px-4 py-2 rounded-full text-sm">
|
||
<i class="fas fa-chart-line mr-2"></i>预期转化: 30%
|
||
</div>
|
||
<div class="bg-white/20 backdrop-blur px-4 py-2 rounded-full text-sm">
|
||
<i class="fas fa-globe mr-2"></i>覆盖范围: 全国
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Marketing Strategy Timeline -->
|
||
<section class="py-16 bg-white relative overflow-hidden">
|
||
<!-- 背景装饰 -->
|
||
<div class="absolute inset-0 opacity-5" style="background-image: url('../../data/会展策划/image/Whisk_4aabd94ef3.jpg'); background-size: cover; background-position: center;"></div>
|
||
|
||
<div class="container mx-auto px-6 relative z-10">
|
||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12 animate-fadeInUp">
|
||
<i class="fas fa-calendar-alt mr-2 text-purple-600"></i>
|
||
整体推广策略
|
||
</h2>
|
||
<div class="max-w-5xl mx-auto">
|
||
<div class="relative">
|
||
<!-- Timeline Line -->
|
||
<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-purple-600 to-pink-600"></div>
|
||
|
||
<!-- Timeline Items -->
|
||
<div class="space-y-12">
|
||
<!-- Phase 1 -->
|
||
<div class="flex items-center">
|
||
<div class="w-1/2 pr-8 text-right animate-fadeInLeft">
|
||
<h3 class="text-xl font-bold text-purple-600">
|
||
<i class="fas fa-fire mr-1"></i>预热期
|
||
</h3>
|
||
<p class="text-gray-600 mt-1">展前6个月</p>
|
||
<div class="mt-3 bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg p-4 text-left glass-card hover:scale-105 transition-transform">
|
||
<ul class="text-sm text-gray-700 space-y-1">
|
||
<li><i class="fas fa-check-circle text-purple-500 mr-1"></i> 品牌造势，建立认知</li>
|
||
<li><i class="fas fa-check-circle text-purple-500 mr-1"></i> 话题营销，引发关注</li>
|
||
<li><i class="fas fa-check-circle text-purple-500 mr-1"></i> KOL合作，扩大影响</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="relative flex items-center justify-center">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 text-white rounded-full flex items-center justify-center z-10 shadow-lg pulse-dot">
|
||
<i class="fas fa-flag text-lg"></i>
|
||
</div>
|
||
</div>
|
||
<div class="w-1/2 pl-8"></div>
|
||
</div>
|
||
|
||
<!-- Phase 2 -->
|
||
<div class="flex items-center">
|
||
<div class="w-1/2 pr-8"></div>
|
||
<div class="relative flex items-center justify-center">
|
||
<div class="w-12 h-12 bg-white border-4 border-pink-600 rounded-full flex items-center justify-center z-10">
|
||
<span class="text-pink-600 font-bold">2</span>
|
||
</div>
|
||
</div>
|
||
<div class="w-1/2 pl-8">
|
||
<h3 class="text-xl font-bold text-pink-600">推广期</h3>
|
||
<p class="text-gray-600 mt-1">展前3个月</p>
|
||
<div class="mt-3 bg-pink-50 rounded-lg p-4">
|
||
<ul class="text-sm text-gray-700 space-y-1">
|
||
<li>• 精准投放，定向推广</li>
|
||
<li>• 观众组织，团体邀请</li>
|
||
<li>• 媒体合作，深度报道</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Phase 3 -->
|
||
<div class="flex items-center">
|
||
<div class="w-1/2 pr-8 text-right">
|
||
<h3 class="text-xl font-bold text-blue-600">冲刺期</h3>
|
||
<p class="text-gray-600 mt-1">展前1个月</p>
|
||
<div class="mt-3 bg-blue-50 rounded-lg p-4 text-left">
|
||
<ul class="text-sm text-gray-700 space-y-1">
|
||
<li>• 密集宣传，全面覆盖</li>
|
||
<li>• 氛围营造，期待感拉满</li>
|
||
<li>• 最后召集，确保参与</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="relative flex items-center justify-center">
|
||
<div class="w-12 h-12 bg-white border-4 border-blue-600 rounded-full flex items-center justify-center z-10">
|
||
<span class="text-blue-600 font-bold">3</span>
|
||
</div>
|
||
</div>
|
||
<div class="w-1/2 pl-8"></div>
|
||
</div>
|
||
|
||
<!-- Phase 4 -->
|
||
<div class="flex items-center">
|
||
<div class="w-1/2 pr-8"></div>
|
||
<div class="relative flex items-center justify-center">
|
||
<div class="w-12 h-12 bg-white border-4 border-green-600 rounded-full flex items-center justify-center z-10">
|
||
<span class="text-green-600 font-bold">4</span>
|
||
</div>
|
||
</div>
|
||
<div class="w-1/2 pl-8">
|
||
<h3 class="text-xl font-bold text-green-600">展期</h3>
|
||
<p class="text-gray-600 mt-1">9月12-15日</p>
|
||
<div class="mt-3 bg-green-50 rounded-lg p-4">
|
||
<ul class="text-sm text-gray-700 space-y-1">
|
||
<li>• 现场互动，实时传播</li>
|
||
<li>• 媒体报道，扩大影响</li>
|
||
<li>• 直播分享，线上参与</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Phase 5 -->
|
||
<div class="flex items-center">
|
||
<div class="w-1/2 pr-8 text-right">
|
||
<h3 class="text-xl font-bold text-orange-600">展后</h3>
|
||
<p class="text-gray-600 mt-1">展后1个月</p>
|
||
<div class="mt-3 bg-orange-50 rounded-lg p-4 text-left">
|
||
<ul class="text-sm text-gray-700 space-y-1">
|
||
<li>• 持续发酵，延长热度</li>
|
||
<li>• 成果展示，价值传递</li>
|
||
<li>• 下届预热，维系关系</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="relative flex items-center justify-center">
|
||
<div class="w-12 h-12 bg-white border-4 border-orange-600 rounded-full flex items-center justify-center z-10">
|
||
<span class="text-orange-600 font-bold">5</span>
|
||
</div>
|
||
</div>
|
||
<div class="w-1/2 pl-8"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Online Marketing -->
|
||
<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>
|
||
|
||
<!-- Digital Channels Grid -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
|
||
<!-- Official Website -->
|
||
<div class="strategy-card bg-white rounded-xl shadow-lg p-6">
|
||
<div class="flex items-center mb-4">
|
||
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
|
||
<svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-2a2 2 0 00-2-2 2 2 0 01-2-2 2 2 0 00-1.668-1.973z" clip-rule="evenodd"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-xl font-bold">官方网站</h3>
|
||
</div>
|
||
<ul class="space-y-2 text-gray-600 text-sm">
|
||
<li>✓ 在线注册系统</li>
|
||
<li>✓ 3D展馆导航</li>
|
||
<li>✓ VR预览体验</li>
|
||
<li>✓ 展商数据库</li>
|
||
<li>✓ 活动预约系统</li>
|
||
</ul>
|
||
<div class="mt-4 pt-4 border-t">
|
||
<div class="flex justify-between text-sm">
|
||
<span class="text-gray-500">预计访问量</span>
|
||
<span class="font-bold text-blue-600">100万+</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Social Media -->
|
||
<div class="strategy-card bg-white rounded-xl shadow-lg p-6">
|
||
<div class="flex items-center mb-4">
|
||
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
|
||
<svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
|
||
<path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"/>
|
||
<path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-xl font-bold">社交媒体</h3>
|
||
</div>
|
||
<div class="space-y-3">
|
||
<div class="bg-gray-50 rounded-lg p-3">
|
||
<div class="flex items-center justify-between mb-1">
|
||
<span class="text-sm font-semibold">微信</span>
|
||
<span class="text-xs text-gray-500">50万粉丝</span>
|
||
</div>
|
||
<div class="text-xs text-gray-600">公众号推送、朋友圈广告</div>
|
||
</div>
|
||
<div class="bg-gray-50 rounded-lg p-3">
|
||
<div class="flex items-center justify-between mb-1">
|
||
<span class="text-sm font-semibold">微博</span>
|
||
<span class="text-xs text-gray-500">30万粉丝</span>
|
||
</div>
|
||
<div class="text-xs text-gray-600">#绿色出行看长三角#</div>
|
||
</div>
|
||
<div class="bg-gray-50 rounded-lg p-3">
|
||
<div class="flex items-center justify-between mb-1">
|
||
<span class="text-sm font-semibold">抖音/快手</span>
|
||
<span class="text-xs text-gray-500">80万粉丝</span>
|
||
</div>
|
||
<div class="text-xs text-gray-600">短视频、直播互动</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Digital Advertising -->
|
||
<div class="strategy-card bg-white rounded-xl shadow-lg p-6">
|
||
<div class="flex items-center mb-4">
|
||
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
|
||
<svg class="w-6 h-6 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.293a1 1 0 00-1.414 1.414L14.586 10l-1.293 1.293a1 1 0 101.414 1.414L16 11.414l1.293 1.293a1 1 0 001.414-1.414L17.414 10l1.293-1.293a1 1 0 00-1.414-1.414L16 8.586l-1.293-1.293z" clip-rule="evenodd"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-xl font-bold">数字广告</h3>
|
||
</div>
|
||
<div class="space-y-2 text-sm">
|
||
<div class="flex items-center justify-between py-2 border-b">
|
||
<span class="text-gray-600">搜索引擎SEM</span>
|
||
<span class="font-semibold">200万预算</span>
|
||
</div>
|
||
<div class="flex items-center justify-between py-2 border-b">
|
||
<span class="text-gray-600">信息流广告</span>
|
||
<span class="font-semibold">150万预算</span>
|
||
</div>
|
||
<div class="flex items-center justify-between py-2">
|
||
<span class="text-gray-600">垂直媒体</span>
|
||
<span class="font-semibold">100万预算</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Email Marketing -->
|
||
<div class="strategy-card bg-white rounded-xl shadow-lg p-6">
|
||
<div class="flex items-center mb-4">
|
||
<div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mr-4">
|
||
<svg class="w-6 h-6 text-orange-600" fill="currentColor" viewBox="0 0 20 20">
|
||
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
|
||
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-xl font-bold">邮件营销</h3>
|
||
</div>
|
||
<div class="bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg p-4">
|
||
<div class="grid grid-cols-2 gap-4 text-center">
|
||
<div>
|
||
<div class="text-2xl font-bold text-orange-600">10万+</div>
|
||
<div class="text-xs text-gray-600">数据库联系人</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-2xl font-bold text-orange-600">2期/月</div>
|
||
<div class="text-xs text-gray-600">发送频次</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<ul class="mt-4 space-y-1 text-xs text-gray-600">
|
||
<li>• 展商推介</li>
|
||
<li>• 活动预告</li>
|
||
<li>• 行业资讯</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Live Streaming -->
|
||
<div class="strategy-card bg-white rounded-xl shadow-lg p-6">
|
||
<div class="flex items-center mb-4">
|
||
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mr-4">
|
||
<svg class="w-6 h-6 text-red-600" fill="currentColor" viewBox="0 0 20 20">
|
||
<path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-xl font-bold">直播营销</h3>
|
||
</div>
|
||
<div class="space-y-3">
|
||
<div class="flex items-center">
|
||
<div class="w-2 h-2 bg-red-600 rounded-full pulse-dot mr-2"></div>
|
||
<span class="text-sm">展前预热直播：5场</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="w-2 h-2 bg-red-600 rounded-full pulse-dot mr-2"></div>
|
||
<span class="text-sm">展期现场直播：全程</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="w-2 h-2 bg-red-600 rounded-full pulse-dot mr-2"></div>
|
||
<span class="text-sm">专家访谈：20场</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KOL Cooperation -->
|
||
<div class="strategy-card bg-white rounded-xl shadow-lg p-6">
|
||
<div class="flex items-center mb-4">
|
||
<div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center mr-4">
|
||
<svg class="w-6 h-6 text-pink-600" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-xl font-bold">KOL合作</h3>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<div class="bg-pink-50 rounded-lg p-2 text-center">
|
||
<div class="text-lg font-bold text-pink-600">50+</div>
|
||
<div class="text-xs text-gray-600">汽车领域KOL</div>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-2 text-xs">
|
||
<div class="bg-gray-50 rounded p-2 text-center">
|
||
<div class="font-semibold">探店视频</div>
|
||
<div class="text-gray-500">30个</div>
|
||
</div>
|
||
<div class="bg-gray-50 rounded p-2 text-center">
|
||
<div class="font-semibold">测评内容</div>
|
||
<div class="text-gray-500">50篇</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Online Campaign Performance -->
|
||
<div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl p-8 text-white">
|
||
<h3 class="text-2xl font-bold mb-6">线上推广预期效果</h3>
|
||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||
<div class="text-center">
|
||
<div class="text-3xl font-bold mb-2">1亿+</div>
|
||
<div class="text-blue-100">总曝光量</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-3xl font-bold mb-2">500万+</div>
|
||
<div class="text-blue-100">互动量</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-3xl font-bold mb-2">10万+</div>
|
||
<div class="text-blue-100">注册用户</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-3xl font-bold mb-2">85%</div>
|
||
<div class="text-blue-100">转化率</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Offline Marketing -->
|
||
<section class="py-16 bg-white">
|
||
<div class="container mx-auto px-6">
|
||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">线下推广方案</h2>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||
<!-- Traditional Media -->
|
||
<div>
|
||
<h3 class="text-2xl font-bold mb-6 text-purple-600">传统媒体投放</h3>
|
||
<div class="space-y-4">
|
||
<div class="bg-gray-50 rounded-lg p-5">
|
||
<div class="flex items-center mb-3">
|
||
<div class="w-10 h-10 bg-blue-600 text-white rounded-lg flex items-center justify-center mr-3">
|
||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold">平面媒体</h4>
|
||
<p class="text-sm text-gray-600">行业杂志、报纸广告</p>
|
||
</div>
|
||
</div>
|
||
<ul class="text-sm text-gray-700 space-y-1 ml-13">
|
||
<li>• 《中国汽车报》整版广告 x 3期</li>
|
||
<li>• 《汽车之家》杂志封面广告</li>
|
||
<li>• 《新能源汽车》专题报道</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="bg-gray-50 rounded-lg p-5">
|
||
<div class="flex items-center mb-3">
|
||
<div class="w-10 h-10 bg-green-600 text-white rounded-lg flex items-center justify-center mr-3">
|
||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z" clip-rule="evenodd"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold">广播电台</h4>
|
||
<p class="text-sm text-gray-600">交通广播黄金时段</p>
|
||
</div>
|
||
</div>
|
||
<ul class="text-sm text-gray-700 space-y-1 ml-13">
|
||
<li>• 上海交通广播早晚高峰广告</li>
|
||
<li>• 专题访谈节目3期</li>
|
||
<li>• 路况播报植入</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="bg-gray-50 rounded-lg p-5">
|
||
<div class="flex items-center mb-3">
|
||
<div class="w-10 h-10 bg-purple-600 text-white rounded-lg flex items-center justify-center mr-3">
|
||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||
<path d="M2 6a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 100 4v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2a2 2 0 100-4V6z"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold">行业活动</h4>
|
||
<p class="text-sm text-gray-600">参展推广、论坛宣传</p>
|
||
</div>
|
||
</div>
|
||
<ul class="text-sm text-gray-700 space-y-1 ml-13">
|
||
<li>• 北京车展展位推广</li>
|
||
<li>• 广州车展路演活动</li>
|
||
<li>• 行业峰会主题演讲</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Outdoor Advertising -->
|
||
<div>
|
||
<h3 class="text-2xl font-bold mb-6 text-blue-600">户外广告投放</h3>
|
||
<div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl p-6">
|
||
<div class="grid grid-cols-2 gap-4 mb-6">
|
||
<div class="bg-white rounded-lg p-4 text-center">
|
||
<div class="text-2xl font-bold text-blue-600 mb-1">50块</div>
|
||
<div class="text-sm text-gray-600">LED大屏广告</div>
|
||
<div class="text-xs text-gray-500 mt-1">核心商圈覆盖</div>
|
||
</div>
|
||
<div class="bg-white rounded-lg p-4 text-center">
|
||
<div class="text-2xl font-bold text-purple-600 mb-1">200个</div>
|
||
<div class="text-sm text-gray-600">地铁灯箱</div>
|
||
<div class="text-xs text-gray-500 mt-1">2/10/17号线</div>
|
||
</div>
|
||
<div class="bg-white rounded-lg p-4 text-center">
|
||
<div class="text-2xl font-bold text-green-600 mb-1">30块</div>
|
||
<div class="text-sm text-gray-600">高速广告牌</div>
|
||
<div class="text-xs text-gray-500 mt-1">沪宁、沪杭高速</div>
|
||
</div>
|
||
<div class="bg-white rounded-lg p-4 text-center">
|
||
<div class="text-2xl font-bold text-orange-600 mb-1">100辆</div>
|
||
<div class="text-sm text-gray-600">公交车身</div>
|
||
<div class="text-xs text-gray-500 mt-1">主要线路</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-lg p-4">
|
||
<h4 class="font-semibold mb-3">投放策略</h4>
|
||
<div class="space-y-2 text-sm">
|
||
<div class="flex items-center">
|
||
<div class="w-4 h-4 bg-blue-600 rounded-full mr-2"></div>
|
||
<span>展前3个月开始投放</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="w-4 h-4 bg-purple-600 rounded-full mr-2"></div>
|
||
<span>重点覆盖长三角核心城市</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="w-4 h-4 bg-green-600 rounded-full mr-2"></div>
|
||
<span>高频次、多触点接触</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Precision Invitation -->
|
||
<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>
|
||
|
||
<div class="max-w-4xl mx-auto">
|
||
<!-- Invitation Process -->
|
||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden mb-8">
|
||
<div class="bg-gradient-to-r from-green-600 to-teal-600 text-white p-6">
|
||
<h3 class="text-2xl font-bold">专业观众邀请体系</h3>
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<div class="text-center">
|
||
<div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<svg class="w-10 h-10 text-green-600" fill="currentColor" viewBox="0 0 20 20">
|
||
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/>
|
||
</svg>
|
||
</div>
|
||
<h4 class="font-semibold mb-2">呼叫中心</h4>
|
||
<p class="text-sm text-gray-600">20人专业团队</p>
|
||
<p class="text-xs text-gray-500 mt-1">日均呼叫1000+</p>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<svg class="w-10 h-10 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
|
||
</svg>
|
||
</div>
|
||
<h4 class="font-semibold mb-2">一对一邀请</h4>
|
||
<p class="text-sm text-gray-600">VIP客户定制</p>
|
||
<p class="text-xs text-gray-500 mt-1">500+重点客户</p>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<svg class="w-10 h-10 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>
|
||
<h4 class="font-semibold mb-2">团体邀请</h4>
|
||
<p class="text-sm text-gray-600">协会组织参观</p>
|
||
<p class="text-xs text-gray-500 mt-1">50+团体</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Buyer Matching Service -->
|
||
<div class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl p-8 text-white">
|
||
<h3 class="text-2xl font-bold mb-6">买家匹配服务</h3>
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<div class="bg-white/10 backdrop-blur rounded-lg p-4">
|
||
<h4 class="font-semibold mb-2">会前</h4>
|
||
<ul class="text-sm space-y-1 opacity-90">
|
||
<li>• 在线预约系统</li>
|
||
<li>• AI智能匹配</li>
|
||
<li>• 需求精准对接</li>
|
||
</ul>
|
||
</div>
|
||
<div class="bg-white/10 backdrop-blur rounded-lg p-4">
|
||
<h4 class="font-semibold mb-2">展中</h4>
|
||
<ul class="text-sm space-y-1 opacity-90">
|
||
<li>• 商务洽谈区</li>
|
||
<li>• 专场对接会</li>
|
||
<li>• 现场撮合服务</li>
|
||
</ul>
|
||
</div>
|
||
<div class="bg-white/10 backdrop-blur rounded-lg p-4">
|
||
<h4 class="font-semibold mb-2">展后</h4>
|
||
<ul class="text-sm space-y-1 opacity-90">
|
||
<li>• 持续跟进</li>
|
||
<li>• 促成交易</li>
|
||
<li>• 效果评估</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Marketing Budget -->
|
||
<section class="py-16 bg-white">
|
||
<div class="container mx-auto px-6">
|
||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">营销预算分配</h2>
|
||
|
||
<div class="max-w-3xl mx-auto">
|
||
<div class="bg-gray-50 rounded-2xl p-8">
|
||
<div class="space-y-4">
|
||
<div class="flex items-center">
|
||
<div class="flex-1">
|
||
<div class="flex justify-between mb-2">
|
||
<span class="font-semibold">线上推广</span>
|
||
<span class="text-purple-600 font-bold">80万</span>
|
||
</div>
|
||
<div class="bg-gray-200 rounded-full h-4">
|
||
<div class="bg-purple-600 h-4 rounded-full progress-bar" style="width: 40%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center">
|
||
<div class="flex-1">
|
||
<div class="flex justify-between mb-2">
|
||
<span class="font-semibold">线下推广</span>
|
||
<span class="text-blue-600 font-bold">60万</span>
|
||
</div>
|
||
<div class="bg-gray-200 rounded-full h-4">
|
||
<div class="bg-blue-600 h-4 rounded-full progress-bar" style="width: 30%; animation-delay: 0.2s"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center">
|
||
<div class="flex-1">
|
||
<div class="flex justify-between mb-2">
|
||
<span class="font-semibold">媒体合作</span>
|
||
<span class="text-green-600 font-bold">40万</span>
|
||
</div>
|
||
<div class="bg-gray-200 rounded-full h-4">
|
||
<div class="bg-green-600 h-4 rounded-full progress-bar" style="width: 20%; animation-delay: 0.4s"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center">
|
||
<div class="flex-1">
|
||
<div class="flex justify-between mb-2">
|
||
<span class="font-semibold">精准邀请</span>
|
||
<span class="text-orange-600 font-bold">20万</span>
|
||
</div>
|
||
<div class="bg-gray-200 rounded-full h-4">
|
||
<div class="bg-orange-600 h-4 rounded-full progress-bar" style="width: 10%; animation-delay: 0.6s"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-6 pt-6 border-t text-center">
|
||
<div class="text-3xl font-bold text-gray-800">总预算：200万元</div>
|
||
<div class="text-gray-600 mt-2">预期ROI：500%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA Section -->
|
||
<section class="py-16 bg-gradient-to-r from-pink-600 to-purple-600 text-white">
|
||
<div class="container mx-auto px-6 text-center">
|
||
<h2 class="text-3xl font-bold mb-6">全方位营销，确保展会成功</h2>
|
||
<p class="text-xl mb-8 opacity-90">了解现场运营方案，体验展会精彩</p>
|
||
<a href="operation.html" class="inline-block bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
|
||
查看现场运营 →
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="bg-gray-900 text-white py-12">
|
||
<div class="container mx-auto px-6">
|
||
<div class="text-center text-sm text-gray-400">
|
||
<p>© 2024 长三角国际新能源汽车与智能交通产业博览会. All rights reserved.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</body>
|
||
</html> |