fork from bc4552c5a8

client/components/Footer/Footer.js

@@ -0,0 +1,129 @@
+import './Footer.scss';
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col } from 'antd';
+import { Icon } from 'antd';
+
+const version = process.env.version;
+class Footer extends Component {
+  constructor(props) {
+    super(props);
+  }
+  static propTypes = {
+    footList: PropTypes.array
+  };
+  render() {
+    return (
+      <div className="footer-wrapper">
+        <Row className="footer-container">
+          {this.props.footList.map(function(item, i) {
+            return (
+              <FootItem
+                key={i}
+                linkList={item.linkList}
+                title={item.title}
+                iconType={item.iconType}
+              />
+            );
+          })}
+        </Row>
+      </div>
+    );
+  }
+}
+
+class FootItem extends Component {
+  constructor(props) {
+    super(props);
+  }
+  static propTypes = {
+    linkList: PropTypes.array,
+    title: PropTypes.string,
+    iconType: PropTypes.string
+  };
+  render() {
+    return (
+      <Col span={6}>
+        <h4 className="title">
+          {this.props.iconType ? <Icon type={this.props.iconType} className="icon" /> : ''}
+          {this.props.title}
+        </h4>
+        {this.props.linkList.map(function(item, i) {
+          return (
+            <p key={i}>
+              <a href={item.itemLink} className="link">
+                {item.itemTitle}
+              </a>
+            </p>
+          );
+        })}
+      </Col>
+    );
+  }
+}
+
+Footer.defaultProps = {
+  footList: [
+    {
+      title: 'GitHub',
+      iconType: 'github',
+      linkList: [
+        {
+          itemTitle: 'YApi 官方源码仓库',
+          itemLink: 'https://github.com/YMFE/yapi.git'
+        },
+        {
+          itemTitle: 'YApi xwj-vic源码仓库',
+          itemLink: 'https://github.com/xwj-vic/yapi.git'
+        }
+      ]
+    },
+    {
+      title: '社区自由维护者',
+      iconType: 'team',
+      linkList: [
+        {
+          itemTitle: '编译指南',
+          itemLink: 'https://blog.opendeveloper.cn/yapi'
+        }
+      ]
+    },
+    {
+      title: '反馈',
+      iconType: 'aliwangwang-o',
+      linkList: [
+        {
+          itemTitle: '官方Github Issues',
+          itemLink: 'https://github.com/YMFE/yapi/issues'
+        },
+        {
+          itemTitle: '官方Github Pull Requests',
+          itemLink: 'https://github.com/YMFE/yapi/pulls'
+        },
+        {
+          itemTitle: 'xwj-vic Github Issues',
+          itemLink: 'https://github.com/xwj-vic/yapi/issues'
+        },
+        {
+          itemTitle: 'xwj-vic Github Pull Requests',
+          itemLink: 'https://github.com/xwj-vic/yapi/pulls'
+        }
+      ]
+    },
+    {
+      title: `Copyright © 2018-${new Date().getFullYear()} YMFE`,
+      linkList: [
+        {
+          itemTitle: `版本: ${version} `,
+          itemLink: 'https://github.com/YMFE/yapi/blob/master/CHANGELOG.md'
+        },
+        {
+          itemTitle: '使用文档',
+          itemLink: 'https://hellosean1025.github.io/yapi/'
+        }
+      ]
+    }
+  ]
+};
+
+export default Footer;

client/components/Footer/Footer.scss

@@ -0,0 +1,65 @@
+@import '../../styles/common.scss';
+@import '../../styles/mixin.scss';
+
+.footer-wrapper{
+  height: 2.4rem;
+  width: 100%;
+  background-color: $color-bg-dark;
+  overflow: hidden;
+  position: relative;
+  z-index: 0;
+}
+
+.footer-container{
+  margin: 0 auto !important;
+  padding: .48rem .24rem;
+  max-width: 12.2rem;
+  .icon {
+    font-size: .16rem;
+    margin-right: .08rem;
+  }
+  .title {
+    color: #8898aa;
+    font-size: .14rem;
+    margin-bottom: .08rem;
+  }
+  .link {
+    font-size: .14rem;
+    font-weight: 200;
+    color: #8898aa;
+    line-height: .3rem;
+    transition: color .2s;
+    &:hover {
+      color: $color-bg-gray;
+    }
+  }
+}
+.footItem{
+  padding: 24px 2%;
+  width: 25%;
+  float: left;
+  div{
+    margin: 6px 0;
+  }
+  a{
+    font-weight: 200;
+    color: #b3bdc1;
+    &:hover{
+      color: white;
+    }
+  }
+}
+.copyRight{
+    padding: 24px 2%;
+    width: 25%;
+    float: left;
+    font-size: 13px;
+    text-indent: 1em;
+    h4{
+        font-size: 14px;
+        margin: 0 auto 13px;
+        font-weight: 500;
+        position: relative;
+        text-indent: 0;
+    }
+}