helper-center/packages/web/src/components/header.vue

<template>
  <div class="header grid min-h-sm w-full  flex flex-col">
    <div class="w-full h-[100px] flex max-w-screen-xl my-0 mx-auto justify-between items-center">
      <div class="logo">
        <a href="/"> <img src="@/assets/img/logo_4dge_cn.png" alt="logo" /></a>
      </div>
      <div class="menu">
        <n-dropdown :options="options" @select="handleSelect">
          <n-button type="primary" ghost>{{ locale === 'zh' ? $t('zh') : $t('en') }}</n-button>
        </n-dropdown>
      </div>
    </div>

    <div class="search-box w-full flex justify-center items-center flex-col">
      <n-h1 class="font-size-[48px] font-500">{{ $t('helperTip') }}</n-h1>
      <n-input class="max-w-[640px]" size="large" round placeholder="输入关键字">
        <template #prefix>
          <n-icon :component="SearchOutline" />
        </template>
      </n-input>
    </div>
  </div>
</template>
<script setup lang="ts">
import { NH1, NInput, NIcon, NDropdown, NButton } from 'naive-ui'
import { SearchOutline } from '@vicons/ionicons5'

const { t, locale } = useI18n()

const options = ref([
  {
    label: t('zh'),
    key: 'zh',
  },
  {
    label: t('en'),
    key: 'en',
  },
])

const handleSelect = (key: string) => {
  locale.value = key
}
</script>
<style>
.header {
  background-image: url('@/assets/img/banner_bg1.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}
</style>