<template>
  <div id="treeMenu" @click="changeShow" :class="[mapStore.right_board?'switch-right-active':'switch-right']">
  </div>
</template>

<script>
import {useMapStore} from "@/store/mapStore.js";
export default {
  name: "TreeMenu",
  setup(){
    const mapStore = useMapStore()
    function changeShow(){
      mapStore.layerShow = !mapStore.layerShow;
    }
    return{
      mapStore,
      changeShow
    }
  }
}
</script>

<style scoped lang="scss">
#treeMenu{
  position: absolute;
  cursor: pointer;
  z-index: 2;
  right: 453px;
  top: 87px;
  width: 40px;
  height: 42px;
  background:url("../../assets/imgs/tckg.png") no-repeat;
  background-size: 100% 100%;
}
.switch-right-active{
  transition-property: transform;
  transition-duration:1s;
}
.switch-right{
  transition-property: transform;
  transition-duration:1s;
  transform: translateX(480px);
}
</style>