cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新了四个产品平台的内容和样式

Browse Source
This commit is contained in:
djgj
2025-12-17 16:43:14 +08:00
parent ffab7ede4a
commit 2906b515e4
12 changed files with 377 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/views/Jyh/Home/component/ComProject/product1.vue
View File

@@ -4,72 +4,85 @@
<div class="hadoop" id="hadoop">
<div class="hadoopCon">
<div class="descBox">
<p class="desc1">可信开源态势感知</p>
<p class="desc1">产品介绍</p>
<p class="desc2">
基于 国家网安基地云平台-安全数据湖仓，构建国家级安全数据底座 ，聚合 全球安全情报，实现漏洞风险实时感知。
<b>📍 定位</b><br>
国家级开源安全数据底座 • 全景风险感知 • 实时情报监测
</p>
<p class="desc3">
提供高精度、高覆盖的开源组件，构建态势感知一体化平台，让风险感知更简单、更可靠。
<b>👥 目标客户与合作伙伴</b><br>
G端（政府/事业单位）、B端（关基单位/大中企业）、生态伙伴（开源社区/代码托管平台/安全厂商）
</p>
<p class="desc3">
<b>💼 使用场景</b><br>
行业监管中心、主动威胁情报、安全风险阻断
</p>
</div>
<div class="hadoopCode activeCode" :ref="(el) => setTargetRef(el, 'hadoop')">
<img src="@/assets/v3/Line/codeafter.c3088c74.png" alt="态势感知运行结果" class="activeImg">
<div class="hadoopCode activeCode" :ref="(el) => setTargetRef(el, 'hadoop')">
<img src="@/assets/v3/Line/taishi.png" alt="态势感知运行结果" class="activeImg">
</div>
</div>
</div>
<div class="oneStop" :ref="(el) => setTargetRef(el, 'oneStop')" id="oneStop">
<div class="oneStop" :ref="(el) => setTargetRef(el, 'oneStop')" id="oneStop">
<div class="oneStopContent">
<div class="osLeftMain"><img src="@/assets/v3/Line/2-2-1.afd0f2f5.png" alt="" width="520px"
class="osleftPosi"><img src="@/assets/v3/Line/2-2-head.5e69dbb2.png" alt=""
width="213px" style="margin-left: -12px;"><img
src="@/assets/v3/Line/2-2-2.26bc3301.png" alt="" width="653px" class="osleftPosi1"><img
src="@/assets/v3/Line/2-2-3.6d6ce99c.png" alt="" width="367px" class="osleftPosi2"></div>
<div class="osLeftMain">
<img src="@/assets/v3/Line/2-2-1.afd0f2f5.png" alt="" width="520px"class="osleftPosi">
<img src="@/assets/v3/Line/2-2-head.5e69dbb2.png" alt="" width="213px"style="margin-left: -12px;">
<img src="@/assets/v3/Line/2-2-2.26bc3301.png" alt="" width="653px"class="osleftPosi1">
<img src="@/assets/v3/Line/2-2-3.6d6ce99c.png" alt="" width="367px" class="osleftPosi2">
</div>
<div class="osRightMain">
<p class="osRightTitle">🛡️ 全景大屏</p>
<p class="osRightTitle">技术优势</p>
<p>实时同步 <b>漏洞爆发态势</b>、<b>热点地区分布</b>、<b>在野攻击趋势</b>、<b>组件风险排名</b>等关键信息。</p>
<p>平台架构遵循 <b>"安全数据湖仓 -> AI智能引擎 -> 智能态势应用"</b> 的演进路线</p>
<p>基于 WebGL 技术，构建 <b>全球3D热力图</b> 等关键数据图表，全球态势立体式一网打尽。</p>
<p><b>a.安全数据湖仓：</b>基于国家网安基地云平台，聚合全球主流开源社区，NVD/CNNVD等多源漏洞库，以及21个行业投毒威胁情报库</p>
<p><b>b.AI智能引擎：</b>知识图谱构建、跨域标签引擎、智能态势应用</p>
<p><b>c.智能态势应用：</b> 对外提供SaaS订阅、API数据流、可视化大屏及私有化一体机交付</p>
<p>同时提供定制化资产视图、风险聚合分析等功能，为您搭建一站式的宏观风险监控环境。</p>
</div>
</div>
<img src="@/assets/v3/Line/2-2-1.bcb33d47.png" alt="" height="83px" class="imgring">
</div>
<div class="highDevops" :ref="(el) => setTargetRef(el, 'highDevops')" id="highDevops">
<div class="highDoTitle"><span>⚡ 极速预警</span></div>
<div class="highDoTitle"><span>⚡ 创新点</span></div>
<div class="highDoSubtitle">支持通过 <b>Webhook</b> / <b>邮件</b> / <b>短信</b> 等渠道，按需推送用户关注组件的风险动态。<br>支持在 CI/CD 环节接入安全分析 API，提供 <b>自定义告警策略</b>、<b>静态分析</b>、<b>自动阻断</b> 等关键安全能力。<br>同时支持企业拓展化开发，接入现有安全系统。
<div class="highDoSubtitle">
<b>a.全景安全态势感知：</b>聚合全球开源社区，实时监控开源组件安全漏洞，以及21个行业投毒威胁情报库<br>
<b>b.主动式漏洞挖掘：</b>通过AI驱动的补丁代码与自动化测试，挖掘0day漏洞，助建高质量CVE库<br>
<b>c.精确溯源-组件关联：</b>借助SBOM与溯源技术，一键生成供应链图谱，自动追踪高危漏洞<br>
<b>d.实时风险预警与应急响应：</b>智能感知异常事件的人工分析与现场处置，可视化决策支持
</div>
<div class="highDoContent">
<div><img src="@/assets/v3/Line/2-3-1.bcb33d47.png" alt="" width="794px">
<div style="margin-bottom: 100px; margin-top: 25px; position: relative;"><img
src="@/assets/v3/Line/2-3-2.57ef08ae.png" alt="" width="520px"></div>
src="@/assets/v3/Line/2-3-2.57ef08ae.png" alt="" width="520px"></div>
<img src="@/assets/v3/Line/2-3-3.52733627.png" alt="" width="427px" class="highImg2"><img
src="@/assets/v3/Line/2-3-4.339b2f1c.png" alt="" width="413px" class="highImg1"></div>
<!-- <p class="highDoBottondesc">将安全能力左移，让您的威胁响应速度远超攻击者！</p> -->
src="@/assets/v3/Line/2-3-4.339b2f1c.png" alt="" width="413px" class="highImg1">
</div>
</div>
</div>
<div class="multipleAnalyse" :ref="(el) => setTargetRef(el, 'multipleAnalyse')" id="multipleAnalyse">
<span class="title">🌐 多维图谱：深度关联分析</span>
<span class="title">📈 性能指标</span>
<div class="maContent">
</div>
<p class="desc">
基于 <b>知识图谱</b> 技术，深入挖掘组件、版本、漏洞和厂商的多维度标签。<br>提供代码溯源与安全审查，轻松回溯风险来源，精确探测多级依赖中的隐藏风险。
<b>数据提速：</b>11种主流编程语言，全球Top5开源社区全量<br>
<b>情报时效：</b>分钟级简报，小时级预警<br>
<b>检测能力：</b>SCA组件识别覆盖≥95%，投毒检测覆盖≥5%<br>
<b>系统开发：</b>API接口支持方式QPS，大屏数据秒级刷新
</p>
</div>
@@ -78,17 +91,21 @@
<div class="" :ref="(el) => setTargetRef(el, 'multidimensional')" id="multidimensional">
<div class="multidimensinalhalf">
<div>
<p class="halfTitle">智能安全治理决策</p>
<p class="halfsubTitle">基于全面的风险感知数据，提供智能化的合规和治理决策建议。<br>建立用户画像与风险评分机制，全方位协助企业建立完善的开源安全管理体系。</p>
<p class="halfTitle">📊 产品功能</p>
<p class="halfsubTitle"><b>数据标签服务：</b>行业属性、技术领域、开源贡献、组件画像<br>
<b>风险感知服务：</b>态势大屏、情报推送、攻击面管理
</p>
</div>
<div style="width: 820px; margin-left: 34px;"><img src="@/assets/v3/Line/2-6-1.302b729e.png" alt=""
width="820px"></div>
width="820px"></div>
</div>
<div class="multidimensinalPart">
<div style="width: 614px; margin-right: 40px;"><img src="@/assets/v3/Line/2-6-2.b262b91e.png" alt=""
width="614px"></div>
width="614px"></div>
<div>
<p>提供各种特色功能——<br> 风险趋势分析<br> 漏洞修复优先级排序<br> SBOM (软件物料清单) 一键生成</p>
<p><b>数据定制服务：</b>情报订阅、深度分析、API对接<br><br>
<b>安全预警与应急响应服务：</b>分级预警、应急处置、协同指挥
</p>
</div>
</div>
</div>
@@ -263,7 +280,7 @@ onUnmounted(() => {
font-weight: 500;
color: #69daf5;
line-height: 36px;
margin-top: 97px
margin-top: 20px
}
.secondEdition .secondEditionContent .hadoop .descBox .desc3 {
@@ -272,7 +289,7 @@ onUnmounted(() => {
font-weight: 500;
color: #fff;
line-height: 36px;
margin-top: 70px
margin-top: 100px
}
.secondEdition .secondEditionContent .hadoop .hadoopdesc {
@@ -335,12 +352,14 @@ onUnmounted(() => {
font-weight: 500
}
.secondEdition .secondEditionContent .oneStop .imgring, .secondEdition .secondEditionContent .oneStop .osleftPosi {
.secondEdition .secondEditionContent .oneStop .imgring,
.secondEdition .secondEditionContent .oneStop .osleftPosi {
transition: 3s;
opacity: 0
}
.secondEdition .secondEditionContent .oneStop .osleftPosi1, .secondEdition .secondEditionContent .oneStop .osleftPosi2 {
.secondEdition .secondEditionContent .oneStop .osleftPosi1,
.secondEdition .secondEditionContent .oneStop .osleftPosi2 {
position: absolute;
right: -200px;
top: 102px;
@@ -356,7 +375,10 @@ onUnmounted(() => {
z-index: 2
}
.secondEdition .secondEditionContent .oneStop.activeCode, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
.secondEdition .secondEditionContent .oneStop.activeCode,
.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi,
.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1,
.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
opacity: 1
}
@@ -464,7 +486,7 @@ onUnmounted(() => {
align-items: center
}
.secondEdition .secondEditionContent .highDevops .highDoContent > div {
.secondEdition .secondEditionContent .highDevops .highDoContent>div {
display: flex;
flex-direction: column;
align-items: center
@@ -523,7 +545,7 @@ onUnmounted(() => {
display: inline-block;
font-size: 36px;
font-weight: 600;
margin-bottom: 26px;
margin-bottom: 46px;
background: -webkit-linear-gradient(1deg, #6d66ff 12%, #c148ff 57%, #f59f77 76%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
@@ -722,11 +744,17 @@ a {
-webkit-text-decoration-skip: objects;
}
div, img, tr, td, table {
div,
img,
tr,
td,
table {
border: 0;
}
*, *::before, *::after {
*,
*::before,
*::after {
box-sizing: border-box;
}
@@ -739,7 +767,8 @@ img {
border-style: none;
}
img, video {
img,
video {
max-width: none;
height: revert-layer;
display: inline;
@@ -747,7 +776,7 @@ img, video {
.hadoopCode {
margin-left: 32px;
box-shadow: 0 0 0 2px hsla(0,0%,100%,.1);
box-shadow: 0 0 0 2px hsla(0, 0%, 100%, .1);
border-radius: 10px;
padding: 18px 20px;
flex: 1;
@@ -778,5 +807,4 @@ img, video {
left: 380px;
opacity: 1;
}
</style>

218
src/views/Jyh/Home/component/ComProject/product2.vue
View File

@@ -4,19 +4,26 @@
<div class="hadoop" id="hadoop">
<div class="hadoopCon">
<div class="descBox">
<p class="desc1">金银湖安全大模型</p>
<p class="desc1">产品介绍</p>
<p class="desc2">
基于亿级代码库训练的安全大模型，深度融合<b>自然语言处理（NLP）</b> 和 <b>代码分析</b> 技术，具备深度的代码理解和安全分析能力。
<b>📍 定位</b><br>
安全领域智能专家，强化安全基座能力，驱动上层安全应用的核心大脑。
</p>
<p class="desc3">
提供多模态输入支持，融入连续推理模式，基于 <b>Multi-Agent</b> 工作流 实现漏洞发现、评估以及补丁生成。
<b>👥 目标客户</b><br>
关基单位、互联网企业、软件开发商
</p>
<p class="desc3" style="margin-top: 50px;">
<b>💼 使用场景</b><br>
DevSecOps软件安全开发、系统安全运维、合规审计与治理
</p>
</div>
<div class="hadoopCode activeCode" :ref="(el) => setTargetRef(el, 'hadoop')">
<img src="@/assets/v3/Line/codeafter.c3088c74.png" alt="金银湖安全大模型架构示意图" class="activeImg">
<img src="@/assets/v3/Line/damoxing.png" alt="金银湖安全大模型架构示意图" class="activeImg">
</div>
</div>
@@ -31,39 +38,102 @@
src="@/assets/v3/Line/2-2-2.26bc3301.png" alt="" width="653px" class="osleftPosi1"><img
src="@/assets/v3/Line/2-2-3.6d6ce99c.png" alt="" width="367px" class="osleftPosi2"></div>
<div class="osRightMain">
<p class="osRightTitle">精确识别</p>
<p class="osRightTitle">💡 创新亮点</p>
<p>基于AST语法树与CPG图构建技术，结合静态分析、动态增量分析、AI语义理解等多种检测手段，自动化完成函数调用关系构建、漏洞精准定位与去重。</p>
<p><b>01.全面漏洞数据集：</b>已收集高质量漏洞代码样本349547条，涵盖30余种编程语言，总规模约48.7GB，其中CWE漏洞提交信息87279条</p>
<p>与传统检测方案相比，该系统具备领先的 <i><u>漏洞检出率*</u></i>，并且误报率显著下降，大幅缩短修复周期。</p>
<p><i>*在 Devign 数据集和 250 类 CWE 缺陷的真实漏洞样本库的基准测试中，<b>金银湖大模型</b> 综合漏洞检出率超通用大模型 <code>deepseek-v3.1(671b)</code> <b>25%</b>，超过静态分析工具 <b>15%</b> 以上 。</i></p>
<p><b>02.专家经验融合：</b>将安全专家经验以COT思维链形式嵌入训练，构建具备可解释推理链的安全AI基座</p>
<p><b>03.仓库级漏洞检测：</b>基于AST语法树与函数调用图，结合静态分析、AI语义理解，自动完成漏洞精准定位与去重</p>
<p><b>04.智能检测修复：</b>支持漏洞检测识别与自动修复，通过领域知识输入降低误报率，提升修复代码质量</p>
</div>
</div>
<img src="@/assets/v3/Line/2-2-1.bcb33d47.png" alt="" height="83px" class="imgring">
</div>
<div class="highDevops" :ref="(el) => setTargetRef(el, 'highDevops')" id="highDevops">
<div class="highDoTitle"><span>⚒️ 智能修复</span></div>
<div class="highDoTitle"><span>📊 优势在我</span></div>
<div class="highDoSubtitle">基于多智能体协同，支持 RAG 知识库、Agent 工作流、AI 工具集。<br>大模型能够深入解析漏洞原理，自动评估对比多种修复方案，并生成 <b>可直接合并</b> 的修复代码片段。
</div>
<div class="highDoContent">
<div><img src="@/assets/v3/Line/2-3-1.bcb33d47.png" alt="" width="794px">
<div style="margin-bottom: 100px; margin-top: 25px; position: relative;"><img
src="@/assets/v3/Line/2-3-2.57ef08ae.png" alt="" width="520px"></div>
<img src="@/assets/v3/Line/2-3-3.52733627.png" alt="" width="427px" class="highImg2"><img
src="@/assets/v3/Line/2-3-4.339b2f1c.png" alt="" width="413px" class="highImg1"></div>
<!-- <p class="highDoBottondesc">让安全能力左移，将漏洞消灭在代码编写的最初阶段！</p> -->
<table class="comparisonTable">
<thead>
<tr>
<th class="headerCol">对比维度</th>
<th class="highlightCol">金银湖安全大模型</th>
<th>传统工具<br><span style="font-size: 14px; font-weight: 400;">(Fortify SCA、coverity等)</span></th>
<th>类似大模型平台<br><span style="font-size: 14px; font-weight: 400;">(BiDeepSeek、ChatGPT等)</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="headerCol">功能定位</td>
<td class="highlightCol">专注代码安全、实现可信组件的智能组装</td>
<td>静态分析工具主要就是为了在不运行代码的情况下发现潜在的错误和安全漏洞</td>
<td>覆盖文本生成、问答等广泛场景</td>
</tr>
<tr>
<td class="headerCol">代码生成能力</td>
<td class="highlightCol">可信组件智能组合，减少人工干预</td>
<td>它们是分析工具，不是生成工具，所以不具备代码生成能力</td>
<td>有限的代码生成能力，不涉及组件级别的生成与复合</td>
</tr>
<tr>
<td class="headerCol">报告输出</td>
<td class="highlightCol">结构化报告（含漏洞类型、风险等级、修复代码）一键生成下载</td>
<td>输出详细的缺陷报告，但通常是列表形式，不如智能平台"翻译"和"一键生成修复建议"</td>
<td>无标准化报告生成功能，需人工整理</td>
</tr>
<tr>
<td class="headerCol">检测范围</td>
<td class="highlightCol">仓库级代码扫描，突破上下文长度限制，精准识别跨文件漏洞</td>
<td>在处理大型、复杂项目时，特别是在跨文件、跨模块分析方面可能遇到限制，容易产生误报或漏报</td>
<td>受限于Token长度，仅支持单文件片段分析</td>
</tr>
<tr>
<td class="headerCol">工具链集成</td>
<td class="highlightCol">提供IDE插件、MCP接口，无缝集成DevOps流程</td>
<td>DevOps流程（如CI/CD管道）集成时，通常需要更多的手动配置和脚本支持</td>
<td>无工具链集成能力，需额外开发对接</td>
</tr>
<tr>
<td class="headerCol">安全能力矩阵</td>
<td class="highlightCol">静态审计+动态扫描+修复验证，形成完整安全工具链</td>
<td>只做静态分析，不涉及动态测试或自动修复验证</td>
<td>单一模型能力，缺乏工具协同</td>
</tr>
<tr>
<td class="headerCol">行业定制</td>
<td class="highlightCol">支持金融、政务等场景的定制化私有部署</td>
<td>大多数传统静态分析工具是通用型的，缺乏针对特定行业（如金融、医疗等）的合规性要求及特定风险模式的深度定制能力</td>
<td>无法满足单独行业特殊需求</td>
</tr>
<tr>
<td class="headerCol">智能决策能力</td>
<td class="highlightCol">基于多智能体协作和专业知识库优化学习，生成改进策略与漏洞利用建议</td>
<td>只是发现问题，不具备"智能"地提供优化建议或漏洞利用建议的能力，需要安全专家的人工分析</td>
<td>单一模型，缺乏专业知识库</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="multipleAnalyse" :ref="(el) => setTargetRef(el, 'multipleAnalyse')" id="multipleAnalyse">
<span class="title">💬 安全问答</span>
<span class="title">📈 落地案例</span>
<div class="maContent">
</div>
<p class="desc">
支持 自然语言交互，提供多模态输入的能力，全面解答代码安全合规难题 。<br>无论是漏洞原理、合规标准还是最佳实践，大模型都能快速响应。
<b>01.国家关键信息基础设施开源组件治理</b><br>
深耕电力、交通、通信等国家命脉领域，深度审计核心系统开源组件；累计检出185个未知高危漏洞，智能生成合规修复方案；构建漏洞安全主动防御体系，实现漏洞治理率超90%。<br><br>
<b>02.湖北电信核心业务系统智能漏洞治理</b><br>
覆盖全省业务系统与云平台环境，支持Java/Python/Go等多语言自动扫描；平均修复周期由30天缩短至7天，平均修复周期提升60%；保障电信核心业务安全稳定上线，筑牢数字基础设施安全防线。<br><br>
<b>03.某研究所保密业务系统源码审计</b><br>
聚焦C/C++核心模块复杂业务逻辑，深度审计多级指针操作关键代码；精准识别到空指针解引用、缓冲区溢出等传统工具检测盲区；构建保密场景智能审计标准流程，树立关键系统安全治理行业标杆。
</p>
</div>
@@ -72,8 +142,12 @@
<div class="" :ref="(el) => setTargetRef(el, 'multidimensional')" id="multidimensional">
<div class="multidimensinalhalf">
<div>
<p class="halfTitle">智能决策与合规报告</p>
<p class="halfsubTitle">多维聚合漏洞威胁等级、修复优先级、合规缺口等数据。<br>生成 <b>风险热力图</b> 与 <b>推荐解决方案</b>。</p>
<p class="halfTitle">🎯 市场推广</p>
<p class="halfsubTitle">
<b>面向客户：</b><br>
强合规型：能源、金融、运营商、政务（信创）等。<br>
高敏捷型：互联网大厂、车联网、AI厂商等。
</p>
</div>
<div style="width: 820px; margin-left: 34px;"><img src="@/assets/v3/Line/2-6-1.302b729e.png" alt=""
width="820px"></div>
@@ -82,8 +156,11 @@
<div style="width: 614px; margin-right: 40px;"><img src="@/assets/v3/Line/2-6-2.b262b91e.png" alt=""
width="614px"></div>
<div>
<p>深度洞察软件成分，一键识别安全与合规风险。</p>
<p>基于权威的开源安全数据湖仓 ，精准识别项目中所有直接和间接的依赖组件，构建完整的软件资产图谱。</p>
<p class="halfsubTitle">
<b>收费模式：</b><br><br>
<b>● SaaS型：</b>按用户数、用量或功能计费，灵活低门槛，快速覆盖中小企业与互联网客户。<br><br>
<b>● 软硬件一体化部署：</b>私有化部署满足安全性，金融等高点业务对数据安全、模型可控与高创新配的高要求，形成高价值单。
</p>
</div>
</div>
</div>
@@ -258,7 +335,7 @@ onUnmounted(() => {
font-weight: 500;
color: #69daf5;
line-height: 36px;
margin-top: 97px
margin-top: 30px
}
.secondEdition .secondEditionContent .hadoop .descBox .desc3 {
@@ -267,7 +344,7 @@ onUnmounted(() => {
font-weight: 500;
color: #fff;
line-height: 36px;
margin-top: 70px
margin-top: 130px
}
.secondEdition .secondEditionContent .hadoop .hadoopdesc {
@@ -451,12 +528,93 @@ onUnmounted(() => {
.secondEdition .secondEditionContent .highDevops .highDoContent {
background: url(@/assets/v3/Line/2-3bg.deef1b07.png) no-repeat 50%;
background-size: cover;
height: 920px;
padding: 20px 0 114px;
min-height: 920px;
padding: 40px 20px;
position: relative;
display: flex;
flex-direction: column;
align-items: center
align-items: center;
justify-content: center;
}
.comparisonTable {
width: 100%;
max-width: 1160px;
border-collapse: collapse;
background: rgba(255, 255, 255, 0.95);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
font-size: 15px;
line-height: 1.6;
}
.comparisonTable thead {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.comparisonTable th {
padding: 18px 12px;
font-weight: 600;
text-align: center;
font-size: 16px;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.comparisonTable th:last-child {
border-right: none;
}
.comparisonTable tbody tr {
border-bottom: 1px solid #e5e7eb;
transition: background-color 0.3s ease;
}
.comparisonTable tbody tr:hover {
background-color: rgba(102, 126, 234, 0.05);
}
.comparisonTable tbody tr:last-child {
border-bottom: none;
}
.comparisonTable td {
padding: 16px 12px;
text-align: left;
color: #374151;
border-right: 1px solid #e5e7eb;
vertical-align: top;
}
.comparisonTable td:last-child {
border-right: none;
}
.comparisonTable .headerCol {
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
font-weight: 600;
color: #1f2937;
text-align: center;
width: 120px;
}
.comparisonTable .highlightCol {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
font-weight: 500;
color: #92400e;
position: relative;
}
.comparisonTable .highlightCol::before {
content: '✓';
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
color: #059669;
font-weight: bold;
font-size: 18px;
}
.secondEdition .secondEditionContent .highDevops .highDoContent > div {
@@ -518,12 +676,12 @@ onUnmounted(() => {
display: inline-block;
font-size: 36px;
font-weight: 600;
margin-bottom: 26px;
margin-bottom: 0px;
background: -webkit-linear-gradient(1deg, #6d66ff 12%, #c148ff 57%, #f59f77 76%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 50px;
margin-top: 20px
margin-top: 30px
}
.secondEdition .secondEditionContent .multipleAnalyse .maContent {

110
src/views/Jyh/Home/component/ComProject/product3.vue
View File

@@ -4,66 +4,81 @@
<div class="hadoop" id="hadoop">
<div class="hadoopCon">
<div class="descBox">
<p class="desc1">软件供应链检测平台</p>
<p class="desc1">产品介绍</p>
<p class="desc2">
深度洞察软件成分，一键识别安全合规风险。
<b>📍 定位</b><br>
深度洞察软件成分 • 一键识别安全合规风险
</p>
<p class="desc3">
基于权威的开源安全数据湖仓 ，精准识别项目中所有直接和间接的依赖组件，构建完整的软件资产图谱。
<b>👥 目标客户</b><br>
关基行业、政府、企业（软件开发企业、网安及互联网企业等）
</p>
<p class="desc3">
<b>💼 使用场景</b><br>
软件采购与引入前、软件开发与构建中、内部资产管理与治理、合规审计与响应
</p>
</div>
<div class="hadoopCode activeCode" :ref="(el) => setTargetRef(el, 'hadoop')">
<img src="@/assets/v3/Line/codeafter.c3088c74.png" alt="软件供应链检测平台资产视图" class="activeImg">
<div class="hadoopCode activeCode" :ref="(el) => setTargetRef(el, 'hadoop')">
<img src="@/assets/v3/Line/jiance.png" alt="软件供应链检测平台资产视图" class="activeImg">
</div>
</div>
<!-- <p class="hadoopdesc">透视黑盒，溯源无忧</p> -->
</div>
<div class="oneStop" :ref="(el) => setTargetRef(el, 'oneStop')" id="oneStop">
<div class="oneStop" :ref="(el) => setTargetRef(el, 'oneStop')" id="oneStop">
<div class="oneStopContent">
<div class="osLeftMain"><img src="@/assets/v3/Line/2-2-1.afd0f2f5.png" alt="" width="520px"
class="osleftPosi"><img src="@/assets/v3/Line/2-2-head.5e69dbb2.png" alt=""
width="213px" style="margin-left: -12px;"><img
src="@/assets/v3/Line/2-2-2.26bc3301.png" alt="" width="653px" class="osleftPosi1"><img
src="@/assets/v3/Line/2-2-3.6d6ce99c.png" alt="" width="367px" class="osleftPosi2"></div>
<div class="osLeftMain">
<img src="@/assets/v3/Line/jushu1.png" alt="技术优势图1" width="560px" class="osleftPosi">
<img src="@/assets/v3/Line/jushu2.png" alt="技术优势图2" width="240px" class="jushuCenter">
<img src="@/assets/v3/Line/jushu3.png" alt="技术优势图3" width="680px" class="osleftPosi1">
<img src="@/assets/v3/Line/jushu4.png" alt="技术优势图4" width="400px" class="osleftPosi2">
</div>
<div class="osRightMain">
<p class="osRightTitle">双模引擎：SCA 深度分析</p>
<p class="osRightTitle">💡 技术优势</p>
<p>基于源码仓库特征匹配与多维度 SCA 引擎技术，结合 <b>特征数据库</b>、<b>TF-IDF 检索</b>、<b>聚类分析</b> 等能力，对二进制文件、源码包进行深度解构。</p>
<p><b>01.供应链溯源检测能力：</b>全景软件依赖图谱、精准软件成分识别，经第三方测试自研供应链溯源检测引擎检测准确率为95%</p>
<p>提取 <b>文件指纹</b>、<b>函数特征</b>、<b>字符串常量</b> 等多维信息，构建精准成分画像。自动化完成项目成分分析与供应链安全检测。</p>
<p><b>02.代码合规检测能力：</b>许可证兼容性检测、许可证兼容性关联检测，支持多种主流许可证格式</p>
<p><b>03.恶意代码检测能力：</b>首创11种语言跨组件投毒分析能力，集成21个行业投毒情报库</p>
<p><b>04.漏洞可达性分析能力：</b>识别漏洞影响路径，精准定位受影响组件；判断组件补丁状态，跟踪已修复路径</p>
</div>
</div>
<img src="@/assets/v3/Line/2-2-1.bcb33d47.png" alt="" height="83px" class="imgring">
</div>
<div class="highDevops" :ref="(el) => setTargetRef(el, 'highDevops')" id="highDevops">
<div class="highDoTitle"><span>🕸️ 图谱分析</span></div>
<div class="highDoTitle"><span>⚡ 创新点</span></div>
<div class="highDoSubtitle">
将识别出的 <code>组件</code> 与 <code>漏洞库</code>、<code>许可证库</code>、<code>恶意软件库</code> 等进行动态关联。<br>利用图谱技术分析组件间的依赖关系和风险传递路径。
<b>01.</b>融合函数调用图的结构化语义表达与哈希精确匹配，弥补哈希仅依赖特征值匹配、缺乏语义关联的短板<br>
<b>02.</b>引入中心性分析量化函数，为哈希精确匹配中的核心函数筛选提供量化依据，提升匹配针对性<br>
<b>03.</b>以组件知识图谱与漏洞知识图谱为核心，构建影响软件版本节点与组件节点的关联，形成完整供应链知识图谱
</div>
<div class="highDoContent">
<div><img src="@/assets/v3/Line/2-3-1.bcb33d47.png" alt="" width="794px">
<div style="margin-bottom: 100px; margin-top: 25px; position: relative;"><img
src="@/assets/v3/Line/2-3-2.57ef08ae.png" alt="" width="520px"></div>
src="@/assets/v3/Line/2-3-2.57ef08ae.png" alt="" width="520px"></div>
<img src="@/assets/v3/Line/2-3-3.52733627.png" alt="" width="427px" class="highImg2"><img
src="@/assets/v3/Line/2-3-4.339b2f1c.png" alt="" width="413px" class="highImg1"></div>
<!-- <p class="highDoBottondesc">实现从风险识别到合规交付的全流程自动化管理！</p> -->
src="@/assets/v3/Line/2-3-4.339b2f1c.png" alt="" width="413px" class="highImg1">
</div>
</div>
</div>
<div class="multipleAnalyse" :ref="(el) => setTargetRef(el, 'multipleAnalyse')" id="multipleAnalyse">
<span class="title">📃 量化评估</span>
<span class="title">🎯 市场推广</span>
<div class="maContent">
</div>
<p class="desc">
引入中心性分析量化节点重要性，提升分析的针对性。
<b>面向客户：</b>强合规型（能源、金融、运营商、政务/信创等）、高敏捷型（互联网大厂、车联网、AI厂商等）<br>
<b>收费模式：</b>订阅服务（定期按月/年支付费用，获取软件的使用权、更新和支持服务）、解决方案服务（一次性支付费用，满足定制化、高安全和完全内网部署需求）
</p>
</div>
@@ -72,17 +87,25 @@
<div class="" :ref="(el) => setTargetRef(el, 'multidimensional')" id="multidimensional">
<div class="multidimensinalhalf">
<div>
<p class="halfTitle">平台可视化</p>
<p class="halfsubTitle">构建关键数据仪表盘，绘制供应链可视化链条。</p>
<p class="halfTitle">📊 产品功能</p>
<p class="halfsubTitle"><b>平台展示及用户交互模块：</b>Web界面和API、项目管理、扫描任务配置、结果可视化和自定义报告<br>
<b>数据管理模块：</b>负责内部和外部数据的采集、存储、清洗和更新，包括漏洞数据库、组件信息、许可证文本和恶意代码特征<br>
<b>包管理器SCA引擎：</b>针对常见包管理器（如npm、PyPI、Maven）的依赖分析引擎，自动识别组件及其版本
</p>
</div>
<div style="width: 820px; margin-left: 34px;"><img src="@/assets/v3/Line/2-6-1.302b729e.png" alt=""
width="820px"></div>
width="820px"></div>
</div>
<div class="multidimensinalPart">
<div style="width: 614px; margin-right: 40px;"><img src="@/assets/v3/Line/2-6-2.b262b91e.png" alt=""
width="614px"></div>
width="614px"></div>
<div>
<p>轻松掌握上下游信息链，实现更加精确的全链路追踪。</p>
<p><b>C/C++ SCA引擎：</b>处理C/C++项目成分分析，支持源代码和编译依赖扫描<br><br>
<b>二进制SCA引擎：</b>针对二进制文件分析，通过反编译和特征匹配识别成分和漏洞<br><br>
<b>供应链溯源检测：</b>综合多数据源和引擎结果，检测供应链安全漏洞<br><br>
<b>许可证兼容性检测：</b>分析组件许可证信息，检查兼容性和合规性<br><br>
<b>恶意代码检测：</b>集成恶意代码扫描，识别供应链恶意组件
</p>
</div>
</div>
</div>
@@ -257,7 +280,7 @@ onUnmounted(() => {
font-weight: 500;
color: #69daf5;
line-height: 36px;
margin-top: 97px
margin-top: 30px
}
.secondEdition .secondEditionContent .hadoop .descBox .desc3 {
@@ -266,7 +289,7 @@ onUnmounted(() => {
font-weight: 500;
color: #fff;
line-height: 36px;
margin-top: 70px
margin-top: 90px
}
.secondEdition .secondEditionContent .hadoop .hadoopdesc {
@@ -329,12 +352,14 @@ onUnmounted(() => {
font-weight: 500
}
.secondEdition .secondEditionContent .oneStop .imgring, .secondEdition .secondEditionContent .oneStop .osleftPosi {
.secondEdition .secondEditionContent .oneStop .imgring,
.secondEdition .secondEditionContent .oneStop .osleftPosi {
transition: 3s;
opacity: 0
}
.secondEdition .secondEditionContent .oneStop .osleftPosi1, .secondEdition .secondEditionContent .oneStop .osleftPosi2 {
.secondEdition .secondEditionContent .oneStop .osleftPosi1,
.secondEdition .secondEditionContent .oneStop .osleftPosi2 {
position: absolute;
right: -200px;
top: 102px;
@@ -350,7 +375,10 @@ onUnmounted(() => {
z-index: 2
}
.secondEdition .secondEditionContent .oneStop.activeCode, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
.secondEdition .secondEditionContent .oneStop.activeCode,
.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi,
.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1,
.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
opacity: 1
}
@@ -458,7 +486,7 @@ onUnmounted(() => {
align-items: center
}
.secondEdition .secondEditionContent .highDevops .highDoContent > div {
.secondEdition .secondEditionContent .highDevops .highDoContent>div {
display: flex;
flex-direction: column;
align-items: center
@@ -517,7 +545,7 @@ onUnmounted(() => {
display: inline-block;
font-size: 36px;
font-weight: 600;
margin-bottom: 26px;
margin-bottom: 66px;
background: -webkit-linear-gradient(1deg, #6d66ff 12%, #c148ff 57%, #f59f77 76%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
@@ -716,11 +744,17 @@ a {
-webkit-text-decoration-skip: objects;
}
div, img, tr, td, table {
div,
img,
tr,
td,
table {
border: 0;
}
*, *::before, *::after {
*,
*::before,
*::after {
box-sizing: border-box;
}
@@ -733,7 +767,8 @@ img {
border-style: none;
}
img, video {
img,
video {
max-width: none;
height: revert-layer;
display: inline;
@@ -741,7 +776,7 @@ img, video {
.hadoopCode {
margin-left: 32px;
box-shadow: 0 0 0 2px hsla(0,0%,100%,.1);
box-shadow: 0 0 0 2px hsla(0, 0%, 100%, .1);
border-radius: 10px;
padding: 18px 20px;
flex: 1;
@@ -772,5 +807,4 @@ img, video {
left: 380px;
opacity: 1;
}
</style>

61
src/views/Jyh/Home/component/ComProject/product4.vue
View File

@@ -4,19 +4,26 @@
<div class="hadoop" id="hadoop">
<div class="hadoopCon">
<div class="descBox">
<p class="desc1">智能终端安全监测</p>
<p class="desc1">产品介绍</p>
<p class="desc2">
面向 <b>车联网、无人机及 IoT 生态</b>，提供应用逆向分析与运行时安全监测，确保设备在真实环境下的安全运行 。
<b>📍 定位</b><br>
多端安全智能防护、全场景风险感知、实时安全监测
</p>
<p class="desc3">
平台深度整合 <b>终端行为分析</b>、<b>固件逆向分析</b>、和 <b>安全情报整合</b>，全面覆盖 <b>从固件到应用层</b>的潜在威胁，构建智能终端安全壁垒。
<b>👥 目标客户</b><br>
车联网APP安全、无人机安全、具身智能安全、工业IoT安全
</p>
<p class="desc3" style="margin-top: 50px;">
<b>💼 核心技术路线</b><br>
轻量级语义模型 → 深度图谱分析 → 持续演化学习
</p>
</div>
<div class="hadoopCode activeCode" :ref="(el) => setTargetRef(el, 'hadoop')">
<img src="@/assets/v3/Line/codeafter.c3088c74.png" alt="智能终端安全监测平台威胁分析界面" class="activeImg">
<img src="@/assets/v3/Line/zhineng.png" alt="智能终端安全监测平台威胁分析界面" class="activeImg">
</div>
</div>
@@ -31,22 +38,26 @@
src="@/assets/v3/Line/2-2-2.26bc3301.png" alt="" width="653px" class="osleftPosi1"><img
src="@/assets/v3/Line/2-2-3.6d6ce99c.png" alt="" width="367px" class="osleftPosi2"></div>
<div class="osRightMain">
<p class="osRightTitle">全场景适配</p>
<p class="osRightTitle">💡 平台概述</p>
<p>覆盖 <b>车联网、智慧城市、工业 IoT</b> 等 <b>15+ 行业场景</b>，提供专业化的检测模型 。</p>
<p><b>智能终端安全检测平台专注于移动应用程序和终端设备的安全防护，</b>提供从应用上架审核到实时运行监控的全生命周期安全治理方案</p>
<p>针对不同芯片架构和操作系统（如 <b>Linux、QNX、RTOS</b>），提供定制化的<b>固件逆向与安全分析引擎</b>；</p>
<p>同时支持 <b>车机系统、车载 T-Box、边缘计算设备、智能模组</b> 等多种终端设备的深入检测；</p>
<p><b>● 毫秒级检测审核速度：</b>支持海量应用快速扫描</p>
<p><b>● 实时阻断恶意代码：</b>主动挖掘零日威胁</p>
<p><b>● 主动挖掘零日威胁：</b>持续发现新型攻击手段</p>
</div>
</div>
<img src="@/assets/v3/Line/2-2-1.bcb33d47.png" alt="" height="83px" class="imgring">
</div>
<div class="highDevops" :ref="(el) => setTargetRef(el, 'highDevops')" id="highDevops">
<div class="highDoTitle"><span>📡 动态防御</span></div>
<div class="highDoTitle"><span>⚡ 核心技术路线</span></div>
<div class="highDoSubtitle">
通过 <b>RASP/Agent</b> 技术，实时监测 <b>OTA 升级包</b> 完整性及终端异常行为。<br>在不影响终端性能的前提下，实现应用层的深度自我保护。
<b>采用"轻量级语义模型 → 深度图谱分析 → 持续演化学习"技术路线</b><br><br>
以轻量级高效预处理、或数据调用与权限列表关系，实现用户应用快速检测；通过动态抗拒技术，实现对恶意API调用的监控；基于AI的行为分析模型，识别已知和未知威胁；提供实时告警与自启动应对机制
</div>
<div class="highDoContent">
<div><img src="@/assets/v3/Line/2-3-1.bcb33d47.png" alt="" width="794px">
@@ -59,12 +70,18 @@
</div>
<div class="multipleAnalyse" :ref="(el) => setTargetRef(el, 'multipleAnalyse')" id="multipleAnalyse">
<span class="title">⏱ 秒级响应：威胁情报联动</span>
<span class="title">📊 核心优势</span>
<div class="maContent">
</div>
<p class="desc">
依托全球威胁情报和沙箱分析能力，<b>异常行为识别预警响应 ≤ 10分钟</b> 。<br>保障在 0-day 或新型攻击爆发时，快速下发处置策略。
<b>● 检测精度：</b>95% - 高精确下实现零误杀工业化检测，显著优于主流工具<br>
<b>● Zero-day样本：</b>530 - 在Google Play实战中发现的现有防护体系未发现的样本<br>
<b>● 跨平台特征覆盖：</b>免人工干预应急响应，不依赖已知特征库的零日挖掘能力<br>
<b>● 毫秒级检测速度：</b>轻量级语义模型与高效预处理理论，实现用户应用快速检测审核，极大提升大规模检测效率<br>
<b>● 零日威胁挖掘：</b>不依赖已知特征库的零日挖掘能力，主动发现未知威胁，提前防护下一代攻击<br>
<b>● 社会动力学识别：</b>首创基于社会动力学（中心度、亲密度、同质性）识别恶意软件，提高购买性恶意软件检测率<br>
<b>● 持续演化学习：</b>构建抗拒概念漂移的持续演化检测框架，随着恶意软件变化自动调整检测策略，保持长期有效性
</p>
</div>
@@ -73,8 +90,13 @@
<div class="" :ref="(el) => setTargetRef(el, 'multidimensional')" id="multidimensional">
<div class="multidimensinalhalf">
<div>
<p class="halfTitle">监测中心</p>
<p class="halfsubTitle">提供集中的风险仪表盘，<br>支持对多种终端设备进行监测和管理。</p>
<p class="halfTitle">🚗 应用场景</p>
<p class="halfsubTitle">
<b>车联网安全：</b><br>
● 车载系统组件生命周期安全全检测<br>
● 车载软件供应链风险检测<br>
● 运行安全监测与漏洞修复
</p>
</div>
<div style="width: 820px; margin-left: 34px;"><img src="@/assets/v3/Line/2-6-1.302b729e.png" alt=""
width="820px"></div>
@@ -83,7 +105,16 @@
<div style="width: 614px; margin-right: 40px;"><img src="@/assets/v3/Line/2-6-2.b262b91e.png" alt=""
width="614px"></div>
<div>
<p>实时监测终端设备的 <b>运行状态</b>、<br><b>安全事件</b> 和 <b>异常行为</b>。</p>
<p class="halfsubTitle">
<b>无人机安全：</b><br>
● 飞控系统代码安全审计<br>
● 防止与飞行器通讯安全监测<br>
● 通信链路劫持风险身份认证<br><br>
<b>工业IoT安全：</b><br>
● 工业控制系统(ICS)安全监测<br>
● 物联网设备固件安全分析<br>
● OT与IT融合安全防护
</p>
</div>
</div>
</div>