compdfkit_web_cn/components/Header.vue

<template>
  <header class="fixed top-0 z-100 w-full lg:bg-white" :class="[scrollTop && 'border-b-1px border-b-[#CDDFFF]',show ? '<lg:h-100vh bg-black' : 'bg-white <lg:h-66px <lg:overflow-hidden']">
    <div class="container relative lg:flex lg:items-center">
      <div class="<lg:flex <lg:justify-between <lg:items-center <lg:py-17px">
        <a class="flex items-center lg:mr-28px" href="/">
          <Logo class="<lg:w-32px <lg:h-32px" />
          <span class="font-bold lg:ml-10px <lg:ml-8px <lg:text-20px <lg:leading-24px" :class="show && 'text-white'">ComPDFKit</span>
        </a>
        <div class="pro-icon-container lg:hidden <lg:inline-block p-3px cursor-pointer" :class="{active: show}" @click="toggleMenu">
          <div class="line-container w-14px h-14px">
            <div class="line relative w-14px h-2px" :class="show ? 'bg-white' : 'bg-black'"></div>
            <div class="line relative top-4px w-14px h-2px" :class="show ? 'bg-white' : 'bg-black'"></div>
            <div class="line relative top-8px w-14px h-2px" :class="show ? 'bg-white' : 'bg-black'"></div>
          </div>
        </div>
      </div>
      <div class="relative left-1/2 w-[100vw] transform translate-x-[-50%] h-1px lg:hidden bg-white/20" :class="{ active: show }"></div>
      <div class="lg:flex lg:items-center lg:flex-1">
        <nav class="lg:relative lg:flex text-brand-1 px-28px">
          <Link
            class="<lg:block font-bold lg:text-sm lg:mr-50px lg:py-28px <lg:py-20px lg:px-2px <lg:text-14px <lg:leading-20px <lg:text-white lg:hover:text-brand-0 <lg:border-b-1px <lg:border-[#2F2F2F]"
            href="/"
          >首页</Link>
        </nav>
        <div class="flex lg:flex-1 lg:justify-end <lg:justify-center <lg:items-center <lg:mt-50px <tiny:px-10px">
          <LinkButton type="plain" primary bold class="!@md:max-w-332px !@tiny:max-w-242px !@sm:max-w-240px <lg:mr-16px bg-brand-0 text-white text-sm lg:mr-12px" href="/contact-sales">获取报价</LinkButton>
          <LinkButton type="border" primary bold class="!@md:max-w-332px !@tiny:max-w-242px !@sm:max-w-240px border border-brand-0 text-brand-0" href="javascript:;">联系我们</LinkButton>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
import Logo from '~/assets/images/icons/logo.svg?inline'
import Arrow from '~/assets/images/icons/arrow.svg?inline'
import Contact from '~/assets/images/icons/contact.svg?inline'

export default {
  components: {
    Logo,
    Arrow,
    Contact
  },
  props: {
    platform: {
      default: 'iOS'
    }
  },
  data () {
    return {
      tabPlatform: 'Mac',
      scrollTop: false,
      activeTag: '',
      show: false
    }
  },
  computed: {
    pdfSdkActive () {
      return ['pdf-sdk'].includes(this.$route.name)
    },
    pdfConversionSdkActive () {
      return ['pdf-conversion-sdk'].includes(this.$route.name)
    },
    productsActive () {
      return this.pdfSdkActive || this.pdfConversionSdkActive || this.$route.name.indexOf('pdf-sdk') === 0
    },
    documentActive () {
      return 'guides-platform' === this.$route.name
    },
    blogActive () {
      return 'blog' === this.$route.name.split('-')[0]
    }
  },
  mounted () {
    window.addEventListener('scroll', this.onScroll)
    this.onScroll()
  },
  methods: {
    onScroll () {
      this.scrollTop = window.scrollY > 0
    },
    toggleDropMenu (tag) {
      if (this.activeTag) {
        this.activeTag = this.activeTag === tag ? '' : tag
      } else {
        this.activeTag = tag
      }
    },
    toggleMenu () {
      this.show = !this.show
    },
    checkActive (platform) {
      return this.documentActive && this.$route.params.platform === platform
    },
    handleDocument (tabPlatform) {
      if (this.tabPlatform === tabPlatform) return
      this.tabPlatform = tabPlatform
    }
  },
}
</script>

<style lang="scss" scoped>
  .line {
    transition: transform 0.2s linear 0s, top 0.2s linear 0s;
    &:first-child.bg-white {
      transform: rotate(45deg);
      top: 6px;
    }
    &:nth-child(2).bg-white {
      opacity: 0;
    }
    &:nth-child(3).bg-white {
      top: 2px;
      transform: rotate(-45deg);
    }
  }
  @media screen and (min-width: 930px) {
    .dropdown:hover .dropdown-menu {
      display: flex;
    }
    .dropdown:hover .arrow {
      transition: transform 0.2s linear 0s, top 0.2s linear 0s;
      transform: rotate(90deg);
      -ms-transform: rotate(90deg); 	/* IE 9 */
      -moz-transform: rotate(90deg); 	/* Firefox */
      -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
      -o-transform: rotate(90deg); 
    }
    .dropdown-menu {
      box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.1);
    }
    .dropdown-sdk:hover {
      > a {
        background-color: #F8FAFF;
        color: #1460F3;
      }
      div {
        display: flex;
      }
    }
  }
  @media screen and (min-width: 1280px) {
    .container {
      max-width: 1320px;
    }
  }
</style>