xzrkz-web/src/pages/Index/components/IndexVideo.vue

<template>
    <div class="video">
      <div class="video-title">
        <span class="part-title">展览展示</span>
        <i class="english-title">Exhibition</i>
        <router-link to="/exhibition" class="more">MORE>></router-link>
      </div>
      <div class="exhibition">
        <ul>
          <li v-for="(list,idx) in exhibition" :key="idx" @click="goDetail(list.templateRecordUrl)">
            <div class="exhibition-img">
              <img :src="'http://192.168.0.104:8082/news/route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
            </div>
            <div class="exhibition-info">
              <h1>{{list.newsContentTitle}}</h1>
              <p>作者：{{list.newsContentAuthor}}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
</template>

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

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import "~styles/public.styl"
.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 $main-color 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 $main-color
      border-radius 4px
      color #ffffff
      text-align center
      line-height 26px
      font-size 12px
      margin-top 7px
  .exhibition
    width 1200px
    margin 20px auto
    ul
      &:after
        content: ''
        display block
        clear both
      li
        width 280px
        box-shadow:0px 0px 10px 0px rgba(176,176,176,0.3);
        box-sizing border-box
        float left
        margin-right 25px
        margin-bottom 25px
        cursor pointer
        &:hover
          box-shadow:0px 0px 20px 0px rgba(176,176,176,0.9);
        &:nth-child(4n)
          margin-right 0
        .exhibition-img
          width 100%
          height 185px
          img
            width 100%
            height 100%
        .exhibition-info
          padding 10px 20px
          h1
            text-align center
            font-size 18px
            color #565656
            font-weight normal
            white-space nowrap
            overflow hidden
            text-overflow: ellipsis
            margin-bottom 5px
          p
            font-size 14px
            color #565656
            text-align center
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
          .exhibition-info-bottom
            span
              font-size 14px
              color #a8a8a8
              &.view
                float right
</style>