nuxtProject/components/course/course-video.vue

<template>
  <div class="video-item-box">
    <i @click="playVideo" class="video-play-btn"></i>
    <img :src="imgUrl" :alt="videoData.title">
    <p>
      <span v-if="videoData.title">{{ videoData.title }}</span>
      <span v-if="showTitle">{{videoData.purpose}}</span></p>
    <!--  视频播放弹窗 -->
    <el-dialog
      :title="videoData.title"
      :visible.sync="videoDialogFlag"
      @close="closeVideoDialog"
      class="course-video-dialog"
      center>
      <video controls :src="curSource" class="course-video-box"></video>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "course-video",
  props: {
    source: {
      type: String,
      require: '',
    },
    videoData: {
      type: Object,
      default: () => ({})
    },
    imgUrl: {
      type: String,
      default: ''
    },
    showTitle: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      videoDialogFlag: false,
      curSource: '',
    }
  },
  methods: {
    closeVideoDialog() {
      this.videoDialogFlag = false;
      this.curSource = "";
    },
    playVideo() {
      this.videoDialogFlag = true;
      this.curSource = this.source;
    }
  }
}
</script>

<style lang="scss" scoped>
  .video-item-box{
    width: 352px;background: rgba(18,107,255,0.12);margin: 0;
    border: 1px solid #ffffff;border-radius: 10px;padding: 10px;
    box-sizing: border-box;position: relative;
    display: flex;align-items: center;
    img{width: 100%;border-radius: 8px;z-index: 8;}
    p{color: #fdfdfd;font-size: 18px;display: flex;justify-content: space-between;}
    .video-play-btn{
      width: 70px;height: 70px;position: absolute;z-index: 10;background-size: cover;background-position: center;
      background-image: url("~static/images/client/course/animation-video-img1.png");background-repeat: no-repeat;
      right: -15px;bottom: 30px;transition: 0.5s;
    }
    .video-play-btn:hover{transform: scale(1.1);cursor: pointer;}
  }
  .video-item-box:before,.video-item-box:after{content: ' ';position: absolute;display: block;background-repeat: no-repeat;background-size: contain;}
  .video-item-box:before{width: 357px;height: 99px;background-image: url("~static/images/client/course/animation-video-img2.png");bottom: -30px;right: -44px;z-index: 9;}
  .video-item-box:after{width: 95px;height: 160px;background-image: url("~static/images/client/course/animation-video-img3.png");bottom: 20px;right: -30px;z-index: 7;transform: rotateY(180deg);}

</style>