yangshi_cloudExbition/src/components/hotspot/image.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.images.length > 1"
            :src="require('@/assets/images/project/icon/hotspot_l.png')"
            alt=""
            @click="handlePage('prev')"
          />
          <div class="imgmain" :class="{bigImg: !hotspot.content}">
            <img id="map" :src="hotspot.images[active]" alt="" />
          </div>
          <img
            class="aa"
            v-if="hotspot.images.length > 1"
            :src="require('@/assets/images/project/icon/hotspot_r.png')"
            alt=""
            @click="handlePage('next')"
          />
        </div>
        <div class="pagna" v-if="hotspot.images.length > 1">
          <span>{{ active + 1 }}</span>
          /
          <span>{{ hotspot.images.length }}</span>
        </div>
        <div class="desc" v-html="handleContent(hotspot.contents[active])"></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="title" v-html="hotspot.title"></div>

    <div class="mbhcon" :class="{ single: hotspot.images.length <= 1 }">
      <div class="swcon" v-swiper:mySwiper="swiperOption">
        <ul class="swiper-wrapper swiper-wrapper-n">
          <div
            class="swiper-slide"
            v-for="(item, index) in hotspot.images"
            :key="index"
          >
            <div class="sl-item">
              <img v-viewer :src="item" />
            </div>
          </div>
        </ul>
        <div
          class="swiper-pagination pagination"
          v-if="hotspot.images.length > 1"
          slot="pagination"
        ></div>
      </div>

      <div v-if="hotspot.content" class="desc">
        <div v-html="handleContent(hotspot.contents[mbactive], 14)"></div>
      </div>
    </div>
  </div>
</template>

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

export default {
  directives: {
    swiper: directive,
  },
  props: ["hotspot", "type"],
  data() {
    return {
      panzoom:'',
      active: 0,
      mbactive: 0,
    };
  },
  methods: {
    handlePage(type) {
      if (type === "next") {
        console.log(this.hotspot.images.length);
        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;
      }
    },
  },
  computed: {
    swiperOption() {
      let that = this
      return {
        slidesPerView: "auto",
        autoplay: false,
        centeredSlides: true,
        watchSlidesProgress: true,
        loop: this.hotspot.images.length > 1,
        pagination: {
          el: ".swiper-pagination",
        },
        on: {
          slideChangeTransitionEnd: function() {
            that.mbactive = this.realIndex
          }
        },
      };
    },
  },
  mounted(){
    const elem = document.getElementById('map')
    this.panzoom = Panzoom(elem, {
      maxScale: 10
    })
    this.panzoom.pan(10, 10)
    this.panzoom.zoom(1, { animate: true })
    elem.addEventListener('wheel', this.panzoom.zoomWithWheel)
  }
};
</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%, 92% 99%, 1% 99%);
  }
  .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;
        align-items: center;
        justify-content: space-between;
        position: relative;
        .imgmain {
          width: 90%;
          max-height: 60vh;
          overflow-x: hidden;
          overflow-y: auto;
          position: relative;
          margin: 0 auto;
          img {
            cursor: pointer;
            max-width: 100%;
            max-height: 60vh;
          }
        }
        @h:72vh;
        .bigImg{
          max-height: @h;
          >img{
            max-height: @h;
          }
        }
        .aa {
          width: 30px;
          height: auto;
          cursor: pointer;
        }
      }
      .pagna {
        text-align: center;
        z-index: 999;
        font-size: 18px;
        margin-top: 10px;
        color: rgba(255, 255, 255, 0.8);
      }
      .desc {
        width: 90%;
        font-size: 16px;
        text-align: justify;
        line-height: 1.8;
        max-height: 120px;
        margin: 10px auto 0;
        padding-right: 14px;
        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;
  }
  .title {
    position: absolute;
    top: 14px;
    left: 40px;
    display: inline-block;
    font-size: 16px;
    margin: 0px auto;
    width: 50vw;
  }
  .mbhcon {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;

    .swcon {
      position: relative;
      margin: 60px auto 0;
      width: 92%;
      .swiper-wrapper {
        padding: 0;
        .swiper-slide {
          width: 100%;
          transform-style: preserve-3d;
          position: relative;
          height: 100%;
          margin: 0 auto;
          transform: translate3d(0, 0, 0);
          .sl-item {
            width: 100%;
            text-align: center;
            > img {
              max-height: 44vh;
              max-width: 100%;
            }
          }
        }
      }

      .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: 15vh;
        padding-right: 4px;
        overflow-y: auto;
      }
    }
  }

  .single {
    top: 46%;
    transform: translateY(-50%);
  }
}
</style>