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

src/components/Header/index.vue

@@ -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>
+        <li>
-          <div class="nav-hover">
+          <a href="javascript:;" rel="noopener noreferrer" class="LNK">产品服务</a>
-            <ul class="hover-child">
+          <div class="nav-hover hover-product">
-              <li class="child-item"><a href="/product/a" class="LNK">产品服务 A</a></li>
+            <div data-v-bc7d8fb8="" class="menu-zh">
-              <li class="child-item"><a href="/product/b" class="LNK">产品服务 B</a></li>
+              <!-- 第一行：主标题 + 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>