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

src/components/Header/index.vue

@@ -2,45 +2,45 @@
   <div class="comHeader">
     <div class="nav-container">
       <a href="/" class="logo">
-        <img src="@/assets/imgs/logo2.png" alt="Tcode" class="logo-img">
+        <img src="@/assets/imgs/logo3.png" alt="Tcode" class="logo-img">
       </a>
 
       <div class="right-menu">
-        <ul class="nav-list">
-          <li><router-link to="/home" class="LNK">首页</router-link></li>
+<!--        <ul class="nav-list">-->
+<!--          <li><router-link to="/home" class="LNK">首页</router-link></li>-->
 
-          <li class="has-submenu">
-            <router-link to="/ProductServices" class="LNK">产品服务</router-link>
-          </li>
+<!--          <li class="has-submenu">-->
+<!--            <router-link to="/ProductServices" class="LNK">产品服务</router-link>-->
+<!--          </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="/solutions" class="LNK">解决方案</router-link></li>-->
+<!--&lt;!&ndash;          <li><router-link to="/data" class="LNK">数据服务</router-link></li>&ndash;&gt;-->
 
-          <li class="has-submenu dropdown-trigger">
-            <router-link to="/data" class="LNK">数据服务</router-link>
+<!--          <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>
+<!--            <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>
-        </ul>
+<!--          <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>-->
+<!--        </ul>-->
 
-        <a class="login-btn" @click="handleLogin('login')">控制台登录</a>
+        <a class="login-btn" @click="handleLogin('login')">登录</a>
       </div>
     </div>
   </div>
@@ -86,7 +86,7 @@ const handleLogin = (type) => {
   left: 0;
   width: 100%;
   height: 72px;
-  background: #fff;
+  background: #050505;
   z-index: 1000;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
   display: flex;

src/router/config/home.ts

@@ -20,14 +20,13 @@ export default [
       {
         path: '/home',
         name: 'home',
-        component: () => import('@/views/Jyh/Home/index.vue'),
+        component: () => import('@/views/Jyh/Situation/index.vue'),
         meta: {
-          micorApp: ['micoro-app-homeweb-app'],
-          hasMobile: true,
-          hiddenFooter: true,
-          reportTitle: '首页',
+          title: '态势感知中心',
+          reportTitle: '态势感知中心',
           className: 'w-full min-w-full',
-          headerClassName: '',
+          hiddenFooter: true,
+          hasMobile: true,
           asideMenu: 'drawer' // 左侧菜单抽屉模式
         }
       },

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;