<template>
    <div class="video">
      <div class="video-title">
        <span class="part-title">视听空间</span>
        <i class="english-title">Audition Space</i>
        <router-link to="/" class="more">MORE>></router-link>
      </div>
      <div class="video-content">
        <ul class="video-container">
          <router-link :to="{path: '/artTrainDetail/' + list.id}" tag="li" class="video-list" v-for="list in video" :key="list.id">
            <div class="video-img-box">
              <img :src="list.videoPoster" alt="" class="video-img">
            </div>
            <div class="video-desc">
              <h3 class="video-name">{{list.videoTitle}}</h3>
              <div class="time-count">
                <span class="time">{{list.videoDate}}</span>
                <span class="count">{{list.videoView}}</span>
              </div>
            </div>
          </router-link>
        </ul>
      </div>
    </div>
</template>

<script>
export default {
  name: 'IndexVideo',
  props: {
    video: Array
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.video
  width 1200px
  margin 15px auto
  .video-title
    border-bottom solid 1px #dedede
    .part-title
      font-size 22px
      line-height 40px
      color #565656
      display inline-block
      border-bottom #01a9f8 2px solid
      margin-right 10px
    .english-title
      font-style normal
      font-size 14px
      color rgba(168, 168, 168, 0.8)
    .more
      display inline-block
      float right
      width 70px
      height 26px
      background-color #01a9f8
      border-radius 4px
      color #ffffff
      text-align center
      line-height 26px
      font-size 12px
      margin-top 7px
  .video-content
    margin-top 15px
    .video-container
      overflow hidden
      .video-list
        float left
        width 290px
        margin-right 13px
        margin-bottom 10px
        cursor pointer
        &:nth-child(4n)
          margin-right 0
        .video-img-box
          width 100%
          height 215px
          .video-img
            width 100%
            height 215px
        .video-desc
          padding 0 10px
          .video-name
            font-size 16px
            color #000
            line-height 30px
            white-space nowrap
            overflow hidden
            text-overflow: ellipsis
            text-align center
          .time-count
            color #999
            font-size 12px
            line-height 20px
            .count
              float right
</style>
