<template>
  <div class="i-media">
    <div class="title">合作自媒体</div>
    <ul class="cards">
      <li class="card"><span class="name">妮妮宠物</span><img src="./i-media/nncw.png"></li>
      <li class="card"><span class="name wrap">宠物心理<br/>小专家</span><img src="./i-media/cwxzj.png"></li>
      <li class="card"><span class="name">格格美食家</span><img src="./i-media/ggmsj.png"></li>
      <li class="card"><span class="name">汇聚美食</span><img src="./i-media/hjms.png"></li>
      <li class="card"><span class="name">吃喝更健康</span><img src="./i-media/chgjk.png"></li>
      <li class="card"><span class="name">美食美乐</span><img src="./i-media/msml.png"></li>
      <li class="card"><span class="name wrap">喵宝宝<br/>汪宝宝</span><img src="./i-media/mbb-wbb.png"></li>
      <li class="card"><span class="name">巢车社</span><img src="./i-media/ccs.png"></li>
      <li class="card"><span class="name">吃喝故事</span><img src="./i-media/chgs.png"></li>
      <li class="card"><span class="name">美食小精灵</span><img src="./i-media/msxjl.png"></li>
      <li class="card"><span class="name">呦呦宠物群</span><img src="./i-media/yycwq.png"></li>
      <li class="card"><span class="name">红袖</span><img src="./i-media/hx.png"></li>
      <li class="card"><span class="name">馋嘴表妹</span><img src="./i-media/czbm.png"></li>
      <li class="card"><span class="name">美食周刊</span><img src="./i-media/mszk.png"></li>
      <li class="card"><span class="name">全能吃货</span><img src="./i-media/qnch.png"></li>
      <li class="card"><span class="name">创意美食乐趣</span><img src="./i-media/cymslq.png"></li>
      <li class="card"><span class="name">关门兔</span><img src="./i-media/gmt.png"></li>
      <li class="card"><span class="name">爱萌宠物</span><img src="./i-media/amcw.png"></li>
      <li class="card"><span class="name wrap">爱生活<br/>爱美食</span><img src="./i-media/ash-ams.png"></li>
      <li class="card"><span class="name">山海经故事</span><img src="./i-media/shjgs.png"></li>
    </ul>
  </div>
</template>

<script>
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.i-media
  padding: 70px 0
  text-align: center
  .title
    color: #000
    font-size: 28px
    margin-bottom: 30px
  .cards
    width: 1000px
    overflow: hidden
    margin: -15px auto
    .card
      cursor: pointer
      width: 150px
      height: 70px
      float: left
      position: relative
      left: 0
      margin: 15px 62.5px 15px 0
      &:nth-child(5n)
        margin-right: 0
      &:hover:after
        background-color: rgba(0, 0, 0, 0.8)
      &:after
        content: ''
        display: block
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        background-color: rgba(0, 0, 0, 0.2)
        -webkit-transition: background-color .2s linear;
        -moz-transition: background-color .2s linear;
        -o-transition: background-color .2s linear;
        -ms-transition: background-color .2s linear;
        transition: background-color .2s linear;
      img
        width: 100%
        height: 100%
      .name
        position: absolute
        color: #fff
        font-size: 16px
        z-index: 2
        margin: auto
        top: 0
        left: 0
        bottom: 0
        right: 0
        width: 98px
        height: 24px
        line-height: 24px
        border: 1px solid #f40
        border-radius: 5px
        &.wrap
          height: 48px
</style>
