| | |
| | | <template> |
| | | <div class="mapChart"> |
| | | <div class="leftChart"> |
| | | <map-chart></map-chart> |
| | | <div |
| | | :class=" |
| | | $store.state.setScreenFlag ? 'leftContentActive' : 'leftContent' |
| | | " |
| | | > |
| | | <map-chart></map-chart></div> |
| | | <!-- --> |
| | | </div> |
| | | <div :class="$store.state.setScreenFlag ? 'rightMapActive' : 'rightMap'"> |
| | | <map-view></map-view> |
| | |
| | | width: 100%; |
| | | height: 100%; |
| | | display: flex; |
| | | overflow:hidden; |
| | | overflow: hidden; |
| | | } |
| | | .leftChart { |
| | | flex: 1; |
| | | display: flex; |
| | | justify-content: center; |
| | | } |
| | | .leftContent { |
| | | width: 50%; |
| | | height: 100%; |
| | | transition: 1s ease-out; |
| | | } |
| | | .leftContentActive { |
| | | width: 100%; |
| | | height: 100%; |
| | | transition: 1s ease-out; |
| | | |
| | | } |
| | | .rightMapActive { |
| | | width: 50%; |