<html lang="zh-CN"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大学智慧后勤一体化管控平台分层架构图</title>
<!-- 引入FontAwesome图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body style="margin: 0; padding: 20px; font-family: 'Microsoft YaHei', sans-serif; background-color: #f0f0f0;">
<!-- 整体容器 -->
<div style="max-width: 1600px; margin: 0 auto;">
<!-- 标题 -->
<div style="text-align: center; margin-bottom: 30px;">
<h1 style="color: #333; margin: 0; display: flex; align-items: center; justify-content: center;">
智慧后勤一体化管控平台
</h1>
</div>
<!-- 第四层：展示层 -->
<div style="background-color: #e6f7ff; padding: 15px; margin-bottom: 15px; border-radius: 5px; border-left: 5px solid #1890ff;">
<div style="font-weight: bold; color: #0050b3; margin-bottom: 10px; font-size: 18px; display: flex; align-items: center;">
<i class="fas fa-desktop" style="margin-right: 8px;"></i>展示层
</div>
<div style="background-color: rgba(255, 255, 255, 0.9); padding: 15px; border: 1px solid #b3d8ff; border-radius: 3px;">
<div style="display: flex; flex-wrap: wrap; gap: 15px;">
<!-- 驾驶舱 -->
<div style="flex: 1; min-width: 350px; border: 1px solid #91c6ff; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #0050b3; margin-bottom: 8px; display: flex; align-items: center;">
<i class="fas fa-chart-pie" style="margin-right: 6px;"></i>1. 智慧后勤驾驶舱
</div>
<div style="font-size: 13px; line-height: 1.5; text-align: left;">
<p style="margin: 0 0 5px 0;"><strong>核心功能：</strong>结合2.5D地图展示全域态势</p>
<p style="margin: 0 0 5px 0;"><i class="fas fa-tachometer-alt" style="width: 16px; text-align: center; margin-right: 5px; color: #1890ff;"></i>关键指标实时监测（KPI仪表盘）</p>
<p style="margin: 0 0 5px 0;"><i class="fas fa-chart-line" style="width: 16px; text-align: center; margin-right: 5px; color: #1890ff;"></i>运营成果数据可视化展示</p>
<p style="margin: 0 0 5px 0;"><i class="fas fa-project-diagram" style="width: 16px; text-align: center; margin-right: 5px; color: #1890ff;"></i>趋势分析与预测预警</p>
<p style="margin: 0;"><i class="fas fa-file-export" style="width: 16px; text-align: center; margin-right: 5px; color: #1890ff;"></i>自定义报表与数据钻取</p>
</div>
</div>
<!-- 调度指挥一张图 -->
<div style="flex: 1; min-width: 350px; border: 1px solid #91c6ff; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #0050b3; margin-bottom: 8px; display: flex; align-items: center;">
<i class="fas fa-map-marked-alt" style="margin-right: 6px;"></i>2. 调度指挥一张图
</div>
<div style="font-size: 13px; line-height: 1.5; text-align: left;">
<p style="margin: 0 0 5px 0;"><strong>核心功能：</strong>基于GIS地图的实战指挥平台</p>
<p style="margin: 0 0 5px 0;"><i class="fas fa-search-location" style="width: 16px; text-align: center; margin-right: 5px; color: #1890ff;"></i>数据查询、图层切换、区域分析</p>
<p style="margin: 0 0 5px 0;"><i class="fas fa-tasks" style="width: 16px; text-align: center; margin-right: 5px; color: #1890ff;"></i>事件处置全流程跟踪</p>
<p style="margin: 0 0 5px 0;"><i class="fas fa-truck" style="width: 16px; text-align: center; margin-right: 5px; color: #1890ff;"></i>资源调度与路径优化</p>
<p style="margin: 0;"><i class="fas fa-comments" style="width: 16px; text-align: center; margin-right: 5px; color: #1890ff;"></i>多方协同与指令下达</p>
</div>
</div>
<!-- 管理端平台 (PC) -->
<div style="flex: 1; min-width: 200px; border: 1px solid #91c6ff; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #0050b3; margin-bottom: 8px; display: flex; align-items: center;">
<i class="fas fa-laptop" style="margin-right: 6px;"></i>3. 管理端平台 (PC)
</div>
<div style="font-size: 13px; line-height: 1.5; text-align: left;">
<p style="margin: 0 0 5px 0;"><i class="fas fa-cogs" style="width: 16px; text-align: center; margin-right: 5px; color: #1890ff;"></i>后台管理系统</p>
<p style="margin: 0 0 5px 0;"><i class="fas fa-sitemap" style="width: 16px; text-align: center; margin-right: 5px; color: #1890ff;"></i>流程配置中心</p>
<p style="margin: 0 0 5px 0;"><i class="fas fa-chart-bar" style="width: 16px; text-align: center; margin-right: 5px; color: #1890ff;"></i>数据分析工具</p>
<p style="margin: 0;"><i class="fas fa-cog" style="width: 16px; text-align: center; margin-right: 5px; color: #1890ff;"></i>系统管理与配置</p>
</div>
</div>
<!-- 移动应用端 -->
<div style="flex: 1; min-width: 200px; border: 1px solid #91c6ff; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #0050b3; margin-bottom: 8px; display: flex; align-items: center;">
<i class="fas fa-mobile-alt" style="margin-right: 6px;"></i>4. 移动应用端
</div>
<div style="font-size: 13px; line-height: 1.5; text-align: left;">
<p style="margin: 0 0 5px 0;"><i class="fas fa-user-graduate" style="width: 16px; text-align: center; margin-right: 5px; color: #1890ff;"></i>师生服务小程序</p>
<p style="margin: 0 0 5px 0;"><i class="fas fa-user-tie" style="width: 16px; text-align: center; margin-right: 5px; color: #1890ff;"></i>工作人员App</p>
<p style="margin: 0 0 5px 0;"><i class="fas fa-walking" style="width: 16px; text-align: center; margin-right: 5px; color: #1890ff;"></i>巡检终端应用</p>
<p style="margin: 0;"><i class="fas fa-check-square" style="width: 16px; text-align: center; margin-right: 5px; color: #1890ff;"></i>移动审批与查询</p>
</div>
</div>
</div>
</div>
</div>
<!-- 第三层：核心业务层 -->
<div style="background-color: #fff7e6; padding: 15px; margin-bottom: 15px; border-radius: 5px; border-left: 5px solid #fa8c16;">
<div style="font-weight: bold; color: #78350f; margin-bottom: 10px; font-size: 18px; display: flex; align-items: center;">
<i class="fas fa-cogs" style="margin-right: 8px;"></i>核心业务层
</div>
<div style="background-color: rgba(255, 255, 255, 0.9); padding: 15px; border: 1px solid #ffe0b3; border-radius: 3px;">
<!-- 通用业务平台 -->
<div style="margin-bottom: 20px; position: relative;">
<div style="font-weight: bold; color: #78350f; margin-bottom: 8px; display: flex; align-items: center;">
<i class="fas fa-layer-group" style="margin-right: 6px;"></i>通用业务平台
</div>
<div style="display: flex; flex-wrap: wrap; gap: 15px;">
<div style="flex: 1; min-width: 220px; border: 1px solid #ffc280; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #78350f; margin-bottom: 5px; display: flex; align-items: center;">
<i class="fas fa-exclamation-circle" style="margin-right: 5px; color: #fa8c16;"></i>统一事件中心
</div>
<div style="font-size: 13px; line-height: 1.4;">
<p style="margin: 0;">多渠道受理、智能派单、流程引擎、闭环管理</p>
</div>
</div>
<div style="flex: 1; min-width: 220px; border: 1px solid #ffc280; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #78350f; margin-bottom: 5px; display: flex; align-items: center;">
<i class="fas fa-boxes" style="margin-right: 5px; color: #fa8c16;"></i>统一资源与运营管理
</div>
<div style="font-size: 13px; line-height: 1.4;">
<p style="margin: 0;">资产管理、运维管理、库存管理、人员排班</p>
</div>
</div>
<div style="flex: 1; min-width: 220px; border: 1px solid #ffc280; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #78350f; margin-bottom: 5px; display: flex; align-items: center;">
<i class="fas fa-search" style="margin-right: 5px; color: #fa8c16;"></i>智慧巡检管理平台
</div>
<div style="font-size: 13px; line-height: 1.4;">
<p style="margin: 0;">路线规划、移动执行、过程监督、事件联动</p>
</div>
</div>
<div style="flex: 1; min-width: 220px; border: 1px solid #ffc280; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #78350f; margin-bottom: 5px; display: flex; align-items: center;">
<i class="fas fa-bolt" style="margin-right: 5px; color: #fa8c16;"></i>能源监控与分析平台
</div>
<div style="font-size: 13px; line-height: 1.4;">
<p style="margin: 0;">能耗（电、水）监测、数据分析、定额管理、节能预警</p>
</div>
</div>
</div>
<!-- 关联指示 -->
<div style="text-align: center; margin: 10px 0; color: #fa8c16; font-size: 14px;">
<i class="fas fa-chevron-down" style="margin: 0 5px;"></i>为以下专业化场景应用提供基础支撑<i class="fas fa-chevron-down" style="margin: 0 5px;"></i>
</div>
</div>
<!-- 专业化场景应用 -->
<div>
<div style="font-weight: bold; color: #78350f; margin-bottom: 8px; display: flex; align-items: center;">
<i class="fas fa-th-large" style="margin-right: 6px;"></i>专业化场景应用
</div>
<!-- 第一行四个场景（最高优先级） -->
<div style="display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px;">
<div style="flex: 1; min-width: 180px; border: 2px solid #22c55e; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #78350f; margin-bottom: 5px; display: flex; align-items: center;">
<i class="fas fa-power-off" style="margin-right: 5px; color: #22c55e;"></i>1. 配电站智慧管理
</div>
<div style="font-size: 13px; line-height: 1.4;">
<p style="margin: 0 0 3px 0;"><i class="fas fa-tachometer-alt" style="width: 16px; text-align: center; margin-right: 5px; color: #22c55e;"></i>设备状态实时监测</p>
<p style="margin: 0 0 3px 0;"><i class="fas fa-exclamation-triangle" style="width: 16px; text-align: center; margin-right: 5px; color: #22c55e;"></i>智能告警与诊断</p>
<p style="margin: 0;"><i class="fas fa-user-slash" style="width: 16px; text-align: center; margin-right: 5px; color: #22c55e;"></i>无人值守管理</p>
</div>
</div>
<div style="flex: 1; min-width: 180px; border: 2px solid #22c55e; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #78350f; margin-bottom: 5px; display: flex; align-items: center;">
<i class="fas fa-sun" style="margin-right: 5px; color: #22c55e;"></i>2. 新能源（光伏）管理
</div>
<div style="font-size: 13px; line-height: 1.4;">
<p style="margin: 0 0 3px 0;"><i class="fas fa-bolt" style="width: 16px; text-align: center; margin-right: 5px; color: #22c55e;"></i>发电效率监控</p>
<p style="margin: 0 0 3px 0;"><i class="fas fa-chart-line" style="width: 16px; text-align: center; margin-right: 5px; color: #22c55e;"></i>收益分析与预测</p>
<p style="margin: 0;"><i class="fas fa-heartbeat" style="width: 16px; text-align: center; margin-right: 5px; color: #22c55e;"></i>设备健康评估</p>
</div>
</div>
<div style="flex: 1; min-width: 180px; border: 2px solid #22c55e; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #78350f; margin-bottom: 5px; display: flex; align-items: center;">
<i class="fas fa-leaf" style="margin-right: 5px; color: #22c55e;"></i>3. 节能降碳管理
</div>
<div style="font-size: 13px; line-height: 1.4;">
<p style="margin: 0 0 3px 0;"><i class="fas fa-calculator" style="width: 16px; text-align: center; margin-right: 5px; color: #22c55e;"></i>碳排放核算与分析</p>
<p style="margin: 0 0 3px 0;"><i class="fas fa-lightbulb" style="width: 16px; text-align: center; margin-right: 5px; color: #22c55e;"></i>节能潜力评估</p>
<p style="margin: 0;"><i class="fas fa-chart-pie" style="width: 16px; text-align: center; margin-right: 5px; color: #22c55e;"></i>节能措施效果追踪</p>
</div>
</div>
<div style="flex: 1; min-width: 180px; border: 2px solid #22c55e; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #78350f; margin-bottom: 5px; display: flex; align-items: center;">
<i class="fas fa-tools" style="margin-right: 5px; color: #22c55e;"></i>4. 设备预测性维护
</div>
<div style="font-size: 13px; line-height: 1.4;">
<p style="margin: 0 0 3px 0;"><i class="fas fa-tachometer-alt" style="width: 16px; text-align: center; margin-right: 5px; color: #22c55e;"></i>设备状态监测</p>
<p style="margin: 0 0 3px 0;"><i class="fas fa-exclamation-circle" style="width: 16px; text-align: center; margin-right: 5px; color: #22c55e;"></i>故障预警与诊断</p>
<p style="margin: 0;"><i class="fas fa-star" style="width: 16px; text-align: center; margin-right: 5px; color: #22c55e;"></i>维修绩效评估</p>
</div>
</div>
</div>
<!-- 第二行四个场景 -->
<div style="display: flex; flex-wrap: wrap; gap: 15px;">
<div style="flex: 1; min-width: 180px; border: 2px solid #f97316; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #78350f; margin-bottom: 5px; display: flex; align-items: center;">
<i class="fas fa-utensils" style="margin-right: 5px; color: #f97316;"></i>5. 智慧食堂扩展
</div>
<div style="font-size: 13px; line-height: 1.4;">
<p style="margin: 0 0 3px 0;"><i class="fas fa-video" style="width: 16px; text-align: center; margin-right: 5px; color: #f97316;"></i>后厨行为规范监控</p>
<p style="margin: 0 0 3px 0;"><i class="fas fa-carrot" style="width: 16px; text-align: center; margin-right: 5px; color: #f97316;"></i>原材料精细核算</p>
<p style="margin: 0;"><i class="fas fa-money-bill" style="width: 16px; text-align: center; margin-right: 5px; color: #f97316;"></i>全链路成本分析</p>
</div>
</div>
<div style="flex: 1; min-width: 180px; border: 2px solid #f97316; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #78350f; margin-bottom: 5px; display: flex; align-items: center;">
<i class="fas fa-globe-americas" style="margin-right: 5px; color: #f97316;"></i>6. 生态环境监测
</div>
<div style="font-size: 13px; line-height: 1.4;">
<p style="margin: 0 0 3px 0;"><i class="fas fa-cloud-meatball" style="width: 16px; text-align: center; margin-right: 5px; color: #f97316;"></i>环境参数实时采集</p>
<p style="margin: 0 0 3px 0;"><i class="fas fa-seedling" style="width: 16px; text-align: center; margin-right: 5px; color: #f97316;"></i>碳汇计量与分析</p>
<p style="margin: 0;"><i class="fas fa-shield-alt" style="width: 16px; text-align: center; margin-right: 5px; color: #f97316;"></i>生态安全预警</p>
</div>
</div>
<div style="flex: 1; min-width: 180px; border: 2px solid #f97316; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #78350f; margin-bottom: 5px; display: flex; align-items: center;">
<i class="fas fa-home" style="margin-right: 5px; color: #f97316;"></i>7. 智慧宿管
</div>
<div style="font-size: 13px; line-height: 1.4;">
<p style="margin: 0 0 3px 0;"><i class="fas fa-user-friends" style="width: 16px; text-align: center; margin-right: 5px; color: #f97316;"></i>学生动态监测</p>
<p style="margin: 0 0 3px 0;"><i class="fas fa-check-circle" style="width: 16px; text-align: center; margin-right: 5px; color: #f97316;"></i>智能查寝管理</p>
<p style="margin: 0;"><i class="fas fa-tools" style="width: 16px; text-align: center; margin-right: 5px; color: #f97316;"></i>报修服务闭环</p>
</div>
</div>
<div style="flex: 1; min-width: 180px; border: 2px solid #94a3b8; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #78350f; margin-bottom: 5px; display: flex; align-items: center;">
<i class="fas fa-child" style="margin-right: 5px; color: #94a3b8;"></i>8. 幼儿园智慧安全
</div>
<div style="font-size: 13px; line-height: 1.4;">
<p style="margin: 0 0 3px 0;"><i class="fas fa-shield-alt" style="width: 16px; text-align: center; margin-right: 5px; color: #94a3b8;"></i>儿童安全全时空守护</p>
<p style="margin: 0 0 3px 0;"><i class="fas fa-heartbeat" style="width: 16px; text-align: center; margin-right: 5px; color: #94a3b8;"></i>健康状态监测</p>
<p style="margin: 0;"><i class="fas fa-users" style="width: 16px; text-align: center; margin-right: 5px; color: #94a3b8;"></i>家校共育平台</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 第二层：技术能力层 -->
<div style="background-color: #e6ffed; padding: 15px; margin-bottom: 15px; border-radius: 5px; border-left: 5px solid #52c41a;">
<div style="font-weight: bold; color: #237804; margin-bottom: 10px; font-size: 18px; display: flex; align-items: center;">
<i class="fas fa-microchip" style="margin-right: 8px;"></i>技术能力层
</div>
<div style="background-color: rgba(255, 255, 255, 0.9); padding: 15px; border: 1px solid #b3f0cc; border-radius: 3px;">
<div style="display: flex; flex-wrap: wrap; gap: 15px;">
<div style="flex: 1; min-width: 280px; border: 1px solid #87e8a0; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #237804; margin-bottom: 5px; display: flex; align-items: center;">
<i class="fas fa-database" style="margin-right: 5px; color: #52c41a;"></i>智慧后勤数据中台
</div>
<div style="font-size: 13px; line-height: 1.4;">
<p style="margin: 0 0 5px 0;">数据标准与治理、数据资产化管理</p>
<p style="margin: 0;">数据服务化封装、数据安全与隐私保护</p>
</div>
</div>
<div style="flex: 1; min-width: 280px; border: 1px solid #87e8a0; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #237804; margin-bottom: 5px; display: flex; align-items: center;">
<i class="fas fa-brain" style="margin-right: 5px; color: #52c41a;"></i>AI能力中台
</div>
<div style="font-size: 13px; line-height: 1.4;">
<p style="margin: 0 0 5px 0;">视频AI分析引擎、知识图谱与检索</p>
<p style="margin: 0 0 5px 0;">辅助调度与决策引擎、AI数字人交互</p>
<p style="margin: 0;">算法仓库与模型训练平台</p>
</div>
</div>
<div style="flex: 1; min-width: 280px; border: 1px solid #87e8a0; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #237804; margin-bottom: 5px; display: flex; align-items: center;">
<i class="fas fa-map" style="margin-right: 5px; color: #52c41a;"></i>数字孪生与GIS平台
</div>
<div style="font-size: 13px; line-height: 1.4;">
<p style="margin: 0 0 5px 0;">统一GIS空间服务、空间对象建模</p>
<p style="margin: 0 0 5px 0;">可视化渲染引擎、3D场景交互</p>
<p style="margin: 0;">物理实体数字映射与联动</p>
</div>
</div>
<div style="flex: 1; min-width: 280px; border: 1px solid #87e8a0; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #237804; margin-bottom: 5px; display: flex; align-items: center;">
<i class="fas fa-plug" style="margin-right: 5px; color: #52c41a;"></i>共性技术服务
</div>
<div style="font-size: 13px; line-height: 1.4;">
<p style="margin: 0 0 5px 0;">统一身份认证、API网关</p>
<p style="margin: 0 0 5px 0;">流程引擎、消息队列</p>
<p style="margin: 0;">日志管理、安全审计</p>
</div>
</div>
</div>
</div>
</div>
<!-- 第一层：数据接入层 -->
<div style="background-color: #f0e6ff; padding: 15px; margin-bottom: 15px; border-radius: 5px; border-left: 5px solid #722ed1;">
<div style="font-weight: bold; color: #4e1a9e; margin-bottom: 10px; font-size: 18px; display: flex; align-items: center;">
<i class="fas fa-sign-in-alt" style="margin-right: 8px;"></i>数据接入层
</div>
<div style="background-color: rgba(255, 255, 255, 0.9); padding: 15px; border: 1px solid #d9c3fa; border-radius: 3px;">
<div style="display: flex; flex-wrap: wrap; gap: 15px;">
<div style="flex: 1; min-width: 250px; border: 1px solid #c4a3f8; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #4e1a9e; margin-bottom: 5px; display: flex; align-items: center;">
<i class="fas fa-wifi" style="margin-right: 5px; color: #722ed1;"></i>物联网感知设备
</div>
<div style="font-size: 13px; line-height: 1.4;">
<p style="margin: 0 0 5px 0;">智能水电表、传感器网络</p>
<p style="margin: 0 0 5px 0;">智能门锁、安防设备</p>
<p style="margin: 0;">环境监测设备、智能仪表</p>
</div>
</div>
<div style="flex: 1; min-width: 250px; border: 1px solid #c4a3f8; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #4e1a9e; margin-bottom: 5px; display: flex; align-items: center;">
<i class="fas fa-video" style="margin-right: 5px; color: #722ed1;"></i>视频监控系统
</div>
<div style="font-size: 13px; line-height: 1.4;">
<p style="margin: 0 0 5px 0;">高清摄像头、智能分析终端</p>
<p style="margin: 0 0 5px 0;">无人机巡检、机器人巡检</p>
<p style="margin: 0;">视频存储与流媒体服务</p>
</div>
</div>
<div style="flex: 1; min-width: 250px; border: 1px solid #c4a3f8; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #4e1a9e; margin-bottom: 5px; display: flex; align-items: center;">
<i class="fas fa-exchange-alt" style="margin-right: 5px; color: #722ed1;"></i>业务系统集成
</div>
<div style="font-size: 13px; line-height: 1.4;">
<p style="margin: 0 0 5px 0;">一卡通系统、教务系统</p>
<p style="margin: 0 0 5px 0;">财务系统、学工系统</p>
<p style="margin: 0;">其他校园信息系统</p>
</div>
</div>
<div style="flex: 1; min-width: 250px; border: 1px solid #c4a3f8; padding: 12px; border-radius: 4px;">
<div style="font-weight: bold; color: #4e1a9e; margin-bottom: 5px; display: flex; align-items: center;">
<i class="fas fa-random" style="margin-right: 5px; color: #722ed1;"></i>接入网关与协议转换
</div>
<div style="font-size: 13px; line-height: 1.4;">
<p style="margin: 0 0 5px 0;">IoT设备接入网关、协议适配</p>
<p style="margin: 0 0 5px 0;">数据清洗与格式转换</p>
<p style="margin: 0;">边缘计算节点、数据缓存</p>
</div>
</div>
</div>
</div>
</div>
<!-- 基础设施层 -->
<div style="background-color: #f5f5f5; padding: 15px; margin-bottom: 15px; border-radius: 5px; border-left: 5px solid #8c8c8c;">
<div style="font-weight: bold; color: #595959; margin-bottom: 10px; font-size: 18px; display: flex; align-items: center;">
<i class="fas fa-server" style="margin-right: 8px;"></i>基础设施层
</div>
<div style="background-color: rgba(255, 255, 255, 0.9); padding: 15px; border: 1px solid #d9d9d9; border-radius: 3px;">
<div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;">
<div style="flex: 1; min-width: 150px; border: 1px solid #bfbfbf; padding: 12px; border-radius: 4px; text-align: center;">
<div style="font-weight: bold; color: #595959; margin-bottom: 5px; display: flex; align-items: center; justify-content: center;">
<i class="fas fa-network-wired" style="margin-right: 5px;"></i>网络基础设施
</div>
<div style="font-size: 13px;">有线网络、无线网络、5G专网</div>
</div>
<div style="flex: 1; min-width: 150px; border: 1px solid #bfbfbf; padding: 12px; border-radius: 4px; text-align: center;">
<div style="font-weight: bold; color: #595959; margin-bottom: 5px; display: flex; align-items: center; justify-content: center;">
<i class="fas fa-database" style="margin-right: 5px;"></i>服务器与存储
</div>
<div style="font-size: 13px;">物理服务器、虚拟化平台、存储系统</div>
</div>
<div style="flex: 1; min-width: 150px; border: 1px solid #bfbfbf; padding: 12px; border-radius: 4px; text-align: center;">
<div style="font-weight: bold; color: #595959; margin-bottom: 5px; display: flex; align-items: center; justify-content: center;">
<i class="fas fa-shield-alt" style="margin-right: 5px;"></i>安全设施
</div>
<div style="font-size: 13px;">防火墙、入侵检测、数据加密</div>
</div>
<div style="flex: 1; min-width: 150px; border: 1px solid #bfbfbf; padding: 12px; border-radius: 4px; text-align: center;">
<div style="font-weight: bold; color: #595959; margin-bottom: 5px; display: flex; align-items: center; justify-content: center;">
<i class="fas fa-building" style="margin-right: 5px;"></i>机房环境
</div>
<div style="font-size: 13px;">机房建设、UPS电源、空调系统</div>
</div>
</div>
</div>
</div>
</div>
</body></html>
index.html
style.css
index.js
index.html