<template>
	<div id="mainPageRight"  :class="[useMapStore().right_board?'switch-right-active':'switch-right']">
		<!-- 桥梁类别 -->
		<BridgeCategory></BridgeCategory>
		<!-- 桥梁隐患 -->
		<BridgeHazards></BridgeHazards>
		<!-- 供水管线敷设方式 -->
		<PipelineLaying></PipelineLaying>
		<!-- 供水管线沿线灾害隐患 -->
		<DisasterHazards></DisasterHazards>
		<!-- 供水管线风险 -->
		<PipelineRisk></PipelineRisk>
	</div>
</template>

<script setup>
	import BridgeCategory from '@/components/BridgeCategory.vue'
	import BridgeHazards from '@/components/BridgeHazards.vue'
	import PipelineLaying from '@/components/PipelineLaying.vue'
	import DisasterHazards from '@/components/DisasterHazards.vue'
	import PipelineRisk from '@/components/PipelineRisk.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>
