主页(七)-最新资讯——流程:搭建模板-获取数据-模板填充
- 调用接口
loadNews = async () => {
// 最新资讯数据加载
let data = await axios.get('home/news')
this.setState({
news: data.body
})
}
- 资讯布局
<div className="news">
<h3 className="group-title">最新资讯</h3>
<WingBlank size="md">{this.renderNews()}</WingBlank>
</div>
- 资讯列表布局
<div className="news-item" key={item.id}>
<div className="imgwrap">
<img
className="img"
src={`http://localhost:8080${item.imgSrc}`}
alt=""
/>
</div>
<Flex className="content" direction="column" justify="between">
<h3 className="title">{item.title}</h3>
<Flex className="info" justify="between">
<span>{item.from}</span>
<span>{item.date}</span>
</Flex>
</Flex>
</div>
- 资料样式
.news {
padding: 10px;
background-color: #fff;
overflow: hidden;
.group-title {
margin: 10px 0 5px 10px;
font-size: 15px;
}
.news-item {
height: 120px;
padding: 15px 10px 15px 0;
border-bottom: 1px solid #e5e5e5;
}
.news-item:last-child {
border: 0;
}
.imgwrap {
float: left;
height: 90px;
width: 120px;
}
.img {
height: 90px;
width: 120px;
}
.content {
overflow: hidden;
height: 100%;
padding-left: 12px;
}
.title {
margin-bottom: 15px;
font-size: 14px;
}
.info {
width: 100%;
color: #9c9fa1;
font-size: 12px;
}
.message-title {
margin-bottom: 48px;
}
}
最终效果