<script setup lang="ts">
useHead({
  title: 'NuxTya',
  meta: [
    {
      name: 'NuxTya | Nuxt 3 Starter Template',
      content:
        'A Nuxt 3 starter template with TypeScript, Tailwind CSS, Shadcn-vue and Pinia.',
    },
  ],
  bodyAttrs: {
    class: 'nuxt-tya',
  },
  link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.svg' }],
})

function setScale() {
  const designWidth = 2560// 设计稿的宽度，根据实际项目调整
  const designHeight = 1440// 设计稿的高度，根据实际项目调整
  const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designWidth / designHeight
    ? (document.documentElement.clientWidth / designWidth)
    : (document.documentElement.clientHeight / designHeight)

  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  document.querySelector('#screen').style.transform = `scale(${scale}) translate(-50%)`
}
onMounted(() => {
  setScale()
})
window.onresize = function () {
  setScale()
}
</script>

<template>
  <div class="screen-wrapper">
    <div id="screen">
      <NuxtLoadingIndicator />

      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>

      <Sonner />
    </div>
  </div>
</template>

<style>
body {
  background-image: linear-gradient(145deg, #070a10 10%, #070a10 70%);
}

.screen-wrapper {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.screen-wrapper #screen {
  display: inline-block;
  width: 2560px;
  height: 1440px;
  overflow: hidden;
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
}
</style>
