Tcode运营平台改造升级-Header组件改造

src/components/Header/index.vue

@@ -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>