301hospital/web/src/components/hotspot/video.vue

<template>
  <div class="images">
    <div class="img-con">
      <span @click="active -= 1" :class="{ noshow: active <= 0 }">上一张</span>
      <video controlslist="nodownload noremoteplayback"
              disablePictureInPicture
              controls
              autoplay
              v-show="isvideoshow"
              @canplaythrough="isvideoshow = true"
              @canplay="isvideoshow = true">
        <source :src="g_dealUrl(hotspot.video[active].url)" type="video/mp4" />
      </video>
      <span
        @click="active += 1"
        :class="{ noshow: active >= hotspot.video.length - 1 }"
        >下一张</span
      >
      <ul class="pagna" v-if="hotspot.video.length>1">
        <li
          v-for="(item, i) in hotspot.video"
          :class="{ active: i == active }"
          :key="i"
        ></li>
      </ul>
    </div>
    <div class="title">{{ hotspot.title }}</div>
    <div class="desc" v-if="hotspot.content" v-html="hotspot.content"></div>

  </div>
 
</template>

<script>
import { directive } from "vue-awesome-swiper";
// import style (<= Swiper 5.x)
import "swiper/css/swiper.css";

export default {
  directives: {
    swiper: directive,
  },
  props: ["hotspot"],
  data() {
    return {
      active: 0,
      isvideoshow:false,
      TO:null
    };
  },
  watch:{
    isvideoshow:{
      handler:function (newVal){
        if (newVal) {
          this.$hideLoading();
        }
      }
    }
  },
  mounted() {
    this.$showLoading();
       if (this.TO) {
        clearTimeout(this.TO)
        this.TO = null
      }
      this.TO = setTimeout(() => {
        this.$hideLoading();
      },10*1000);
  },
 
};
</script>

<style lang="less" scoped>
.noshow{
  opacity: 0!important;;
  pointer-events: none!important;;
}

.images{
  width: 1410px;
  height: 760px;
  text-align: center;
  margin: 0 auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 5px;
  text-align: left;

  .img-con{
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    padding-bottom: 40px;
    >span{
      @juli:60px;
      display: inline-block;
      padding: 0 30px;
      box-sizing: content-box;
      cursor: pointer;
      position: absolute;
      left: @juli;
      top: 50%;
      transform: translateY(-50%);
      >img{
        width: 20px;
      }
      &:last-of-type{
        left: unset;
        right: @juli;
      }
    }
    >video{
      max-width: 100%;
      max-height: 520px;
      cursor: pointer;
      margin-top: 50px;
    }
    .pagna{
      position: absolute;
      bottom: 0;
      text-align: center;
      z-index: 999;
      >li{
        width: 10px;
        border-radius: 50%;
        height: 10px;
        background: rgba(51, 143, 123, .24);
        display: inline-block;
        margin: 0 4px;
        &.active{
          background: #338F7B;
        
        }
      }
    }
  }
.title {
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    width: 100%;
    padding: 0 50px;
    margin-bottom: 10px;
  }
    .desc{
    margin: 0 auto;
    width: 70%;
    color: #fff;
    text-align: center;
    line-height: 1.8;
    max-height: 120px;
    overflow-y: auto;
    font-size: 16px;
    padding: 0;
  }
}

 .close{
    position: absolute;
    top: 40px;
    right: 50px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: 9999999;
  }
</style>