e665ee15ea
详细说明: - 创建共享的导航组件nav-component.js - 动态检测页面位置自动调整路径 - 修复index.html和所有子页面导航链接不一致问题 - 统一Logo样式和响应式设计 - 添加移动端菜单支持
1045 lines
53 KiB
HTML
1045 lines
53 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);
|
||
}
|
||
|
||
/* Risk level animations */
|
||
@keyframes riskPulse {
|
||
0%, 100% {
|
||
transform: scale(1);
|
||
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
|
||
}
|
||
50% {
|
||
transform: scale(1.05);
|
||
box-shadow: 0 0 20px 10px rgba(239, 68, 68, 0);
|
||
}
|
||
}
|
||
|
||
.risk-pulse-high {
|
||
animation: riskPulse 2s infinite;
|
||
}
|
||
|
||
/* Radar chart animation */
|
||
.radar-rotate {
|
||
animation: radarRotate 20s linear infinite;
|
||
}
|
||
|
||
@keyframes radarRotate {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
/* Progress bar animations */
|
||
.progress-fill {
|
||
animation: progressFill 2s ease-out forwards;
|
||
}
|
||
|
||
@keyframes progressFill {
|
||
from { width: 0%; }
|
||
}
|
||
|
||
/* Alert animation */
|
||
.alert-blink {
|
||
animation: alertBlink 1s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes alertBlink {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.3; }
|
||
}
|
||
|
||
/* Shield animation */
|
||
.shield-float {
|
||
animation: shieldFloat 3s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes shieldFloat {
|
||
0%, 100% { transform: translateY(0px); }
|
||
50% { transform: translateY(-10px); }
|
||
}
|
||
|
||
/* Risk card hover effect */
|
||
.risk-card {
|
||
transition: all 0.3s ease;
|
||
transform-style: preserve-3d;
|
||
}
|
||
|
||
.risk-card:hover {
|
||
transform: translateY(-5px) rotateX(5deg);
|
||
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
/* Gradient backgrounds */
|
||
.gradient-bg-red {
|
||
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
||
}
|
||
|
||
.gradient-bg-yellow {
|
||
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||
}
|
||
|
||
.gradient-bg-green {
|
||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||
}
|
||
|
||
.gradient-bg-blue {
|
||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||
}
|
||
|
||
/* Animated gradient background */
|
||
.animated-gradient {
|
||
background: linear-gradient(270deg, #667eea, #764ba2, #f093fb, #667eea);
|
||
background-size: 400% 400%;
|
||
animation: gradientShift 15s ease infinite;
|
||
}
|
||
|
||
@keyframes gradientShift {
|
||
0% { background-position: 0% 50%; }
|
||
50% { background-position: 100% 50%; }
|
||
100% { background-position: 0% 50%; }
|
||
}
|
||
|
||
/* Matrix grid effect */
|
||
.matrix-grid {
|
||
background-image:
|
||
linear-gradient(rgba(16, 185, 129, 0.1) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(16, 185, 129, 0.1) 1px, transparent 1px);
|
||
background-size: 50px 50px;
|
||
animation: matrixMove 10s linear infinite;
|
||
}
|
||
|
||
@keyframes matrixMove {
|
||
0% { background-position: 0 0; }
|
||
100% { background-position: 50px 50px; }
|
||
}
|
||
|
||
/* Fade in animations */
|
||
.fade-in-up {
|
||
animation: fadeInUp 0.8s ease-out forwards;
|
||
opacity: 0;
|
||
}
|
||
|
||
@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%;
|
||
}
|
||
|
||
/* Risk meter animation */
|
||
.risk-meter {
|
||
transform-origin: center bottom;
|
||
animation: meterSwing 2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes meterSwing {
|
||
0%, 100% { transform: rotate(-30deg); }
|
||
50% { transform: rotate(30deg); }
|
||
}
|
||
|
||
/* Glow effect */
|
||
.glow-red {
|
||
box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
|
||
}
|
||
|
||
.glow-yellow {
|
||
box-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
|
||
}
|
||
|
||
.glow-green {
|
||
box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
|
||
}
|
||
|
||
/* Scan line effect */
|
||
.scan-line {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.8), transparent);
|
||
animation: scan 3s linear infinite;
|
||
}
|
||
|
||
@keyframes scan {
|
||
0% { top: 0%; }
|
||
100% { top: 100%; }
|
||
}
|
||
|
||
/* 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">
|
||
<!-- Content will be dynamically generated by nav-component.js -->
|
||
</nav>
|
||
|
||
<!-- Hero Section with Matrix Effect -->
|
||
<section class="relative min-h-[500px] pt-20 animated-gradient overflow-hidden">
|
||
<div class="absolute inset-0 matrix-grid"></div>
|
||
<div class="scan-line"></div>
|
||
<div class="relative z-10 container mx-auto px-6 py-20 text-center text-white">
|
||
<div class="shield-float inline-block mb-6">
|
||
<div class="w-24 h-24 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center mx-auto">
|
||
<i class="fas fa-shield-alt text-5xl"></i>
|
||
</div>
|
||
</div>
|
||
<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">
|
||
AI驱动 · 实时监控 · 预警防范 · 应急响应
|
||
</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">
|
||
<div class="text-3xl font-bold">18</div>
|
||
<div class="text-sm">风险监测点</div>
|
||
</div>
|
||
<div class="bg-white/20 backdrop-blur-md rounded-xl p-4">
|
||
<div class="text-3xl font-bold">95%</div>
|
||
<div class="text-sm">防控覆盖率</div>
|
||
</div>
|
||
<div class="bg-white/20 backdrop-blur-md rounded-xl p-4">
|
||
<div class="text-3xl font-bold">24/7</div>
|
||
<div class="text-sm">实时监控</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Risk 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 mb-4 bg-gradient-to-r from-red-600 to-orange-600 bg-clip-text text-transparent">
|
||
风险态势总览
|
||
</h2>
|
||
<p class="text-gray-600 text-lg">实时监测 · 动态评估 · 智能预警</p>
|
||
</div>
|
||
|
||
<!-- Risk Level Indicators -->
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
|
||
<!-- High Risk -->
|
||
<div class="risk-card gradient-bg-red text-white rounded-2xl p-8 relative overflow-hidden">
|
||
<div class="absolute top-4 right-4 alert-blink">
|
||
<i class="fas fa-exclamation-triangle text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-2xl font-bold mb-4">高风险事项</h3>
|
||
<div class="text-5xl font-bold mb-4">2</div>
|
||
<div class="space-y-2">
|
||
<div class="bg-white/20 rounded-lg p-2 text-sm">
|
||
<i class="fas fa-virus mr-2"></i>疫情防控风险
|
||
</div>
|
||
<div class="bg-white/20 rounded-lg p-2 text-sm">
|
||
<i class="fas fa-cloud-showers-heavy mr-2"></i>极端天气风险
|
||
</div>
|
||
</div>
|
||
<div class="mt-4 bg-white/20 rounded-full h-2">
|
||
<div class="bg-white rounded-full h-2 progress-fill" style="width: 30%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Medium Risk -->
|
||
<div class="risk-card gradient-bg-yellow text-white rounded-2xl p-8 relative overflow-hidden">
|
||
<div class="absolute top-4 right-4">
|
||
<i class="fas fa-exclamation-circle text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-2xl font-bold mb-4">中风险事项</h3>
|
||
<div class="text-5xl font-bold mb-4">5</div>
|
||
<div class="space-y-2">
|
||
<div class="bg-white/20 rounded-lg p-2 text-sm">
|
||
<i class="fas fa-users mr-2"></i>人流控制风险
|
||
</div>
|
||
<div class="bg-white/20 rounded-lg p-2 text-sm">
|
||
<i class="fas fa-server mr-2"></i>技术故障风险
|
||
</div>
|
||
<div class="bg-white/20 rounded-lg p-2 text-sm">
|
||
<i class="fas fa-truck mr-2"></i>物流延误风险
|
||
</div>
|
||
</div>
|
||
<div class="mt-4 bg-white/20 rounded-full h-2">
|
||
<div class="bg-white rounded-full h-2 progress-fill delay-200" style="width: 50%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Low Risk -->
|
||
<div class="risk-card gradient-bg-green text-white rounded-2xl p-8 relative overflow-hidden">
|
||
<div class="absolute top-4 right-4">
|
||
<i class="fas fa-check-circle text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-2xl font-bold mb-4">低风险事项</h3>
|
||
<div class="text-5xl font-bold mb-4">11</div>
|
||
<div class="space-y-2">
|
||
<div class="bg-white/20 rounded-lg p-2 text-sm">
|
||
<i class="fas fa-parking mr-2"></i>停车管理风险
|
||
</div>
|
||
<div class="bg-white/20 rounded-lg p-2 text-sm">
|
||
<i class="fas fa-utensils mr-2"></i>餐饮服务风险
|
||
</div>
|
||
<div class="bg-white/20 rounded-lg p-2 text-sm">
|
||
<i class="fas fa-wifi mr-2"></i>网络服务风险
|
||
</div>
|
||
</div>
|
||
<div class="mt-4 bg-white/20 rounded-full h-2">
|
||
<div class="bg-white rounded-full h-2 progress-fill delay-400" style="width: 85%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Risk Radar Chart -->
|
||
<div class="bg-gray-50 rounded-2xl p-8">
|
||
<h3 class="text-2xl font-bold mb-6 text-center">风险雷达监测</h3>
|
||
<div class="flex flex-col lg:flex-row items-center justify-around">
|
||
<!-- Radar Visualization -->
|
||
<div class="relative w-80 h-80">
|
||
<svg class="w-full h-full" viewBox="0 0 320 320">
|
||
<!-- Background circles -->
|
||
<circle cx="160" cy="160" r="140" fill="none" stroke="#e5e7eb" stroke-width="1"/>
|
||
<circle cx="160" cy="160" r="105" fill="none" stroke="#e5e7eb" stroke-width="1"/>
|
||
<circle cx="160" cy="160" r="70" fill="none" stroke="#e5e7eb" stroke-width="1"/>
|
||
<circle cx="160" cy="160" r="35" fill="none" stroke="#e5e7eb" stroke-width="1"/>
|
||
|
||
<!-- Radar lines -->
|
||
<line x1="160" y1="20" x2="160" y2="300" stroke="#e5e7eb" stroke-width="1"/>
|
||
<line x1="20" y1="160" x2="300" y2="160" stroke="#e5e7eb" stroke-width="1"/>
|
||
<line x1="60" y1="60" x2="260" y2="260" stroke="#e5e7eb" stroke-width="1"/>
|
||
<line x1="260" y1="60" x2="60" y2="260" stroke="#e5e7eb" stroke-width="1"/>
|
||
|
||
<!-- Risk areas -->
|
||
<polygon points="160,60 220,100 220,180 160,220 100,180 100,100"
|
||
fill="url(#riskGradient)" opacity="0.6" class="radar-rotate"/>
|
||
|
||
<!-- Risk points -->
|
||
<circle cx="160" cy="60" r="5" fill="#ef4444" class="risk-pulse-high"/>
|
||
<circle cx="220" cy="100" r="5" fill="#f59e0b"/>
|
||
<circle cx="220" cy="180" r="5" fill="#10b981"/>
|
||
<circle cx="160" cy="220" r="5" fill="#10b981"/>
|
||
<circle cx="100" cy="180" r="5" fill="#f59e0b"/>
|
||
<circle cx="100" cy="100" r="5" fill="#ef4444" class="risk-pulse-high"/>
|
||
|
||
<!-- Gradient definition -->
|
||
<defs>
|
||
<linearGradient id="riskGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#ef4444;stop-opacity:0.8" />
|
||
<stop offset="50%" style="stop-color:#f59e0b;stop-opacity:0.6" />
|
||
<stop offset="100%" style="stop-color:#10b981;stop-opacity:0.4" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
|
||
<!-- Center indicator -->
|
||
<div class="absolute inset-0 flex items-center justify-center">
|
||
<div class="text-center bg-white rounded-full p-6 shadow-lg">
|
||
<div class="text-3xl font-bold text-gray-800">73%</div>
|
||
<div class="text-sm text-gray-500">安全指数</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Risk Categories -->
|
||
<div class="mt-8 lg:mt-0 space-y-4">
|
||
<div class="flex items-center space-x-4">
|
||
<div class="w-12 h-12 gradient-bg-red rounded-lg flex items-center justify-center text-white">
|
||
<i class="fas fa-shield-virus"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold">安全风险</h4>
|
||
<div class="flex items-center mt-1">
|
||
<div class="w-32 bg-gray-200 rounded-full h-2 mr-2">
|
||
<div class="gradient-bg-red rounded-full h-2" style="width: 30%"></div>
|
||
</div>
|
||
<span class="text-sm text-gray-500">30%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center space-x-4">
|
||
<div class="w-12 h-12 gradient-bg-yellow rounded-lg flex items-center justify-center text-white">
|
||
<i class="fas fa-coins"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold">财务风险</h4>
|
||
<div class="flex items-center mt-1">
|
||
<div class="w-32 bg-gray-200 rounded-full h-2 mr-2">
|
||
<div class="gradient-bg-yellow rounded-full h-2" style="width: 20%"></div>
|
||
</div>
|
||
<span class="text-sm text-gray-500">20%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center space-x-4">
|
||
<div class="w-12 h-12 gradient-bg-blue rounded-lg flex items-center justify-center text-white">
|
||
<i class="fas fa-cog"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold">运营风险</h4>
|
||
<div class="flex items-center mt-1">
|
||
<div class="w-32 bg-gray-200 rounded-full h-2 mr-2">
|
||
<div class="gradient-bg-blue rounded-full h-2" style="width: 25%"></div>
|
||
</div>
|
||
<span class="text-sm text-gray-500">25%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center space-x-4">
|
||
<div class="w-12 h-12 gradient-bg-green rounded-lg flex items-center justify-center text-white">
|
||
<i class="fas fa-handshake"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold">合规风险</h4>
|
||
<div class="flex items-center mt-1">
|
||
<div class="w-32 bg-gray-200 rounded-full h-2 mr-2">
|
||
<div class="gradient-bg-green rounded-full h-2" style="width: 10%"></div>
|
||
</div>
|
||
<span class="text-sm text-gray-500">10%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Detailed Risk Analysis -->
|
||
<section class="py-20 bg-gray-50" style="background-image: url('../../data/会展策划/image/风险管理.jpg'); background-size: cover; background-position: center; background-attachment: fixed;">
|
||
<div class="bg-gray-50/95 backdrop-blur-sm py-20">
|
||
<div class="container mx-auto px-6">
|
||
<h2 class="text-4xl font-bold text-center mb-12">重点风险详细分析</h2>
|
||
|
||
<!-- High Priority Risks -->
|
||
<div class="mb-12">
|
||
<h3 class="text-2xl font-bold mb-6 text-red-600">
|
||
<i class="fas fa-exclamation-triangle mr-2"></i>高优先级风险
|
||
</h3>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
<!-- COVID Risk -->
|
||
<div class="bg-white rounded-2xl shadow-xl p-6 border-l-4 border-red-500">
|
||
<div class="flex items-start justify-between mb-4">
|
||
<div>
|
||
<h4 class="text-xl font-bold text-gray-800">疫情防控风险</h4>
|
||
<p class="text-gray-500">发生概率: 中 | 影响程度: 高</p>
|
||
</div>
|
||
<div class="bg-red-100 text-red-600 px-3 py-1 rounded-full text-sm font-semibold">
|
||
高风险
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<h5 class="font-semibold mb-2">风险描述</h5>
|
||
<p class="text-gray-600 text-sm">大规模人员聚集可能导致疫情传播风险，影响展会正常举办</p>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<h5 class="font-semibold mb-2">防控措施</h5>
|
||
<ul class="space-y-1 text-sm text-gray-600">
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
|
||
<span>实施健康码、行程码、核酸检测三重验证</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
|
||
<span>配备充足防疫物资，设置临时隔离区</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
|
||
<span>限流措施，控制场内人数密度</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
|
||
<span>建立应急响应机制，与卫生部门联动</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="flex items-center justify-between pt-4 border-t">
|
||
<div class="flex items-center text-sm">
|
||
<i class="fas fa-user-shield text-gray-400 mr-2"></i>
|
||
<span class="text-gray-500">负责人: 安全管理部</span>
|
||
</div>
|
||
<button class="text-red-600 hover:text-red-700 text-sm font-semibold">
|
||
查看详情 <i class="fas fa-arrow-right ml-1"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Weather Risk -->
|
||
<div class="bg-white rounded-2xl shadow-xl p-6 border-l-4 border-red-500">
|
||
<div class="flex items-start justify-between mb-4">
|
||
<div>
|
||
<h4 class="text-xl font-bold text-gray-800">极端天气风险</h4>
|
||
<p class="text-gray-500">发生概率: 低 | 影响程度: 高</p>
|
||
</div>
|
||
<div class="bg-red-100 text-red-600 px-3 py-1 rounded-full text-sm font-semibold">
|
||
高风险
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<h5 class="font-semibold mb-2">风险描述</h5>
|
||
<p class="text-gray-600 text-sm">台风、暴雨等极端天气可能影响展会安全和正常运营</p>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<h5 class="font-semibold mb-2">防控措施</h5>
|
||
<ul class="space-y-1 text-sm text-gray-600">
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
|
||
<span>建立气象监测预警系统，提前72小时预警</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
|
||
<span>制定极端天气应急预案和疏散方案</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
|
||
<span>购买展会取消保险，降低经济损失</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
|
||
<span>加固室外展区设施，做好防风防雨措施</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="flex items-center justify-between pt-4 border-t">
|
||
<div class="flex items-center text-sm">
|
||
<i class="fas fa-user-shield text-gray-400 mr-2"></i>
|
||
<span class="text-gray-500">负责人: 应急管理部</span>
|
||
</div>
|
||
<button class="text-red-600 hover:text-red-700 text-sm font-semibold">
|
||
查看详情 <i class="fas fa-arrow-right ml-1"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Medium Priority Risks -->
|
||
<div class="mb-12">
|
||
<h3 class="text-2xl font-bold mb-6 text-yellow-600">
|
||
<i class="fas fa-exclamation-circle mr-2"></i>中优先级风险
|
||
</h3>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<!-- Crowd Control -->
|
||
<div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-yellow-500">
|
||
<div class="flex items-center mb-3">
|
||
<div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-3">
|
||
<i class="fas fa-users text-yellow-600"></i>
|
||
</div>
|
||
<h4 class="font-bold">人流控制风险</h4>
|
||
</div>
|
||
<p class="text-gray-600 text-sm mb-3">高峰期人流量超出预期，可能造成拥挤踩踏</p>
|
||
<div class="space-y-2">
|
||
<div class="flex items-center text-sm">
|
||
<i class="fas fa-shield-alt text-green-500 mr-2"></i>
|
||
<span>智能人流监测系统</span>
|
||
</div>
|
||
<div class="flex items-center text-sm">
|
||
<i class="fas fa-shield-alt text-green-500 mr-2"></i>
|
||
<span>分时预约入场机制</span>
|
||
</div>
|
||
<div class="flex items-center text-sm">
|
||
<i class="fas fa-shield-alt text-green-500 mr-2"></i>
|
||
<span>应急疏散通道规划</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Technical Failure -->
|
||
<div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-yellow-500">
|
||
<div class="flex items-center mb-3">
|
||
<div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-3">
|
||
<i class="fas fa-server text-yellow-600"></i>
|
||
</div>
|
||
<h4 class="font-bold">技术故障风险</h4>
|
||
</div>
|
||
<p class="text-gray-600 text-sm mb-3">电力、网络、设备故障影响展会正常运行</p>
|
||
<div class="space-y-2">
|
||
<div class="flex items-center text-sm">
|
||
<i class="fas fa-shield-alt text-green-500 mr-2"></i>
|
||
<span>双路供电保障</span>
|
||
</div>
|
||
<div class="flex items-center text-sm">
|
||
<i class="fas fa-shield-alt text-green-500 mr-2"></i>
|
||
<span>备用发电机组</span>
|
||
</div>
|
||
<div class="flex items-center text-sm">
|
||
<i class="fas fa-shield-alt text-green-500 mr-2"></i>
|
||
<span>技术支持7×24小时</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Logistics Delay -->
|
||
<div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-yellow-500">
|
||
<div class="flex items-center mb-3">
|
||
<div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-3">
|
||
<i class="fas fa-truck text-yellow-600"></i>
|
||
</div>
|
||
<h4 class="font-bold">物流延误风险</h4>
|
||
</div>
|
||
<p class="text-gray-600 text-sm mb-3">展品运输延误影响布展进度</p>
|
||
<div class="space-y-2">
|
||
<div class="flex items-center text-sm">
|
||
<i class="fas fa-shield-alt text-green-500 mr-2"></i>
|
||
<span>提前3天进场布展</span>
|
||
</div>
|
||
<div class="flex items-center text-sm">
|
||
<i class="fas fa-shield-alt text-green-500 mr-2"></i>
|
||
<span>多家物流商备选</span>
|
||
</div>
|
||
<div class="flex items-center text-sm">
|
||
<i class="fas fa-shield-alt text-green-500 mr-2"></i>
|
||
<span>实时追踪系统</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Emergency Response System -->
|
||
<section class="py-20 bg-white">
|
||
<div class="container mx-auto px-6">
|
||
<h2 class="text-4xl font-bold text-center mb-12">应急响应体系</h2>
|
||
|
||
<!-- Response Levels -->
|
||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
|
||
<div class="text-center">
|
||
<div class="w-20 h-20 gradient-bg-green rounded-full flex items-center justify-center mx-auto mb-4 glow-green">
|
||
<span class="text-white text-2xl font-bold">IV</span>
|
||
</div>
|
||
<h4 class="font-bold mb-2">四级响应</h4>
|
||
<p class="text-sm text-gray-600">常规事件</p>
|
||
<p class="text-xs text-gray-500 mt-2">现场处理</p>
|
||
</div>
|
||
|
||
<div class="text-center">
|
||
<div class="w-20 h-20 gradient-bg-blue rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<span class="text-white text-2xl font-bold">III</span>
|
||
</div>
|
||
<h4 class="font-bold mb-2">三级响应</h4>
|
||
<p class="text-sm text-gray-600">一般事件</p>
|
||
<p class="text-xs text-gray-500 mt-2">部门协调</p>
|
||
</div>
|
||
|
||
<div class="text-center">
|
||
<div class="w-20 h-20 gradient-bg-yellow rounded-full flex items-center justify-center mx-auto mb-4 glow-yellow">
|
||
<span class="text-white text-2xl font-bold">II</span>
|
||
</div>
|
||
<h4 class="font-bold mb-2">二级响应</h4>
|
||
<p class="text-sm text-gray-600">重大事件</p>
|
||
<p class="text-xs text-gray-500 mt-2">指挥部介入</p>
|
||
</div>
|
||
|
||
<div class="text-center">
|
||
<div class="w-20 h-20 gradient-bg-red rounded-full flex items-center justify-center mx-auto mb-4 glow-red risk-pulse-high">
|
||
<span class="text-white text-2xl font-bold">I</span>
|
||
</div>
|
||
<h4 class="font-bold mb-2">一级响应</h4>
|
||
<p class="text-sm text-gray-600">特大事件</p>
|
||
<p class="text-xs text-gray-500 mt-2">全面启动</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Emergency Command Center -->
|
||
<div class="bg-gradient-to-r from-gray-900 to-gray-800 rounded-2xl p-8 text-white">
|
||
<h3 class="text-2xl font-bold mb-6">
|
||
<i class="fas fa-broadcast-tower mr-2"></i>应急指挥中心
|
||
</h3>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||
<!-- Command Structure -->
|
||
<div>
|
||
<h4 class="font-bold mb-4 text-yellow-400">指挥架构</h4>
|
||
<div class="space-y-3">
|
||
<div class="bg-white/10 rounded-lg p-3">
|
||
<div class="font-semibold">总指挥</div>
|
||
<div class="text-sm text-gray-300">展会执行总监</div>
|
||
</div>
|
||
<div class="bg-white/10 rounded-lg p-3">
|
||
<div class="font-semibold">副总指挥</div>
|
||
<div class="text-sm text-gray-300">安全总监、运营总监</div>
|
||
</div>
|
||
<div class="bg-white/10 rounded-lg p-3">
|
||
<div class="font-semibold">执行小组</div>
|
||
<div class="text-sm text-gray-300">各部门负责人</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Response Time -->
|
||
<div>
|
||
<h4 class="font-bold mb-4 text-yellow-400">响应时限</h4>
|
||
<div class="space-y-3">
|
||
<div class="flex items-center justify-between bg-white/10 rounded-lg p-3">
|
||
<span>一级响应</span>
|
||
<span class="text-red-400 font-bold">5分钟</span>
|
||
</div>
|
||
<div class="flex items-center justify-between bg-white/10 rounded-lg p-3">
|
||
<span>二级响应</span>
|
||
<span class="text-yellow-400 font-bold">10分钟</span>
|
||
</div>
|
||
<div class="flex items-center justify-between bg-white/10 rounded-lg p-3">
|
||
<span>三级响应</span>
|
||
<span class="text-blue-400 font-bold">30分钟</span>
|
||
</div>
|
||
<div class="flex items-center justify-between bg-white/10 rounded-lg p-3">
|
||
<span>四级响应</span>
|
||
<span class="text-green-400 font-bold">60分钟</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Contact Hotlines -->
|
||
<div>
|
||
<h4 class="font-bold mb-4 text-yellow-400">应急热线</h4>
|
||
<div class="space-y-3">
|
||
<div class="bg-white/10 rounded-lg p-3">
|
||
<div class="flex items-center">
|
||
<i class="fas fa-phone-alt text-red-400 mr-3"></i>
|
||
<div>
|
||
<div class="font-semibold">紧急救援</div>
|
||
<div class="text-lg">120 / 119</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white/10 rounded-lg p-3">
|
||
<div class="flex items-center">
|
||
<i class="fas fa-phone-alt text-blue-400 mr-3"></i>
|
||
<div>
|
||
<div class="font-semibold">安保中心</div>
|
||
<div class="text-lg">400-888-8888</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white/10 rounded-lg p-3">
|
||
<div class="flex items-center">
|
||
<i class="fas fa-phone-alt text-green-400 mr-3"></i>
|
||
<div>
|
||
<div class="font-semibold">技术支持</div>
|
||
<div class="text-lg">400-666-6666</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Risk Control Measures -->
|
||
<section class="py-20 bg-gray-50">
|
||
<div class="container mx-auto px-6">
|
||
<h2 class="text-4xl font-bold text-center mb-12">风险防控措施</h2>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
<!-- Prevention -->
|
||
<div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-2xl transition-shadow">
|
||
<div class="w-16 h-16 gradient-bg-blue rounded-full flex items-center justify-center mb-4">
|
||
<i class="fas fa-shield-alt text-white text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-3">事前预防</h3>
|
||
<ul class="space-y-2 text-sm text-gray-600">
|
||
<li><i class="fas fa-check text-green-500 mr-2"></i>风险识别评估</li>
|
||
<li><i class="fas fa-check text-green-500 mr-2"></i>预案制定演练</li>
|
||
<li><i class="fas fa-check text-green-500 mr-2"></i>人员培训教育</li>
|
||
<li><i class="fas fa-check text-green-500 mr-2"></i>设施安全检查</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Monitoring -->
|
||
<div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-2xl transition-shadow">
|
||
<div class="w-16 h-16 gradient-bg-green rounded-full flex items-center justify-center mb-4">
|
||
<i class="fas fa-satellite-dish text-white text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-3">事中监控</h3>
|
||
<ul class="space-y-2 text-sm text-gray-600">
|
||
<li><i class="fas fa-check text-green-500 mr-2"></i>实时监测预警</li>
|
||
<li><i class="fas fa-check text-green-500 mr-2"></i>动态风险评估</li>
|
||
<li><i class="fas fa-check text-green-500 mr-2"></i>应急快速响应</li>
|
||
<li><i class="fas fa-check text-green-500 mr-2"></i>信息及时发布</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Response -->
|
||
<div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-2xl transition-shadow">
|
||
<div class="w-16 h-16 gradient-bg-yellow rounded-full flex items-center justify-center mb-4">
|
||
<i class="fas fa-ambulance text-white text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-3">应急处置</h3>
|
||
<ul class="space-y-2 text-sm text-gray-600">
|
||
<li><i class="fas fa-check text-green-500 mr-2"></i>启动应急预案</li>
|
||
<li><i class="fas fa-check text-green-500 mr-2"></i>现场紧急处置</li>
|
||
<li><i class="fas fa-check text-green-500 mr-2"></i>人员疏散救援</li>
|
||
<li><i class="fas fa-check text-green-500 mr-2"></i>舆情管控引导</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Recovery -->
|
||
<div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-2xl transition-shadow">
|
||
<div class="w-16 h-16 gradient-bg-red rounded-full flex items-center justify-center mb-4">
|
||
<i class="fas fa-undo text-white text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-3">事后恢复</h3>
|
||
<ul class="space-y-2 text-sm text-gray-600">
|
||
<li><i class="fas fa-check text-green-500 mr-2"></i>损失评估统计</li>
|
||
<li><i class="fas fa-check text-green-500 mr-2"></i>保险理赔处理</li>
|
||
<li><i class="fas fa-check text-green-500 mr-2"></i>经验总结改进</li>
|
||
<li><i class="fas fa-check text-green-500 mr-2"></i>预案优化更新</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Insurance Coverage -->
|
||
<section class="py-20 bg-white">
|
||
<div class="container mx-auto px-6">
|
||
<h2 class="text-4xl font-bold text-center mb-12">保险保障方案</h2>
|
||
|
||
<div class="bg-gradient-to-r from-blue-50 to-green-50 rounded-2xl p-8">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||
<!-- Insurance Types -->
|
||
<div>
|
||
<h3 class="text-2xl font-bold mb-6">投保险种</h3>
|
||
<div class="space-y-4">
|
||
<div class="bg-white rounded-lg p-4 shadow">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h4 class="font-bold text-blue-600">展会取消险</h4>
|
||
<span class="text-sm bg-blue-100 text-blue-600 px-2 py-1 rounded">核心</span>
|
||
</div>
|
||
<p class="text-sm text-gray-600 mb-2">覆盖因不可抗力导致的展会取消损失</p>
|
||
<div class="flex justify-between text-sm">
|
||
<span class="text-gray-500">保额</span>
|
||
<span class="font-bold">¥500万</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-lg p-4 shadow">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h4 class="font-bold text-green-600">公众责任险</h4>
|
||
<span class="text-sm bg-green-100 text-green-600 px-2 py-1 rounded">重要</span>
|
||
</div>
|
||
<p class="text-sm text-gray-600 mb-2">覆盖展会期间第三方人身财产损失</p>
|
||
<div class="flex justify-between text-sm">
|
||
<span class="text-gray-500">保额</span>
|
||
<span class="font-bold">¥1000万</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-lg p-4 shadow">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h4 class="font-bold text-purple-600">财产综合险</h4>
|
||
<span class="text-sm bg-purple-100 text-purple-600 px-2 py-1 rounded">补充</span>
|
||
</div>
|
||
<p class="text-sm text-gray-600 mb-2">覆盖展品、设备等财产损失</p>
|
||
<div class="flex justify-between text-sm">
|
||
<span class="text-gray-500">保额</span>
|
||
<span class="font-bold">¥300万</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Coverage Details -->
|
||
<div>
|
||
<h3 class="text-2xl font-bold mb-6">保障范围</h3>
|
||
<div class="bg-white rounded-lg p-6 shadow">
|
||
<div class="space-y-4">
|
||
<div>
|
||
<h4 class="font-semibold mb-2">
|
||
<i class="fas fa-check-circle text-green-500 mr-2"></i>人员保障
|
||
</h4>
|
||
<ul class="ml-7 space-y-1 text-sm text-gray-600">
|
||
<li>• 参展人员意外伤害</li>
|
||
<li>• 工作人员人身保险</li>
|
||
<li>• 第三方人身损害赔偿</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="font-semibold mb-2">
|
||
<i class="fas fa-check-circle text-green-500 mr-2"></i>财产保障
|
||
</h4>
|
||
<ul class="ml-7 space-y-1 text-sm text-gray-600">
|
||
<li>• 展品损失赔偿</li>
|
||
<li>• 设备设施损坏</li>
|
||
<li>• 装修材料损失</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="font-semibold mb-2">
|
||
<i class="fas fa-check-circle text-green-500 mr-2"></i>责任保障
|
||
</h4>
|
||
<ul class="ml-7 space-y-1 text-sm text-gray-600">
|
||
<li>• 第三方责任赔偿</li>
|
||
<li>• 法律诉讼费用</li>
|
||
<li>• 紧急救援费用</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-6 pt-6 border-t">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<p class="text-sm text-gray-500">总保费</p>
|
||
<p class="text-2xl font-bold text-gray-800">¥15万</p>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm text-gray-500">最高赔付</p>
|
||
<p class="text-2xl font-bold text-green-600">¥1800万</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Risk Summary -->
|
||
<section class="py-20 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
|
||
<div class="container mx-auto px-6 text-center">
|
||
<h2 class="text-4xl font-bold mb-8">全方位风险保障</h2>
|
||
<p class="text-xl mb-12 opacity-90">构建"预防-监控-响应-恢复"四位一体风险管理体系</p>
|
||
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
|
||
<div>
|
||
<div class="text-4xl font-bold mb-2">18个</div>
|
||
<div class="text-sm opacity-75">风险监测点</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-4xl font-bold mb-2">24/7</div>
|
||
<div class="text-sm opacity-75">全天候监控</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-4xl font-bold mb-2">5分钟</div>
|
||
<div class="text-sm opacity-75">应急响应</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-4xl font-bold mb-2">¥1800万</div>
|
||
<div class="text-sm opacity-75">保险保障</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-12">
|
||
<a href="../index.html" class="inline-block bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition transform hover:scale-105">
|
||
返回首页 <i class="fas fa-home ml-2"></i>
|
||
</a>
|
||
</div>
|
||
</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 Risk Management 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.classList.add('animate');
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
document.querySelectorAll('.fade-in-up').forEach(el => {
|
||
observer.observe(el);
|
||
});
|
||
|
||
// Risk level animation
|
||
document.querySelectorAll('.risk-card').forEach(card => {
|
||
card.addEventListener('mouseenter', function() {
|
||
this.style.transform = 'translateY(-10px) scale(1.02)';
|
||
});
|
||
card.addEventListener('mouseleave', function() {
|
||
this.style.transform = 'translateY(0) scale(1)';
|
||
});
|
||
});
|
||
|
||
// Progress bar animation on scroll
|
||
const progressBars = document.querySelectorAll('.progress-fill');
|
||
const progressObserver = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.style.animation = 'progressFill 2s ease-out forwards';
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
progressBars.forEach(bar => {
|
||
progressObserver.observe(bar);
|
||
});
|
||
</script>
|
||
<script src="../js/nav-component.js"></script>
|
||
</body>
|
||
</html> |