221213

nuxt-demo/app/components/AppHead/index.vue

@@ -6,34 +6,35 @@
     <div style="display: flex">
       <nav class="nav_list">
         <ul>
-          <li><NuxtLink to="/">首页</NuxtLink></li>
+          <li :class="{ active: isActive('/') }"><NuxtLink to="/">首页</NuxtLink></li>
           <li
+            :class="{ active: isActive('/product') }"
             @mouseenter="isProductHovered = true"
             @mouseleave="isProductHovered = false"
           >
-            <NuxtLink to="">产品</NuxtLink>
+            <NuxtLink to="/product">产品</NuxtLink>
             <span v-if="isProductHovered">
-              <a
-                v-for="(item, index) in 5"
+              <NuxtLink
+                v-for="(item, index) in proList"
                 :key="index"
                 v-motion
-                href=""
+                :to="item.path"
                 :initial="{ opacity: 0, y: -10 }"
                 :enter="{ opacity: 1, y: 0, transition: { delay: index * 50, duration: 300 } }"
                 :leave="{ opacity: 0, y: -10, transition: { duration: 200 } }"
               >
-                产品{{index}}
-              </a>
+                {{item.name}}
+              </NuxtLink>
             </span>
           </li>
-          <li>
+          <li :class="{ active: isActive('/solution') }">
             <NuxtLink to="/solution">解决方案</NuxtLink>
           </li>
-          <li><NuxtLink to="/new">新闻资讯</NuxtLink></li>
-          <li><NuxtLink to="/case">合作案例</NuxtLink></li>
-          <li><NuxtLink to="">服务流程</NuxtLink></li>
-          <li><NuxtLink to="/about">关于秦安</NuxtLink></li>
-          <li><NuxtLink to="">秦安安全大模型</NuxtLink></li>
+          <li :class="{ active: isActive('/new') }"><NuxtLink to="/new">新闻资讯</NuxtLink></li>
+          <li :class="{ active: isActive('/case') }"><NuxtLink to="/case">合作案例</NuxtLink></li>
+          <li :class="{ active: isActive('/service') }"><NuxtLink to="/service">服务流程</NuxtLink></li>
+          <li :class="{ active: isActive('/about') }"><NuxtLink to="/about">关于秦安</NuxtLink></li>
+          <li :class="{ active: isActive('/model') }"><NuxtLink to="/model">秦安安全大模型</NuxtLink></li>
         </ul>
         <div class="num">股票代码：871771</div>
       </nav>
@@ -42,6 +43,23 @@
 </template>
 <script setup lang="ts">
 const isProductHovered = ref(false);
+const route = useRoute();
+
+const isActive = (path: string) => {
+  if (path === "/") {
+    return route.path === "/";
+  }
+  return route.path.startsWith(path);
+};
+
+const proList = [
+  { name: '基层监管平台', path: '/product/regulatory' },
+  { name: 'GBS数字底座', path: '/product/gbs' },
+  { name: '一体化智能云平台', path: '/product/cloud' },
+  { name: '安全培训开发者平台', path: '/product/training' },
+  { name: '服务机构自我赋能平台', path: '/product/service' },
+  { name: '应急管理大数据中心', path: '/product/emergency' }
+];
 </script>
 <style scoped lang="scss">
 .head_container{
@@ -101,6 +119,14 @@ const isProductHovered = ref(false);
             opacity: 0;
           }
         }
+        &.active{
+          a{
+            &:before{
+              opacity: 1;
+              left: 0;
+            }
+          }
+        }
         &:hover{
           a{
             &:before{

nuxt-demo/app/pages/product/regulatory.vue

@@ -0,0 +1,12 @@
+
+
+<template>
+  <div>seft</div>
+</template>
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+
+</style>