<!DOCTYPE html>
<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.2/css/all.min.css">
<style>
/* --- 1. 全局与字体设置 --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');
body {
background-color: #0A1931; /* 深邃科技蓝背景 */
background-image:
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 30px 30px;
font-family: 'Noto Sans SC', '思源黑体', sans-serif;
margin: 0;
padding: 50px;
box-sizing: border-box;
}
.section-title {
color: #FFFFFF;
font-size: 24px;
font-weight: bold;
text-align: center;
margin-bottom: 40px;
border-bottom: 1px solid #409EFF;
padding-bottom: 10px;
}
/* --- 2. 卡片容器 --- */
.card-container {
display: flex;
gap: 80px; /* 增加卡片间距以清晰展示引导线 */
flex-wrap: wrap;
justify-content: center;
margin-bottom: 80px;
}
/* --- 3. 预览卡片基础样式 (通用) --- */
.preview-card {
width: 180px;
height: 88px;
background-color: rgba(10, 25, 49, 0.85);
backdrop-filter: blur(5px);
border-radius: 4px;
padding: 8px 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid rgba(64, 158, 255, 0.2);
}
.preview-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 255, 171, 0.1);
border-color: #00FFAB;
}
/* --- 4. 引导线 --- */
.leader-line {
width: 30px;
height: 30px;
border-left: 1px dashed #409EFF;
border-bottom: 1px dashed #409EFF;
position: absolute;
bottom: -31px;
left: -31px;
}
/* --- 5. 卡片内部通用行样式 --- */
.card-row { display: flex; align-items: center; }
.row-header { justify-content: flex-start; height: 24px; }
/* --- 6. 企业卡片专属样式 --- */
.enterprise-name { font-size: 16px; font-weight: 500; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-tags { gap: 8px; height: 28px; }
.tag-icon { font-size: 18px; color: #A9C1D9; transition: color 0.3s ease; }
.tag-icon:hover { color: #00FFAB; }
.row-task { justify-content: space-between; height: 36px; }
.task-label { font-size: 12px; color: #409EFF; white-space: nowrap; }
.task-progress-container { display: flex; align-items: center; gap: 8px; }
.progress-bar { width: 60px; height: 6px; background-color: #5F7C9D; border-radius: 3px; overflow: hidden; }
.progress-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.task-status { font-size: 12px; font-weight: 500; }
.rating-tag { padding: 2px 10px; border-radius: 4px; font-size: 16px; font-weight: bold; line-height: 20px; }
.status-pending .progress-bar-fill { background-color: #5F7C9D; }
.status-inprogress .progress-bar-fill { background-color: #FFC107; }
.status-pending .task-status { color: #5F7C9D; }
.status-inprogress .task-status { color: #FFC107; }
.grade-a-plus, .grade-a { background-color: #00FFAB; color: #0A1931; }
.grade-b { background-color: #FFC107; color: #0A1931; }
.grade-c { background-color: #F44336; color: #FFFFFF; }
/* --- 7. 设施卡片专属样式 --- */
.facility-name { font-size: 16px; font-weight: 500; color: #FFFFFF; }
.row-main-data { height: 32px; justify-content: center; align-items: baseline; }
.main-data-value { font-size: 26px; font-weight: bold; color: #00FFAB; }
.main-data-value small { font-size: 14px; color: #A9C1D9; margin-left: 4px; }
.row-sub-data { height: 24px; justify-content: space-between; }
.sub-data-item { display: flex; align-items: center; gap: 4px; }
.sub-data-label, .sub-data-value { font-size: 12px; }
.sub-data-label { color: #A9C1D9; }
.sub-data-value.status-good { color: #00FFAB; }
.sub-data-value.status-warning { color: #FFC107; }
.sub-data-value.status-danger { color: #F44336; }
.sub-data-value { color: #FFFFFF; }
/* --- 8. 地图点位图标展示区 --- */
.icon-showcase-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
background-color: rgba(10, 25, 49, 0.5);
padding: 30px;
border-radius: 8px;
border: 1px solid #409EFF;
}
.icon-item {
width: 120px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 15px;
background-color: rgba(64, 158, 255, 0.1);
border-radius: 4px;
}
.icon-display {
font-size: 40px;
color: #FFFFFF;
}
.icon-label {
font-size: 14px;
color: #A9C1D9;
}
</style>
</head>
<body>
<h2 class="section-title">企业信息预览卡</h2>
<div class="card-container">
<!-- 卡片 1: 评价任务 - 待处理 -->
<div class="preview-card">
<div class="leader-line"></div>
<div class="card-row row-header"><span class="enterprise-name">新能源科技</span></div>
<div class="card-row row-tags"><i class="fa-solid fa-microchip tag-icon" title="高新技术企业"></i><i class="fa-solid fa-gem tag-icon" title="省级专精特新"></i></div>
<div class="card-row row-task status-pending">
<span class="task-label">评价任务:</span>
<div class="task-progress-container"><div class="progress-bar"><div class="progress-bar-fill" style="width: 0%;"></div></div><span class="task-status">待处理</span></div>
</div>
</div>
<!-- 卡片 2: 评价任务 - 进行中 -->
<div class="preview-card">
<div class="leader-line"></div>
<div class="card-row row-header"><span class="enterprise-name">先进制造集团</span></div>
<div class="card-row row-tags"><i class="fa-solid fa-leaf tag-icon" title="国家级绿色工厂"></i><i class="fa-solid fa-recycle tag-icon" title="清洁生产审核通过"></i></div>
<div class="card-row row-task status-inprogress">
<span class="task-label">评价任务:</span>
<div class="task-progress-container"><div class="progress-bar"><div class="progress-bar-fill" style="width: 75%;"></div></div><span class="task-status">进行中</span></div>
</div>
</div>
<!-- 卡片 3: 评价任务 - 已完成/已评级 -->
<div class="preview-card">
<div class="leader-line"></div>
<div class="card-row row-header"><span class="enterprise-name">华虹半导体</span></div>
<div class="card-row row-tags"><i class="fa-solid fa-leaf tag-icon" title="国家级绿色工厂"></i><i class="fa-solid fa-link tag-icon" title="绿色供应链示范企业"></i><i class="fa-solid fa-chart-line tag-icon" title="上市企业"></i></div>
<div class="card-row row-task"><span class="task-label">绿色评级:</span><span class="rating-tag grade-a-plus">A+</span></div>
</div>
</div>
<h2 class="section-title">设施信息预览卡</h2>
<div class="card-container">
<!-- 能源设施卡片 -->
<div class="preview-card">
<div class="leader-line"></div>
<div class="card-row row-header"><span class="facility-name">屋顶光伏-A区</span></div>
<div class="card-row row-main-data"><span class="main-data-value">1.25<small>MW</small></span></div>
<div class="card-row row-sub-data"><div class="sub-data-item"><span class="sub-data-label">今日发电:</span><span class="sub-data-value">5.8 MWh</span></div></div>
</div>
<div class="preview-card">
<div class="leader-line"></div>
<div class="card-row row-header"><span class="facility-name">1号分散式风机</span></div>
<div class="card-row row-main-data"><span class="main-data-value">850<small>kW</small></span></div>
<div class="card-row row-sub-data"><div class="sub-data-item"><span class="sub-data-label">今日发电:</span><span class="sub-data-value">6.2 MWh</span></div></div>
</div>
<div class="preview-card">
<div class="leader-line"></div>
<div class="card-row row-header"><span class="facility-name">园区储能站</span></div>
<div class="card-row row-main-data"><span class="main-data-value">-5.2<small>MW</small></span></div>
<div class="card-row row-sub-data"><div class="sub-data-item"><span class="sub-data-label">SOC:</span><span class="sub-data-value">88.5 %</span></div></div>
</div>
<!-- 监测设施卡片 -->
<div class="preview-card">
<div class="leader-line"></div>
<div class="card-row row-header"><span class="facility-name">CO₂监测点-北门</span></div>
<div class="card-row row-main-data"><span class="main-data-value">450<small>ppm</small></span></div>
<div class="card-row row-sub-data"><div class="sub-data-item"><span class="sub-data-label">24h趋势:</span><span class="sub-data-value status-warning">↑ 2%</span></div></div>
</div>
<div class="preview-card">
<div class="leader-line"></div>
<div class="card-row row-header"><span class="facility-name">空气质量监测站</span></div>
<div class="card-row row-main-data"><span class="main-data-value">45<small>AQI</small></span></div>
<div class="card-row row-sub-data"><div class="sub-data-item"><span class="sub-data-label">首要污染物:</span><span class="sub-data-value">PM2.5</span></div></div>
</div>
<div class="preview-card">
<div class="leader-line"></div>
<div class="card-row row-header"><span class="facility-name">2#锅炉排口</span></div>
<div class="card-row row-main-data"><span class="main-data-value">在线<small></small></span></div>
<div class="card-row row-sub-data"><div class="sub-data-item"><span class="sub-data-label">烟气流速:</span><span class="sub-data-value status-good">正常</span></div></div>
</div>
</div>
<h2 class="section-title">地图点位推荐图标</h2>
<div class="icon-showcase-container">
<div class="icon-item"><i class="fa-solid fa-city icon-display"></i><div class="icon-label">企业</div></div>
<div class="icon-item"><i class="fa-solid fa-solar-panel icon-display"></i><div class="icon-label">光伏设施</div></div>
<div class="icon-item"><i class="fa-solid fa-wind icon-display"></i><div class="icon-label">风电设施</div></div>
<div class="icon-item"><i class="fa-solid fa-car-battery icon-display"></i><div class="icon-label">储能设施</div></div>
<div class="icon-item"><i class="fa-solid fa-satellite-dish icon-display"></i><div class="icon-label">CO₂监测点</div></div>
<div class="icon-item"><i class="fa-solid fa-tower-observation icon-display"></i><div class="icon-label">空气质量站</div></div>
<div class="icon-item"><i class="fa-solid fa-smog icon-display"></i><div class="icon-label">污染源</div></div>
</div>
</body>
</html>
index.html
style.css
index.js
index.html