metaverse2024vue/src/App.vue

<template>
  <div id="app">
    <div class="w-full h-full flex">
      <router-view />
    </div>
    <loginPopup />
  </div>
</template>

<script>
import NavMenu from '@/views/components/NavMenu'
import loginPopup from '@/views/homeComponents/loginPopup'
export default {
  name: 'App',
  components: {
    loginPopup,
    NavMenu
  },
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  },
  mounted() {
    //首先我们获得视口高度并将其乘以1%以获得1vh单位的值
    let vh = window.innerHeight * 0.01
    // 然后，我们将——vh自定义属性中的值设置为文档的根
    document.documentElement.style.setProperty('--vh', `${vh}px`)

    // 我们监听resize事件 视图大小发生变化就重新计算1vh的值
    window.addEventListener('resize', () => {
      // 我们执行与前面相同的脚本
      let vh = window.innerHeight * 0.01
      console.log(vh);
      document.documentElement.style.setProperty('--vh', `${vh}px`)
    })
    this.pdIsMobile()
    let _this = this
    window.onresize = () => {
      setTimeout(() => {
        _this.pdIsMobile()
      }, 100)
    }
  },
  methods: {
    pdIsMobile() {
      if (this.fIsMobile()) {
        this.$store.commit('app/TOGGLE_MOBILE', true)
        // this.isMobile = true
      } else {
        this.$store.commit('app/TOGGLE_MOBILE', false)
        // this.isMobile = false
      }
    },
    fIsMobile() {
      return /Android|iPhone|iPad|iPod|BlackBerry|webOS|Windows Phone|SymbianOS|IEMobile|Opera Mini/i.test(navigator.userAgent);
    }
  }
}
</script>
<style lang="scss" scoped>
#app {
  // padding-bottom: 50px;
}

.pageContent {
  width: calc(100% - 72px);
  height: 100%;
  overflow: visible;
  // overflow-y: auto;
}
</style>