美化英雄列表

在umi中使用less

要在umi中使用less不需要任何配置，直接使用就可以了。 我们将 ./src/pages/hero/index.css 重命名为 ./src/pages/hero/index.less ,在 index.js 中修改引用。 分析页面这是一个栅格布局，我们使用antd的Row和Col实现。 这小节的最终效果，如上图所示，你可以自己先尝试着实现，如果你可以完成，那你就不需要再阅读本节内容。

实现步骤

step1 先从hero里面取出heros数据

const { heros=[] } = hero;

这里使用了es6的语法，注意这里给heros定了一个默认值，这样我们在dom里面就不要判断了。（类似 heros&&heros 这样的语句）

step2 循环取出heros，绑定页面

<Row>
    {heros.map(item => (
        <Col key={item.ename} span={3} >
          <img src=""/>
          <p>{item.cname}</p>
        </Col>
      ))}
 </Row>

注意：这里的src为https://game.gtimg.cn/images/yxzj/img201606/heroimg/513/513.jpg，其中513为英雄的ename，这是我分析出来的。放上去，可用。后续如果官网有修改，这个图片地址不对的话，要替换为新地址。

step3 为页面添加样式

 <Col key={item.ename} span={3} className={styles.heroitem}>

index.less

.normal {
  /* background: #F2B279; */
}
.heroitem{
  text-align: center;
  color: #363636;
  img{
    width: 83px;
    height: 83px;
    border: 2px solid #258DF2;
    border-radius:0 10px 0 10px ;
  }
}

step4 保存，运行程序

我们发现，页面是我们想要的样式，但是数据反了，所以我们先将数组逆序处理。

<Row>
    {heros.reverse().map(item => (
        <Col key={item.ename} span={3} className={styles.heroitem}>
          <img
            src={`https://game.gtimg.cn/images/yxzj/img201606/heroimg/
                ${item.ename}/${item.ename}.jpg`}
          />
          <p>{item.cname}</p>
        </Col>
      ))}
</Row>

最终效果为

代码回顾：这节课的全部代码

作业

参考上面的写法，实现局内道具页面 http://localhost:8000/item 提示

<img src={`https://game.gtimg.cn/images/yxzj/img201606/itemimg/${data.item_id}.jpg`} />

参考答案：代码