主页（七）-最新资讯——流程：搭建模板-获取数据-模板填充

主页（七）-最新资讯——流程：搭建模板-获取数据-模板填充

• 调用接口

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;
  }
}

最终效果