<template>
  <box
    title="地图位置"
    @fullscreen="onFullscreen"
  >
    <div
      class="l-flex__fill c-device-dashboard-map"
      :class="{ fullscreen }"
    />
  </box>
</template>

<script>
import Box from './Box'
export default {
  components: {
    Box
  },
  data () {
    return {
      fullscreen: false
    }
  },
  methods: {
    onFullscreen (fullscreen) {
      this.fullscreen = fullscreen
    }
  }
}
</script>

<style lang="scss" scoped>
.c-device-dashboard-map {
  background-position: 34% center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("~@/assets/map.png");

  &.fullscreen {
    background-position: center center;
    background-size: contain;
  }
}
</style>
