全局头部NavHeader开发

src/components/NavHeader/index.module.scss

+.navHeader {
+  width: 100%;
+  height: 120px;
+  background: #1661f5;
+  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo {
+  width: 181px;
+  height: 120px;
+  background-image: url(./assets/logo.png);
+  background-size: 100% 100%;
+}
+
+.tabs {
+  margin-right: 58px;
+
+  :global .ant-tabs-nav {
+    height: 120px;
+    margin-bottom: 0;
+
+    &::before {
+      border: 0;
+    }
+  }
+
+  :global .ant-tabs-tab {
+    & + .ant-tabs-tab {
+      margin-left: 0px;
+    }
+
+    .ant-tabs-tab-btn {
+      font-size: 16px;
+      color: #fff;
+      width: 90px;
+      text-align: center;
+    }
+  }
+
+  :global .ant-tabs-tab-active {
+    .ant-tabs-tab-btn {
+      color: #fff !important;
+    }
+  }
+
+  :global .ant-tabs-ink-bar {
+    width: 28px !important;
+    height: 6px !important;
+    background: #ffffff;
+    border-radius: 8px;
+    transform: translateX(30px);
+  }
+}
+
+.btns {
+  margin-right: 25px;
+}
+
+.btn1 {
+  width: 116px;
+  height: 50px;
+  background: linear-gradient(90deg, #ffb02c 0%, #ff7d34 100%);
+  border-radius: 8px;
+  border: 0;
+  font-size: 16px;
+  font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+  font-weight: bold;
+  color: #ffffff;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.btn2 {
+  box-sizing: border-box;
+  width: 116px;
+  height: 50px;
+  border-radius: 8px;
+  border: 1px solid #ffffff;
+  font-size: 16px;
+  font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+  font-weight: bold;
+  color: #ffffff;
+  background: none;
+}
+
+
+.headImg {
+  width: 48px;
+  height: 48px;
+  background: #ffffff;
+}

src/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 { useNavigate } from 'react-router-dom';
+
+console.log('style', styles);
+
+
+const items: TabsProps['items'] = [
+  {
+    key: '/home',
+    label: `  首页  `,
+  },
+  {
+    key: '1',
+    label: `作业服务`,
+  },
+  {
+    key: '2',
+    label: `设备租赁`,
+  },
+  {
+    key: '3',
+    label: `飞手服务`,
+  },
+  {
+    key: '/mall',
+    label: `产品商城`,
+  },
+  {
+    key: '5',
+    label: `项目资讯`,
+  },
+  {
+    key: '6',
+    label: `社区论坛`,
+  },
+];
+
+export default function NavHeader() {
+  const navigate = useNavigate();
+  const [key, setKey] = useState('/home');
+
+  const onChange = (key: string) => {
+    console.log(key);
+    navigate(key)
+    setKey(key);
+  };
+
+  return (
+    <div className={styles.navHeader}>
+      <div className={styles.logo}></div>
+      <Tabs className={styles.tabs} defaultActiveKey='1' 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>
+  );
+}

src/components/layout/index.tsx

 import React, { Suspense } from 'react';
 import { Layout, Space } from 'antd';
 import { Outlet } from 'react-router-dom';
+import NavHeader from '~/components/NavHeader';
 
 const { Header, Footer, Content } = Layout;
 
 const headerStyle: React.CSSProperties = {
-  textAlign: 'center',
-  color: '',
-  height: 64,
-  paddingInline: 50,
-  lineHeight: '',
-  backgroundColor: '#7dbcea',
+  height: 'auto',
+  background: 'none',
+  padding: 0
 };
 
 const contentStyle: React.CSSProperties = {
@@ -35,7 +33,9 @@ export default function LayoutView(props: Props) {
   return (
     <Space direction='vertical' style={{ width: '100%' }} size={[0, 48]}>
       <Layout style={{ height: '100vh' }}>
-        <Header style={headerStyle}>Header</Header>
+        <Header style={headerStyle}>
+          <NavHeader />
+        </Header>
         <Content style={contentStyle}>
           {props.children}
           <Suspense fallback={<div>Loading...</div>}>

src/pages/mall/index.tsx

+
+import React, { useState } from 'react';
+import { Button, Form, Input, Select, Cascader } from 'antd';
+
+const { Option } = Select;
+
+interface AddrOption {
+  value: string | number;
+  label: string;
+  children?: AddrOption[];
+}
+
+const options: AddrOption[] = [
+  {
+    value: 'zhejiang',
+    label: 'Zhejiang',
+    children: [
+      {
+        value: 'hangzhou',
+        label: 'Hangzhou',
+        children: [
+          {
+            value: 'xihu',
+            label: 'West Lake',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'jiangsu',
+    label: 'Jiangsu',
+    children: [
+      {
+        value: 'nanjing',
+        label: 'Nanjing',
+        children: [
+          {
+            value: 'zhonghuamen',
+            label: 'Zhong Hua Men',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export default function Mall(){
+  const onAddrChange = (value: string[]) => {
+    console.log(value);
+  };
+
+  return (
+    <Form name='mall_form'>
+      <Form.Item name='addr' label='地域：'>
+        <Cascader options={options} onChange={onAddrChange} placeholder='Please select' />
+      </Form.Item>
+      <Form.Item>
+        <Button type='primary' htmlType='submit'>
+          查询
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+}
\ No newline at end of file

src/router/router.tsx

 import React from 'react';
 import { Navigate, RouteObject } from 'react-router-dom';
 import ErrorPage from '~/pages/common/error';
-import SearchView from '~/pages/test/search';
 import LayoutView from '~/components/layout';
 
 const Home = React.lazy(() => import('~/pages/home'));                    //首页
 const JobServices = React.lazy(() => import('~/pages/jobServices'));      //工作服务
+const Mall = React.lazy(() => import('~/pages/mall'));                    //产品商城
 
 interface RouteObjectType {
   meta?: {
@@ -40,6 +40,10 @@ export const routerList: Array<RouteObject & RouteObjectType> = [
         path: '/jobServices',
         element: <JobServices />,
       },
+      {
+        path: 'mall',
+        element: <Mall />
+      }
     ],
   }
 ];