feat: 增加时间轴样式

client/containers/News/News.js

@@ -30,7 +30,7 @@ class News extends Component {
     this.props.fetchNewsData()
   }
   render () {
-    const data = this.props.newsData;
+    const data = this.props.newsData
     return (
       <section className="news-box">
         <NewsList />

client/containers/News/News.scss

@@ -25,7 +25,57 @@
   }
 
 }
+
 .news-timeline{
   margin-left: 30px;
   margin-top: 30px;
-}
+}
+
+.ant-timeline-item-content{
+  background-color: #ececec;
+  margin-left: 30px;
+  border-radius: 4px;
+  border-left:4px solid #ececec;
+  min-width: 350px;
+  max-width: 450px;
+  padding: 10px;
+
+  .timelineDate{
+    display: block;
+    float: left;
+   }
+
+   .timelineName{
+    float: right;
+   }
+
+   p{
+     display: block;
+     width: 100%;
+   }
+
+   div{
+     overflow: hidden
+   }
+
+}
+
+.ant-timeline-item-content:before{
+  content:'';
+  display: block;
+  margin-left: -40px;
+  width: 0px;
+  height: 0px;
+  float: left;
+  border-width: 10px 13px;
+  border-style: solid;
+  border-color: transparent #ececec transparent transparent;
+}
+
+.ant-timeline-item-tail{
+  top: 16px;
+}
+
+.ant-timeline-item-head{
+  margin-top: 10px;
+}

client/containers/News/NewsTimeline/NewsTimeline.js

@@ -8,7 +8,7 @@ class NewsTimeline extends Component {
   }
 
   constructor(props) {
-    super(props)
+    super(props);
   }
 
   render () {
@@ -19,7 +19,13 @@ class NewsTimeline extends Component {
           { 
             data.map(function(item,i){
               return (
-                <Timeline.Item color = 'green' key = {i} >{ item.date + item.desc + item.name }</Timeline.Item>
+                <Timeline.Item color = 'green' key = {i} >
+                  <div>
+                    <span className='timelineDate'>{item.date}</span>
+                    <span className='timelineName'>{item.name}</span>
+                  </div>
+                  <p>{item.desc}</p>
+                </Timeline.Item>
               )
             })
            }