new_era/src/components/hotspot/iframe.vue

<template>
  <div v-if="!isMobile" class="hotspot">
    <img class="aa" v-if="hotspot.iframe.length > 1" :src="require('@/assets/images/proj2022/pc/left_1.png')" alt="" @click="handlePage('prev')" />

    <div class="vhotspotcon">
      <div class="vtitle" v-html="hotspot.title"></div>
      <div class="hotspotcon">
        <div class="img-con">
          <div class="imgmain">
            <iframe :key="active" allowfullscreen :src="hotspot.iframe[active]" frameborder="0"></iframe>
          </div>
          <div class="pagna" v-if="hotspot.iframe.length > 1">
            <span>{{ active + 1 }}</span>
            /
            <span>{{ hotspot.iframe.length }}</span>
          </div>
        </div>
      </div>
      <div class="desc" v-html="hotspot.content"></div>
    </div>
    <img class="aa" v-if="hotspot.iframe.length > 1" :src="require('@/assets/images/proj2022/pc/right_1.png')" alt="" @click="handlePage('next')" />
  </div>

  <div v-else class="mbhotspot">
    <div class="mbhcon">
      <div class="img-con">
        <img class="aa" v-if="hotspot.iframe.length > 1" :src="require('@/assets/images/project/icon/hotspot_l.png')" alt="" @click="handlePage('prev')" />
        <div class="imgmain">
          <iframe :key="active" allowfullscreen :src="hotspot.iframe[active]" frameborder="0"></iframe>
        </div>
        <img class="aa" v-if="hotspot.iframe.length > 1" :src="require('@/assets/images/project/icon/hotspot_r.png')" alt="" @click="handlePage('next')" />
      </div>

      <div class="desc">
        <div class="title">{{ hotspot.title }}</div>
        <div v-html="handleContent(hotspot.contents[active], 14)"></div>
      </div>
    </div>
  </div>
</template>

<script>


export default {
  
  props: ["hotspot", "type"],
  data() {
    return {
      active: 0,
    };
  },
  methods: {
    handlePage(type) {
      if (type === "next") {
        console.log(this.hotspot.iframe.length);
        if (this.active >= this.hotspot.iframe.length - 1) {
          this.active = 0;
          return;
        }
        this.active += 1;
      } else {
        if (this.active == 0) {
          this.active = this.hotspot.iframe.length - 1;
          return;
        }
        this.active -= 1;
      }
    },
  },
  computed: {
  },
};
</script>

<style lang="less" scoped>
.noshow {
  opacity: 0 !important;
  pointer-events: none !important;
}
@w: 75%;
@fixw: 8px;
.hotspot {
  .vhotspotcon {
    width: 100%;
    .img-con{
      width: 1136px;
      margin: 0 auto;
    }
  }
}

.mbhotspot {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  .close {
    position: absolute;
    top: 26px;
    right: 16px;
    width: 20px;
    z-index: 1000;
  }
  .mbhcon {
    position: absolute;
    top: 50%;
    width: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    .img-con {
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
      .imgmain {
        width: 100%;
        height: auto;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        >iframe {
          cursor: pointer;
          width: 100%;
          height: 100%;
        }
      }
      @pos: 10px;
      .aa {
        position: absolute;
        width: 30px;
        height: auto;
        cursor: pointer;
        top: 50%;
        transform: translateY(-50%);
        left: @pos;
        z-index: 999;
        &:last-of-type {
          right: @pos;
          left: unset;
        }
      }
    }
    .desc {
      overflow-y: auto;
      position: absolute;
      z-index: 99999;
      bottom: 0;
      left: 50%;
      width: 100%;
      padding: 2% 5%;
      transform: translateX(-50%);
      margin: 0;
      min-height: 10vh;
      max-height: 34vh;
      background: rgba(0, 0, 0, 0.5);
      text-align: left;
      word-break: break-all;
      .title {
        width: 100%;
        display: inline-block;
        font-size: 16px;
        margin-bottom: 10px;
      }
    }
  }

  .fullcon {
    width: 100%;
    height: 100%;
    .img-con {
      height: 100%;
      .imgmain {
        width: 100%;
        height: auto;
        min-height: 100%;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>