<template>
  <header class="home-page-header">
    <div class="header-logo">
      <router-link class="header-logo-link" to="/">
        <img
          class="header-logo-img"
          src="~@/assets/logo.png"
          alt="晶闪科技LOGO"
        />
      </router-link>
    </div>
    <HeaderNavMobile v-if="$isMobile" :nav="nav" />
    <HeaderNav v-else :nav="nav" />
  </header>
</template>
<script>
import HeaderNav from './HeaderNav.vue'
import HeaderNavMobile from './HeaderNavMobile.vue'

export default {
  name: 'HomePageHeader',
  components: { HeaderNav, HeaderNavMobile },
  data() {
    return {
      nav: [
        { title: '首页', route: '/' },
        { title: '关于晶闪', route: '/about' },
        { title: '企业文化', route: '/culture' },
        { title: '多彩晶闪', route: '/colorful' },
        { title: '加入我们', route: '/join-us' },
        // {
        //   title: '供应商',
        //   route: '/supplier',
        //   children: [
        //     { title: '申请加入', route: '/supplier-apply' },
        //     { title: '举报信', route: '/supplier-report' },
        //   ],
        // },
        { title: '联系我们', route: '/contact' },
      ],
    }
  },
}
</script>
<style lang="scss" scoped>
.home-page-header {
  width: 100%;
  height: var(--header-height);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;

  background-color: #000;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
}

.header-logo {
  height: 100%;
  margin-right: 100px;
}

.header-logo-link {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-logo-img {
  width: auto;
  height: 80%;
}

.header-nav-mobile {
  position: absolute;
  left: 20px;
}

@media screen and (max-width: 1000px) {
  .header-logo {
    margin-right: 0;
  }
}
</style>
