71 lines
1.5 KiB
Vue
71 lines
1.5 KiB
Vue
|
<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>
|