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 controls autoplay>
        <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,
      mbactive: 0,
    };
  },
  computed: {
    swiperOption() {
      let that = this;
      return {
        slidesPerView: "auto",
        autoplay: false,
        centeredSlides: true,
        watchSlidesProgress: true,
        loop: false,
        pagination: {
          el: ".swiper-pagination",
        },
        on: {
          slideChangeTransitionEnd: function() {
            that.mbactive = this.realIndex;
          },
        },
      };
    },
  },
};
</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>