<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSTM功能蓝图</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft YaHei", sans-serif;
}
body {
background-color: #0c2e30;
padding: 20px;
color: #ffffff;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 30px;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
position: relative;
}
.header h1 {
font-size: 36px;
font-weight: 700;
color: #4CD9B3;
margin-bottom: 5px;
text-shadow: 0 0 10px rgba(76, 217, 179, 0.3);
}
.header p {
font-size: 18px;
color: #B0E38F;
}
.bluprint-area {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
margin-bottom: 30px;
}
.column {
display: flex;
flex-direction: column;
gap: 20px;
}
.module {
background: rgba(23, 48, 50, 0.8);
border-radius: 16px;
padding: 25px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(76, 217, 179, 0.2);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.module:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
border-color: rgba(76, 217, 179, 0.4);
}
.module::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(to right, #4CD9B3, #94E0E1, #D2D6F9, #F5B9B7);
z-index: 2;
}
.module-header {
margin-bottom: 20px;
display: flex;
align-items: center;
}
.circle-icon {
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 700;
margin-right: 15px;
flex-shrink: 0;
}
.module-title {
font-size: 22px;
font-weight: 700;
color: #4CD9B3;
text-shadow: 0 0 5px rgba(76, 217, 179, 0.3);
}
.module-desc {
font-size: 14px;
color: #94E0E1;
line-height: 1.5;
margin-bottom: 15px;
}
.function-items {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.func-item {
background: rgba(32, 70, 72, 0.5);
border: 1px solid rgba(76, 217, 179, 0.2);
padding: 10px 15px;
border-radius: 6px;
font-size: 13px;
transition: all 0.2s ease;
}
.func-item:hover {
background: rgba(32, 70, 72, 0.8);
transform: translateY(-3px);
border-color: #4CD9B3;
}
.core-concept {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
text-align: center;
text-shadow: 0 0 5px rgba(0,0,0,0.8);
box-shadow: 0 0 20px rgba(255,255,255,0.1);
font-size: 14px;
z-index: 1;
}
.legend {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;
}
.legend-item {
display: flex;
align-items: center;
font-size: 14px;
color: #D2D6F9;
}
.legend-color {
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 8px;
}
.color1 { background: linear-gradient(145deg, #F5B9B7, #d99b98); }
.color2 { background: linear-gradient(145deg, #D2D6F9, #b0b4e0); }
.color3 { background: linear-gradient(145deg, #94E0E1, #76b0b1); }
.color4 { background: linear-gradient(145deg, #B0E38F, #91b96f); }
.color5 { background: linear-gradient(145deg, #4CD9B3, #3cb296); }
.badge {
display: inline-block;
background: linear-gradient(to right, #3a8e78, #3a768e);
padding: 3px 8px;
border-radius: 4px;
font-size: 12px;
margin-right: 8px;
color: #fff;
}
.value {
display: inline-block;
background: linear-gradient(to right, #8e3a80, #5e3a8e);
color: #fff;
padding: 0px 8px;
border-radius: 10px;
font-size: 14px;
font-weight: bold;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>CSTM 认证系统功能蓝图</h1>
<p>仪器全方位评价平台</p>
</div>
<div class="bluprint-area">
<!-- 第一列 -->
<div class="column">
<!-- 项目准备 -->
<div class="module">
<div class="module-header">
<div class="circle-icon color1">1</div>
<h2 class="module-title">项目准备</h2>
</div>
<p class="module-desc">建立标准项目库，管理评价流程起始阶段的所有准备工作</p>
<div class="function-items">
<div class="func-item">标准库构建 <span class="value">CSTM-2023</span></div>
<div class="func-item">项目模板管理</div>
<div class="func-item">风险评估管理</div>
<div class="func-item">预审核流程</div>
<div class="func-item">申请材料管理</div>
<div class="func-item">专家组成员管理</div>
<div class="func-item">资源调度中心</div>
<div class="func-item">预算规划系统</div>
</div>
<!-- 核心概念标签 -->
<div class="core-concept" style="width:120px; height:120px; top:-40px; right:-20px; background-color:#F5B9B7; color:#000; font-size:16px; padding:25px;">
标准数据湖
</div>
</div>
<!-- 评审管理 -->
<div class="module">
<div class="module-header">
<div class="circle-icon color2">4</div>
<h2 class="module-title">评审管理</h2>
</div>
<p class="module-desc">专家评审、技术审查和质量评估的核心管理系统</p>
<div class="function-items">
<div class="func-item">专家评估舱</div>
<div class="func-item">技术合规审查</div>
<div class="func-item"><span class="badge">新</span>远程评审系统</div>
<div class="func-item">质量雷达图分析</div>
<div class="func-item">风险预警系统</div>
<div class="func-item">整改跟踪流程</div>
<div class="func-item">评审报告生成</div>
<div class="func-item">审核日志追溯</div>
</div>
<!-- 核心概念标签 -->
<div class="core-concept" style="width:110px; height:110px; top:20px; right:-30px; background-color:#D2D6F9; color:#000;">
合规指数
</div>
</div>
</div>
<!-- 第二列 -->
<div class="column">
<!-- 标准制定 -->
<div class="module">
<div class="module-header">
<div class="circle-icon color4">2</div>
<h2 class="module-title">标准制定</h2>
</div>
<p class="module-desc">CSTM标准的研究、起草、验证和迭代更新的核心流程</p>
<div class="function-items">
<div class="func-item"><span class="badge">核心</span>标准起草协作</div>
<div class="func-item">技术参数库</div>
<div class="func-item"><span class="badge">智能</span>版本控制系统</div>
<div class="func-item">国际标准比对</div>
<div class="func-item">实验方法管理</div>
<div class="func-item">验证方案设计</div>
<div class="func-item">标准可行性分析</div>
<div class="func-item">行业反馈集成</div>
<div class="func-item">标准修订流程</div>
</div>
<!-- 核心概念标签 -->
<div class="core-concept" style="width:140px; height:140px; bottom:-40px; right:40px; background-color:#B0E38F; color:#000; font-size:16px; padding:30px;">
动态标准体系
</div>
</div>
<!-- 证书管理 -->
<div class="module">
<div class="module-header">
<div class="circle-icon color5">6</div>
<h2 class="module-title">证书管理</h2>
</div>
<p class="module-desc">证书颁发、防伪、跟踪与全生命周期管理</p>
<div class="function-items">
<div class="func-item">红头模板库 <span class="value">300+</span></div>
<div class="func-item">区块链存证系统</div>
<div class="func-item"><span class="badge">高价值</span>防伪验证码</div>
<div class="func-item">电子印章管理</div>
<div class="func-item">证书更新管理</div>
<div class="func-item">暂停/撤销流程</div>
<div class="func-item">有效期追踪</div>
<div class="func-item">多语种证书模板</div>
</div>
<!-- 核心概念标签 -->
<div class="core-concept" style="width:100px; height:100px; top:-20px; left:-20px; background-color:#4CD9B3; color:#000;">
证书云
</div>
</div>
</div>
<!-- 第三列 -->
<div class="column">
<!-- 认证流程 -->
<div class="module">
<div class="module-header">
<div class="circle-icon color3">3</div>
<h2 class="module-title">评价流程</h2>
</div>
<p class="module-desc">从申请、审核到颁证的一站式评价</p>
<div class="function-items">
<div class="func-item">企业申请中心</div>
<div class="func-item">资料完整性审查</div>
<div class="func-item">技术文档审阅</div>
<div class="func-item">现场审查管理</div>
<div class="func-item">样品追踪系统</div>
<div class="func-item">检测数据对接</div>
<div class="func-item">审批流程控制</div>
<div class="func-item">实时进度追踪</div>
</div>
<!-- 核心概念标签 -->
<div class="core-concept" style="width:130px; height:130px; bottom:20px; left:-40px; background-color:#94E0E1; color:#000; font-size:16px; padding:30px;">
认证加速器
</div>
</div>
<!-- 数据分析 -->
<div class="module">
<div class="module-header">
<div class="circle-icon color1">5</div>
<h2 class="module-title">数据分析</h2>
</div>
<p class="module-desc">认证全流程数据采集、分析及决策支持系统</p>
<div class="function-items">
<div class="func-item">认证看板 <span class="value">实时</span></div>
<div class="func-item">通过率分析</div>
<div class="func-item">行业合规热力图</div>
<div class="func-item">趋势预测模型</div>
<div class="func-item">机构效能排名</div>
<div class="func-item">企业认证图谱</div>
<div class="func-item">智能决策支持</div>
<div class="func-item">审计追踪系统</div>
</div>
<!-- 核心概念标签 -->
<div class="core-concept" style="width:150px; height:150px; bottom:-40px; right:-20px; background-color:#F5B9B7; color:#000; font-size:16px; padding:45px;">
行业质量指数
</div>
</div>
</div>
</div>
<!-- 横跨三列 - 增值服务 -->
<div class="module" style="margin-top:20px;">
<div class="module-header">
<div class="circle-icon color5">7</div>
<h2 class="module-title">增值服务</h2>
</div>
<p class="module-desc">CSTM认证体系的价值延伸服务与数据利用</p>
<div class="function-items">
<div class="func-item">行业白皮书 <span class="badge">热销</span></div>
<div class="func-item">国际认证衔接</div>
<div class="func-item">企业合规诊断</div>
<div class="func-item">技术咨询</div>
<div class="func-item">培训服务</div>
<div class="func-item"><span class="badge">新</span>质量指数API</div>
<div class="func-item">检测能力规划</div>
<div class="func-item">监管风险预警</div>
<div class="func-item">数据资产变现</div>
<div class="func-item">标杆企业图谱</div>
</div>
<!-- 核心概念标签 -->
<div class="core-concept" style="width:160px; height:160px; top:-30px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg, #B0E38F, #94E0E1); color:#000; font-size:18px; padding:50px;">
数据价值链
</div>
</div>
<div class="legend">
<div class="legend-item">
<div class="legend-color color1"></div>
<span>项目准备 & 数据分析</span>
</div>
<div class="legend-item">
<div class="legend-color color2"></div>
<span>评审管理</span>
</div>
<div class="legend-item">
<div class="legend-color color3"></div>
<span>认证流程</span>
</div>
<div class="legend-item">
<div class="legend-color color4"></div>
<span>标准制定</span>
</div>
<div class="legend-item">
<div class="legend-color color5"></div>
<span>核心功能 & 增值服务</span>
</div>
</div>
</div>
<script>
// 添加简单的交互效果
document.querySelectorAll('.func-item').forEach(item => {
item.addEventListener('click', function() {
this.style.backgroundColor = 'rgba(76, 217, 179, 0.3)';
this.style.boxShadow = '0 0 15px rgba(76, 217, 179, 0.5)';
setTimeout(() => {
this.style.backgroundColor = 'rgba(32, 70, 72, 0.5)';
this.style.boxShadow = 'none';
}, 1000);
});
});
// 让核心概念轻微浮动
const concepts = document.querySelectorAll('.core-concept');
concepts.forEach(concept => {
let top = concept.style.top;
let direction = 1;
setInterval(() => {
if(top) {
const topValue = parseInt(top);
concept.style.top = (topValue + direction) + 'px';
if(topValue > parseInt(top) + 5) direction = -1;
if(topValue < parseInt(top) - 5) direction = 1;
}
}, 100);
});
</script>
</body>
</html>
index.html
style.css
index.js
index.html