<template>
|
<header class="bg-white shadow-sm flex items-center">
|
<div class=" flex w-full">
|
<div class="flex items-center h-20 mx-auto">
|
<!-- Logo -->
|
<div class="flex items-center cursor-pointer">
|
<router-link to="/">
|
<img :src="headerLogo" alt="Logo" class="h-20 w-auto" />
|
</router-link>
|
<!-- <span class="text-extra-large font-bold">工业大数据平台</span> -->
|
</div>
|
|
<!-- Navigation Menu -->
|
<nav class="flex ml-8">
|
<el-menu mode="horizontal" :ellipsis="false" class="border-none" router :default-active="activeRoute">
|
<el-menu-item index="/" class="!px-4">首页</el-menu-item>
|
<el-menu-item index="/industrial-software" class="!px-4">工业软件|工业APP</el-menu-item>
|
<el-menu-item index="/supply-demand" class="!px-4">供需对接</el-menu-item>
|
<el-menu-item index="/application" class="!px-4">应用推广</el-menu-item>
|
<el-menu-item index="/public-service" class="!px-4">公共服务</el-menu-item>
|
</el-menu>
|
</nav>
|
|
<!-- Search and User Actions -->
|
<div class="flex items-center space-x-8 ml-[65px]">
|
<el-input v-model="searchQuery" placeholder="找工业/找大数据" class="w-48 ">
|
<template #suffix>
|
<el-icon><Search /></el-icon>
|
</template>
|
</el-input>
|
|
<div class="flex items-center text-gray-600 text-sm text-nowrap ">
|
<a href="#" class="hover:text-blue-500">注册</a>
|
<span class="mx-2">·</span>
|
<a href="#" class="hover:text-blue-500">登录</a>
|
</div>
|
</div>
|
</div>
|
</div>
|
</header>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, computed } from 'vue';
|
import { useRoute } from 'vue-router';
|
import { Search } from '@element-plus/icons-vue';
|
import headerLogo from '@/assets/logo/header_logo.png';
|
const route = useRoute();
|
const searchQuery = ref('');
|
|
const activeRoute = computed(() => route.path);
|
</script>
|
|
<style scoped>
|
:deep(.el-menu--horizontal .el-menu-item) {
|
height: 64px;
|
line-height: 64px;
|
font-size: 14px;
|
}
|
|
:deep(.el-menu--horizontal) {
|
border-bottom: none;
|
}
|
</style>
|
