<template>
  <div class="i-resources">
    <div class="title">行业资源</div>
    <ul class="cards">
      <li class="card"><img src="./i-resources/js.png"><div class="text"><h2>军事</h2><h4>military</h4></div></li>
      <li class="card"><img src="./i-resources/kj.png"><div class="text"><h2>科技</h2><h4>technology</h4></div></li>
      <li class="card"><img src="./i-resources/wx.png"><div class="text"><h2>文学</h2><h4>literature</h4></div></li>
      <li class="card"><img src="./i-resources/ly.png"><div class="text"><h2>旅游</h2><h4>tourism</h4></div></li>
      <li class="card"><img src="./i-resources/qc.png"><div class="text"><h2>汽车</h2><h4>The car</h4></div></li>
      <li class="card"><img src="./i-resources/cw.png"><div class="text"><h2>宠物</h2><h4>pet</h4></div></li>
      <li class="card"><img src="./i-resources/sh.png"><div class="text"><h2>社会</h2><h4>social</h4></div></li>
      <li class="card"><img src="./i-resources/my.png"><div class="text"><h2>母婴</h2><h4>fransnana</h4></div></li>
      <li class="card"><img src="./i-resources/ss.png"><div class="text"><h2>时尚</h2><h4>fashion</h4></div></li>
      <li class="card"><img src="./i-resources/ms.png"><div class="text"><h2>美食</h2><h4>food</h4></div></li>
      <li class="card"><img src="./i-resources/yl.png"><div class="text"><h2>娱乐</h2><h4>entertainment</h4></div></li>
      <li class="card"><img src="./i-resources/jk.png"><div class="text"><h2>健康</h2><h4>fitness</h4></div></li>
    </ul>
  </div>
</template>

<script>
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.i-resources
  padding: 70px 0
  text-align: center
  .title
    color: #333
    font-size: 28px
    margin-bottom: 30px
  .cards
    width: 1000px
    overflow: hidden
    margin: -15px auto
    .card
      cursor: pointer
      width: 203px
      height: 88px
      float: left
      background-color: #fff
      border: 1px solid #cfcfcf
      border-radius: 5px
      margin: 15px 10px
      padding: 15px
      text-align: left
      &:hover
        border-color: #707070
      &:nth-child(4n+1)
        margin-left: 0
      &:nth-child(4n)
        margin-right: 0
      img
        width: 88px
        height: 88px
        border-radius: 88px
        display: inline-block
        vertical-align: middle
        margin: 0 5px
      .text
        display: inline-block
        vertical-align: middle
        text-align: center
        h2
          color: #333
          font-size: 24px
          margin: 10px
          width: 84px
        h4
          color: #808080
          font-size: 16px
</style>
