import { List, Avatar, Carousel } from 'antd'; import { connect } from 'dva'; import './lamp.less' const PositionCarousel = props => { const Count= 3; const data = [ { img: "", createTime: '2019-11-26', storeName: "健之佳", areaNo: "871", drugs: "生当作人杰,死亦为鬼雄。至今思项羽,不肯过江东。", tel: '13122036650', }, { img: "", createTime: '2019-11-29', storeName: "健之佳", areaNo: "872", drugs: "梧桐雨细。渐滴作秋声,被风惊碎。润逼衣篝,线袅蕙炉沈水。悠悠岁月天涯醉。一分秋、一分憔悴。紫箫吟断,素笺恨切,夜寒鸿起。又何苦、凄凉客里。负草堂春绿,竹溪空翠。落叶西风,吹老几番尘世。从前谙尽江湖味。听商歌、归兴千里。露侵宿酒,疏帘淡月,照人无寐。", tel: '13131231', }, { img: "", createTime: '2019-11-26', storeName: "健之佳", areaNo: "873", drugs: "Ant Design, a design language for background applications, is refined by Ant UED Team", tel: '13131231', }, { img: "", createTime: '2019-11-26', storeName: "健之佳", areaNo: "874", drugs: "Ant Design, a design language for background applications, is refined by Ant UED Team", tel: '13131231', }, { img: "", createTime: '2019-11-26', storeName: "健之佳", areaNo: "876", drugs: "Ant Design, a design language for background applications, is refined by Ant UED Team", tel: '13131231', }, { img: "", createTime: '2019-11-26', storeName: "健之佳", areaNo: "888", drugs: "Ant Design, a design language for background applications, is refined by Ant UED Team", tel: '13131231', } ]; while (data.length % Count != 0) { data.push({}); } function formatdrugs(drugs){ let stringdrugs = drugs.toString(); if (stringdrugs.length > 53){ stringdrugs = stringdrugs.substr(0,53)+"..." } return stringdrugs; } const sliceitems = []; for (let i = 0; i < data.length; i += Count) { let endIndex = i + Count < data.length ? i + Count : data.length; sliceitems.push(data.slice(i, endIndex)); } // console.log(sliceitems); const items = []; for (let i = 0; i < sliceitems.length; i++) { items.push(<div><List itemLayout="horizontal" dataSource={sliceitems[i]} renderItem={item => ( <List.Item key={item.title}> <List.Item.Meta avatar={<Avatar src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575339764&di=04ba2b635d619b1e405be69245aad7b9&imgtype=jpg&er=1&src=http%3A%2F%2Fimg0.pconline.com.cn%2Fpconline%2F1702%2F12%2F8823860_13_thumb.jpg " />} /> <div className="list-tittle">{item.areaNo + " " + item.storeName}<br />{item.tel}</div> <div className="Content">{formatdrugs(item.drugs)}</div> <div className="createTimeContent">{item.createTime}</div> </List.Item> )} /></div>) } // console.log(items) return ( <div style={{ backgroundColor: "#070f2d" }}> <Carousel autoplay dotPosition={"right"} dots={false}> {items} </Carousel> </div> ); } export default connect()(PositionCarousel);
.list-tittle{ color: white; width: 20%; height: 80px; overflow: hidden; } .Content{ color: white; width: 50%; height: 80px; overflow: hidden; } .createTimeContent{ margin-left: 1%; color:white; overflow: hidden; height: 80px; width: 19%; line-height: 80px; }