圖片.png

效果圖如上

import styles from './index.css';
import React from 'react';
import { Menu } from 'antd';
import router from 'umi/router';

class Nav extends React.Component {
  state = {
    current: 'goHomePage',
  };
  // componentDidMount() {
  //   const pathName = this.props.pathName;
  //   if (pathName !== '') {
  //     this.setState({
  //       current: pathName.pathname,
  //     });
  //   }
  // }

  render() {
    return (
      // 頭部及導(dǎo)航欄
      <div>
        <header>
          <img
            src={require('@/assets/logo.png')}
            alt="sanx_logo"
            className={styles.sanxLogo}
            draggable="false"
            onClick={this.goHomePage}
          />
          <div className={styles.navList}>
            <Menu mode="horizontal" onClick={this.handleClick}>
              <Menu.Item key="goHomePage" className={styles.navItem}>
                首頁
              </Menu.Item>
              <Menu.Item key="goProductPage" className={styles.navItem}>
                產(chǎn)品中心
              </Menu.Item>
              <Menu.Item key="goProjectPage" className={styles.navItem}>
                項目案例
              </Menu.Item>
              <Menu.Item key="goCompanyDynamicPage" className={styles.navItem}>
                動態(tài)資訊
              </Menu.Item>
              <Menu.Item key="CommercialCooperation" className={styles.navItem}>
                商務(wù)合作
              </Menu.Item>
              <Menu.Item key="goAboutUs" className={styles.navItem}>
                關(guān)于我們
              </Menu.Item>
            </Menu>
          </div>
        </header>
        <div style={{ display: 'block', width: '100%', height: '86px' }} />
      </div>
    );
  }
  //導(dǎo)航欄點擊事件
  handleClick = e => {
    this.setState({
      current: e.key,
    });
    if (e.key === 'goHomePage') {
      //去首頁
      router.push('/homePage');
    } else if (e.key === 'goProductPage') {
      //去產(chǎn)品頁
      router.push('/productPage');
    } else if (e.key === 'goProjectPage') {
      // 去項目案例頁
      router.push('/projectPage');
    } else if (e.key === 'goCompanyDynamicPage') {
      //去動態(tài)資訊頁
      router.push('/CompanyDynamicPage');
    } else if (e.key === 'CommercialCooperation') {
      // 去商務(wù)合作
      router.push('/commercialCooperation');
    } else if (e.key === 'goAboutUs') {
      // 去關(guān)于我們頁
      router.push('/aboutUsPage');
    }
  };
}

export default Nav;

樣式：

/* 頂部/頭部 */
header {
  background-color: #ffffff;
  display: block;
  zoom: 1;
  border-bottom: 6px solid #eaeaea !important;
  width: 100%;
  min-width: 1200px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
}

header::after {
  content: '';
  display: block;
  clear: both;
}

.sanxLogo {
  float: left;
  margin-left: 15%;
  display: block;
  width: 230px;
  height: auto;
  cursor: pointer;
  padding-top: 11px;
}

.navList {
  float: left;
  margin-left: 5%;
  display: block;
}

.navItem {
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  font-size: 16px;
}

body .navList :global(.ant-menu-horizontal) {
  line-height: 80px;
  white-space: nowrap;
  border: 0;
  /* border-bottom: 1px solid #e8e8e8; */
  box-shadow: none;
}

body .navList :global(.ant-menu) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 16px;
}