态势感知平台-项目初始化搭建及菜单修改、增加tabs滚动吸顶效果

src/views/Jyh/Situation/index.vue

@@ -10,8 +10,8 @@
         </div>
       </div>
     </header>
-
-    <nav class="tabs-nav">
+    <div ref="sentinelRef" class="sentinel"></div>
+    <nav class="tabs-nav" :class="{ 'is-fixed': isFixed }">
       <div
         v-for="tab in tabs"
         :key="tab.id"
@@ -35,9 +35,9 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import RiskMonitor from '@/views/Jyh/security/index.vue'; // 刚才写的地图大屏
-import EcoValuePan from '@/views/Jyh/ecosystem/index.vue'; // 另一个统计面板
+import { ref,onMounted,onUnmounted } from 'vue';
+import RiskMonitor from '@/views/Jyh/security/index.vue';
+import EcoValuePan from '@/views/Jyh/ecosystem/index.vue';
 
 const activeTab = ref('risk');
 
@@ -45,6 +45,31 @@ const tabs = [
   { id: 'risk', label: '全球开源风险态势感知监控中心', icon: 'fas fa-shield-virus' },
   { id: 'eco', label: '开源生态与贡献价值全景', icon: 'fas fa-chart-network' }
 ];
+
+const isFixed = ref(false);
+const sentinelRef = ref(null);
+
+let observer = null;
+
+onMounted(() => {
+  // 交叉观察者逻辑
+  observer = new IntersectionObserver(([entry]) => {
+    // entry.boundingClientRect.top < 0 表示哨兵已经滚到了视口上方以外
+    // !entry.isIntersecting 表示哨兵不再可见
+    isFixed.value = !entry.isIntersecting && entry.boundingClientRect.top < 0;
+  }, {
+    threshold: [0, 1],
+    rootMargin: '-1px 0px 0px 0px' // 触发微调
+  });
+
+  if (sentinelRef.value) {
+    observer.observe(sentinelRef.value);
+  }
+});
+
+onUnmounted(() => {
+  if (observer) observer.disconnect();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -53,7 +78,7 @@ const tabs = [
   background: #020617; /* 深蓝黑底色 */
   color: #fff;
   padding: 20px;
-  display: flex;
+  display: block;
   flex-direction: column;
 }
 
@@ -94,14 +119,37 @@ const tabs = [
     }
   }
 }
-
+.sentinel {
+  height: 1px;
+  width: 100%;
+  visibility: hidden;
+}
+.nav-placeholder {
+  height: 60px; /* 需与你的 tabs-nav 实际高度一致 */
+}
 /* 科技 Tabs 样式 */
 .tabs-nav {
   display: flex;
   justify-content: center;
   gap: 40px;
-  margin-bottom: 20px;
   border-bottom: 1px solid rgba(56, 189, 248, 0.1);
+  background: #020617;
+  transition: all 0.3s;
+  height: 60px; /* 固定高度方便占位 */
+
+  &.is-fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 2000;
+    padding: 0 20px;
+    background: rgba(2, 6, 23, 0.95);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    border-bottom: 1px solid rgba(56, 189, 248, 0.3);
+    animation: slideDown 0.4s ease-out; /* 可选：增加下滑动效 */
+  }
 
   .tab-item {
     position: relative;