daikan-international/src/components/hotspot/tag-view.vue

<!--  -->
<template>
  <teleport to="body">
    <div class="tag-layer" @click.stop="" :class="{ mobile: isMobile, full: tag.type == 'image' }">
      <div class="tag-info" @click.stop="" id="tag-info">
        <!-- <ui-icon class="close-btn" @click.stop="close" type="close" /> -->
        <div class="tag-metas" v-if="tag.media[tag.type].length > 0 && tag.type != 'audio'">
          <metasImage
            @close="close"
            :scale="true"
            :viewer="true"
            v-if="tag.type == 'image' && !isMobile"
          />
          <!-- <imageView v-if="tag.type == 'image' && isMobile" /> -->
          <!-- <metasWeb v-if="tag.type == 'link'" /> -->
        </div>
      </div>
    </div>
  </teleport>
</template>

<script setup lang="ts">
  import { defineEmits, onMounted, ref, watchEffect, computed, nextTick } from 'vue';

  import metasImage from './metas/metas-image.vue';
  import imageView from './metas/image-view.vue';

  import metasWeb from './metas/metas-web.vue';
  import { useApp } from '/@/hooks/userApp';
  import { tagType } from '/@/store/modules/scene';

  const isMobile = ref(false);
  const metasHeight = ref(0);
  const props = defineProps({
    data: {
      type: Object,
      default: {} as any as tagType,
    },
  });
  onMounted(async () => {
    const app = await useApp();
    isMobile.value = app.config.mobile;
    nextTick(() => {
      let Layer = document.getElementById('tag-info');
      let layerHeight = Layer ? Layer.getBoundingClientRect().height : 0;
      metasHeight.value = layerHeight * 0.85;
    });
  });

  const emit = defineEmits(['close']);

  const tag = computed(() => props.data);

  const audioInfo = computed(() => {
    return tag.value.media.audio;
  });
  const audio = ref(null);

  watchEffect(() => {
    if (audio.value) {
      audio.value.play();
    }
  });

  const close = () => {
    emit('close');
  };
  onMounted(() => {});
</script>
<style lang="scss">
  .tag-layer {
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    top: 0;
    position: fixed;
    left: 0;
    // padding: calc(var(--editor-head-height) + 20px) calc(var(--editor-toolbox-width) + 20px) 60px calc(var(--editor-menu-width) + 20px);
    background-color: rgba(0, 0, 0, 0.7);

    .tag-info {
      color: #fff;
      width: 100%;
      height: 85%;
      position: absolute;
      top: 7.5%;
      left: 0;
      .close-btn {
        position: fixed;
        right: 36px;
        top: 36px;
        font-size: 18px;
        cursor: pointer;
        z-index: 100;
      }
      .tag-metas {
        width: 100%;
        height: 100%;
        position: relative;

        .pic-box {
          width: 100%;
          height: 100%;
          border: none;

          .image-list {
            .image-item {
              background-size: contain;
            }
          }
        }
        .video-box {
          height: auto;
          border: none;
          video {
            width: 100%;
            height: auto;
            object-fit: contain;
          }
        }
        .web-box {
          // height: 500px;
          width: 91%;
          height: 100%;
          border: none;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
  [is-mobile] {
    .tag-layer {
      .tag-info {
        .close-btn {
          position: absolute;
          right: 20px;
          top: -30px;
          font-size: 18px;
          cursor: pointer;
        }
      }
      &.full {
        background-color: #141414;
        .tag-info {
          height: 100%;
          top: 0;
          .close-btn {
            position: absolute;
            right: 20px;
            top: 20px;
            font-size: 18px;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>