<template>
    <div class="homePage">
        <boxLeft class="boxLeft" />
        <!-- {{$port.type}} -->
        <center1 class="maptab" v-if="$port.type == 0"/>
        <center2 class="maptab" v-if="$port.type == 1"/>
        <boxRight class="boxRight" />
    </div>
</template>
<script>
import boxLeft from './boxleft/boxleft'
import center1 from './center1/maptab'
import center2 from './center2/maptab'
import boxRight from './boxright/boxright'
export default {
    data() {
        return {

        }
    },
    components:{
        boxLeft,
        center1, center2,
        boxRight,
    },
    created(){
      this.$port.gId = this.$route.query.gId;
      this.$port.cId = this.$route.query.cId;
      this.$port.company = this.$route.query.company;
      this.$port.type = this.$route.query.type;

      console.log(this.$port)
      this.$store.commit('setPort', this.$port)
    },
    mounted(){

    },
    methods:{

    }
}
</script>
<style lang="less" scoped>
    .homePage{
        font-size: 0.1rem;
        display:flex;
        justify-content: space-between ;
        padding: 0.26rem 0.26rem 0.44rem 0.26rem;
        background:linear-gradient(180deg,rgba(0,29,49,1) 0%,rgba(0,35,78,1) 100%);
        .boxLeft{
            width: 4.9rem;
            // height: 2.1rem;
            // background-color: aqua;
            // background:linear-gradient(180deg,rgba(0,29,49,1) 0%,rgba(0,35,78,1) 100%);
        }
        .maptab{
            width: 8.46rem;
            height: 8.26rem;
            overflow: hidden;
            /*background-color:aquamarine;*/
            margin: 0 0.2rem;
        }
        .boxRight{
            width: 4.9rem;
        }
    }
</style>

