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.
114 lines
2.6 KiB
114 lines
2.6 KiB
<template>
|
|
<div
|
|
:class="
|
|
activeIndex == 0 ? 'header_container' : 'header_container not_first'
|
|
"
|
|
>
|
|
<img :src="logo()" alt="logo" />
|
|
<ul :class="fontColor()">
|
|
<li :class="getActiveClass(0)" @click="scrollToPage(0)">首页</li>
|
|
<li :class="getActiveClass(3)" @click="scrollToPage(3)">工业设计</li>
|
|
<li :class="getActiveClass(5)" @click="scrollToPage(5)">软硬件研发</li>
|
|
<li :class="getActiveClass(10)" @click="scrollToPage(10)">结构开发</li>
|
|
<li :class="getActiveClass(13)" @click="scrollToPage(13)">企业文化</li>
|
|
<li :class="getActiveClass(14)" @click="scrollToPage(14)">加入我们</li>
|
|
<li :class="getActiveClass(15)" @click="scrollToPage(15)">联系我们</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Logo1 from '@/assets/img/banner/logo1.png'
|
|
import Logo from '@/assets/img/banner/logo.png'
|
|
import LogoWhite from '@/assets/img/banner/logo3.png'
|
|
import { useSwiperStore, useCountStore } from '@/store'
|
|
import { onMounted, ref, watch } from 'vue'
|
|
import { storeToRefs } from 'pinia'
|
|
const swiperStore = useSwiperStore()
|
|
const countStore = useCountStore()
|
|
const { activeIndex } = storeToRefs(swiperStore)
|
|
|
|
const getActiveClass = index => {
|
|
if (swiperStore.activeIndex == index) {
|
|
return 'active'
|
|
}
|
|
return ''
|
|
}
|
|
|
|
const scrollToPage = index => {
|
|
// 让数字动
|
|
swiperStore.swiper.slideTo(index, 1000, false)
|
|
if (index == 3) {
|
|
setTimeout(() => {
|
|
countStore.countAdd()
|
|
})
|
|
}
|
|
if (index == 5) {
|
|
setTimeout(() => {
|
|
countStore.countAddI()
|
|
})
|
|
}
|
|
}
|
|
|
|
const logo = () => {
|
|
if (swiperStore.activeIndex == 0) {
|
|
if ([4].includes(swiperStore.headerIndex)) return LogoWhite
|
|
}
|
|
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;
|
|
color: $default_color;
|
|
li {
|
|
cursor: pointer;
|
|
}
|
|
.active {
|
|
color: $theme_color;
|
|
}
|
|
.white {
|
|
color: #fff;
|
|
}
|
|
}
|
|
.font_change {
|
|
li {
|
|
color: $point_default;
|
|
}
|
|
}
|
|
.not_first {
|
|
background: #fff;
|
|
}
|
|
</style>
|