fiee-official-website/src/components/customDefaultPage/index.vue

<script setup>
import { computed } from 'vue'
import { useWindowSize } from '@vueuse/core'

import size375 from '@/components/customDefaultPage/size375/index.vue'
import size1920 from '@/components/customDefaultPage/size1920/index.vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'

const router = useRouter()
const { width } = useWindowSize()
const { t } = useI18n()

const viewComponent = computed(() => {
  const viewWidth = width.value
  if (viewWidth <= 450) {
    return size375
  }
  //    else if (viewWidth <= 1100) {
  //     return size768;
  //   } else if (viewWidth <= 1500) {
  //     return size1440;
  //   }
  else if (viewWidth <= 1920 || viewWidth > 1920) {
    return size1920
  }
})
</script>

<template>
  <component :is="viewComponent" v-bind="$attrs">
    <template v-for="(_, slot) in $slots" #[slot]="scope">
      <slot :name="slot" v-bind="scope"/>
    </template>
  </component>
</template>

<style scoped lang="scss"></style>