leifeng-transfer/src/views/Home/index.vue

<template>
  <div class="home">
    <div v-if="popupVisible" class="popup">
      <template v-if="!isMobile">
        <img class="logo" src="../../assets/images/logo.png" />
        <PCMain>
          <Button @click="popupVisible = false" />
        </PCMain>
      </template>

      <MobileMain v-else>
        <Button @click="popupVisible = false" />
      </MobileMain>
    </div>

    <iframe
      frameborder="0"
      style="width: 100vw; height: 100vh"
      src="https://www.4dkankan.com/panorama/show.html?id=WK1690972675209461760&vr=fd720_zIVqMoAJr&lang=zh"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import PCMain from "./PCMain.vue";
import MobileMain from "./MobileMain.vue";
import Button from "./components/CButton/index.vue";

const isMobile = ref(
  navigator.userAgent.match(
    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
  )
);
const popupVisible = ref(true);
</script>

<style lang="scss">
.popup {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 252, 247, 0.8);
  z-index: 999;
}
.logo {
  position: absolute;
  top: 31px;
  left: 33px;
  width: 132px;
  height: 94px;
  z-index: 1;
}
</style>