<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>零碳园区评价总览 - 管理系统</title>
<!-- 引入 Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入 FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- 自定义配色配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1677ff', // 品牌蓝
success: '#52c41a', // 成功绿
warning: '#faad14', // 警告黄 (用于激励)
danger: '#ff4d4f', // 错误红
softwarn: '#fa8c16', // 柔和警告 (用于未达标图标)
graybg: '#f0f2f5', // 背景灰
sidebar: '#001529', // 侧边栏深色
},
fontSize: {
'4xl': '2.25rem',
}
}
}
}
</script>
<style>
/* 滚动条美化 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #999; }
.table-row-hover:hover td { background-color: #fafafa; }
</style>
</head>
<body class="bg-graybg h-screen flex overflow-hidden text-sm text-slate-700 font-sans antialiased">
<!-- 左侧导航栏 -->
<aside class="w-64 bg-sidebar text-white flex-shrink-0 flex flex-col transition-all duration-300">
<div class="h-14 bg-[#002140] flex items-center justify-center shadow-md">
<span class="text-gray-400 text-xs tracking-widest">SYSTEM MENU</span>
</div>
<nav class="flex-1 overflow-y-auto py-4">
<ul class="space-y-1">
<li><a href="#" class="flex items-center px-6 py-3 text-gray-300 hover:text-white hover:bg-[#1890ff] transition-colors"><i class="fa-solid fa-house w-6 text-center"></i><span class="ml-2">系统首页</span></a></li>
<li><a href="#" class="flex items-center px-6 py-3 text-gray-300 hover:text-white hover:bg-[#1890ff] transition-colors"><i class="fa-solid fa-folder-open w-6 text-center"></i><span class="ml-2">园区档案</span></a></li>
<li class="relative">
<div class="absolute left-0 top-0 bottom-0 w-1 bg-primary"></div>
<a href="#" class="flex items-center px-6 py-3 text-white bg-primary bg-opacity-100"><i class="fa-solid fa-chart-pie w-6 text-center"></i><span class="ml-2 font-medium">评价总览</span></a>
</li>
<li><a href="#" class="flex items-center px-6 py-3 text-gray-300 hover:text-white hover:bg-[#1890ff] transition-colors"><i class="fa-solid fa-pen-to-square w-6 text-center"></i><span class="ml-2">数据填报</span></a></li>
<li><a href="#" class="flex items-center px-6 py-3 text-gray-300 hover:text-white hover:bg-[#1890ff] transition-colors"><i class="fa-solid fa-gear w-6 text-center"></i><span class="ml-2">系统设置</span></a></li>
</ul>
</nav>
</aside>
<!-- 右侧主要内容区 -->
<main class="flex-1 flex flex-col h-full overflow-hidden">
<!-- 顶部筛选区 -->
<header class="bg-white border-b border-gray-200 p-4 shadow-sm z-10">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-6">
<div class="flex items-center space-x-2">
<label class="text-gray-500 font-medium">所属园区:</label>
<div class="relative">
<select class="appearance-none bg-white border border-gray-300 text-gray-700 py-1.5 pl-3 pr-8 rounded leading-tight focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary hover:border-primary transition-colors cursor-pointer w-64">
<option>无锡高新零碳产业示范园</option>
<option>苏州工业园区试点A区</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500"><i class="fa-solid fa-chevron-down text-xs"></i></div>
</div>
</div>
<div class="flex items-center space-x-2">
<label class="text-gray-500 font-medium">评价任务:</label>
<div class="relative">
<select class="appearance-none bg-white border border-gray-300 text-gray-700 py-1.5 pl-3 pr-8 rounded leading-tight focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary hover:border-primary transition-colors cursor-pointer w-72">
<option>2025年度无锡市零碳园区评估 (执行中)</option>
<option>2024年度无锡市零碳园区评估 (已归档)</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500"><i class="fa-solid fa-chevron-down text-xs"></i></div>
</div>
</div>
</div>
</div>
</header>
<!-- 滚动内容容器 -->
<div class="flex-1 overflow-y-auto p-6 space-y-6">
<!-- A区：园区概况 -->
<section>
<h3 class="text-gray-800 font-bold mb-3 border-l-4 border-primary pl-3 flex items-center">
园区概况
<span class="text-xs text-gray-400 font-normal ml-2 bg-gray-100 px-2 py-0.5 rounded">数据更新截止: 2023-10-26</span>
</h3>
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
<!-- Card 1 -->
<div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm flex items-center justify-between hover:shadow-md transition-shadow">
<div>
<div class="text-gray-500 text-xs mb-1">总占地面积</div>
<div class="flex items-baseline">
<span class="text-2xl font-bold text-gray-800">12.5</span>
<span class="ml-1 text-xs text-gray-500">km²</span>
</div>
</div>
<div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center text-primary">
<i class="fa-regular fa-map text-xl"></i>
</div>
</div>
<!-- Card 2 -->
<div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm flex items-center justify-between hover:shadow-md transition-shadow">
<div>
<div class="text-gray-500 text-xs mb-1">企业数量</div>
<div class="flex items-baseline">
<span class="text-2xl font-bold text-gray-800">156</span>
<span class="ml-1 text-xs text-gray-500">家</span>
</div>
</div>
<div class="w-10 h-10 rounded-full bg-indigo-50 flex items-center justify-center text-indigo-500">
<i class="fa-regular fa-building text-xl"></i>
</div>
</div>
<!-- Card 3 -->
<div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm flex items-center justify-between hover:shadow-md transition-shadow">
<div>
<div class="text-gray-500 text-xs mb-1">工业增加值</div>
<div class="flex items-baseline">
<span class="text-2xl font-bold text-gray-800">450</span>
<span class="ml-1 text-xs text-gray-500">亿元</span>
</div>
</div>
<div class="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center text-green-500">
<i class="fa-solid fa-chart-line text-xl"></i>
</div>
</div>
<!-- Card 4 -->
<div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm flex items-center justify-between hover:shadow-md transition-shadow">
<div>
<div class="text-gray-500 text-xs mb-1">总建筑面积</div>
<div class="flex items-baseline">
<span class="text-2xl font-bold text-gray-800">200</span>
<span class="ml-1 text-xs text-gray-500">万m²</span>
</div>
</div>
<div class="w-10 h-10 rounded-full bg-orange-50 flex items-center justify-center text-orange-500">
<i class="fa-regular fa-city text-xl"></i>
</div>
</div>
<!-- Card 5 -->
<div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm flex items-center justify-between hover:shadow-md transition-shadow">
<div>
<div class="text-gray-500 text-xs mb-1">年度碳排放量</div>
<div class="flex items-baseline">
<span class="text-2xl font-bold text-gray-800">1,200</span>
<span class="ml-1 text-xs text-gray-500">吨</span>
</div>
</div>
<div class="w-10 h-10 rounded-full bg-red-50 flex items-center justify-center text-red-500">
<i class="fa-solid fa-fire text-xl"></i>
</div>
</div>
</div>
</section>
<!-- B区：核心评价看板 -->
<section>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- 约束性指标 (Red) -->
<div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden hover:shadow-md transition-shadow">
<div class="bg-red-50 px-5 py-3 border-b border-red-100 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-danger"></span>
<h4 class="font-bold text-gray-800 text-base">约束性指标</h4>
</div>
<div class="p-6 grid grid-cols-2 gap-6 divide-x divide-gray-100">
<!-- 近期 -->
<div class="flex flex-col items-center justify-center">
<span class="text-xs text-gray-500 mb-1">近期目标 </span>
<span class="text-4xl font-bold text-danger leading-none mb-2">75%</span>
<span class="text-xs font-medium text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full mb-3">达标 3/4</span>
<div class="w-full bg-gray-100 rounded-full h-1.5">
<div class="bg-danger h-1.5 rounded-full" style="width: 75%"></div>
</div>
</div>
<!-- 远期 -->
<div class="flex flex-col items-center justify-center pl-6">
<span class="text-xs text-gray-500 mb-1">远期目标 </span>
<span class="text-4xl font-bold text-danger opacity-60 leading-none mb-2">25%</span>
<span class="text-xs font-medium text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full mb-3">达标 1/4</span>
<div class="w-full bg-gray-100 rounded-full h-1.5">
<div class="bg-danger opacity-50 h-1.5 rounded-full" style="width: 25%"></div>
</div>
</div>
</div>
</div>
<!-- 重要参考指标 (Blue) -->
<div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden hover:shadow-md transition-shadow">
<div class="bg-blue-50 px-5 py-3 border-b border-blue-100 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-primary"></span>
<h4 class="font-bold text-gray-800 text-base">重要参考指标</h4>
</div>
<div class="p-6 grid grid-cols-2 gap-6 divide-x divide-gray-100">
<!-- 近期 -->
<div class="flex flex-col items-center justify-center">
<span class="text-xs text-gray-500 mb-1">近期目标 (2025)</span>
<span class="text-4xl font-bold text-primary leading-none mb-2">80%</span>
<span class="text-xs font-medium text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full mb-3">达标 8/10</span>
<div class="w-full bg-gray-100 rounded-full h-1.5">
<div class="bg-primary h-1.5 rounded-full" style="width: 80%"></div>
</div>
</div>
<!-- 远期 -->
<div class="flex flex-col items-center justify-center pl-6">
<span class="text-xs text-gray-500 mb-1">远期目标 (2030)</span>
<span class="text-4xl font-bold text-primary opacity-60 leading-none mb-2">50%</span>
<span class="text-xs font-medium text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full mb-3">达标 5/10</span>
<div class="w-full bg-gray-100 rounded-full h-1.5">
<div class="bg-primary opacity-50 h-1.5 rounded-full" style="width: 50%"></div>
</div>
</div>
</div>
</div>
<!-- 激励性指标 (Yellow) -->
<div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden hover:shadow-md transition-shadow">
<div class="bg-yellow-50 px-5 py-3 border-b border-yellow-100 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-warning"></span>
<h4 class="font-bold text-gray-800 text-base">激励性指标</h4>
</div>
<div class="p-6 grid grid-cols-2 gap-6 divide-x divide-gray-100">
<!-- 近期 -->
<div class="flex flex-col items-center justify-center">
<span class="text-xs text-gray-500 mb-1">近期达成 (2025)</span>
<span class="text-4xl font-bold text-warning leading-none mb-2">66%</span>
<span class="text-xs font-medium text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full mb-3">达成 4/6</span>
<div class="w-full bg-gray-100 rounded-full h-1.5">
<div class="bg-warning h-1.5 rounded-full" style="width: 66%"></div>
</div>
</div>
<!-- 远期 -->
<div class="flex flex-col items-center justify-center pl-6">
<span class="text-xs text-gray-500 mb-1">远期达成 (2030)</span>
<span class="text-4xl font-bold text-warning opacity-60 leading-none mb-2">33%</span>
<span class="text-xs font-medium text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full mb-3">达成 2/6</span>
<div class="w-full bg-gray-100 rounded-full h-1.5">
<div class="bg-warning opacity-50 h-1.5 rounded-full" style="width: 33%"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- C区：指标详情 (恢复 10 条数据) -->
<section class="bg-white border border-gray-200 rounded-lg shadow-sm mb-10">
<!-- 工具栏 -->
<div class="p-4 border-b border-gray-200 flex flex-wrap justify-between items-center gap-4">
<h3 class="text-gray-800 font-bold flex items-center gap-2">指标详情</h3>
<div class="flex items-center gap-3">
<select class="text-xs bg-gray-50 border border-gray-300 text-gray-700 rounded py-1.5 px-3 focus:outline-none focus:border-primary hover:border-primary cursor-pointer">
<option value="">指标属性：全部</option>
<option value="约束性">约束性指标</option>
<option value="重要参考">重要参考指标</option>
<option value="激励性">激励性指标</option>
</select>
<select class="text-xs bg-gray-50 border border-gray-300 text-gray-700 rounded py-1.5 px-3 focus:outline-none focus:border-primary hover:border-primary cursor-pointer">
<option value="">达标状态：全部</option>
<option value="近期未达标">近期未达标</option>
<option value="远期未达标">远期未达标</option>
</select>
<button class="text-xs text-gray-500 hover:text-primary transition-colors border border-dashed border-gray-300 rounded px-2 py-1.5 flex items-center gap-1 hover:border-primary">
<i class="fa-solid fa-rotate-left"></i> 重置筛选
</button>
</div>
</div>
<!-- 表格 -->
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wider">
<th class="p-4 font-medium border-b border-gray-200">指标名称</th>
<th class="p-4 font-medium border-b border-gray-200 w-32">属性</th>
<th class="p-4 font-medium border-b border-gray-200 w-24">单位</th>
<th class="p-4 font-medium border-b border-gray-200">核算数据</th>
<th class="p-4 font-medium border-b border-gray-200">近期目标 (2025)</th>
<th class="p-4 font-medium border-b border-gray-200">远期目标 (2030)</th>
<th class="p-4 font-medium border-b border-gray-200 w-24 text-center">操作</th>
</tr>
</thead>
<tbody class="text-sm divide-y divide-gray-100">
<!-- 1. 约束性 - 碳排放 -->
<tr class="table-row-hover transition-colors">
<td class="p-4 text-gray-800 font-medium">单位能耗碳排放</td>
<td class="p-4"><span class="inline-block px-2 py-0.5 rounded text-xs bg-red-50 text-red-600 border border-red-200">约束性</span></td>
<td class="p-4 text-gray-500">吨/吨标煤</td>
<td class="p-4 font-bold text-gray-800">1.2</td>
<td class="p-4"><div class="flex items-center gap-2"><span class="text-gray-600">≤ 1</span><i class="fa-solid fa-circle-exclamation text-softwarn" title="未达标"></i></div></td>
<td class="p-4"><div class="flex items-center gap-2"><span class="text-gray-600">≤ 0.2</span><i class="fa-solid fa-circle-exclamation text-softwarn" title="未达标"></i></div></td>
<td class="p-4 text-center"><button onclick="openModal('单位能耗碳排放')" class="text-primary hover:underline">详情</button></td>
</tr>
<!-- 2. 约束性 - 能耗 -->
<tr class="table-row-hover transition-colors">
<td class="p-4 text-gray-800 font-medium">单位工业增加值综合能耗</td>
<td class="p-4"><span class="inline-block px-2 py-0.5 rounded text-xs bg-red-50 text-red-600 border border-red-200">约束性</span></td>
<td class="p-4 text-gray-500">吨标煤/万元</td>
<td class="p-4 font-bold text-gray-800">0.28</td>
<td class="p-4"><div class="flex items-center gap-2"><span class="text-gray-600">≤ 0.35</span><i class="fa-solid fa-circle-check text-success"></i></div></td>
<td class="p-4"><div class="flex items-center gap-2"><span class="text-gray-600">≤ 0.25</span><i class="fa-solid fa-circle-exclamation text-softwarn"></i></div></td>
<td class="p-4 text-center"><button onclick="openModal('单位工业增加值综合能耗')" class="text-primary hover:underline">详情</button></td>
</tr>
<!-- 3. 约束性 - 碳强度 -->
<tr class="table-row-hover transition-colors">
<td class="p-4 text-gray-800 font-medium">单位工业增加值二氧化碳排放量</td>
<td class="p-4"><span class="inline-block px-2 py-0.5 rounded text-xs bg-red-50 text-red-600 border border-red-200">约束性</span></td>
<td class="p-4 text-gray-500">吨/万元</td>
<td class="p-4 font-bold text-gray-800">0.5</td>
<td class="p-4"><div class="flex items-center gap-2"><span class="text-gray-600">≤ 0.6</span><i class="fa-solid fa-circle-check text-success"></i></div></td>
<td class="p-4"><div class="flex items-center gap-2"><span class="text-gray-600">≤ 0.1</span><i class="fa-solid fa-circle-exclamation text-softwarn"></i></div></td>
<td class="p-4 text-center"><button onclick="openModal('单位工业增加值二氧化碳排放量')" class="text-primary hover:underline">详情</button></td>
</tr>
<!-- 4. 约束性 - 非化石能源 -->
<tr class="table-row-hover transition-colors">
<td class="p-4 text-gray-800 font-medium">非化石能源消费占比</td>
<td class="p-4"><span class="inline-block px-2 py-0.5 rounded text-xs bg-red-50 text-red-600 border border-red-200">约束性</span></td>
<td class="p-4 text-gray-500">百分比</td>
<td class="p-4 font-bold text-gray-800">15%</td>
<td class="p-4"><div class="flex items-center gap-2"><span class="text-gray-600">≥ 20</span><i class="fa-solid fa-circle-exclamation text-softwarn"></i></div></td>
<td class="p-4"><div class="flex items-center gap-2"><span class="text-gray-600">≥ 80</span><i class="fa-solid fa-circle-exclamation text-softwarn"></i></div></td>
<td class="p-4 text-center"><button onclick="openModal('非化石能源消费占比')" class="text-primary hover:underline">详情</button></td>
</tr>
<!-- 5. 重要参考 - 数转网联 -->
<tr class="table-row-hover transition-colors">
<td class="p-4 text-gray-800 font-medium">参与“智改数转网联”占比的企业占比</td>
<td class="p-4"><span class="inline-block px-2 py-0.5 rounded text-xs bg-blue-50 text-blue-600 border border-blue-200">重要参考</span></td>
<td class="p-4 text-gray-500">百分比</td>
<td class="p-4 font-bold text-gray-800">25%</td>
<td class="p-4"><div class="flex items-center gap-2"><span class="text-gray-600">≥ 20</span><i class="fa-solid fa-circle-check text-success"></i></div></td>
<td class="p-4"><div class="flex items-center gap-2"><span class="text-gray-600">≥ 50</span><i class="fa-solid fa-circle-exclamation text-softwarn"></i></div></td>
<td class="p-4 text-center"><button onclick="openModal('参与“智改数转网联”占比的企业占比')" class="text-primary hover:underline">详情</button></td>
</tr>
<!-- 6. 重要参考 - 能效水平 -->
<tr class="table-row-hover transition-colors">
<td class="p-4 text-gray-800 font-medium">能效水平达到行业标杆的企业占比</td>
<td class="p-4"><span class="inline-block px-2 py-0.5 rounded text-xs bg-blue-50 text-blue-600 border border-blue-200">重要参考</span></td>
<td class="p-4 text-gray-500">百分比</td>
<td class="p-4 font-bold text-gray-800">55%</td>
<td class="p-4"><div class="flex items-center gap-2"><span class="text-gray-600">≥ 50</span><i class="fa-solid fa-circle-check text-success"></i></div></td>
<td class="p-4"><div class="flex items-center gap-2"><span class="text-gray-600">100</span><i class="fa-solid fa-circle-exclamation text-softwarn"></i></div></td>
<td class="p-4 text-center"><button onclick="openModal('能效水平达到行业标杆的企业占比')" class="text-primary hover:underline">详情</button></td>
</tr>
<!-- 7. 重要参考 - 碳足迹核算 -->
<tr class="table-row-hover transition-colors">
<td class="p-4 text-gray-800 font-medium">开展碳足迹核算认证的企业占比</td>
<td class="p-4"><span class="inline-block px-2 py-0.5 rounded text-xs bg-blue-50 text-blue-600 border border-blue-200">重要参考</span></td>
<td class="p-4 text-gray-500">百分比</td>
<td class="p-4 font-bold text-gray-800">12%</td>
<td class="p-4"><div class="flex items-center gap-2"><span class="text-gray-600">≥ 10</span><i class="fa-solid fa-circle-check text-success"></i></div></td>
<td class="p-4"><div class="flex items-center gap-2"><span class="text-gray-600">≥ 50</span><i class="fa-solid fa-circle-exclamation text-softwarn"></i></div></td>
<td class="p-4 text-center"><button onclick="openModal('开展碳足迹核算认证的企业占比')" class="text-primary hover:underline">详情</button></td>
</tr>
<!-- 8. 重要参考 - 环境信息披露 -->
<tr class="table-row-hover transition-colors">
<td class="p-4 text-gray-800 font-medium">披露环境信息的规上企业占比</td>
<td class="p-4"><span class="inline-block px-2 py-0.5 rounded text-xs bg-blue-50 text-blue-600 border border-blue-200">重要参考</span></td>
<td class="p-4 text-gray-500">百分比</td>
<td class="p-4 font-bold text-gray-800">65%</td>
<td class="p-4"><div class="flex items-center gap-2"><span class="text-gray-600">≥ 50</span><i class="fa-solid fa-circle-check text-success"></i></div></td>
<td class="p-4"><div class="flex items-center gap-2"><span class="text-gray-600">≥ 80</span><i class="fa-solid fa-circle-exclamation text-softwarn"></i></div></td>
<td class="p-4 text-center"><button onclick="openModal('披露环境信息的规上企业占比')" class="text-primary hover:underline">详情</button></td>
</tr>
<!-- 9. 重要参考 - 绿色供应链 -->
<tr class="table-row-hover transition-colors">
<td class="p-4 text-gray-800 font-medium">绿色工厂、绿色供应链得牌企业占比</td>
<td class="p-4"><span class="inline-block px-2 py-0.5 rounded text-xs bg-blue-50 text-blue-600 border border-blue-200">重要参考</span></td>
<td class="p-4 text-gray-500">百分比</td>
<td class="p-4 font-bold text-gray-800">8%</td>
<td class="p-4"><div class="flex items-center gap-2"><span class="text-gray-600">≥ 10</span><i class="fa-solid fa-circle-exclamation text-softwarn"></i></div></td>
<td class="p-4"><div class="flex items-center gap-2"><span class="text-gray-600">≥ 30</span><i class="fa-solid fa-circle-exclamation text-softwarn"></i></div></td>
<td class="p-4 text-center"><button onclick="openModal('绿色工厂、绿色供应链得牌企业占比')" class="text-primary hover:underline">详情</button></td>
</tr>
<!-- 10. 激励性 - 创新平台 -->
<tr class="table-row-hover transition-colors">
<td class="p-4 text-gray-800 font-medium">省级以上绿色低碳相关创新平台累计数量</td>
<td class="p-4"><span class="inline-block px-2 py-0.5 rounded text-xs bg-yellow-50 text-yellow-700 border border-yellow-200">激励性</span></td>
<td class="p-4 text-gray-500">个</td>
<td class="p-4 font-bold text-gray-800">1</td>
<td class="p-4"><div class="flex items-center gap-2"><span class="text-gray-600">≥ 1</span><i class="fa-solid fa-circle-check text-success"></i></div></td>
<td class="p-4"><div class="flex items-center gap-2"><span class="text-gray-600">≥ 2</span><i class="fa-solid fa-circle-exclamation text-softwarn"></i></div></td>
<td class="p-4 text-center"><button onclick="openModal('省级以上绿色低碳相关创新平台累计数量')" class="text-primary hover:underline">详情</button></td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</main>
<!-- 弹窗 (Modal) - 超宽尺寸 + 固定高度 -->
<div id="detailModal" class="fixed inset-0 z-50 hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<!-- 遮罩层 -->
<div class="fixed inset-0 bg-gray-900 bg-opacity-60 transition-opacity backdrop-blur-sm" onclick="closeModal()"></div>
<!-- 弹窗居中容器 -->
<div class="flex items-center justify-center h-screen px-4 pt-4 pb-4">
<!-- 弹窗实体：max-w-7xl (超宽) + h-[85vh] (固定高度) -->
<div class="relative bg-white rounded-lg shadow-2xl transform transition-all w-full sm:max-w-7xl h-[85vh] flex flex-col">
<!-- 1. 弹窗头部 (固定) -->
<div class="shrink-0 bg-white px-6 py-5 border-b border-gray-100 flex justify-between items-center rounded-t-lg">
<h3 class="text-xl font-bold text-gray-900" id="modal-title">指标详情</h3>
<button onclick="closeModal()" class="bg-gray-100 rounded-full p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-200 focus:outline-none transition-colors">
<i class="fa-solid fa-xmark text-lg w-5 h-5 flex items-center justify-center"></i>
</button>
</div>
<!-- 2. 弹窗内容区 (可滚动) -->
<div class="flex-1 overflow-y-auto px-6 py-6 bg-gray-50">
<!-- 计算依据区域 -->
<div class="bg-white p-5 rounded-lg border border-gray-200 shadow-sm mb-6">
<h4 class="text-sm font-bold text-gray-800 mb-4 border-l-4 border-primary pl-3">计算依据</h4>
<div class="flex flex-col md:flex-row gap-8 items-center justify-start">
<div class="bg-gray-50 p-4 rounded-lg border border-gray-200 text-center min-w-[180px]">
<div class="text-xs text-gray-500 mb-1">分子：总量</div>
<div class="text-xl font-bold text-primary">--</div>
</div>
<div class="text-gray-300 font-bold text-2xl hidden md:block">/</div>
<div class="bg-gray-50 p-4 rounded-lg border border-gray-200 text-center min-w-[180px]">
<div class="text-xs text-gray-500 mb-1">分母：基准</div>
<div class="text-xl font-bold text-primary">--</div>
</div>
<div class="text-gray-300 font-bold text-2xl hidden md:block">=</div>
<div class="bg-blue-50 p-4 rounded-lg border border-blue-200 text-center min-w-[180px]">
<div class="text-xs text-blue-600 mb-1">计算结果</div>
<div class="text-2xl font-bold text-blue-700">--</div>
</div>
</div>
</div>
<!-- 企业明细数据 (表格容器) -->
<div class="bg-white rounded-lg border border-gray-200 shadow-sm flex flex-col h-[calc(100%-180px)] min-h-[400px]">
<!-- 表格工具栏 (固定) -->
<div class="shrink-0 px-5 py-4 border-b border-gray-200 flex justify-between items-center">
<h4 class="text-sm font-bold text-gray-800 border-l-4 border-primary pl-3">企业明细数据 (共 20 条)</h4>
<div class="flex gap-3">
<button class="text-xs px-3 py-1.5 border border-gray-300 rounded hover:bg-gray-50 flex items-center gap-2 text-gray-700 transition-colors">
<i class="fa-solid fa-file-excel text-green-600"></i> 导出数据
</button>
<button class="text-xs px-3 py-1.5 bg-primary text-white rounded hover:bg-blue-600 flex items-center gap-2 transition-colors">
<i class="fa-solid fa-paperclip"></i> 导出附件
</button>
</div>
</div>
<!-- 表格主体 (独立滚动) -->
<div class="flex-1 overflow-y-auto">
<table class="min-w-full divide-y divide-gray-200 relative">
<!-- 表头 (Sticky) -->
<thead class="bg-gray-50 sticky top-0 z-10 shadow-sm">
<tr>
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider w-20">排名</th>
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider w-64">企业名称</th>
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">上报内容</th>
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider w-40">附件</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-100">
<!-- 模拟 20 条数据 -->
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-3 text-xs text-gray-500">1</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">无锡宏大光伏科技股份有限公司</td>
<td class="px-6 py-3 text-xs text-gray-900 font-mono">1,450.5 吨</td>
<td class="px-6 py-3 text-xs"><a href="#" class="text-primary hover:underline flex items-center gap-1"><i class="fa-regular fa-file-pdf"></i> 排放报告.pdf</a></td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-3 text-xs text-gray-500">2</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">苏南智能装备制造厂 (一厂)</td>
<td class="px-6 py-3 text-xs text-gray-900 font-mono">980.2 吨</td>
<td class="px-6 py-3 text-xs"><a href="#" class="text-primary hover:underline flex items-center gap-1"><i class="fa-regular fa-file-excel"></i> 数据表.xlsx</a></td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-3 text-xs text-gray-500">3</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">未来新能源实验室</td>
<td class="px-6 py-3 text-xs text-gray-900"><div class="max-w-md truncate" title="已完成ISO14064核查，并获得SGS颁发的证书">已完成ISO14064核查，并获得SGS颁发的证书...</div></td>
<td class="px-6 py-3 text-xs"><a href="#" class="text-primary hover:underline flex items-center gap-1"><i class="fa-regular fa-image"></i> 证书扫描件.jpg</a></td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-3 text-xs text-gray-500">4</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">高新物流配送中心</td>
<td class="px-6 py-3 text-xs"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">是 / 已覆盖</span></td>
<td class="px-6 py-3 text-xs text-gray-400">-</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-3 text-xs text-gray-500">5</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">某小微精密加工坊</td>
<td class="px-6 py-3 text-xs"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-500">不涉及</span></td>
<td class="px-6 py-3 text-xs text-gray-400">-</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-3 text-xs text-gray-500">6</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">江海半导体科技有限公司</td>
<td class="px-6 py-3 text-xs text-gray-900 font-mono">560.0 吨</td>
<td class="px-6 py-3 text-xs"><a href="#" class="text-primary hover:underline flex items-center gap-1"><i class="fa-regular fa-file-pdf"></i> 2023报告.pdf</a></td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-3 text-xs text-gray-500">7</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">绿能动力电池组件厂</td>
<td class="px-6 py-3 text-xs text-gray-900 font-mono">420.8 吨</td>
<td class="px-6 py-3 text-xs text-gray-400">-</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-3 text-xs text-gray-500">8</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">远景智能控制系统有限公司</td>
<td class="px-6 py-3 text-xs text-gray-900 font-mono">310.5 吨</td>
<td class="px-6 py-3 text-xs"><a href="#" class="text-primary hover:underline flex items-center gap-1"><i class="fa-regular fa-file-lines"></i> 监测数据.csv</a></td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-3 text-xs text-gray-500">9</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">园区行政服务中心</td>
<td class="px-6 py-3 text-xs text-gray-900 font-mono">120.0 吨</td>
<td class="px-6 py-3 text-xs text-gray-400">-</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-3 text-xs text-gray-500">10</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">星火生物制药实验室</td>
<td class="px-6 py-3 text-xs text-gray-900"><div class="max-w-md truncate">正在进行能源审计，预计下月完成报告</div></td>
<td class="px-6 py-3 text-xs text-gray-400">-</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-3 text-xs text-gray-500">11</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">华东云计算数据中心</td>
<td class="px-6 py-3 text-xs text-gray-900 font-mono">3,200.0 吨</td>
<td class="px-6 py-3 text-xs"><a href="#" class="text-primary hover:underline flex items-center gap-1"><i class="fa-regular fa-file-pdf"></i> 能耗报告.pdf</a></td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-3 text-xs text-gray-500">12</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">创新孵化器A座</td>
<td class="px-6 py-3 text-xs"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">是</span></td>
<td class="px-6 py-3 text-xs text-gray-400">-</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-3 text-xs text-gray-500">13</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">蓝天环保设备有限公司</td>
<td class="px-6 py-3 text-xs text-gray-900 font-mono">88.5 吨</td>
<td class="px-6 py-3 text-xs text-gray-400">-</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-3 text-xs text-gray-500">14</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">城市轨道交通运营部</td>
<td class="px-6 py-3 text-xs"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-500">不涉及</span></td>
<td class="px-6 py-3 text-xs text-gray-400">-</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-3 text-xs text-gray-500">15</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">宏达包装材料厂</td>
<td class="px-6 py-3 text-xs text-gray-900 font-mono">210.0 吨</td>
<td class="px-6 py-3 text-xs"><a href="#" class="text-primary hover:underline flex items-center gap-1"><i class="fa-regular fa-image"></i> 发票凭证.png</a></td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-3 text-xs text-gray-500">16</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">园区污水处理厂</td>
<td class="px-6 py-3 text-xs text-gray-900 font-mono">450.0 吨</td>
<td class="px-6 py-3 text-xs text-gray-400">-</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-3 text-xs text-gray-500">17</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">智慧能源监控中心</td>
<td class="px-6 py-3 text-xs text-gray-900"><div class="max-w-md truncate">数据已通过API自动对接上传</div></td>
<td class="px-6 py-3 text-xs text-gray-400">-</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-3 text-xs text-gray-500">18</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">电动汽车充电站B区</td>
<td class="px-6 py-3 text-xs text-gray-900 font-mono">0.0 吨</td>
<td class="px-6 py-3 text-xs text-gray-400"></td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-3 text-xs text-gray-500">19</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">科创咖啡厅</td>
<td class="px-6 py-3 text-xs text-gray-900 font-mono">5.2 吨</td>
<td class="px-6 py-3 text-xs text-gray-400">-</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-3 text-xs text-gray-500">20</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">物业管理处</td>
<td class="px-6 py-3 text-xs text-gray-900 font-mono">12.0 吨</td>
<td class="px-6 py-3 text-xs text-gray-400">-</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 3. 弹窗底部 (固定) -->
<div class="shrink-0 bg-gray-50 px-6 py-4 sm:flex sm:flex-row-reverse rounded-b-lg border-t border-gray-200">
<button type="button" onclick="closeModal()" class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm transition-colors">
关闭
</button>
</div>
</div>
</div>
</div>
<script>
function openModal(title) {
document.getElementById('modal-title').textContent = "指标详情：" + title;
document.getElementById('detailModal').classList.remove('hidden');
}
function closeModal() {
document.getElementById('detailModal').classList.add('hidden');
}
</script>
</body>
</html>
index.html
style.css
index.js
index.html