<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>零碳园区指标详情</title>
<style>
/* --- 全局与字体 --- */
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
background-color: #f0f2f5; /* 模拟后台页面背景 */
}
/* --- 弹窗遮罩层 --- */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
/* --- 弹窗容器 --- */
.modal-container {
width: 1100px;
max-height: 85vh;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* --- 弹窗头部 --- */
.modal-header {
padding: 16px 24px;
border-bottom: 1px solid #f0f0f0;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0; /* 防止头部被压缩 */
}
.modal-header .modal-title {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #333;
}
.modal-header .close-button {
cursor: pointer;
font-size: 24px;
color: #888;
border: none;
background: none;
padding: 0;
line-height: 1;
}
.modal-header .close-button:hover {
color: #555;
}
/* --- 弹窗内容区 --- */
.modal-body {
overflow-y: auto;
padding: 24px;
flex-grow: 1; /* 占据剩余空间 */
}
/* --- 内容分组 --- */
.info-section {
margin-bottom: 28px;
}
.info-section:last-child {
margin-bottom: 0;
}
.section-title {
font-size: 16px;
margin: 0 0 16px 0;
padding-left: 12px;
font-weight: 600;
border-left-style: solid;
border-left-width: 4px;
}
/* 各分组标题颜色 */
.section-title.basic-info { border-left-color: #1890ff; }
.section-title.green-building { border-left-color: #52c41a; }
.section-title.green-transport { border-left-color: #13c2c2; }
.section-title.energy-system { border-left-color: #faad14; }
.section-title.innovation { border-left-color: #722ed1; }
/* --- 数据展示网格布局 --- */
.details-grid {
display: grid;
gap: 16px 32px; /* 行间距16px，列间距32px */
}
.grid-2-col {
grid-template-columns: repeat(2, 1fr);
}
.grid-1-col {
grid-template-columns: 1fr;
}
.grid-item {
font-size: 14px;
line-height: 1.5;
word-break: break-word; /* 防止长单词溢出 */
}
.grid-item-full {
grid-column: 1 / -1; /* 跨越所有列 */
}
.data-label {
color: #888;
margin-right: 8px;
}
.data-value {
color: #333;
font-weight: 500;
}
/* 长文本和预格式化文本样式 */
.pre-text {
display: inline-block;
vertical-align: top;
padding-left: 8px;
white-space: pre-wrap;
font-family: monospace;
}
.long-text {
display: inline-block;
vertical-align: top;
padding-left: 8px;
}
/* --- 储能列表格 --- */
.data-table {
width: 100%;
margin-top: 8px;
border-collapse: collapse;
text-align: left;
font-size: 14px;
}
.data-table th, .data-table td {
padding: 10px 12px;
border: 1px solid #f0f0f0;
}
.data-table thead {
background-color: #fafafa;
}
.data-table th {
font-weight: 500;
}
/* --- 创新平台列表 --- */
.platform-list {
margin: 8px 0 0 10px;
padding-left: 20px;
color: #333;
list-style-type: decimal;
}
.platform-list li {
margin-bottom: 4px;
}
/* --- 弹窗底部 --- */
.modal-footer {
padding: 12px 24px;
border-top: 1px solid #f0f0f0;
text-align: right;
flex-shrink: 0; /* 防止底部被压缩 */
}
.close-btn {
padding: 6px 15px;
border-radius: 4px;
border: 1px solid #d9d9d9;
background-color: #fff;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
}
.close-btn:hover {
color: #1890ff;
border-color: #1890ff;
}
</style>
</head>
<body>
<div class="modal-overlay">
<div class="modal-container">
<!-- 弹窗头部 -->
<div class="modal-header">
<h3 class="modal-title">苏州AI产业创新示范园 - 2023年度零碳园区指标详情</h3>
<button class="close-button">×</button>
</div>
<!-- 弹窗内容 -->
<div class="modal-body">
<!-- 1. 园区基本信息 -->
<div class="info-section">
<h4 class="section-title basic-info">园区基本信息</h4>
<div class="details-grid grid-2-col">
<div class="grid-item"><span class="data-label">总占地面积:</span><strong class="data-value">15.8</strong> 平方公里</div>
<div class="grid-item"><span class="data-label">可用建设用地面积:</span><strong class="data-value">11.2</strong> 平方公里</div>
<div class="grid-item"><span class="data-label">总建筑面积:</span><strong class="data-value">12,500,000</strong> 平方米</div>
<div class="grid-item"><span class="data-label">容积率:</span><strong class="data-value">1.12</strong> %</div>
<div class="grid-item"><span class="data-label">企业数量:</span><strong class="data-value">856</strong> 个</div>
<div class="grid-item"><span class="data-label">规上企业数量:</span><strong class="data-value">35</strong> 个</div>
<div class="grid-item grid-item-full">
</div>
</div>
</div>
<!-- 2. 绿色建筑 -->
<div class="info-section">
<h4 class="section-title green-building">绿色建筑</h4>
<div class="details-grid grid-1-col">
<div class="grid-item"><span class="data-label">新建建筑中二星及以上绿色建筑占比:</span><strong class="data-value">85.00%</strong> (850,000 / 1,000,000 平方米)</div>
<div class="grid-item"><span class="data-label">可利用建筑屋顶光伏覆盖率:</span><strong class="data-value">72.00%</strong> (2,160,000 / 3,000,000 平方米)</div>
<div class="grid-item"><span class="data-label">园区内超低能耗、近零能耗建筑面积:</span><strong class="data-value">550,000</strong> 平方米</div>
</div>
</div>
<!-- 3. 绿色交通 -->
<div class="info-section">
<h4 class="section-title green-transport">绿色交通</h4>
<div class="details-grid grid-1-col">
<div class="grid-item"><span class="data-label">园区新能源、清洁能源动力交通工具保有量占比:</span><strong class="data-value">65.00%</strong> (13,000 / 20,000 辆)</div>
<div class="grid-item"><span class="data-label">货物清洁运输比例:</span><strong class="data-value">78.00%</strong> (1,560,000 / 2,000,000 吨)</div>
</div>
</div>
<!-- 4. 能源系统 -->
<div class="info-section">
<h4 class="section-title energy-system">能源系统</h4>
<div class="details-grid grid-1-col">
<div class="grid-item">
<span class="data-label" style="vertical-align: top;">园区内电力需求响应能力:</span>
<div class="data-value long-text">园区已建成虚拟电厂（VPP）平台，整合了楼宇空调、储能、充电桩等柔性负荷资源，可实现秒级至分钟级的需求响应，最大响应能力可达50MW。</div>
</div>
<div class="grid-item">
<span class="data-label" style="vertical-align: top;">园区内储能容量:</span>
<table class="data-table">
<thead>
<tr>
<th>序号</th>
<th>储能系统名称</th>
<th>系统额定容量(kwh)</th>
<th>可用容量比率(%)</th>
<th>健康度(%)</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>园区1号集中式储能电站</td><td>20,000</td><td>95</td><td>98</td></tr>
<tr><td>2</td><td>腾讯云数据中心备用储能</td><td>8,000</td><td>98</td><td>99</td></tr>
<tr><td>3</td><td>园区行政楼分布式储能</td><td>500</td><td>92</td><td>96</td></tr>
</tbody>
</table>
</div>
<div class="grid-item"><span class="data-label">碳捕集利用和封存规模:</span><strong class="data-value">1.5</strong> 万吨/年</div>
</div>
</div>
<!-- 5. 创新能力 -->
<div class="info-section">
<h4 class="section-title innovation">创新能力</h4>
<div class="details-grid grid-1-col">
<div class="grid-item">
<span class="data-label" style="vertical-align: top;">是否有省级以上绿色低碳相关创新平台:</span>
<strong class="data-value">是</strong>
<ul class="platform-list">
<li>江苏省绿色数据中心节能技术工程研究中心</li>
<li>国家级博士后科研工作站（低碳技术方向）</li>
<li>苏州市碳中和技术与产业创新研究院</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 弹窗底部 -->
<div class="modal-footer">
<button class="close-btn">关 闭</button>
</div>
</div>
</div>
</body>
</html>
index.html
style.css
index.js
index.html