<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">
    <header class="w-full bg_img_header pt-6">
      <div class="w-full flex justify-between text-lg mt-8">
        <div class="flex">
          <header-item to="/school">
            学校
          </header-item>
          <header-item to="/teaching">
            教学
          </header-item>
        </div>
        <div class="w-360px h-12 -mt-8 cursor-pointer" @click="routerReplace('/')" />
        <div class="flex">
          <header-item to="/teacher">
            教师
          </header-item>
          <header-item to="/student">
            学生
          </header-item>
        </div>
      </div>
    </header>
    <div class="w-full flex-grow px-9 pb-6 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/bg.png');
  background-repeat: no-repeat;
  background-position: center;
}

.bg_img_header {
  background-image: url('~/assets/img/header_text.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-origin: content-box;
}

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

.active .switched {
  display: block;
}

.wslice8{
  width: 12%;
}
.wslice7 {
  width: 14%;
}
.wslice6 {
  width: 16%;
}

.wslice4 {
  width: 25%;
}


</style>

