Feat 增加footer组件

client/components/Footer/Footer.js

@@ -0,0 +1,111 @@
+import './Footer.scss'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Icon } from 'antd'
+
+class Footer extends Component {
+  constructor(props) {
+    super(props)
+  }
+  static propTypes = {
+    footList: PropTypes.array
+  }
+  render () {
+    console.log(this.props);
+    return (
+      <div className = 'footer'>
+        <div className = 'footContent'>
+          { this.props.footList.map(function(item,i){
+            return <FootItem key = { i } linkList = { item.linkList } title = { item.title } iconType = { item.iconType } ></FootItem>
+          }) }
+          <div className = 'copyRight'>
+            <h4>Copyright © 2017</h4>
+            YMFF出品 @ YMFF
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+class FootItem extends Component {
+  constructor(props) {
+    super(props);
+  }
+  static propTypes = {
+    linkList: PropTypes.array,
+    title: PropTypes.string,
+    iconType: PropTypes.string
+  }
+  render () {
+    return (
+      <div className = 'footItem'>
+        <h4><Icon type= { this.props.iconType } style={{ fontSize: 16 }} /> { this.props.title } </h4>
+        { this.props.linkList.map(function(item,i){
+          return (<div key = {i}><a href = { item.itemLink }><span>{ item.itemTitle }</span></a></div>);
+        }) }
+      </div>
+    );
+  }
+}
+
+Footer.defaultProps = {
+  footList: [
+    {
+      title: 'GitHub',
+      iconType: 'github',
+      linkList: [
+        {
+          itemTitle: '源码仓库',
+          itemLink: 'http://www.baidu.com'
+        },
+        {
+          itemTitle: '源码仓库1',
+          itemLink: 'http://www.baidu.com'
+        },{
+          itemTitle: '源码仓库2',
+          itemLink: 'www.baidu.com'
+        }
+      ]
+
+    },
+    {
+      title: '相关站点',
+      iconType: 'link',
+      linkList: [
+        {
+          itemTitle: '源码仓库',
+          itemLink: 'www.baidu.com'
+        },
+        {
+          itemTitle: '源码仓库1',
+          itemLink: 'www.baidu.com'
+        },{
+          itemTitle: '源码仓库2',
+          itemLink: 'www.baidu.com'
+        }
+      ]
+
+    },
+    {
+      title: '社区',
+      iconType: 'customer-service',
+      linkList: [
+        {
+          itemTitle: '源码仓库',
+          itemLink: 'www.baidu.com'
+        },
+        {
+          itemTitle: '源码仓库1',
+          itemLink: 'www.baidu.com'
+        },{
+          itemTitle: '源码仓库2',
+          itemLink: 'www.baidu.com'
+        }
+      ]
+
+    }
+  ]
+}
+
+export default Footer

client/components/Footer/Footer.scss

@@ -0,0 +1,54 @@
+@import '../../styles/common.scss';
+
+.footer{
+    // max-width: 12rem;
+    margin: 20px auto;
+    clear: both;
+    font-size: 12px;
+    background: #000c15;
+    position: relative;
+    z-index: 1;
+    color: rgba(255,255,255,.65);
+    box-shadow: 0 1000px 0 1000px #fff;
+    
+    h4{
+        margin-bottom: 20px;
+        color: #FFF;
+        i{
+            margin-left: -20px;
+        }
+    }
+}
+.footContent{
+    max-width: 11rem;
+    width:90%;
+    margin:0px auto;
+    overflow: hidden;
+}
+.footItem{
+    padding: 24px 2%;
+    width: 25%;
+    float: left;
+
+    a{
+        margin: 6px 0px;
+        display: block;
+        font-weight: 200;
+        color: #108ee9;
+    }
+}
+.copyRight{
+    padding: 24px 2%;
+    width: 25%;
+    float: left;
+    font-size: 12px;
+    text-indent: 1em;
+
+    h4{
+        font-size: 14px;
+        margin: 0 auto 12px;
+        font-weight: 500;
+        position: relative;
+        text-indent: 0em;
+    }
+}