let data=[['同时入选IMDB250和豆瓣电影250的电影','带你进入不正常的世界','用电【影】来祭奠逝去的岁月','女孩们的故事【电影】','','使用 App 【找电影】功能','科幻是未来的钥匙——科幻启示录【科幻题材】','美国生活面面观','2015终极期待','经典韩国电影——收集100部'],['经典','冷门佳片','豆瓣高分','动作','喜剧','爱情','悬疑','恐怖','科幻','治愈','文艺','成长','动画','华语','欧美','韩国','日本'],['小波看书','村上春树周边','我凭名字认定了你','不可饶恕的女人','','爱欲书','他们还写侦探小说','人生识字忧患','诗歌书店'],['小说','爱情','历史','外国文学','青春','励志','随笔','传记','推理','旅行','奇幻','经营']
]export default data;//数据类型

import React from 'react';
import './typelist.scss';
class table extends React.Component{render(){return (<ul className='table'>{this.props.table.map((item,index)=>{return (<li key={index}>{item}<span> </span></li>
                    )})}</ul>
        )}
}
export default table;

.table{margin-left: .94rem;list-style: none !important;padding: 1.12rem 0 1.88rem;color: #eee;font-size: .7rem;overflow: hidden;width: 100%;// border-bottom: 1px solid #ccc;
    li{width:  39%;border-top: solid 1px #eee;border-right: solid 1px #eee;float: left;padding-right: 1.12rem;height: 2rem;display: list-item;color: #42bd56;line-height: 2rem;margin-left:0;//修改padding-left: .3rem;}li:nth-child(16){border-bottom: 1px solid #eee;}span{color: #ccc;float: right;font-weight: bold;display: inline-block;border-right: solid 1px #ccc;border-bottom: solid 1px #ccc;width: .4rem;height: .4rem;transform: rotate(-45deg);margin-top: 1rem;}
}

import React from 'react';
import './list.scss';
class MyList extends React.Component{render(){return (<div id='mylist'><ul className='Comlist'>{this.props.data.map((item,index)=>{return <li key={index}>{item}</li>
                    })}</ul><div className='line'></div></div>
         )}
}export default MyList;

#mylist{position: relative;.Comlist{padding: 15px 15px 25px 15px;li{height: 50px;line-height: 50px;padding: 0 1.55rem;letter-spacing: .1em;overflow: auto;display: block;text-align: center;margin: 0 0 8px 8px;font-size: .94rem;display: inline-block;border-radius: .25rem;border: solid 1px;vertical-align: middle;width: initial;}li:first-child{color: #FF4055;border-color: #FF4055;}li:nth-child(2){color: #3BA94D;border-color:#3BA94D;}li:nth-child(3){color: #3BA94D;border-color:#3BA94D;}li:nth-child(4){color: #FFAC2D;border-color:#FFAC2D;}li:nth-child(5){width: 100%;display: block;height: 1px;border: 0;margin: 0;  }li:nth-child(6){color: #3BA94D;border-color:#3BA94D;}li:nth-child(7){color: #FFAC2D;border-color: #FFAC2D;}li:nth-child(8){color: #2384E8;border-color:#2384E8;}li:nth-child(9){color: #2384E8;border-color:#2384E8;}li:nth-child(10){color: #CC3344;border-color: #CC3344;}}.line{border:none;border-bottom: 3px solid #fff;position: absolute;bottom: 4px;width: 100%;}
}