<template>
  <div class="box">
    <!-- 移动端 -->
    <div class='box' v-if="this.$store.state.isMobile === true">
      <!-- 地图模块 -->
      <Map class="map"></Map>

      <!-- 移动端 控制模块 -->
      <Mobile class="mobile"></Mobile>
    </div>
    <!-- PC端 -->
    <div class="box" v-else style="display:flex;">
      <!-- PC端 控制模块 -->
      <PC class="pc"></PC>
      <!-- 地图模块 -->
      <Map class="map"></Map>
    </div>
  </div>
</template>

<script>
import Map from '@/components/map'
import Mobile from '@/components/mobileBar'
import PC from '@/components/pcBar'

export default {
  name: 'Home',
  components: {
    Map: Map,
    Mobile: Mobile,
    PC: PC
  },
  data () {
    return {
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box{
  width: 100%;
  height: 100%;
}
 .pc {
   height: 100%;
   width:310px
 }
 .map {
   bottom: 0%;
   width: 100%;
   height: 100%;
   flex: 1;
   /* width: calc(100% - 310px); */
 }
 .mobile {
   position: absolute;
   width: calc(100% - 2px);
   left:1px;
   right:1px;
   z-index: 500;
   bottom: 0px;
   background-color: white;
   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
 }
</style>
