qa_portal_vue/app/components/AppHead/index.vue

<template>
  <header class="head_container" :class="{ scrolled: isScrolled }">
    <div class="logo">
      <div class="logo_b"><img src="../../assets/images/logo.png" alt="河北秦安安全科技股份有限公司"/></div>
      <div class="logo_w"> <img src="../../assets/images/logo1.png" alt="河北秦安安全科技股份有限公司"/></div>
    </div>
    <div style="display: flex">
      <nav class="nav_list">
        <ul>
          <li :class="{ active: isActive('/') }"><NuxtLink to="/">首页</NuxtLink></li>
          <li
            :class="{ active: isActive('/product') }"
            @mouseenter="isProductHovered = true"
            @mouseleave="isProductHovered = false"
          >
            <NuxtLink to="">产品</NuxtLink>
            <span v-if="isProductHovered">
              <NuxtLink
                v-for="(item, index) in proList"
                :key="index"
                v-motion
                :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 } }"
              >
                {{item.name}}
              </NuxtLink>
            </span>
          </li>
          <li :class="{ active: isActive('/solution') }">
            <NuxtLink to="/solution">解决方案</NuxtLink>
          </li>
          <li :class="{ active: isActive('/new') }"><NuxtLink to="/new">新闻资讯</NuxtLink></li>
          <li :class="{ active: isActive('/rule') }"><NuxtLink to="/rule">政策法规</NuxtLink></li>
          <li :class="{ active: isActive('/service') }"><NuxtLink to="/service">业务与服务</NuxtLink></li>
          <li :class="{ active: isActive('/public') }"><NuxtLink to="/public">网上公开</NuxtLink></li>
          <li :class="{ active: isActive('/case') }"><NuxtLink to="/case">合作案例</NuxtLink></li>
          <li :class="{ active: isActive('/job') }"><NuxtLink to="/job">人力资源</NuxtLink></li>
          <li
            :class="{ active: isActive('/product') }"
            @mouseenter="isAboutHovered = true"
            @mouseleave="isAboutHovered = false"
          >
            <NuxtLink to="">关于秦安</NuxtLink>
            <span v-if="isAboutHovered">
              <NuxtLink
                v-for="(item, index) in AboutList"
                :key="index"
                v-motion
                :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 } }"
              >
                {{item.name}}
              </NuxtLink>
            </span>
          </li>
          <li :class="{ active: isActive('https://safetyds.qhdsafety.com/#/safety_chat') }"><NuxtLink to="https://safetyds.qhdsafety.com/#/safety_chat"  target="_blank">秦安安全大模型</NuxtLink></li>
        </ul>
        <div class="num">股票代码：871771</div>
      </nav>
    </div>
  </header>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";

const isProductHovered = ref(false);
const isAboutHovered = ref(false);
const isRuleHovered = ref(false);
const isScrolled = ref(false);
const route = useRoute();

const handleScroll = () => {
  isScrolled.value = window.scrollY > 50;
};

onMounted(() => {
  window.addEventListener("scroll", handleScroll);
});

onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
});

const isActive = (path: string) => {
  if (path === "/") {
    return route.path === "/";
  }
  return route.path.startsWith(path);
};

const proList = [
  { name: "基层监管平台", path: "/product/regulatory" },
  { name: "GBS数字底座", path: "" },
  { name: "一体化智能云平台", path: "" },
  { name: "安全培训开发者平台", path: "" },
  { name: "服务机构自我赋能平台", path: "" },
  { name: "应急管理大数据中心", path: "" },
];
const AboutList=[
  { name: "公司简介", path: "/about" },
  { name: "领导致词", path: "/about/leaderSpeech" },
  { name: "发展战略", path: "/about/developmentStrategy" },
  { name: "组织架构", path: "/about/organizationalStructure" },
  { name: "资质荣誉", path: "/about/honor" },
  { name: "发展历程", path: "/about/developmentHistory" },
];
const RuleList= [
  { name: "法律法规", path: "/rule/legal" },
  { name: "政府规章", path: "/rule/government" },
  { name: "规范文件", path: "/rule/specification" },
  { name: "技术标准", path: "/rule/technicalStandards" },
];
</script>
<style scoped lang="scss">
.head_container{
  min-width: 1400px;
  width: 100%;
  height: 70px;
  background: rgba(4,17,40,0.52);
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  transition: all 0.3s ease;

  &.scrolled{
    position: fixed;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    .nav_list{
      .num{
        color: #222222;
      }
      ul li{
        color: #222222;
        a{
          color: #222222;
          text-decoration: none;
          &:before{
            background-color: #1d78ff;
            left: 50%;
            right: 50%;
          }
        }

        &.active a:before,
        &:hover a:before{
          left: 0;
          right: 0;
        }

        &.active a{
          color: #222222;

        }
        &:hover{
          color: #1d78ff;
          background: #ddebff;
        }
        span{
          a{
            color: #222222;
           &:before{
           display: none;
          }
            &:hover{
              color: #222222;
              background: #ddebff;
            }
          }
        }
      }
    }
  }

  .logo{
    position: relative;
    width: 150px;
    height: 50px;

    .logo_b, .logo_w{
      position: absolute;
      top: 10px;
      left: 0;
      width: 128px;
      height: 32px;
      transition: opacity 0.3s ease;

      img{
        width: 128px;
        height: 32px;
        object-fit: contain;
      }
    }

    .logo_w{
      opacity: 0;
    }

    .logo_b{
      opacity: 1;
    }
  }

  &.scrolled{
    .logo{
      .logo_b{
        opacity: 0;
      }
      .logo_w{
        opacity: 1;
      }
    }
  }

  .nav_list{
    display: flex;
    justify-content: space-between;
    align-items: center;

    .num{
      color: #ffffff;
      font-size: 14px;
      margin-left: 50px;
    }
     ul{
      display: flex;
      justify-content: space-between;
      li{
        list-style: none;
        color: #ffffff;
        padding: 0 15px;
        font-size: 14px;
        box-sizing: border-box;
        position: relative;
        a{
          color: #ffffff;
          text-decoration: none;
          cursor: pointer;
          display: inline-block;
          position: relative;
          height: 70px;
          line-height: 70px;
          &:before{
            content: "";
            position: absolute;
            z-index: 1;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            bottom: 0;
            background-color: #ffffff;
            height: 2px;
            left: 50%;
            right: 50%;
            border-radius: 2px 2px 0 0;
            opacity: 0;
          }
        }

        &.active{
          a{
            &:before{
              opacity: 1;
              left: 0;
              right: 0;
            }
          }
        }
        &:hover{
          a{
            &:before{
              opacity: 1;
              left: 0;
              right: 0;
            }
          }
        }

        span{
          position: absolute;
          top: 70px;
          background: #fff;
          width: 200px;
          text-align: center;
          left: 50%;
          margin-left: -100px;
          box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08);
          padding: 10px 0;
          border-radius: 4px;
          z-index: 999999;
          border-bottom: 1px solid #eeeeee !important;
          a{
            color: #333333;
            display: block;
            width: 100%;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #eeeeee !important;
            text-decoration: none;
            &:hover{
              color: #222222;
              background: #ddebff;
            }
          }
        }
      }

    }
  }


}
</style>