navHeader版本V3

components/NavHeader/index.module.scss

 .navHeader {
   width: 100%;
   height: 68px;
-  background: linear-gradient(360deg, #002157 0%, #00102c 100%);
+  background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -40,7 +40,7 @@
 
     .ant-tabs-tab-btn {
       font-size: 16px;
-      color: #fff;
+      color: #000;
       width: 90px;
       text-align: center;
       font-family: MicrosoftYaHei;
@@ -49,7 +49,6 @@
 
   :global .ant-tabs-tab-active {
     .ant-tabs-tab-btn {
-      color: #91c8ff !important;
     }
   }
 
@@ -65,29 +64,23 @@
 .btn1 {
   width: 120px;
   height: 40px;
-  background: linear-gradient(90deg, #278eff 0%, #0052da 100%);
-  border-radius: 6px;
-  border: 0;
+  border-radius: 0px;
   font-size: 16px;
   font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
   font-weight: bold;
   color: #ffffff;
-
-  &:hover {
-    opacity: 0.8;
-  }
 }
 
 .btn2 {
   box-sizing: border-box;
   width: 120px;
   height: 40px;
-  border-radius: 6px;
-  border: 1px solid #ffb02c;
+  border-radius: 0px;
+  border: 1px solid rgba(255, 85, 45, 1);
   font-size: 16px;
   font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
   font-weight: bold;
-  color: #ffb02c;
+  color: rgba(255, 85, 45, 1);
   background: none;
 }
 

components/NavHeader/index.tsx

-import React, { useState } from 'react';
-import { Avatar, Button, Space, Tabs } from 'antd';
-import type { TabsProps } from 'antd';
-import styles from './index.module.scss';
+import React, { useState } from "react";
+import { Avatar, Button, Space, Tabs } from "antd";
+import type { TabsProps } from "antd";
+import styles from "./index.module.scss";
 import { useRouter } from "next/router";
+import { PlusOutlined } from "@ant-design/icons";
 
 const items: TabsProps["items"] = [
   {
@@ -10,15 +11,15 @@ const items: TabsProps["items"] = [
     label: `  首页  `,
   },
   {
-    key: '/jobServices',
+    key: "/jobServices",
     label: `作业服务`,
   },
   {
-    key: '/equipmentLeasing',
+    key: "/equipmentLeasing",
     label: `设备租赁`,
   },
   {
-    key: '/flyingHandService',
+    key: "/flyingHandService",
     label: `飞手服务`,
   },
   {
@@ -38,7 +39,7 @@ const items: TabsProps["items"] = [
 export default function NavHeader() {
   const router = useRouter();
   const currentPath = router.asPath;
-  
+
   console.log("currentHash", currentPath);
   const onChange = (key: string) => {
     console.log(key);
@@ -47,23 +48,23 @@ export default function NavHeader() {
 
   return (
     <div className={styles.navHeader}>
-      <div className={styles.nav}> 
-      <div className={styles.logo}></div>
-      <Tabs
-        className={styles.tabs}
-        defaultActiveKey={currentPath}
-        items={items}
-        onChange={onChange}
-      />
-      <Space size={16} className={styles.btns}>
-        <Button type='primary' className={styles.btn1}>
-          + 发布信息
-        </Button>
-        <Button className={styles.btn2}>入驻加盟</Button>
-      </Space>
-      <div className={styles.haedImg}>
-        <Avatar size={48} style={{ background: '#fff' }}></Avatar>
-      </div>
+      <div className={styles.nav}>
+        <div className={styles.logo}></div>
+        <Tabs
+          className={styles.tabs}
+          defaultActiveKey={currentPath}
+          items={items}
+          onChange={onChange}
+        />
+        <Space size={16} className={styles.btns}>
+          <Button type="primary" className={styles.btn1}>
+            + 发布需求
+          </Button>
+          <Button className={styles.btn2}>入驻加盟</Button>
+        </Space>
+        <div className={styles.haedImg}>
+          <Avatar size={48} style={{ background: "#fff" }}></Avatar>
+        </div>
       </div>
     </div>
   );