<template>

<div :style="appStyle" class="app-home">

  <app-header />
  
  <tunnel-bar />

  <div class="app-content">
    <router-view />
  </div>
  
</div>

</template>

<script lang='ts' setup>

import AppHeader from '../Header/index.vue'

import { useAppStoreWithOut } from '@/store/modules/app'
import TunnelBar from '@/components/TunnelBar/index.vue'


const appStore = useAppStoreWithOut()

const appStyle = computed(() => {
  return {
    zoom: appStore.getZoom,
    width: appStore.design + 'px',
    minHeight: appStore.fixHeight + 'px'
  }
})

onMounted(() => {

  window.addEventListener('resize', () => {
    appStore.setFix()
  })

})

</script>

<style lang='scss' scoped>

.app-home {
  // height: 100%;
  // min-height: 1080px;
  position: relative;
  background-image: linear-gradient(#001E45, #004175, #001737);
}

</style>