<template>
	<div id="mainPageRight"  :class="[useMapStore().right_board?'switch-right-active':'switch-right']">
		<!-- 结构类型占比 -->
		<StructureType></StructureType>
		<!-- 结构类型统计 -->
		<StructureTypeStatistics></StructureTypeStatistics>
		<!-- 建筑高度 -->
		<BuildingHeight></BuildingHeight>
		<!-- 建筑层数 -->
		<FloorsNumber></FloorsNumber>
		
		
		
	</div> 
</template>

<script setup>
	import StructureType from '@/components/StructureType.vue'
	import StructureTypeStatistics from '@/components/StructureTypeStatistics.vue'
	import BuildingHeight from '@/components/BuildingHeight.vue'
	import FloorsNumber from '@/components/FloorsNumber.vue'
  import {useMapStore} from "@/store/mapStore.js";
</script>

<style scoped lang="scss">
	#mainPageRight {
		position: absolute;
		right: 20px;
		top: 87px;
		width: 420px;
		height: 973px;
		background-color: rgba(0,22,52,0.75);
	}

  .switch-right-active{
    transition-property: transform;
    transition-duration:1s;
  }
  .switch-right{
    transition-property: transform;
    transition-duration:1s;
    transform: translateX(480px);
  }
</style>
