This commit is contained in:
gcw_yTjNWok9
2025-12-18 17:47:31 +08:00
23 changed files with 274 additions and 66 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 344 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 318 KiB

After

Width:  |  Height:  |  Size: 378 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 184 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 229 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 263 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 250 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 202 KiB

BIN
src/assets/v3/Line/kehu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

View File

@@ -14,7 +14,27 @@
</li>
<li><router-link to="/solutions" class="LNK">解决方案</router-link></li>
<li><router-link to="/data" class="LNK">数据服务</router-link></li>
<!-- <li><router-link to="/data" class="LNK">数据服务</router-link></li>-->
<li class="has-submenu dropdown-trigger">
<router-link to="/data" class="LNK">数据服务</router-link>
<div class="dropdown-menu">
<div class="dropdown-inner">
<div v-for="(sub, idx) in dataSubMenus" :key="idx" class="dropdown-item" @click="router.push(sub.path)">
<div class="item-icon">{{ sub.icon }}</div>
<div class="item-content">
<h4 class="item-title">{{ sub.title }}</h4>
<p class="item-desc">{{ sub.desc }}</p>
<router-link :to="sub.path" class="item-link">
<i class="ico-dp"></i> {{ sub.linkText }}
</router-link>
</div>
</div>
</div>
</div>
</li>
<li><router-link to="/Situation" class="LNK">态势感知中心</router-link></li>
<li><router-link to="/pricing" class="LNK">定价</router-link></li>
<li><router-link to="/intro" class="LNK">关于我们</router-link></li>
@@ -30,6 +50,30 @@
import {ref, reactive} from 'vue';
import {emitEvent} from "@/utils/eventBus";
const dataSubMenus = [
{
icon: '🗄️',
title: '漏洞数据库',
desc: '聚合 NVD/CNNVD/OSV 数据,提供标准化漏洞详情查询。',
linkText: '[ 查询漏洞 > ]',
path: '/VulnerabilityDatabase'
},
{
icon: '🧠',
title: '威胁情报库',
desc: '实时推送 CISA KEV 列表及供应链攻击情报 IOC。',
linkText: '[ 订阅情报 > ]',
path: '/ThreatIntelligence'
},
{
icon: '🚨',
title: '安全事件中心',
desc: '全球重大开源安全事件历史档案与复盘分析。',
linkText: '[ 查看事件 > ]',
path: '/News'
}
];
const handleLogin = (type) => {
emitEvent('login', {type, triggerType: '主动注册'});
};
@@ -111,4 +155,90 @@ const handleLogin = (type) => {
background: #A01218;
}
}
.dropdown-trigger {
position: relative;
&:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
.dropdown-menu {
position: absolute;
top: 30px;
left: -130px;
transform: translateX(-50%) translateY(10px);
width: 320px;
background: #1a1a1a; /* 深色背景符合专业感 */
border-radius: 8px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1001;
padding: 12px;
/* 顶部三角形箭头 */
&::before {
content: '';
position: absolute;
top: -6px; left: 50%;
transform: translateX(-50%);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #1a1a1a;
}
}
.dropdown-item {
display: flex;
padding: 16px;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
&:hover {
background: #262626;
.item-title { color: #C8161D; }
.item-link { color: #C8161D; }
}
}
.item-icon {
font-size: 24px;
margin-right: 16px;
padding-top: 2px;
}
.item-content {
flex: 1;
}
.item-title {
margin: 0 0 6px 0;
color: #fff;
font-size: 15px;
font-weight: 600;
transition: color 0.2s;
}
.item-desc {
margin: 0 0 8px 0;
color: #999;
font-size: 12px;
line-height: 1.5;
}
.item-link {
font-size: 12px;
color: #666;
font-weight: 500;
transition: color 0.2s;
}
</style>

View File

@@ -55,7 +55,7 @@ const activeIndex = ref(0);
const menuList = [
{ name: '可信开源态势感知平台(源感)' },
{ name: '金银湖代码安全大模型(源鉴)' },
{ name: '供应链安全检测系统(源链)'},
{ name: '供应链安全检测系统(源链)' },
{ name: '智能终端应用安全监测平台(源端)' }
];

View File

@@ -33,10 +33,10 @@
<div class="oneStop" :ref="(el) => setTargetRef(el, 'oneStop')" id="oneStop">
<div class="oneStopContent">
<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">
<img src="@/assets/v3/Line/jishu4.png" alt="技术优势图4" width="500px" height="300px" class="img1">
<!-- <img src="@/assets/v3/Line/jishu3.png" alt="技术优势图3" width="180px" class="img2"> -->
<img src="@/assets/v3/Line/jishu2.png" alt="技术优势图2" width="540px" height="350px" class="img3">
<img src="@/assets/v3/Line/jishu1.png" alt="技术优势图1" width="360px" height="300px" class="img4">
</div>
<div class="osRightMain">
<p class="osRightTitle">💡 技术优势</p>
@@ -62,24 +62,20 @@
<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>
<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>
<img src="@/assets/v3/Line/chuangxin1.png" alt="" width="600px">
<img src="@/assets/v3/Line/chuangxin2.png" alt="" width="600px">
</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>
<div class="multidimensional" style="opacity: 1">
@@ -93,12 +89,12 @@
<b>包管理器SCA引擎</b>针对常见包管理器如npmPyPIMaven的依赖分析引擎自动识别组件及其版本
</p>
</div>
<div style="width: 820px; margin-left: 34px;"><img src="@/assets/v3/Line/2-6-1.302b729e.png" alt=""
<div style="width: 820px; margin-left: 34px;"><img src="@/assets/v3/Line/chanpin1.png" alt=""
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>
<div style="width: 614px; margin-right: 40px;"><img src="@/assets/v3/Line/chanpin2.png" alt=""
width="714px" class="wdsdsf"></div>
<div>
<p><b>C/C++ SCA引擎</b>处理C/C++项目成分分析支持源代码和编译依赖扫描<br><br>
<b>二进制SCA引擎</b>针对二进制文件分析通过反编译和特征匹配识别成分和漏洞<br><br>
@@ -289,7 +285,7 @@ onUnmounted(() => {
font-weight: 500;
color: #fff;
line-height: 36px;
margin-top: 90px
margin-top: 90px;
}
.secondEdition .secondEditionContent .hadoop .hadoopdesc {
@@ -311,20 +307,29 @@ onUnmounted(() => {
}
.secondEdition .secondEditionContent .oneStop .oneStopContent {
display: flex
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start
}
.secondEdition .secondEditionContent .oneStop .oneStopContent .osLeftMain {
display: flex;
justify-content: flex-start;
align-items: flex-start;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 15px;
position: relative;
margin-bottom: 182px
margin-bottom: 182px;
margin-left: 290px;
width: 450px;
height: 320px;
flex-shrink: 0
}
.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain {
margin-left: 22px;
text-align: left
margin-left: 30px;
text-align: left;
flex: 1
}
.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain .osRightTitle {
@@ -336,7 +341,7 @@ onUnmounted(() => {
background: -webkit-linear-gradient(112deg, #ff8b75, #dd2476);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-top: 28px
margin-top: 0
}
.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain p {
@@ -352,42 +357,74 @@ onUnmounted(() => {
font-weight: 500
}
.secondEdition .secondEditionContent .oneStop .imgring,
.secondEdition .secondEditionContent .oneStop .osleftPosi {
.secondEdition .secondEditionContent .oneStop .imgring {
transition: 3s;
opacity: 0
}
.secondEdition .secondEditionContent .oneStop .osleftPosi1,
.secondEdition .secondEditionContent .oneStop .osleftPosi2 {
position: absolute;
right: -200px;
top: 102px;
transition: 2s;
.secondEdition .secondEditionContent .oneStop .osLeftMain img {
opacity: 0;
transition: all 2s ease-out;
position: absolute;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12)
}
.secondEdition .secondEditionContent .oneStop .osLeftMain .img1 {
left: -150px;
top: 10px;
z-index: 1
}
.secondEdition .secondEditionContent .oneStop .osleftPosi2 {
top: 317px;
right: 10px;
transition: 2.5s;
z-index: 2
.secondEdition .secondEditionContent .oneStop .osLeftMain .img2 {
right: -150px;
top: 0;
z-index: 3;
transition-delay: 0.3s
}
.secondEdition .secondEditionContent .oneStop.activeCode,
.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi,
.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1,
.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
.secondEdition .secondEditionContent .oneStop .osLeftMain .img3 {
left: -150px;
bottom: -50px;
z-index: 2;
transition-delay: 0.2s
}
.secondEdition .secondEditionContent .oneStop .osLeftMain .img4 {
right: -150px;
bottom: 20px;
z-index: 4;
transition-delay: 0.4s
}
.secondEdition .secondEditionContent .oneStop.activeCode {
opacity: 1
}
.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1 {
right: 10px
.secondEdition .secondEditionContent .oneStop.activeCode .osLeftMain img {
opacity: 1
}
.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
top: 217px
.secondEdition .secondEditionContent .oneStop.activeCode .osLeftMain .img1 {
left: -190px;
top: 15px
}
.secondEdition .secondEditionContent .oneStop.activeCode .osLeftMain .img2 {
right: 30px;
top: 0
}
.secondEdition .secondEditionContent .oneStop.activeCode .osLeftMain .img3 {
left: -150px;
bottom: 15px;
top: 100px;
}
.secondEdition .secondEditionContent .oneStop.activeCode .osLeftMain .img4 {
right: 15px;
bottom: 20px;
top: 200px;
}
.secondEdition .secondEditionContent .oneStop.activeCode .imgring {
@@ -399,7 +436,8 @@ onUnmounted(() => {
}
.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img {
opacity: 1
opacity: 1;
padding-top:10px;
}
.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img.highImg1 {
@@ -550,13 +588,13 @@ onUnmounted(() => {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 50px;
margin-top: 20px
margin-top: -20px
}
.secondEdition .secondEditionContent .multipleAnalyse .maContent {
height: 400px;
width: 723px;
background: url(@/assets/v3/Line/2-4-1.802eb322.png) no-repeat;
height: 150px;
width: 600px;
background: url(@/assets/v3/Line/kehu.png) no-repeat;
background-size: 100% 100%;
margin: 26px 0;
transition: 3s
@@ -628,7 +666,8 @@ onUnmounted(() => {
.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalPart img {
left: 0;
opacity: 1
opacity: 1;
top:10
}
.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalhalf img {
@@ -650,7 +689,7 @@ onUnmounted(() => {
left: 620px;
bottom: -20px;
opacity: 0;
transition: 3s
transition: 3s;
}
.secondEdition .secondEditionContent .multidimensinalPart p {
@@ -729,7 +768,9 @@ onUnmounted(() => {
transform: translateX(-50%);
transition: top 0.3s ease-in-out;
}
.wdsdsf{
margin-left: -100px;
}
html li {
list-style: none;
}
@@ -796,7 +837,7 @@ video {
.activeCode>img.activeImg {
right: 0;
top: 0px;
top: 30px;
opacity: 1;
width: 705px;
transition: 1s;

View File

@@ -257,7 +257,7 @@ const comparisonData = ref<FeatureSection[]>([
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #000;
background-color: #BD2025;
color: #fff;
text-decoration: none;
padding: 8px 16px;

View File

@@ -1,10 +1,21 @@
<template>
<div class="pricing">
<div class="pricing-container">
<header class="page-header">
<h1 class="page-title">定价</h1>
<p class="page-subtitle">查看我们的个人Business Enterprise 套餐定价</p>
</header>
<div class="title-group text-center mb-16">
<div class="flex justify-center items-center mb-6">
<div class="title-arrow-left"></div>
<h2 class="text-[36px] md:text-[42px] font-bold text-[#1a1a1a] px-6 tracking-tight">
定价
</h2>
<div class="title-arrow-right"></div>
</div>
<p class="text-[#888] text-[16px] leading-relaxed max-w-4xl mx-auto font-light">
查看我们的个人Business Enterprise 套餐定价
</p>
</div>
<div class="pricing-grid">
<div
@@ -300,7 +311,7 @@ const plans = ref<Plan[]>([
/* 按钮样式 */
.action-btn {
width: 100%;
background-color: #0d0d0d;
background-color: #BD2025;
color: #fff;
border: none;
padding: 12px 16px;
@@ -316,7 +327,7 @@ const plans = ref<Plan[]>([
}
.action-btn:hover {
background-color: #333;
background-color: #BD2025;
}
.arrow-icon {
@@ -370,7 +381,7 @@ const plans = ref<Plan[]>([
}
.card-footer a, .page-footer-link a {
color: #0d0d0d;
color: #BD2025;
text-decoration: underline;
text-underline-offset: 2px;
}
@@ -381,4 +392,30 @@ const plans = ref<Plan[]>([
font-size: 0.875rem;
color: #6e6e80;
}
/* 标题装饰三角形:严格对齐图片比例 */
.title-arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 14px solid #C8161D;
}
.title-arrow-right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 14px solid #C8161D;
}
/* 字体优化 */
h2, h3 {
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
p {
font-family: "PingFang SC", sans-serif;
letter-spacing: 0.02em;
}
</style>