fork from bc4552c5a8

client/components/Subnav/Subnav.js

@@ -0,0 +1,43 @@
+import './Subnav.scss';
+import React, { PureComponent as Component } from 'react';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { Menu } from 'antd';
+
+class Subnav extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  static propTypes = {
+    data: PropTypes.array,
+    default: PropTypes.string
+  };
+
+  render() {
+    return (
+      <div className="m-subnav">
+        <Menu
+          onClick={this.handleClick}
+          selectedKeys={[this.props.default]}
+          mode="horizontal"
+          className="g-row m-subnav-menu"
+        >
+          {this.props.data.map((item, index) => {
+            // 若导航标题为两个字，则自动在中间加个空格
+            if (item.name.length === 2) {
+              item.name = item.name[0] + ' ' + item.name[1];
+            }
+            return (
+              <Menu.Item className="item" key={item.name.replace(' ', '')}>
+                <Link to={item.path}>{this.props.data[index].name}</Link>
+              </Menu.Item>
+            );
+          })}
+        </Menu>
+      </div>
+    );
+  }
+}
+
+export default Subnav;

client/components/Subnav/Subnav.scss

@@ -0,0 +1,21 @@
+@import '../../styles/common.scss';
+
+.m-subnav {
+  margin-bottom: .24rem;
+  background-color: #fff;
+  box-shadow: 0 0 .04rem rgba(0, 0, 0, .08);
+  font-size: .14rem;
+  border: none;
+  .ant-menu {
+    font-size: unset;
+   }
+  .m-subnav-menu {
+    border: none;
+    padding: 0 .24rem;
+    .item {
+      line-height: .54rem;
+      padding: 0 .36rem;
+      font-weight: normal;
+    }
+  }
+}