83dc9270c8
详细说明: - 修复WorkflowPageV3.tsx中的TypeScript类型错误 - 移除未使用的executionTimeoutRef变量 - 修复style标签的jsx属性问题 - 将deprecated的substr()改为substring() - 清理n8n目录下的副本文件 - 添加server.js和start脚本用于静态文件服务 影响的文件: - web_frontend/exhibition-demo/src/pages/WorkflowPageV3.tsx - web_frontend/exhibition-demo/src/components/ResultModal.tsx - web_frontend/web_result/server.js (新增) - web_frontend/web_result/start.bat (新增) - web_frontend/web_result/start.sh (新增) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1121 lines
57 KiB
HTML
1121 lines
57 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>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<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;
|
||
}
|
||
|
||
/* Glass morphism effect */
|
||
.glass-morphism {
|
||
background: rgba(255, 255, 255, 0.9);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
}
|
||
|
||
/* Background animation */
|
||
.animated-bg {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #667eea 50%, #764ba2 75%, #667eea 100%);
|
||
background-size: 400% 400%;
|
||
animation: gradientShift 20s ease infinite;
|
||
}
|
||
|
||
@keyframes gradientShift {
|
||
0% { background-position: 0% 50%; }
|
||
50% { background-position: 100% 50%; }
|
||
100% { background-position: 0% 50%; }
|
||
}
|
||
|
||
/* Counter animation */
|
||
.counter-animation {
|
||
animation: countUp 2s ease-out forwards;
|
||
}
|
||
|
||
@keyframes countUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px) scale(0.8);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
}
|
||
|
||
/* Floating animation */
|
||
.float-animation {
|
||
animation: float 3s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0px); }
|
||
50% { transform: translateY(-20px); }
|
||
}
|
||
|
||
/* Chart animations */
|
||
.chart-bar {
|
||
animation: growBar 1.5s ease-out forwards;
|
||
transform-origin: left center;
|
||
}
|
||
|
||
@keyframes growBar {
|
||
from {
|
||
transform: scaleX(0);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: scaleX(1);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
/* Pie chart animation */
|
||
.pie-rotate {
|
||
animation: pieRotate 2s ease-out forwards;
|
||
}
|
||
|
||
@keyframes pieRotate {
|
||
from { transform: rotate(-90deg) scale(0); }
|
||
to { transform: rotate(0deg) scale(1); }
|
||
}
|
||
|
||
/* Pulse animation */
|
||
.pulse-animation {
|
||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
opacity: 0.8;
|
||
transform: scale(1.05);
|
||
}
|
||
}
|
||
|
||
/* Glow effect */
|
||
.glow-effect {
|
||
box-shadow: 0 0 30px rgba(16, 185, 129, 0.3);
|
||
animation: glow 2s ease-in-out infinite alternate;
|
||
}
|
||
|
||
@keyframes glow {
|
||
from { box-shadow: 0 0 30px rgba(16, 185, 129, 0.3); }
|
||
to { box-shadow: 0 0 50px rgba(16, 185, 129, 0.5), 0 0 70px rgba(16, 185, 129, 0.3); }
|
||
}
|
||
|
||
/* Progress ring */
|
||
.progress-ring {
|
||
transform: rotate(-90deg);
|
||
transform-origin: 50% 50%;
|
||
}
|
||
|
||
.progress-ring-circle {
|
||
stroke-dasharray: 440;
|
||
stroke-dashoffset: 440;
|
||
animation: progressRing 2s ease-out forwards;
|
||
}
|
||
|
||
@keyframes progressRing {
|
||
to { stroke-dashoffset: 0; }
|
||
}
|
||
|
||
/* 3D card effect */
|
||
.card-3d {
|
||
transform-style: preserve-3d;
|
||
transition: transform 0.6s;
|
||
}
|
||
|
||
.card-3d:hover {
|
||
transform: rotateY(5deg) rotateX(5deg);
|
||
}
|
||
|
||
/* Gradient text */
|
||
.gradient-text {
|
||
background: linear-gradient(135deg, #667eea 0%, #10b981 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
/* Money flow animation */
|
||
.money-flow {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.money-flow::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -100%;
|
||
left: -100%;
|
||
width: 300%;
|
||
height: 300%;
|
||
background: linear-gradient(45deg, transparent, rgba(16, 185, 129, 0.3), transparent);
|
||
animation: moneyFlow 3s linear infinite;
|
||
}
|
||
|
||
@keyframes moneyFlow {
|
||
0% { transform: translateX(-100%) translateY(100%); }
|
||
100% { transform: translateX(100%) translateY(-100%); }
|
||
}
|
||
|
||
/* Fade animations */
|
||
.fade-in-up {
|
||
animation: fadeInUp 0.8s ease-out forwards;
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* Nav link effect */
|
||
.nav-link {
|
||
position: relative;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.nav-link::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -2px;
|
||
left: 0;
|
||
width: 0;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, #10b981, #3b82f6);
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
.nav-link:hover::after,
|
||
.nav-link.active::after {
|
||
width: 100%;
|
||
}
|
||
|
||
/* Parallax background */
|
||
.parallax-bg {
|
||
background-attachment: fixed;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
/* Chart animation delays */
|
||
.delay-100 { animation-delay: 0.1s; }
|
||
.delay-200 { animation-delay: 0.2s; }
|
||
.delay-300 { animation-delay: 0.3s; }
|
||
.delay-400 { animation-delay: 0.4s; }
|
||
.delay-500 { animation-delay: 0.5s; }
|
||
.delay-600 { animation-delay: 0.6s; }
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-50">
|
||
<!-- Navigation -->
|
||
<nav class="fixed top-0 w-full glass-morphism shadow-lg 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">
|
||
<h1 class="text-2xl font-bold gradient-text">NEVIT 2024</h1>
|
||
<span class="ml-3 text-sm text-gray-500">新能源汽车产业博览会</span>
|
||
</div>
|
||
<div class="hidden md:flex space-x-8">
|
||
<a href="../index.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
|
||
<i class="fas fa-home mr-2"></i>首页
|
||
</a>
|
||
<a href="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="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="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="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="budget.html" class="nav-link active text-emerald-500">
|
||
<i class="fas fa-chart-pie mr-2"></i>预算分析
|
||
</a>
|
||
<a href="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>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero Section with Parallax -->
|
||
<section class="relative min-h-[500px] pt-20 parallax-bg animated-bg flex items-center justify-center overflow-hidden">
|
||
<div class="absolute inset-0 bg-black/40"></div>
|
||
<div class="relative z-10 container mx-auto px-6 text-center text-white">
|
||
<h1 class="text-5xl md:text-6xl font-bold mb-6 fade-in-up">
|
||
智能预算管理系统
|
||
</h1>
|
||
<p class="text-xl md:text-2xl mb-8 fade-in-up delay-200">
|
||
科学规划 · 精准投资 · 价值最大化
|
||
</p>
|
||
<div class="flex justify-center space-x-6 fade-in-up delay-400">
|
||
<div class="bg-white/20 backdrop-blur-md rounded-xl p-4">
|
||
<i class="fas fa-chart-line text-3xl mb-2"></i>
|
||
<p class="text-sm">ROI 33.3%</p>
|
||
</div>
|
||
<div class="bg-white/20 backdrop-blur-md rounded-xl p-4">
|
||
<i class="fas fa-wallet text-3xl mb-2"></i>
|
||
<p class="text-sm">总预算 900万</p>
|
||
</div>
|
||
<div class="bg-white/20 backdrop-blur-md rounded-xl p-4">
|
||
<i class="fas fa-coins text-3xl mb-2"></i>
|
||
<p class="text-sm">预期收入 1200万</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Floating money icons -->
|
||
<div class="absolute top-20 left-10 text-white/20 float-animation">
|
||
<i class="fas fa-dollar-sign text-6xl"></i>
|
||
</div>
|
||
<div class="absolute bottom-20 right-10 text-white/20 float-animation delay-300">
|
||
<i class="fas fa-euro-sign text-6xl"></i>
|
||
</div>
|
||
<div class="absolute top-40 right-20 text-white/20 float-animation delay-600">
|
||
<i class="fas fa-yen-sign text-5xl"></i>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Budget Overview Dashboard -->
|
||
<section class="py-20 bg-white">
|
||
<div class="container mx-auto px-6">
|
||
<div class="text-center mb-12">
|
||
<h2 class="text-4xl font-bold gradient-text mb-4">预算总控仪表盘</h2>
|
||
<p class="text-gray-600 text-lg">实时监控 · 动态调整 · 风险预警</p>
|
||
</div>
|
||
|
||
<!-- Key Metrics Grid -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
|
||
<!-- Total Budget Card -->
|
||
<div class="card-3d bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl p-6 text-white shadow-2xl">
|
||
<div class="flex justify-between items-start mb-4">
|
||
<div class="bg-white/20 p-3 rounded-lg">
|
||
<i class="fas fa-money-bill-wave text-2xl"></i>
|
||
</div>
|
||
<span class="bg-white/20 px-3 py-1 rounded-full text-xs">-5.3%</span>
|
||
</div>
|
||
<div class="counter-animation">
|
||
<h3 class="text-3xl font-bold mb-1">¥900万</h3>
|
||
<p class="text-blue-100 text-sm">总支出预算</p>
|
||
</div>
|
||
<div class="mt-4 bg-white/20 rounded-lg p-2">
|
||
<div class="flex justify-between text-xs mb-1">
|
||
<span>执行率</span>
|
||
<span>75%</span>
|
||
</div>
|
||
<div class="bg-white/30 rounded-full h-2">
|
||
<div class="bg-white rounded-full h-2 chart-bar" style="width: 75%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Expected Revenue Card -->
|
||
<div class="card-3d bg-gradient-to-br from-green-500 to-green-600 rounded-2xl p-6 text-white shadow-2xl">
|
||
<div class="flex justify-between items-start mb-4">
|
||
<div class="bg-white/20 p-3 rounded-lg">
|
||
<i class="fas fa-chart-line text-2xl"></i>
|
||
</div>
|
||
<span class="bg-white/20 px-3 py-1 rounded-full text-xs">+20%</span>
|
||
</div>
|
||
<div class="counter-animation delay-200">
|
||
<h3 class="text-3xl font-bold mb-1">¥1200万</h3>
|
||
<p class="text-green-100 text-sm">预期总收入</p>
|
||
</div>
|
||
<div class="mt-4 bg-white/20 rounded-lg p-2">
|
||
<div class="flex justify-between text-xs mb-1">
|
||
<span>完成度</span>
|
||
<span>85%</span>
|
||
</div>
|
||
<div class="bg-white/30 rounded-full h-2">
|
||
<div class="bg-white rounded-full h-2 chart-bar delay-200" style="width: 85%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Net Profit Card -->
|
||
<div class="card-3d bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl p-6 text-white shadow-2xl">
|
||
<div class="flex justify-between items-start mb-4">
|
||
<div class="bg-white/20 p-3 rounded-lg">
|
||
<i class="fas fa-hand-holding-usd text-2xl"></i>
|
||
</div>
|
||
<span class="bg-white/20 px-3 py-1 rounded-full text-xs">+15%</span>
|
||
</div>
|
||
<div class="counter-animation delay-400">
|
||
<h3 class="text-3xl font-bold mb-1">¥300万</h3>
|
||
<p class="text-purple-100 text-sm">预期净利润</p>
|
||
</div>
|
||
<div class="mt-4 bg-white/20 rounded-lg p-2">
|
||
<div class="flex justify-between text-xs mb-1">
|
||
<span>利润率</span>
|
||
<span>25%</span>
|
||
</div>
|
||
<div class="bg-white/30 rounded-full h-2">
|
||
<div class="bg-white rounded-full h-2 chart-bar delay-400" style="width: 25%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ROI Card with Glow -->
|
||
<div class="card-3d bg-gradient-to-br from-orange-500 to-orange-600 rounded-2xl p-6 text-white shadow-2xl glow-effect">
|
||
<div class="flex justify-between items-start mb-4">
|
||
<div class="bg-white/20 p-3 rounded-lg pulse-animation">
|
||
<i class="fas fa-percentage text-2xl"></i>
|
||
</div>
|
||
<span class="bg-green-400 px-3 py-1 rounded-full text-xs text-green-900">优秀</span>
|
||
</div>
|
||
<div class="counter-animation delay-600">
|
||
<h3 class="text-3xl font-bold mb-1">33.3%</h3>
|
||
<p class="text-orange-100 text-sm">投资回报率</p>
|
||
</div>
|
||
<div class="mt-4 bg-white/20 rounded-lg p-2">
|
||
<div class="flex justify-between text-xs mb-1">
|
||
<span>行业均值</span>
|
||
<span>20%</span>
|
||
</div>
|
||
<div class="bg-white/30 rounded-full h-2">
|
||
<div class="bg-white rounded-full h-2 chart-bar delay-600" style="width: 100%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Real-time Monitoring -->
|
||
<div class="bg-gray-50 rounded-2xl p-8 money-flow">
|
||
<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 rounded-xl p-6 shadow-lg">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h4 class="font-semibold text-gray-700">今日支出</h4>
|
||
<i class="fas fa-arrow-down text-red-500"></i>
|
||
</div>
|
||
<p class="text-3xl font-bold text-red-600">¥5.8万</p>
|
||
<p class="text-sm text-gray-500 mt-2">较昨日 -12%</p>
|
||
</div>
|
||
<div class="bg-white rounded-xl p-6 shadow-lg">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h4 class="font-semibold text-gray-700">今日收入</h4>
|
||
<i class="fas fa-arrow-up text-green-500"></i>
|
||
</div>
|
||
<p class="text-3xl font-bold text-green-600">¥12.3万</p>
|
||
<p class="text-sm text-gray-500 mt-2">较昨日 +28%</p>
|
||
</div>
|
||
<div class="bg-white rounded-xl p-6 shadow-lg">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h4 class="font-semibold text-gray-700">现金流</h4>
|
||
<i class="fas fa-water text-blue-500"></i>
|
||
</div>
|
||
<p class="text-3xl font-bold text-blue-600">¥238万</p>
|
||
<p class="text-sm text-gray-500 mt-2">流动性充足</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Detailed Budget Breakdown -->
|
||
<section class="py-20 bg-gray-50" style="background-image: url('../../data/会展策划/image/财务分析.jpg'); background-size: cover; background-position: center;">
|
||
<div class="bg-gray-50/95 backdrop-blur-sm">
|
||
<div class="container mx-auto px-6">
|
||
<h2 class="text-4xl font-bold text-center mb-12 gradient-text">支出预算明细分析</h2>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||
<!-- Interactive Pie Chart -->
|
||
<div class="bg-white rounded-2xl shadow-xl p-8">
|
||
<h3 class="text-2xl font-bold mb-6">预算分配结构</h3>
|
||
<div class="relative">
|
||
<!-- SVG Pie Chart -->
|
||
<svg class="w-full h-80 pie-rotate" viewBox="0 0 400 400">
|
||
<defs>
|
||
<filter id="shadow">
|
||
<feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity="0.3"/>
|
||
</filter>
|
||
</defs>
|
||
|
||
<!-- Venue costs - 33.3% -->
|
||
<path d="M 200 200 L 200 50 A 150 150 0 0 1 350 200 Z"
|
||
fill="#8b5cf6" filter="url(#shadow)" class="hover:opacity-80 transition-opacity cursor-pointer">
|
||
<title>场地费用: ¥300万 (33.3%)</title>
|
||
</path>
|
||
|
||
<!-- Marketing - 22.2% -->
|
||
<path d="M 200 200 L 350 200 A 150 150 0 0 1 280 330 Z"
|
||
fill="#10b981" filter="url(#shadow)" class="hover:opacity-80 transition-opacity cursor-pointer">
|
||
<title>营销推广: ¥200万 (22.2%)</title>
|
||
</path>
|
||
|
||
<!-- Personnel - 16.7% -->
|
||
<path d="M 200 200 L 280 330 A 150 150 0 0 1 120 330 Z"
|
||
fill="#f59e0b" filter="url(#shadow)" class="hover:opacity-80 transition-opacity cursor-pointer">
|
||
<title>人员成本: ¥150万 (16.7%)</title>
|
||
</path>
|
||
|
||
<!-- Activities - 11.1% -->
|
||
<path d="M 200 200 L 120 330 A 150 150 0 0 1 50 200 Z"
|
||
fill="#ef4444" filter="url(#shadow)" class="hover:opacity-80 transition-opacity cursor-pointer">
|
||
<title>活动执行: ¥100万 (11.1%)</title>
|
||
</path>
|
||
|
||
<!-- Operations - 8.9% -->
|
||
<path d="M 200 200 L 50 200 A 150 150 0 0 1 120 70 Z"
|
||
fill="#3b82f6" filter="url(#shadow)" class="hover:opacity-80 transition-opacity cursor-pointer">
|
||
<title>运营保障: ¥80万 (8.9%)</title>
|
||
</path>
|
||
|
||
<!-- Reserve - 7.8% -->
|
||
<path d="M 200 200 L 120 70 A 150 150 0 0 1 200 50 Z"
|
||
fill="#ec4899" filter="url(#shadow)" class="hover:opacity-80 transition-opacity cursor-pointer">
|
||
<title>应急储备: ¥70万 (7.8%)</title>
|
||
</path>
|
||
|
||
<!-- Center circle -->
|
||
<circle cx="200" cy="200" r="80" fill="white" filter="url(#shadow)"/>
|
||
<text x="200" y="190" text-anchor="middle" class="text-3xl font-bold fill-gray-800">¥900万</text>
|
||
<text x="200" y="220" text-anchor="middle" class="text-sm fill-gray-500">总预算</text>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- Legend -->
|
||
<div class="grid grid-cols-2 gap-3 mt-6">
|
||
<div class="flex items-center">
|
||
<div class="w-4 h-4 bg-purple-600 rounded mr-2"></div>
|
||
<span class="text-sm">场地费用 33.3%</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="w-4 h-4 bg-green-500 rounded mr-2"></div>
|
||
<span class="text-sm">营销推广 22.2%</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="w-4 h-4 bg-yellow-500 rounded mr-2"></div>
|
||
<span class="text-sm">人员成本 16.7%</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="w-4 h-4 bg-red-500 rounded mr-2"></div>
|
||
<span class="text-sm">活动执行 11.1%</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="w-4 h-4 bg-blue-500 rounded mr-2"></div>
|
||
<span class="text-sm">运营保障 8.9%</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="w-4 h-4 bg-pink-500 rounded mr-2"></div>
|
||
<span class="text-sm">应急储备 7.8%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Detailed Budget List -->
|
||
<div class="bg-white rounded-2xl shadow-xl p-8">
|
||
<h3 class="text-2xl font-bold mb-6">分项预算执行</h3>
|
||
<div class="space-y-6">
|
||
<!-- Venue Costs -->
|
||
<div class="border-l-4 border-purple-600 pl-4">
|
||
<div class="flex justify-between items-center mb-2">
|
||
<h4 class="font-bold text-purple-600 flex items-center">
|
||
<i class="fas fa-building mr-2"></i>场地费用
|
||
</h4>
|
||
<span class="text-xl font-bold">¥300万</span>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<div class="flex justify-between text-sm">
|
||
<span class="text-gray-600">展馆租赁</span>
|
||
<span>¥180万</span>
|
||
</div>
|
||
<div class="flex justify-between text-sm">
|
||
<span class="text-gray-600">搭建装修</span>
|
||
<span>¥80万</span>
|
||
</div>
|
||
<div class="flex justify-between text-sm">
|
||
<span class="text-gray-600">设备租赁</span>
|
||
<span>¥40万</span>
|
||
</div>
|
||
</div>
|
||
<div class="mt-2 bg-gray-200 rounded-full h-2">
|
||
<div class="bg-purple-600 h-2 rounded-full chart-bar" style="width: 90%"></div>
|
||
</div>
|
||
<p class="text-xs text-gray-500 mt-1">执行率: 90%</p>
|
||
</div>
|
||
|
||
<!-- Marketing Costs -->
|
||
<div class="border-l-4 border-green-600 pl-4">
|
||
<div class="flex justify-between items-center mb-2">
|
||
<h4 class="font-bold text-green-600 flex items-center">
|
||
<i class="fas fa-bullhorn mr-2"></i>营销推广
|
||
</h4>
|
||
<span class="text-xl font-bold">¥200万</span>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<div class="flex justify-between text-sm">
|
||
<span class="text-gray-600">数字营销</span>
|
||
<span>¥80万</span>
|
||
</div>
|
||
<div class="flex justify-between text-sm">
|
||
<span class="text-gray-600">线下推广</span>
|
||
<span>¥60万</span>
|
||
</div>
|
||
<div class="flex justify-between text-sm">
|
||
<span class="text-gray-600">媒体合作</span>
|
||
<span>¥40万</span>
|
||
</div>
|
||
<div class="flex justify-between text-sm">
|
||
<span class="text-gray-600">KOL合作</span>
|
||
<span>¥20万</span>
|
||
</div>
|
||
</div>
|
||
<div class="mt-2 bg-gray-200 rounded-full h-2">
|
||
<div class="bg-green-600 h-2 rounded-full chart-bar delay-200" style="width: 75%"></div>
|
||
</div>
|
||
<p class="text-xs text-gray-500 mt-1">执行率: 75%</p>
|
||
</div>
|
||
|
||
<!-- Personnel Costs -->
|
||
<div class="border-l-4 border-yellow-600 pl-4">
|
||
<div class="flex justify-between items-center mb-2">
|
||
<h4 class="font-bold text-yellow-600 flex items-center">
|
||
<i class="fas fa-users mr-2"></i>人员成本
|
||
</h4>
|
||
<span class="text-xl font-bold">¥150万</span>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<div class="flex justify-between text-sm">
|
||
<span class="text-gray-600">项目团队</span>
|
||
<span>¥80万</span>
|
||
</div>
|
||
<div class="flex justify-between text-sm">
|
||
<span class="text-gray-600">临时人员</span>
|
||
<span>¥40万</span>
|
||
</div>
|
||
<div class="flex justify-between text-sm">
|
||
<span class="text-gray-600">专家顾问</span>
|
||
<span>¥30万</span>
|
||
</div>
|
||
</div>
|
||
<div class="mt-2 bg-gray-200 rounded-full h-2">
|
||
<div class="bg-yellow-600 h-2 rounded-full chart-bar delay-400" style="width: 85%"></div>
|
||
</div>
|
||
<p class="text-xs text-gray-500 mt-1">执行率: 85%</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Revenue Analysis Section -->
|
||
<section class="py-20 bg-white">
|
||
<div class="container mx-auto px-6">
|
||
<h2 class="text-4xl font-bold text-center mb-12 gradient-text">收入来源与预测</h2>
|
||
|
||
<!-- Revenue Stream Cards -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
|
||
<!-- Exhibition Booth Revenue -->
|
||
<div class="group relative overflow-hidden rounded-2xl shadow-xl">
|
||
<div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-blue-700 transform transition-transform group-hover:scale-110"></div>
|
||
<div class="relative p-6 text-white">
|
||
<div class="bg-white/20 w-16 h-16 rounded-full flex items-center justify-center mb-4">
|
||
<i class="fas fa-store text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-2">展位收入</h3>
|
||
<p class="text-3xl font-bold mb-1">¥700万</p>
|
||
<p class="text-blue-100 text-sm">占比 58.3%</p>
|
||
<div class="mt-4 space-y-1 text-xs">
|
||
<div class="flex justify-between">
|
||
<span>标准展位</span>
|
||
<span>1200个</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span>特装展位</span>
|
||
<span>20000㎡</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sponsorship Revenue -->
|
||
<div class="group relative overflow-hidden rounded-2xl shadow-xl">
|
||
<div class="absolute inset-0 bg-gradient-to-br from-green-600 to-green-700 transform transition-transform group-hover:scale-110"></div>
|
||
<div class="relative p-6 text-white">
|
||
<div class="bg-white/20 w-16 h-16 rounded-full flex items-center justify-center mb-4">
|
||
<i class="fas fa-handshake text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-2">赞助收入</h3>
|
||
<p class="text-3xl font-bold mb-1">¥300万</p>
|
||
<p class="text-green-100 text-sm">占比 25%</p>
|
||
<div class="mt-4 space-y-1 text-xs">
|
||
<div class="flex justify-between">
|
||
<span>冠名赞助</span>
|
||
<span>1家</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span>战略合作</span>
|
||
<span>3家</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Advertising Revenue -->
|
||
<div class="group relative overflow-hidden rounded-2xl shadow-xl">
|
||
<div class="absolute inset-0 bg-gradient-to-br from-purple-600 to-purple-700 transform transition-transform group-hover:scale-110"></div>
|
||
<div class="relative p-6 text-white">
|
||
<div class="bg-white/20 w-16 h-16 rounded-full flex items-center justify-center mb-4">
|
||
<i class="fas fa-ad text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-2">广告收入</h3>
|
||
<p class="text-3xl font-bold mb-1">¥100万</p>
|
||
<p class="text-purple-100 text-sm">占比 8.3%</p>
|
||
<div class="mt-4 space-y-1 text-xs">
|
||
<div class="flex justify-between">
|
||
<span>现场广告</span>
|
||
<span>50万</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span>数字广告</span>
|
||
<span>50万</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Other Revenue -->
|
||
<div class="group relative overflow-hidden rounded-2xl shadow-xl">
|
||
<div class="absolute inset-0 bg-gradient-to-br from-orange-600 to-orange-700 transform transition-transform group-hover:scale-110"></div>
|
||
<div class="relative p-6 text-white">
|
||
<div class="bg-white/20 w-16 h-16 rounded-full flex items-center justify-center mb-4">
|
||
<i class="fas fa-ellipsis-h text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-2">其他收入</h3>
|
||
<p class="text-3xl font-bold mb-1">¥100万</p>
|
||
<p class="text-orange-100 text-sm">占比 8.3%</p>
|
||
<div class="mt-4 space-y-1 text-xs">
|
||
<div class="flex justify-between">
|
||
<span>门票收入</span>
|
||
<span>30万</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span>服务费用</span>
|
||
<span>70万</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Revenue Forecast Chart -->
|
||
<div class="bg-gradient-to-r from-blue-50 to-green-50 rounded-2xl p-8">
|
||
<h3 class="text-2xl font-bold mb-6">收入增长预测</h3>
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||
<!-- Monthly Forecast -->
|
||
<div class="bg-white rounded-xl p-6">
|
||
<h4 class="font-bold text-gray-700 mb-4">月度收入趋势</h4>
|
||
<div class="space-y-3">
|
||
<div class="flex items-center justify-between">
|
||
<span class="text-sm text-gray-600">1月</span>
|
||
<div class="flex-1 mx-4 bg-gray-200 rounded-full h-6 relative">
|
||
<div class="bg-gradient-to-r from-blue-500 to-green-500 h-6 rounded-full chart-bar" style="width: 30%"></div>
|
||
</div>
|
||
<span class="text-sm font-bold">¥120万</span>
|
||
</div>
|
||
<div class="flex items-center justify-between">
|
||
<span class="text-sm text-gray-600">2月</span>
|
||
<div class="flex-1 mx-4 bg-gray-200 rounded-full h-6 relative">
|
||
<div class="bg-gradient-to-r from-blue-500 to-green-500 h-6 rounded-full chart-bar delay-100" style="width: 45%"></div>
|
||
</div>
|
||
<span class="text-sm font-bold">¥180万</span>
|
||
</div>
|
||
<div class="flex items-center justify-between">
|
||
<span class="text-sm text-gray-600">3月</span>
|
||
<div class="flex-1 mx-4 bg-gray-200 rounded-full h-6 relative">
|
||
<div class="bg-gradient-to-r from-blue-500 to-green-500 h-6 rounded-full chart-bar delay-200" style="width: 70%"></div>
|
||
</div>
|
||
<span class="text-sm font-bold">¥280万</span>
|
||
</div>
|
||
<div class="flex items-center justify-between">
|
||
<span class="text-sm text-gray-600">4月（展会）</span>
|
||
<div class="flex-1 mx-4 bg-gray-200 rounded-full h-6 relative">
|
||
<div class="bg-gradient-to-r from-blue-500 to-green-500 h-6 rounded-full chart-bar delay-300" style="width: 100%"></div>
|
||
</div>
|
||
<span class="text-sm font-bold">¥620万</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Category Growth -->
|
||
<div class="bg-white rounded-xl p-6">
|
||
<h4 class="font-bold text-gray-700 mb-4">收入类别增长率</h4>
|
||
<div class="space-y-4">
|
||
<div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
|
||
<div class="flex items-center">
|
||
<i class="fas fa-store text-blue-600 mr-3"></i>
|
||
<span class="font-semibold">展位收入</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span class="text-green-600 font-bold">+18%</span>
|
||
<i class="fas fa-arrow-up text-green-600 ml-2"></i>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between p-3 bg-green-50 rounded-lg">
|
||
<div class="flex items-center">
|
||
<i class="fas fa-handshake text-green-600 mr-3"></i>
|
||
<span class="font-semibold">赞助收入</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span class="text-green-600 font-bold">+25%</span>
|
||
<i class="fas fa-arrow-up text-green-600 ml-2"></i>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between p-3 bg-purple-50 rounded-lg">
|
||
<div class="flex items-center">
|
||
<i class="fas fa-ad text-purple-600 mr-3"></i>
|
||
<span class="font-semibold">广告收入</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span class="text-green-600 font-bold">+30%</span>
|
||
<i class="fas fa-arrow-up text-green-600 ml-2"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ROI Analysis with Visual Effects -->
|
||
<section class="py-20 bg-gray-50">
|
||
<div class="container mx-auto px-6">
|
||
<h2 class="text-4xl font-bold text-center mb-12 gradient-text">投资回报率分析</h2>
|
||
|
||
<!-- ROI Dashboard -->
|
||
<div class="bg-white rounded-2xl shadow-2xl p-8 mb-12">
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||
<!-- ROI Gauge -->
|
||
<div class="text-center">
|
||
<h3 class="text-xl font-bold mb-4">综合ROI评分</h3>
|
||
<div class="relative inline-block">
|
||
<svg class="progress-ring" width="200" height="200">
|
||
<circle class="text-gray-200" stroke="currentColor" stroke-width="10" fill="transparent" r="70" cx="100" cy="100"/>
|
||
<circle class="progress-ring-circle text-green-500" stroke="currentColor" stroke-width="10" fill="transparent" r="70" cx="100" cy="100" stroke-dasharray="440" stroke-dashoffset="293"/>
|
||
</svg>
|
||
<div class="absolute inset-0 flex items-center justify-center">
|
||
<div>
|
||
<p class="text-4xl font-bold text-green-600">33.3%</p>
|
||
<p class="text-sm text-gray-500">优秀水平</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Direct Benefits -->
|
||
<div class="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6">
|
||
<h3 class="text-lg font-bold mb-4 text-green-700">直接收益</h3>
|
||
<div class="space-y-3">
|
||
<div class="flex justify-between items-center">
|
||
<span class="text-gray-600">展会净利润</span>
|
||
<span class="font-bold text-green-600">¥300万</span>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<span class="text-gray-600">现场成交额</span>
|
||
<span class="font-bold text-green-600">¥10亿+</span>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<span class="text-gray-600">合作签约</span>
|
||
<span class="font-bold text-green-600">50+项</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Indirect Benefits -->
|
||
<div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6">
|
||
<h3 class="text-lg font-bold mb-4 text-blue-700">间接收益</h3>
|
||
<div class="space-y-3">
|
||
<div class="flex justify-between items-center">
|
||
<span class="text-gray-600">品牌价值</span>
|
||
<span class="font-bold text-blue-600">+¥500万</span>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<span class="text-gray-600">媒体曝光</span>
|
||
<span class="font-bold text-blue-600">1亿+次</span>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<span class="text-gray-600">产业带动</span>
|
||
<span class="font-bold text-blue-600">¥30亿</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Investment Efficiency Matrix -->
|
||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||
<div class="bg-white rounded-xl p-6 text-center shadow-lg hover:shadow-2xl transition-shadow">
|
||
<div class="w-20 h-20 bg-gradient-to-br from-green-400 to-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<i class="fas fa-chart-line text-white text-2xl"></i>
|
||
</div>
|
||
<h4 class="font-bold mb-2">投入产出比</h4>
|
||
<p class="text-3xl font-bold text-green-600">1:1.33</p>
|
||
<p class="text-sm text-gray-500 mt-2">高于行业平均</p>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-xl p-6 text-center shadow-lg hover:shadow-2xl transition-shadow">
|
||
<div class="w-20 h-20 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<i class="fas fa-clock text-white text-2xl"></i>
|
||
</div>
|
||
<h4 class="font-bold mb-2">回收周期</h4>
|
||
<p class="text-3xl font-bold text-blue-600">6个月</p>
|
||
<p class="text-sm text-gray-500 mt-2">快速回本</p>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-xl p-6 text-center shadow-lg hover:shadow-2xl transition-shadow">
|
||
<div class="w-20 h-20 bg-gradient-to-br from-purple-400 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<i class="fas fa-award text-white text-2xl"></i>
|
||
</div>
|
||
<h4 class="font-bold mb-2">综合价值</h4>
|
||
<p class="text-3xl font-bold text-purple-600">¥1500万</p>
|
||
<p class="text-sm text-gray-500 mt-2">含品牌价值</p>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-xl p-6 text-center shadow-lg hover:shadow-2xl transition-shadow">
|
||
<div class="w-20 h-20 bg-gradient-to-br from-orange-400 to-orange-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<i class="fas fa-star text-white text-2xl"></i>
|
||
</div>
|
||
<h4 class="font-bold mb-2">投资评级</h4>
|
||
<p class="text-3xl font-bold text-orange-600">A+</p>
|
||
<p class="text-sm text-gray-500 mt-2">推荐投资</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Cost Control Strategy -->
|
||
<section class="py-20 bg-white">
|
||
<div class="container mx-auto px-6">
|
||
<h2 class="text-4xl font-bold text-center mb-12 gradient-text">智能成本控制系统</h2>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||
<!-- Budget Control -->
|
||
<div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl p-6 text-white">
|
||
<div class="flex items-center mb-4">
|
||
<div class="bg-white/20 p-3 rounded-lg mr-4">
|
||
<i class="fas fa-shield-alt text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold">预算管控</h3>
|
||
</div>
|
||
<ul class="space-y-3">
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle mr-2 mt-1"></i>
|
||
<div>
|
||
<p class="font-semibold">AI预算监控</p>
|
||
<p class="text-xs text-blue-100">实时预警，智能调配</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle mr-2 mt-1"></i>
|
||
<div>
|
||
<p class="font-semibold">分级审批制</p>
|
||
<p class="text-xs text-blue-100">10万以下快速审批</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle mr-2 mt-1"></i>
|
||
<div>
|
||
<p class="font-semibold">成本责任制</p>
|
||
<p class="text-xs text-blue-100">KPI考核，奖惩分明</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Optimization Measures -->
|
||
<div class="bg-gradient-to-br from-green-500 to-green-600 rounded-2xl p-6 text-white">
|
||
<div class="flex items-center mb-4">
|
||
<div class="bg-white/20 p-3 rounded-lg mr-4">
|
||
<i class="fas fa-cog text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold">优化措施</h3>
|
||
</div>
|
||
<ul class="space-y-3">
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle mr-2 mt-1"></i>
|
||
<div>
|
||
<p class="font-semibold">智能采购</p>
|
||
<p class="text-xs text-green-100">3家比价，最优选择</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle mr-2 mt-1"></i>
|
||
<div>
|
||
<p class="font-semibold">资源共享</p>
|
||
<p class="text-xs text-green-100">合作伙伴资源互换</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle mr-2 mt-1"></i>
|
||
<div>
|
||
<p class="font-semibold">数字化管理</p>
|
||
<p class="text-xs text-green-100">减少30%人工成本</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Risk Reserve -->
|
||
<div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl p-6 text-white">
|
||
<div class="flex items-center mb-4">
|
||
<div class="bg-white/20 p-3 rounded-lg mr-4">
|
||
<i class="fas fa-piggy-bank text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold">风险储备</h3>
|
||
</div>
|
||
<ul class="space-y-3">
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle mr-2 mt-1"></i>
|
||
<div>
|
||
<p class="font-semibold">应急基金</p>
|
||
<p class="text-xs text-purple-100">¥70万专项储备</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle mr-2 mt-1"></i>
|
||
<div>
|
||
<p class="font-semibold">保险覆盖</p>
|
||
<p class="text-xs text-purple-100">全面风险保障</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle mr-2 mt-1"></i>
|
||
<div>
|
||
<p class="font-semibold">备用方案</p>
|
||
<p class="text-xs text-purple-100">成本可控替代方案</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Budget Alert System -->
|
||
<div class="mt-12 bg-gradient-to-r from-red-50 to-orange-50 rounded-2xl p-8">
|
||
<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 rounded-xl p-4 border-l-4 border-green-500">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<span class="font-semibold">场地费用</span>
|
||
<span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">正常</span>
|
||
</div>
|
||
<div class="text-sm text-gray-600">执行率: 90% | 剩余: ¥30万</div>
|
||
</div>
|
||
<div class="bg-white rounded-xl p-4 border-l-4 border-yellow-500">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<span class="font-semibold">营销推广</span>
|
||
<span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs">注意</span>
|
||
</div>
|
||
<div class="text-sm text-gray-600">执行率: 75% | 剩余: ¥50万</div>
|
||
</div>
|
||
<div class="bg-white rounded-xl p-4 border-l-4 border-red-500">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<span class="font-semibold">人员成本</span>
|
||
<span class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs">预警</span>
|
||
</div>
|
||
<div class="text-sm text-gray-600">执行率: 95% | 剩余: ¥7.5万</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA Section -->
|
||
<section class="py-16 bg-gradient-to-r from-emerald-600 to-blue-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="risk.html" class="inline-block bg-white text-emerald-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition transform hover:scale-105">
|
||
查看风险评估 <i class="fas fa-arrow-right ml-2"></i>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="bg-gray-900 text-white py-12">
|
||
<div class="container mx-auto px-6">
|
||
<div class="text-center">
|
||
<p class="text-gray-400">© 2024 长三角国际新能源汽车与智能交通产业博览会. All rights reserved.</p>
|
||
<p class="text-gray-500 text-sm mt-2">Powered by AI Exhibition Planning System</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Add scroll animations
|
||
const observerOptions = {
|
||
threshold: 0.1,
|
||
rootMargin: '0px 0px -50px 0px'
|
||
};
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.style.opacity = '1';
|
||
entry.target.style.transform = 'translateY(0)';
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
document.querySelectorAll('.fade-in-up').forEach(el => {
|
||
el.style.opacity = '0';
|
||
el.style.transform = 'translateY(30px)';
|
||
el.style.transition = 'all 0.8s ease-out';
|
||
observer.observe(el);
|
||
});
|
||
|
||
// Counter animation
|
||
function animateValue(element, start, end, duration) {
|
||
const range = end - start;
|
||
const increment = range / (duration / 16);
|
||
let current = start;
|
||
const timer = setInterval(() => {
|
||
current += increment;
|
||
if (current >= end) {
|
||
current = end;
|
||
clearInterval(timer);
|
||
}
|
||
element.textContent = Math.floor(current).toLocaleString();
|
||
}, 16);
|
||
}
|
||
|
||
// Trigger counter animations when visible
|
||
const counterObserver = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting && !entry.target.animated) {
|
||
entry.target.animated = true;
|
||
const value = parseInt(entry.target.textContent.replace(/[^0-9]/g, ''));
|
||
animateValue(entry.target, 0, value, 2000);
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
document.querySelectorAll('.counter-animation h3').forEach(el => {
|
||
counterObserver.observe(el);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |