<script setup lang="ts">
import img_bg from '~/assets/img/bg.mp4'
const router = useRouter()

function routerReplace(path: string) {
  router.replace(path)
}
</script>

<template>
  <!-- <video
        :src="img_bg" loop autoplay muted
        class="bg-hex-060d27 w-screen h-screen fixed top-0 left-0 -z-10 blur-sm object-fill"
      /> -->
  <div class="w-screen h-screen overflow-hidden bg-hex-00000099 flex flex-col text-white bg_img">
    <header class="w-full bg_img_header h-90px flex_center text-38px">
      桐乡市互联网学校数据可视化大屏
    </header>

    <div
      class="w-full flex-grow px-8 pt-2 pb-2 overflow-y-auto scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-hex-fff6 scrollbar-track-transparent"
    >
    <Suspense><router-view class="h-full" /></Suspense>
    </div>
  </div>
</template>

<style scoped>
body {
  margin: 0;
  padding: 0;
}

.bg_img {
  background-image: url('~/assets/img/txwx/bg.webp');
  background-repeat: no-repeat;
  /* background-position: center; */
  background-size: 100%;
}

.bg_img_header {
  background-image: url('~/assets/img/txwx/header.webp');
  background-repeat: no-repeat;
  /* background-position: top center; */
  background-origin: content-box;
  background-size: 100%;
}

.hovered:hover .switched {
  display: block;
  opacity: .8;
}

.active .switched {
  display: block;
}
</style>

