## infoCard.html — 信息卡片通用模板
### 适用场景
用于展示任何需要以卡片形式呈现的详细信息，如项目信息、企业详情、设备参数、用户资料等。
### 所需 JSON 数据格式
```json
{
"page_title": "项目基本信息",
"data": {
"text_values": {
"PAGE_TITLE": "项目基本信息",
"CARD_TITLE": "项目基本信息",
"INFO_ITEMS": "园区名称：测试园区
企业数量：12
通讯机数量：45
在线数量：42
终端数量：156
光伏站数量：3
年能耗总量：1,245.6 tce
年碳排总量：3,456.8 tCO₂
碳排强度：2.78 tCO₂/tce
园区介绍：这是一个测试园区，用于展示能碳系统的信息卡片功能。
"
},
"js_variables": {}
}
}
```
### 字段说明
| 字段 | 类型 | 说明 |
|------|------|------|
| PAGE_TITLE | 字符串 | 页面标题，显示在浏览器标签页 |
| CARD_TITLE | 字符串 | 卡片标题 |
| INFO_ITEMS | 字符串（HTML） | 信息项的完整 HTML，每项格式见下方说明 |
### INFO_ITEMS 格式说明
每个信息项有两种布局方式：
1. **普通项（占半列）**：
```html
标签名：
值
```
2. **全宽项（占整行）**：
```html
标签名：
值
```
### 布局特性
- 默认两列网格布局（响应式）
- 移动端自动切换为单列布局
- 支持全宽项（适合长文本内容）
- 标签名右对齐，值左对齐
- 灰色背景卡片主体
### 示例：生成 INFO_ITEMS HTML
```javascript
// 示例数据
const fields = [
{ label: "园区名称", value: "测试园区", fullWidth: false },
{ label: "企业数量", value: "12", fullWidth: false },
{ label: "年能耗总量", value: "1,245.6 tce", fullWidth: false },
{ label: "园区介绍", value: "这是一个测试园区...", fullWidth: true }
];
// 生成 INFO_ITEMS
const infoItems = fields.map(field => {
const className = field.fullWidth ? 'info-item full-width' : 'info-item';
return `${field.label}：${field.value}
`;
}).join('');
```
### 注意事项
1. **INFO_ITEMS** 字段需要填入完整的 HTML 代码
2. 标签名后需要加冒号 "："
3. 长文本内容（如介绍、描述）建议使用 `full-width` 类占据整行
4. 值为空时建议填入 "-" 或 "暂无"
5. 数值类数据建议带上单位（如 "1,245.6 tce"）
### 外部调用接口
模板保留了 `window.renderInfoCard()` 函数，可用于动态更新卡片内容（可选功能）。
---