65 lines
1.3 KiB
Vue
65 lines
1.3 KiB
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="less">
|
||
|
|
.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: 580px 1fr 580px;
|
||
|
|
gap: 20px;
|
||
|
|
padding: 20px;
|
||
|
|
padding-top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.left-panel,
|
||
|
|
.right-panel {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.center-panel {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
</style>
|