You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
2.0 KiB
92 lines
2.0 KiB
<template>
|
|
<div
|
|
:class="
|
|
activeIndex == 0 ? 'header_container' : 'header_container not_first'
|
|
"
|
|
>
|
|
<img :src="logo()" alt="logo" />
|
|
<ul :class="fontColor()">
|
|
<li><router-link to="/index">首页</router-link></li>
|
|
<li><router-link to="/case">工业设计</router-link></li>
|
|
<li><router-link to="/soft-hardware">软硬件研发</router-link></li>
|
|
<li><router-link to="/culture">企业文化</router-link></li>
|
|
<li><router-link to="/about">关于</router-link></li>
|
|
<li><router-link to="/about">招聘</router-link></li>
|
|
<li><router-link to="/contact">联系</router-link></li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Logo1 from '@/assets/img/banner/logo1.png'
|
|
import Logo from '@/assets/img/banner/logo.png'
|
|
import { useSwiperStore } from '@/store'
|
|
import { onMounted, ref, watch } from 'vue'
|
|
import { storeToRefs } from 'pinia'
|
|
const swiperStore = useSwiperStore()
|
|
const { activeIndex } = storeToRefs(swiperStore)
|
|
const logo = () => {
|
|
if (swiperStore.activeIndex == 0) {
|
|
if ([4].includes(swiperStore.headerIndex)) return Logo1
|
|
}
|
|
return Logo
|
|
}
|
|
|
|
const fontColor = () => {
|
|
if (swiperStore.activeIndex == 0) {
|
|
if ([2, 3, 4].includes(swiperStore.headerIndex)) {
|
|
return 'flex_center white'
|
|
}
|
|
}
|
|
return 'flex_center font_change'
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.header_container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
z-index: 999;
|
|
background: none;
|
|
padding: 0 87px;
|
|
height: $header_height;
|
|
white-space: nowrap;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
font-size: 18px;
|
|
li {
|
|
margin: 0 30px;
|
|
}
|
|
}
|
|
.flex_center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
li {
|
|
a {
|
|
color: $default_color;
|
|
}
|
|
.router-link-active {
|
|
color: $theme_color;
|
|
}
|
|
.white {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.font_change {
|
|
li {
|
|
a {
|
|
color: $point_default;
|
|
}
|
|
}
|
|
}
|
|
.not_first {
|
|
background: #fff;
|
|
}
|
|
</style>
|