<template>
  <div class="large-screen">
    <Header />
    <div class="nav">
      <leftPage />
      <centerPage />
      <rightPage />
    </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';

</script>

<style lang="scss" scoped>
.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 {
  display: flex;
  gap: 15rpx;
  width: 100%;
  height: calc(100vh - 100px);
  box-sizing: border-box;
  color: #fff;
}

.nav_left,
.nav_right {
  margin: 0 15px 15px 15px;
}

.nav_center {
  margin-bottom: 15px;
}
</style>
