From 785d783226468eab9b579da0c9e787b6c524dafe Mon Sep 17 00:00:00 2001 From: fmk1023 Date: Thu, 18 Dec 2025 17:30:10 +0800 Subject: [PATCH] =?UTF-8?q?Tcode=E8=BF=90=E8=90=A5=E5=B9=B3=E5=8F=B0?= =?UTF-8?q?=E6=94=B9=E9=80=A0=E5=8D=87=E7=BA=A7-Header=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E6=94=B9=E9=80=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header/index.vue | 132 +++++++++++++++++++++++++++++++- 1 file changed, 131 insertions(+), 1 deletion(-) diff --git a/src/components/Header/index.vue b/src/components/Header/index.vue index d96d89a..e7a9063 100644 --- a/src/components/Header/index.vue +++ b/src/components/Header/index.vue @@ -14,7 +14,27 @@
  • 解决方案
  • -
  • 数据服务
  • + + + +
  • 态势感知中心
  • 定价
  • 关于我们
  • @@ -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; +}