文件操作 - TheHeader.vue

文件: /var/www/OLD/components/TheHeader.vue

编辑文件内容

const isFixed = ref(false);

const fixedHeader = () => {
  if (window.scrollY > 0) {
    isFixed.value = true;
  } else {
    isFixed.value = false;
  }
};

onMounted(() => {
  fixedHeader();
  window.addEventListener('scroll', fixedHeader);
  window.addEventListener('resize', fixedHeader);
});

onUnmounted(() => {
  window.removeEventListener('scroll', fixedHeader);
  window.removeEventListener('resize', fixedHeader);
});
</script>

<template>
  <header
    class="header"
    :class="{ fixed: isFixed }"
  >
    <div class="container">
      <NuxtLink
        :to="localePath('index')"
        class="logo"
        :aria-label="$t('header.home')"
      >
        <img
          src="/img/logo.png"
          srcset="/img/logo@2x.png 2x"
          alt=""
        />
      </NuxtLink>
      <div class="lang-switcher">
        <AppIcon name="global"></AppIcon>
        <NuxtLink
          class="lang-link link"
          :to="switchLocalePath('en')"
        >
          En
        </NuxtLink>
      </div>
      <AppButton class="btn-small header-btn">{{
        $t('header.signIn')
      }}</AppButton>
    </div>
  </header>
</template>

.logo {
  display: flex;
  max-width: 244px;
  margin-right: auto;
  @media @md {
    max-width: 170px;
  }
}

.lang-switcher {
  display: flex;
  gap: 8px;
  align-items: center;
  color: @title;
  @media @md {
    gap: 6px;
    font-size: 15px;
    .icon {
      --size: 20px;
    }
  }
}

.lang-link {
  &.router-link-active {
    color: inherit;
  }
}

.header-btn {
  padding: 0 30px;
  @media @md {
    padding: 0 22px;
  }
}
</style>

文件操作 - TheHeader.vue

文件: /var/www/OLD/components/TheHeader.vue

编辑文件内容

修改文件时间

删除文件