shuangchuangzhou_2022/src/components/hotspot/model.vue

<template>
  <div class="hotspot" :class="{ isfullcon: isfull }" v-if="!isMobile">
    <img class="aa" v-if="hotspot.model.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 frameborder="0" :src="hotspot.model[active]"></iframe>
            <img class="screen" @click="isfull = !isfull"
              :src="require(`@/assets/images/proj2022/${isfull ? 'fullscreen_exit' : 'fullscreen'}.png`)" alt="" />
          </div>

        </div>
        <div class="pagna" v-if="hotspot.model.length > 1">
          <span>{{ active + 1 }}</span>
          /
          <span>{{ hotspot.model.length }}</span>
        </div>
        <div class="desc" v-html="handleContent(hotspot.contents[active])"></div>


      </div>
    </div>
    <img class="aa" v-if="hotspot.model.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.model.length > 1" :src="require('@/assets/images/project/icon/hotspot_l.png')"
          alt="" @click="handlePage('prev')" />
        <div class="imgmain" :class="{ bigImg: !hotspot.content }">
          <iframe :key="active" allowfullscreen frameborder="0" :src="hotspot.model[active]"></iframe>
        </div>
        <img class="aa" v-if="hotspot.model.length > 1" :src="require('@/assets/images/project/icon/hotspot_r.png')"
          alt="" @click="handlePage('next')" />
      </div>

      <div class="desc" v-if="hotspot.title || hotspot.contents[active]">
        <div class="title" v-html="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,
      isfull: false
    };
  },
  methods: {
    handlePage(type) {
      if (type === "next") {
        if (this.active >= this.hotspot.model.length - 1) {
          this.active = 0;
          return;
        }
        this.active += 1;
      } else {
        if (this.active == 0) {
          this.active = this.hotspot.model.length - 1;
          return;
        }
        this.active -= 1;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.noshow {
  opacity: 0 !important;
  pointer-events: none !important;
}

@w: 82%;
@fixw: 8px;

.hotspot {

  .vhotspotcon {
    .hotspotcon {
      .img-con {
        .imgmain {
          width: 80% !important;
          position: relative;

          >iframe {
            width: 100% !important;
          }

          .screen {
            position: absolute;
            bottom: 10px;
            right: 10px;
            z-index: 999;
            width: 30px !important;
          }
        }
      }
    }
  }
}

.isfullcon {

  .vhotspotcon {
    .hotspotcon {
      height: 100% !important;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      .img-con {
        height: 100vh !important;

        .imgmain {
          width: 100% !important;
          position: relative;

          >iframe {
            width: 100% !important;
          }


        }
      }
    }
  }
}

.mbhotspot {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  backdrop-filter: blur(20px);
  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;

        iframe {
          cursor: pointer;
          height: 60vh;
          width: 100%;
        }
      }

      @h: 100%;

      .bigImg {
        max-height: @h;
        margin: 0;

        >img {
          max-height: @h;
        }
      }

      @pos: 14px;

      .aa {
        position: absolute;
        width: 10px;
        height: auto;
        cursor: pointer;
        top: 50%;
        transform: translateY(-50%);
        left: @pos;

        &:last-of-type {
          right: @pos;
          left: unset;
        }
      }
    }

    .desc {
      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>