<template>
  <div
    class="w-full h-screen bg-white bg-[url('/src/assets/images/login-background.png')] overflow-hidden"
  >
    <div class="fixed left-1/2 md:left-1/4 top-1/4 md:top-1/2 -translate-x-1/2 -translate-y-1/2">
      <bgTools />
    </div>
    <div class="fixed top-1/2 left-1/2 md:top-1/4 text-center -translate-x-1/2 md:translate-x-0">
      <div :style="{ transform: `scale(${scaleVal})` }">
        <div
          class="italic text-[30px] md:text-[60px] font-black text-[#0d74db] mb-40 tracking-widest"
          style="text-shadow: 2px 2px 5px rgb(0, 30, 95)"
        >
          欢迎使用数字化图鉴系统
        </div>
        <van-button type="primary" @click="goToHome">进入首页 ⋙</van-button>
      </div>
    </div>
  </div>
</template>

<script setup name="HelloView">
import { ref, watch } from 'vue'
import bgTools from './components/bgTools.vue'
import { useRouter } from 'vue-router'
import { useWindowSize } from '@vueuse/core'

const router = useRouter()

const goToHome = () => {
  router.push('/home')
}

const { width } = useWindowSize()
const scaleVal = ref(1)
watch(
  width,
  (value) => {
    scaleVal.value = value / 1900 < 0.8 ? 1 : value / 1900
  },
  {
    immediate: true
  }
)
</script>

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