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

Tcode平台改造升级-产品服务菜单修改

Browse Source
This commit is contained in:
fmk1023
2025-12-04 11:22:28 +08:00
parent 9e86d1e6bc
commit fcb247395b
1 changed files with 305 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
src/components/Header/index.vue
View File

@@ -251,13 +251,92 @@
<ul>
<li><a href="/" class="LNK router-link-exact-active router-link-active">首页</a></li>
<li><a href="javascript:;" class="LNK">产品服务 <i class="ico-arrow-down"></i></a>
<div class="nav-hover">
<ul class="hover-child">
<li class="child-item"><a href="/product/a" class="LNK">产品服务 A</a></li>
<li class="child-item"><a href="/product/b" class="LNK">产品服务 B</a></li>
<li>
<a href="javascript:;" rel="noopener noreferrer" class="LNK">产品服务</a>
<div class="nav-hover hover-product">
<div data-v-bc7d8fb8="" class="menu-zh">
<!-- 第一行：主标题 + 3个核心模块（复用menu-row1样式） -->
<div data-v-bc7d8fb8="" class="menu-row menu-row1">
<!-- 左侧垂直标题（复用原有渐变背景+垂直文字样式） -->
<div data-v-bc7d8fb8="" class="menu-row-title">全栈式开源安全检测与治理工具链</div>
<!-- 右侧模块容器（复用menu-row-items Flex布局） -->
<div data-v-bc7d8fb8="" class="menu-row-items">
<!-- 模块1：SBOM 自动化分析 -->
<div data-v-bc7d8fb8="" class="menu-section">
<span data-v-bc7d8fb8="" class="menu-section-title">SBOM 自动化分析</span>
<!-- <h4 data-v-bc7d8fb8="" class="item-tit">安全开发</h4>-->
<ul data-v-bc7d8fb8="" class="hover-child">
<li data-v-bc7d8fb8="" class="child-item">
<a data-v-bc7d8fb8="" href="javascript:;" class="LNK"><i data-v-bc7d8fb8="" class="ico-yh"></i>生成标准 CycloneDX/SPDX 物料清单，透视组件资产。</a>
</li>
<li data-v-bc7d8fb8="" class="child-item">
<a data-v-bc7d8fb8="" href="javascript:;" class="LNK">
了解详情 &gt;</a>
</li>
</ul>
</div>
<!-- 模块2：供应链漏洞检测分析 -->
<div data-v-bc7d8fb8="" class="menu-section">
<span data-v-bc7d8fb8="" class="menu-section-title">供应链漏洞检测分析</span>
<ul data-v-bc7d8fb8="" class="hover-child">
<li data-v-bc7d8fb8="" class="child-item">
<a data-v-bc7d8fb8="" href="javascript:;" class="LNK"><i data-v-bc7d8fb8="" class="ico-yh"></i>深度解析依赖树，精准定位 CVE 漏洞与传播路径。</a>
</li>
<li data-v-bc7d8fb8="" class="child-item">
<a data-v-bc7d8fb8="" href="javascript:;" class="LNK">
了解详情 &gt;</a>
</li>
</ul>
</div>
<!-- 模块3：恶意代码投毒检测 -->
<div data-v-bc7d8fb8="" class="menu-section">
<span data-v-bc7d8fb8="" class="menu-section-title">恶意代码投毒检测</span>
<ul data-v-bc7d8fb8="" class="hover-child">
<li data-v-bc7d8fb8="" class="child-item">
<a data-v-bc7d8fb8="" href="javascript:;" class="LNK"><i data-v-bc7d8fb8="" class="ico-yh"></i>识别依赖混淆、组件篡改及后门植入攻击。</a>
</li>
<li data-v-bc7d8fb8="" class="child-item">
<a data-v-bc7d8fb8="" href="javascript:;" class="LNK">
了解详情 &gt;</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 第二行：补充2个模块 -->
<div data-v-bc7d8fb8="" class="menu-row menu-row2">
<div data-v-bc7d8fb8="" class="menu-row-title">核心能力延伸</div>
<div data-v-bc7d8fb8="" class="menu-row-content product-content-row2">
<div data-v-bc7d8fb8="" class="content1 content1-custom-layout">
<a data-v-bc7d8fb8="" :href="item.link" class="link-item LNK product-link-card"
v-for="(item, index) in coreModules.slice(3)" :key="'mod-2-' + index">
<span data-v-bc7d8fb8="" class="link-item-title">
<strong>{{ item.title }}</strong>
</span>
<div data-v-bc7d8fb8="" class="link-item-body">
<p class="card-desc-row2">
{{ item.desc1 }}<br>
{{ item.desc2 }}
</p>
<span data-v-bc7d8fb8="" class="link-item-link">{{ item.linkText }}</span>
</div>
</a>
<div data-v-bc7d8fb8="" class="link-item link-item-placeholder"></div>
<div data-v-bc7d8fb8="" class="link-item link-item-placeholder"></div>
</div>
<div data-v-bc7d8fb8="" class="content2 content2-hidden"></div>
</div>
</div>
</div>
</div>
<!---->
</li>
<li><a href="javascript:;" class="LNK">解决方案 <i class="ico-arrow-down"></i></a>
@@ -317,11 +396,50 @@
</template>
<script setup lang="ts">
import {ref} from 'vue';
import {ref, reactive} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import {useAccountStore} from '@/stores/user';
import {emitEvent} from '@/utils/eventBus';
// 定义产品服务模块的数据
const coreModules = reactive([
{
title: 'SBOM 自动化分析',
desc1: '生成标准 CycloneDX/SPDX',
desc2: '物料清单，透视组件资产。',
link: '/sbom-analysis',
linkText: '[了解详情 >]'
},
{
title: '供应链漏洞检测分析',
desc1: '深度解析依赖树，精准定位',
desc2: 'CVE 漏洞与传播路径。',
link: '/supply-chain-vulnerability',
linkText: '[了解详情 >]'
},
{
title: '恶意代码投毒检测',
desc1: '识别依赖混淆、组件篡改',
desc2: '及后门植入攻击。',
link: '/malware-detection',
linkText: '[了解详情 >]'
},
{
title: '未知漏洞检测分析',
desc1: '基于代码指纹与污点分析，',
desc2: '发现 0-Day 及未披露风险。',
link: '/unknown-vulnerability',
linkText: '[了解详情 >]'
},
{
title: '许可证合规性检测',
desc1: '识别 GPL/MPL 等传染性',
desc2: '协议，规避法律合规风险。',
link: '/license-compliance',
linkText: '[了解详情 >]'
},
]);
const handleLogin = (type) => {
emitEvent('login', {type, triggerType: '主动注册'});
};
@@ -1179,4 +1297,75 @@ const handleLogin = (type) => {
letter-spacing: 8px;
margin: 0 10px
}
.menu-zh .menu-row.menu-row2 .menu-row-content.product-content-row2 {
background-color: #2d1d08 !important; /* 原智能运营平台背景色 */
border: 1px solid #ffa24b !important; /* 原智能运营平台边框 */
margin-left: 10px !important;
padding: 10px 20px !important;
width: 100% !important;
}
.content1-custom-layout {
padding: 15px 0 !important;
flex-wrap: wrap !important;
}
.link-item.product-link-card {
background: linear-gradient(135deg, #442e10, #44230c) !important;
color: #dcdbde !important;
display: block !important;
height: auto !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 24% !important;
padding: 15px 0 15px 15px !important; /* 调整内边距 */
margin: 7px .5% 0 !important;
min-height: 100px;
}
.link-item-title {
font-size: 14px;
font-weight: bold;
color: #ffcd68; /* 使用原 menu-row2 渐变的主色调 */
display: block;
margin-bottom: 5px;
}
.link-item-body {
font-size: 12px;
line-height: 1.4;
color: #dcdbde;
padding-right: 15px;
}
.card-desc-row2 {
margin: 0;
line-height: 1.4;
min-height: 36px; /* 确保两行描述的空间 */
}
.link-item-link {
display: block;
margin-top: 5px;
color: #ffa24b; /* 链接颜色 */
font-weight: 500;
}
.link-item-placeholder {
visibility: hidden;
width: 24% !important; /* 必须保留宽度 */
margin: 7px .5% 0 !important;
height: 0;
padding: 0 !important;
border: none !important;
background: none !important;
}
.content2-hidden {
display: none !important;
}
</style>