<template>
  <div class="large-screen">
    <Header />
    <div class="nav">
      <div class="nav_left">
        <leftPage />
      </div>
      <div class="nav_center">
        <centerPage />
      </div>
      <div class="nav_right">
        <rightPage />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Header from './components/header.vue';
import leftPage from './components/leftPage.vue';
import centerPage from './components/centerPage.vue';
import rightPage from './components/rightPage.vue';
import '@/assets/styles/element.scss';
</script>

<style scoped lang="scss">
.large-screen {
  width: 100vw;
  height: 100vh;
  background: url('@/assets/large/bg.png') no-repeat;
  background-size: 100% 100%;
  background-color: rgba(4, 7, 17, 1);
}
.nav {
  width: 100%;
  height: calc(100vh - 80px);
  box-sizing: border-box;
  //   padding: 10px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  color: #fff;
}
</style>
