344 lines
9.2 KiB
Vue
344 lines
9.2 KiB
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="/public">首页</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/legal') }"
|
||
@mouseenter="isRuleHovered = true"
|
||
@mouseleave="isRuleHovered = false"
|
||
>
|
||
<NuxtLink to="">政策法规</NuxtLink>
|
||
<span v-if="isRuleHovered">
|
||
<NuxtLink
|
||
v-for="(item, index) in RuleList"
|
||
: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('/evaluation') }"><NuxtLink to="/evaluation">安全评价</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('/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>
|