hk-school/src/components/Home.vue

<template>
  <div class="homepage" v-if="show">
    <!-- <div class="clickable" @click="emits('close')"></div> -->
    <div id="kr_pano" style="width: 100vw; height: 100vh"></div>
  </div>
</template>
<script setup>
import { onMounted, ref, onActivated, watch, nextTick } from "vue";
const krpanoPath = ref(import.meta.env.VITE_KRPANO_DIR);
const props = defineProps({
  show: {
    type: Boolean,
    default: () => true,
  },
  showKrpano: {
    type: Boolean,
    default: () => false,
  },
});
watch(
  () => props.show,
  (val) => {
    if (val) {
      nextTick(() => {
        initKrpano();
      });
    } else {
    }
  }
);
watch(
  () => props.showKrpano,
  (val) => {
    if (val) {
      nextTick(() => {
        initKrpano();
      });
    } else {
    }
  }
);
const emits = defineEmits(["close"]);
onActivated(() => {});
let krpano = null;
let isHover = false;
const hanlderEvent = () => {
  window.enterFDKK = () => {
    removepano("kr_pano");
    isHover = false;
    emits("close");
  };
  //完成加载
  window.LoadedScene = () => {
    setTimeout(() => {
      // krpano.set("view.hlookat", 5.685878490542688);
      // krpano.set("view.vlookat", 27.599464844622442);
    }, 0);
  };
  window.onHotspotOut = () => {
    // krpano.set("hotspot[eee].fillcolor", "0xFF6970");
    // isHover = false;
  };
  window.onHotspotHover = () => {
    // console.error('onHotspotHover')
    // if (!isHover) {
    //   isHover = true;
    //   krpano.set("hotspot[eee].fillcolor", "0xFFFFFF");
    // }
  };
};
const initKrpano = () => {
  embedpano({ xml: `${krpanoPath.value}tour.xml?x=${new Date().getTime()}`, target: "kr_pano", id: "krpanoSWFObject", passQueryParameters: true, onready: krpano_onready_callback });
  hanlderEvent();
};

const krpano_onready_callback = (krpano_interface) => {
  krpano = krpano_interface;
  window.krpano = krpano;
};

const track_mouse_interval_callback = () => {
  var mx = krpano.get("mouse.x");
  var my = krpano.get("mouse.y");
  var pnt = krpano.screentosphere(mx, my);
  var h = pnt.x;
  var v = pnt.y;

  console.error('x="' + mx + '" y="' + my + '" ath="' + h.toFixed(2) + '" atv="' + v.toFixed(2) + '"');
};

const track_mouse = () => {
  krpano.set("autorotate.enabled", false);
  krpano.call("hotspotClicked");
  track_mouse_interval_callback();
};
onMounted(() => {
  // initKrpano();
});
</script>
<style lang="scss">
.homepage {
  width: 100%;
  height: 100%;
  // background-image: url("/src/assets/shouye.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  overflow: hidden;
  z-index: 2;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  #pano {
    width: 100%;
    height: 100%;
  }
  .clickable {
    width: 52vw;
    height: 65vh;
    margin-top: 12vh;
    margin-right: 2vw;
    margin-right: 4vw;
    cursor: pointer;
    /* background: rgba(0, 0, 0, 0.5); */
    transform: skew(-5deg, -5deg);
  }
}

.isMo {
  .homepage {
    object-fit: scale-down;
  }
}
</style>