1

components/AppHeader/TopBar/TopBar.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import {useConfigInfo} from "~/composables/configState";
+import {Search} from '@element-plus/icons-vue'
+import Logo from "~/components/AppHeader/Logo/Logo.vue"
+const config = useConfigInfo();
+const keyword = ref<string>('');
+const i18n = useI18n();
+const onSearch = () => {
+  window.location.href = `/${i18n.locale.value}/search/${keyword.value}`;
+}
+</script>
+
+<template>
+  <div :style="{background: `url(${config.siteLogoBg})`}"
+       class="text-gray-400 px-0 h-[100px]">
+    <div class="xl:w-screen-xl m-auto flex justify-between items-center h-[100px]">
+      <Logo/>
+      <div class="flex justify-between w-full text-center items-center">
+        <div class="logo"></div>
+        <div class="search">
+          <div class="fl mr-5">
+            <el-input v-model="keyword" :placeholder="`${$t('searchKeywords')}...`" :suffix-icon="Search"
+                      @change="onSearch"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>