caimei-authentic-www/components/SimpleVideoList/index.vue

<template>
  <div class="video-container">
    <div class="video-list">
      <div class="video" v-for="(item, index) in list" :key="index" @click="onPlay(item)">
        <div class="cover">
          <!-- <video :src="item.ossUrl" :poster="item.cover" crossorigin="anonlymous" autoplay="true"></video> -->
          <!-- <img :src="item.cover" alt="item.title" /> -->
          <img :src="item.cover" alt="item.title" v-if="item.cover" />
            <video :src="item.ossUrl" crossorigin="anonlymous" v-else></video>
          <div class="name">
            <span>{{ item.title }}</span>
          </div>
          <div class="play"></div>
        </div>
        <div class="info">
          <div class="club-name">{{ item.authParty }}</div>
          <div class="mobile">{{ item.userName | mobileFormat }}</div>
        </div>
        <div class="foot">
          <div class="date">{{ item.releaseTime | dateFormat }}</div>
          <div class="praise" :class="{ active: item.diggStatus === 1 }" @click.stop="$emit('praise', item)">
            {{ item.diggCount }}
          </div>
        </div>
      </div>
    </div>
    <!-- 视频播放组件 -->
    <SimpleVideoPlayer :videoSrc="videoUrl" :description="description" ref="videoPlayer"></SimpleVideoPlayer>
  </div>
</template>

<script>
export default {
  filters: {
    mobileFormat(mobile) {
      return mobile ? mobile.replace(/^(\w{3})\w+(\w{4})$/, '$1****$2') : ''
    },
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      videoUrl: '',
      description: '',
    }
  },
  methods: {
    // 播放视频
    onPlay(row) {
      this.videoUrl = row.ossUrl
      this.description = row.title
      this.$refs.videoPlayer.open()
    },
  },
}
</script>

<style lang="scss" scoped>
@media screen and (min-width: 768px) {
  .video-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 16px;
    grid-row-gap: 16px;

    .video {
      height: 358px;
      background: #fff;
      box-sizing: border-box;
      border: 1px solid #efefef;

      &:hover {
        .info {
          .club-name {
            color: #f3920d;
          }
        }
      }

      &:nth-child(4n) {
        margin-right: 0;
      }

      .cover {
        height: 248px;
        position: relative;

        video {
          display: block;
          width: 100%;
          height: 100%;
          background: #000;
        }
        img {
          display: block;
          width: 100%;
          height: 100%;
          background: #000;
        }

        .play {
          position: absolute;
          z-index: 2;
          width: 32px;
          height: 32px;
          background: url(~assets/theme-images/common/pc-icon-play.png) no-repeat center;
          background-size: 32px;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          cursor: pointer;
        }

        .name {
          display: flex;
          align-items: flex-end;
          width: 100%;
          height: 75px;
          padding: 17px 16px;
          box-sizing: border-box;
          position: absolute;
          left: 0;
          bottom: 0;
          background: linear-gradient(180deg, rgba(51, 51, 51, 0) 0%, #333333 100%);

          span {
            color: #fff;
            font-size: 14px;
            line-height: 20px;
            max-height: 40px;
            @include ellipsis(2);
          }
        }
      }

      .info {
        padding: 10px;
        .club-name {
          font-size: 14px;
          color: #282828;
          @include ellipsis(1);
          cursor: pointer;
          height: 18px;
          line-height: 18px;
        }
        .mobile {
          font-size: 14px;
          color: #666;
          margin-top: 8px;
        }
      }

      .foot {
        color: #999999;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #efefef;
        margin: 0 10px;
        padding-top: 8px;

        .praise {
          flex-shrink: 0;
          line-height: 16px;
          cursor: pointer;
        }

        .praise {
          position: relative;
          padding-left: 22px;

          &::after {
            content: '';
            display: block;
            width: 16px;
            height: 16px;
            background-size: 16px;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background-repeat: no-repeat;
            background-position: center;
            background-image: url(~assets/theme-images/common/icon-praise.png);
          }
          &.active {
            color: #f3920d;
            &::after {
              background-image: url(~assets/theme-images/common/icon-praise-active.png);
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .video-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 2.4vw;
    grid-row-gap: 2.4vw;
    .video {
      height: 89.2vw;
      background: #fff;
      box-sizing: border-box;
      border: 0.1vw solid #efefef;

      &:hover {
        .info {
          .club-name {
            color: #f3920d;
          }
        }
      }

      &:nth-child(4n) {
        margin-right: 0;
      }

      .cover {
        height: 64.4vw;
        position: relative;

        // video {
        //   display: block;
        //   width: 100%;
        //   height: 100%;
        //   background: #000;
        // }

        img {
          display: block;
          width: 100%;
          height: 100%;
          background: #000;
        }

        .play {
          position: absolute;
          z-index: 2;
          width: 7.2vw;
          height: 7.2vw;
          background: url(~assets/theme-images/common/h5-icon-play.png) no-repeat center;
          background-size: 7.2vw;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          cursor: pointer;
        }

        .name {
          display: flex;
          align-items: flex-end;
          width: 100%;
          height: 16vw;
          padding: 4.4vw 3vw;
          box-sizing: border-box;
          position: absolute;
          left: 0;
          bottom: 0;
          background: linear-gradient(180deg, rgba(51, 51, 51, 0) 0%, #333333 100%);

          span {
            color: #fff;
            font-size: 3vw;
            line-height: 3.6vw;
            max-height: 7.2vw;
            @include ellipsis(2);
          }
        }
      }

      .info {
        padding: 2.4vw;
        .club-name {
          font-size: 3.4vw;
          color: #282828;
          @include ellipsis(1);
          cursor: pointer;
          height: 3.6vw;
          line-height: 3.6vw;
        }
        .mobile {
          font-size: 3vw;
          color: #666;
          margin-top: 1.6vw;
        }
      }

      .foot {
        color: #999999;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #efefef;
        margin: 0 2.4vw;
        padding-top: 2.4vw;
        line-height: 3.6vw;
        font-size: 2.6vw;

        .praise {
          flex-shrink: 0;
          cursor: pointer;
        }

        .praise {
          position: relative;
          padding-left: 4.4vw;

          &::after {
            content: '';
            display: block;
            width: 3.6vw;
            height: 3.6vw;
            background-size: 3.6vw;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background-image: url(~assets/theme-images/common/icon-praise.png);
            background-position: center;
            background-repeat: no-repeat;
          }

          &.active {
            color: #f3920d;
            &::after {
              background-image: url(~assets/theme-images/common/icon-praise-active.png);
            }
          }
        }
      }
    }
  }
}
</style>