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 course-h5-padding-bottom-10"
      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;justify-content: space-between;
    display: flex;align-items: center;
    img{width: 330px;height:186px;border-radius: 8px;z-index: 8;}
    p{
      color: #fdfdfd;font-size: 14px;display: flex;justify-content: space-between;
      left: 70px;right: -10px;bottom: -2px;z-index: 11;position: absolute;letter-spacing: 1px;
    }
    .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);}
  @media (max-width: 768px){
    .video-item-box{
      width: 90%;margin: 0 auto 16px;
      img{width: 100%;}
      .video-play-btn{width: 30%;height: 30%;top: 50%;left: 50%;transform: translate(-50%,-50%);background-size: contain;}
      p{font-size: 14px;left: 10px;right: 10px;bottom: 10px;padding: 6px 12px;
      background: #006cf8;border-radius: 0 0 8px 8px;box-sizing: border-box;}
    }
    .video-item-box:before{display: none;}
    .video-item-box:after{display: none;}
    .course-h5-padding-bottom-10 {
      ::v-deep .el-dialog__body {
        padding-bottom: 15px;
      }
    }
  }
</style>