yf-portal-vue/src/components/home/header.vue

<template>
  <header
    class="fixed w-full top-0 z-100 bg-white border-b border-[#f0f2f5] shadow-sm"
  >
    <div
      class="max-w-[1200px] mx-auto flex items-center justify-between py-3 px-4"
    >
      <div class="flex items-center gap-2 cursor-pointer" @click="goHome">
        <img :src="logo" alt="logo" class="w-20 h-9" />
        <span class="text-[#02409b] text-[20px] font-bold border-l-2 pl-1"
          >DeepOil</span
        >
      </div>

      <nav class="hidden lg:flex flex-1 mx-4">
        <ul class="flex items-center gap-6 text-[#303133]">
          <li><a class="hover:text-[#409EFF] cursor-pointer">产品</a></li>
          <li><a class="hover:text-[#409EFF] cursor-pointer">解决方案</a></li>
          <li><a class="hover:text-[#409EFF] cursor-pointer">典型案例</a></li>
          <li><a class="hover:text-[#409EFF] cursor-pointer">平台服务</a></li>
          <li><a class="hover:text-[#409EFF] cursor-pointer">应用市场</a></li>
          <li><a class="hover:text-[#409EFF] cursor-pointer">开源社区</a></li>
        </ul>
      </nav>

      <div class="hidden lg:flex items-center gap-3">
        <div class="flex items-center gap-3">
          <a class="text-[#606266] cursor-pointer">控制台</a>
          <el-button type="primary" class="bg-[#0050b3]!"
            >登录 / 注册</el-button
          >
        </div>
      </div>

      <div class="lg:hidden">
        <el-button link @click="drawer = true">
          <i class="el-icon" />
          <Icon icon="fa:bars" class="icon" />
        </el-button>
      </div>
    </div>

    <el-drawer
      v-model="drawer"
      placement="right"
      size="80%"
      :with-header="false"
    >
      <div class="p-4 space-y-3">
        <ul class="flex flex-col gap-3 text-[#303133]">
          <li><a class="block py-2">产品</a></li>
          <li><a class="block py-2">解决方案</a></li>
          <li><a class="block py-2">典型案例</a></li>
          <li><a class="block py-2">平台服务</a></li>
          <li><a class="block py-2">应用市场</a></li>
          <li><a class="block py-2">开源社区</a></li>
        </ul>
        <div class="flex items-center gap-3 mt-3">
          <el-button type="primary" class="flex-1 bg-[#0050b3]!"
            >登录 / 注册</el-button
          >
        </div>
      </div>
    </el-drawer>
  </header>
</template>

<script setup lang="ts">
import { Icon } from "@iconify/vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
import logo from "@/assets/images/logo.png";

const router = useRouter();
const drawer = ref(false);

const goHome = () => {
  router.push({ path: "/" });
};
</script>

<style scoped></style>