<template>
	<div id="mainPageLeft" :class="[useMapStore().left_board?'switch-left-active':'switch-left']">
    <Map/>
	</div>
</template>

<script setup>
	import HousingRisk from '@/components/HousingRisk.vue'
	import SeismicReinforcement from '@/components/SeismicReinforcement.vue'
	import HousingSecurity from '@/components/HousingSecurity.vue'
	import BuildingOverview from '@/components/BuildingOverview.vue'
	import FortificationIntensity from '@/components/FortificationIntensity.vue'
  import {useMapStore} from "@/store/mapStore.js";
  import Map from "@/views/c-cpns/Map.vue";

</script>

<style scoped lang="scss">
	#mainPageLeft {
		position: absolute;
		left: 20px;
		top: 87px;
		width: 420px;
		height: 973px;
		background-color: rgba(0, 22, 52, 0.75);
	}
  .switch-left-active{
    transition-property: transform;
    transition-duration:1s;
  }
  .switch-left{
    transition-property: transform;
    transition-duration:1s;
    transform: translateX(-480px);
  }
</style>
