bxztApp/packages/screen/src/views/cockpit/components/CockpitLayout.vue

<template>
  <div class="cockpit-layout">
    <!-- <PageHeader /> -->
    <div class="cockpit-main">
      <div class="left-panel">
        <WeatherWarning />
        <EmergencyResources />
      </div>

      <div class="center-panel">
        <MapCenter />
      </div>

      <div class="right-panel">
        <BlockEvent />
        <YearStatistics />
      </div>
    </div>
  </div>
</template>

<script setup>
import PageHeader from './PageHeader.vue'
import WeatherWarning from './WeatherWarning.vue'
import EmergencyResources from './EmergencyResources.vue'
import MapCenter from './MapCenter.vue'
import BlockEvent from './BlockEvent.vue'
import YearStatistics from './YearStatistics.vue'
</script>

<style scoped lang="scss">
@import '@/styles/mixins.scss';

.cockpit-layout {
  width: 100vw;
  height: 100vh;
  background: url(../assets/img/cockpit-main-bg.png) no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cockpit-main {
  flex: 1;
  display: grid;
  grid-template-columns: vw(580) 1fr vw(580);
  gap: vw(20);
  padding: vw(20);
  padding-top: 0;
}

.left-panel,
.right-panel {
  display: flex;
  flex-direction: column;
  gap: vw(20);
}

.center-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
</style>