<template>
  <div class="i-recommend">
    <div class="title">渠道优质推荐</div>
    <ul class="cards">
      <li><img src="./i-recommend/tx.png"><span>腾讯新闻【要闻】头图</span></li>
      <li><img src="./i-recommend/wx.png"><span>微信客户端腾讯新闻</span></li>
      <li><img src="./i-recommend/tt.png"><span>今日头条【推荐】</span></li>
      <li><img src="./i-recommend/bd.png"><span>手机百度底部推荐</span></li>
    </ul>
  </div>
</template>

<script>
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.i-recommend
  padding: 70px 0
  text-align: center
  .title
    color: #232323
    font-size: 28px
    margin-bottom: 30px
  .cards
    width: 1000px
    overflow: hidden
    margin: 0 auto
    li
      cursor: pointer
      float: left
      color: #fff
      font-size: 18px
      margin-right: 60px
      &:last-child
        margin-right: 0  
      img
        width: 193px
        height: 344px
        border: 1px solid #cfcfcf
        border-radius: 5px
        padding: 5px
        background-color: #fff
        margin-bottom: 15px
        &:hover
          border-color: #707070
      span
        color: #808080
        display: block
        font-size: 16px
</style>
