yangshi_cloudExbition/src/components/hotspot/video.vue

<template>
  <div class="hotspot"  v-if="!isMobile">
    <img
      class="vhotspot"
      :src="require(`@/assets/images/project/kuangti/hotspot_${theme}.png`)"
      alt=""
    />
    <div class="brightness"></div>
    <img
      @click="$emit('close')"
      class="close"
      :src="require('@/assets/images/project/icon/close.png')"
      alt=""
    />

    <div class="vhotspotcon">
      <div class="vtitle" v-html="hotspot.title"></div>
      <div class="hotspotcon">
        <div class="img-con">
          <img
            class="aa"
            v-if="hotspot.video.length > 1"
            @click="active -= 1"
            :src="require('@/assets/images/project/icon/hotspot_l.png')"
            alt=""
          />
          <div class="imgmain">
            <video controls autoplay>
              <source :src="hotspot.video[active].url" type="video/mp4" />
            </video>
          </div>
          <img
            class="aa"
            v-if="hotspot.video.length > 1"
            @click="active += 1"
            :src="require('@/assets/images/project/icon/hotspot_r.png')"
            alt=""
          />
          <div class="pagna" v-if="hotspot.video.length > 1">
            <span>{{ active + 1 }}</span>
            /
            <span>{{ hotspot.video.length }}</span>
          </div>
        </div>
        <div class="desc" v-html="hotspot.content"></div>
      </div>
    </div>
  </div>

  <div v-else class="mbhotspot">
    <img
      class="vhotspot"
      :src="require(`@/assets/images/mobile/kuangti/hotspot_${theme}.png`)"
      alt=""
    />
    <div class="brightness"></div>
    <img
      @click="$emit('close')"
      class="close"
      :src="require('@/assets/images/project/icon/close.png')"
      alt=""
    />
    <div class="mbhcon">
     <div class="title">{{ hotspot.title }}</div>
    <div class="swcon" v-swiper:mySwipervd="swiperOption">
      <ul class="swiper-wrapper swiper-wrapper-n">
        <div
          class="swiper-slide"
          v-for="(item, index) in hotspot.video"
          :key="index"
        >
          <div class="sl-item">
            <video controls autoplay>
              <source :src="item.url" type="video/mp4" />
            </video>
          </div>
        </div>
      </ul>
      <div class="swiper-pagination pagination" slot="pagination"></div>
    </div>


      <div v-if="hotspot.content" class="desc">
        <div v-html="handleContent(hotspot.content,14)"></div>
      </div>
    </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", "type"],
  data() {
    return {
      active: 0,
      mbactive: 0,
    };
  },
  methods: {
    handlePage(type) {
      if (type === "next") {
        console.log(this.hotspot.video.length);
        if (this.active >= this.hotspot.video.length - 1) {
          this.active = 0;
          return;
        }
        this.active += 1;
      } else {
        if (this.active == 0) {
          this.active = this.hotspot.video.length - 1;
          return;
        }
        this.active -= 1;
      }
    },
  },
   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;
}
@w: 82%;
@fixw: 8px;
.hotspot {
  width: @w;
  position: relative;
  margin: 10px auto 0;
  .vhotspot {
    width: 100%;
    position: relative;
    pointer-events: none;
  }

  .brightness {
    position: absolute;
    width: 100%;
    height: 101%;
    left: 0;
    top: 0;
    z-index: -1;
    clip-path: polygon(1% 11%, 10% 2%, 99% 2%, 99% 89%, 91% 98%, 1% 98%);
  }
  .close {
    position: absolute;
    top: 40px;
    right: 30px;
    width: 20px;
    cursor: pointer;
    z-index: 1000;
  }

  .vhotspotcon {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    left: 50%;
    width: 100%;
    height: 100%;
    text-align: center;
    .vtitle {
      position: absolute;
      top: 24px;
      left: 130px;
      z-index: 99;
      font-size: 20px;
    }
.hotspotcon {
      width: 90%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      position: absolute;
    .img-con {
      display: flex;
      width: 90%;
      align-items: center;
      justify-content: space-between;
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      position: absolute;
      .imgmain {
        width: 90%;
        max-height: 76vh;
        overflow-x: hidden;
        overflow-y: auto;
        margin: 0 auto;
        position: relative;
        video {
          width: 89%;
        }
      }
      .aa {
        width: 30px;
        height: auto;
        cursor: pointer;
      }
      .pagna {
        position: absolute;
        bottom: -40px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        z-index: 999;
        font-size: 18px;
        color: rgba(255, 255, 255, 0.8);
      }
    }
    .desc {
      width: 80%;
      font-size: 16px;
      text-align: left;
      line-height: 1.8;
      padding-right: 14px;
      max-height: 120px;
      margin: 20px auto 0;
      overflow-y: auto;
    }
  }
  }
}

.mbhotspot {
  width: 96%;
  margin: 60px auto 0;
  position: relative;
  .vhotspot {
    width: 100%;
    position: relative;
    pointer-events: none;
  }

  .brightness {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    clip-path: polygon(1% 11%, 10% 2%, 99% 2%, 99% 89%, 92% 99%, 1% 99%);
  }
  .close{
      position: absolute;
      top: 26px;
      right: 16px;
      width: 14px;
      z-index: 1000;
  }
  .mbhcon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    .title {
      position: absolute;
      top: 14px;
      left: 40px;
      display: inline-block;
      font-size: 16px;
      margin: 0px auto;
      width: 50vw;
    }
    .swcon {
      position: relative;
      margin: 60px auto 0; 
      width: 84%;
      .swiper-wrapper {
        height: 250px;
        padding: 0;
        .swiper-slide {
          width: 100%;
          transform-style: preserve-3d;
          position: relative;
          height: 100%;
          margin: 0 auto;
          transform: translate3d(0, 0, 0);
          .sl-item {
            position: absolute;
            top: 0;
            left: 50%;
            height: 100%;
            transform: translateX(-50%);
            width: 100%;
            overflow: hidden;
            > video {
              width: 100%;
              transform: translateX(-50%);
              position: absolute;
              left: 50%;
            }
          }
        }
      }

      .pagination {
        position: static;
        margin-top: 4px;
        z-index: 999;
        & /deep/ .swiper-pagination-bullet,
        & /deep/ .swiper-pagination-bullet-active {
          background-color: #fff!important;
        }
        & /deep/ .swiper-pagination-bullet-active {
          background: #fff !important;
        }
      }
    }

    .desc {
      text-align: justify;
      width: 85%;
      padding-right: 14px;
      margin: 10px auto 0;
      p {
        font-size: 16px;
        font-weight: bold;
      }
      div {
        font-size: 14px;
        margin-top: 10px;
        line-height: 1.5;
        max-height: 50vh;
        overflow-y: auto;
      }
    }
  }
}
</style>