new_era/src/components/hotspot/image.vue

<template>
  <div class="hotspot" v-if="!isMobile">
    <img class="aa" v-if="hotspot.images.length > 1" :src="require('@/assets/images/proj2022/pc/left_1.png')" alt="" @click="handlePage('prev')" />
    <div class="vhotspotcon">
      <div class="vtitle" v-if="hotspot.title" v-html="hotspot.title"></div>
      <div class="hotspotcon" :class="{hotconfull:!hotspot.title&&!(hotspot.title||hotspot.imagesDesc[active])}">
        <div class="img-con">
          <div class="imgmain">
            <img id="map" :src="g_fixUrl(hotspot.images[active])" alt="" />
          </div>
          <div class="pagna" v-if="hotspot.images.length > 1">
          <span>{{ active + 1 }}</span>
          /
          <span>{{ hotspot.images.length }}</span>
        </div>
        </div>
        
        <div class="desc" v-html="handleContent(hotspot.imagesDesc[active] || hotspot.contents[active])"></div>
      </div>
    </div>
    <img class="aa" v-if="hotspot.images.length > 1" :src="require('@/assets/images/proj2022/pc/right_1.png')" alt="" @click="handlePage('next')" />
  </div>

  <div v-else class="mbhotspot">
    <div class="mbhcon" :class="{ fullcon: !hotspot.content || !hotspot.contents[active] }">
      <div class="img-con">
        <img class="aa" v-if="hotspot.images.length > 1" :src="require('@/assets/images/proj2022/mobile/prev.png')" alt="" @click="handlePage('prev')" />
        <div class="imgmain" >
          <img id="map" :src="g_fixUrl(hotspot.images[active])" alt="" />
        </div>
        <img class="aa"  v-if="hotspot.images.length > 1" :src="require('@/assets/images/proj2022/mobile/next.png')" alt="" @click="handlePage('next')" />
      </div>
      <div class="desc" v-if="hotspot.imagesDesc[active] || hotspot.contents[active]">
        <div class="title" v-html="hotspot.title"></div>
        <div v-html="handleContent(hotspot.imagesDesc[active] || hotspot.contents[active], 14)"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Panzoom from "@panzoom/panzoom";

export default {
  
  props: ["hotspot", "type"],
  data() {
    return {
      panzoom: "",
      active: 0,
      to: null,
    };
  },
  watch: {
    active() {
      setTimeout(() => {
        this.$showLoading();
      });

      if (this.to) {
        clearTimeout(this.to);
        this.to = null;
      }
      this.to = setTimeout(() => {
        this.$hideLoading();
      }, 1500);
    },
  },
  methods: {
    handlePage(type) {
      if (type === "next") {
        if (this.active >= this.hotspot.images.length - 1) {
          this.active = 0;
          return;
        }
        this.active += 1;
      } else {
        if (this.active == 0) {
          this.active = this.hotspot.images.length - 1;
          return;
        }
        this.active -= 1;
      }
    },
    reset() {
      this.panzoom.pan(0, 0);
      this.panzoom.zoom(this.isMobile ? 1 : !this.hotspot.content ? 0.8 : 1);
      this.$hideLoading();
    },
  },
  computed: {
   
  },
  mounted() {
    const elem = document.getElementById("map");
    this.panzoom = Panzoom(elem, {
      maxScale: 10,
      startScale: this.isMobile ? 1 : !this.hotspot.content ? 0.8 : 1,
    });
    const parent = elem.parentElement
    // No function bind needed
    parent.addEventListener("wheel", this.panzoom.zoomWithWheel);
    parent.addEventListener("load", () => {
      this.reset();
    });
    parent.addEventListener("abort", () => {
      this.reset();
    });
    parent.addEventListener("error", () => {
      this.reset();
    });
  },
};
</script>

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

.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;
        min-height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        img {
          cursor: pointer;
          max-width: 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;
        text-align: center;
      }
    }
  }
}
</style>