<template>
|
<div class="themaic">
|
<mapsdk></mapsdk>
|
<top class="title" ref="title"></top>
|
<left class="mapleft" :style="{ width: leftWidth }"></left>
|
<right class="mapright" :style="{ width: rightWidth }"></right>
|
<bottom class="mapbottom"></bottom>
|
</div>
|
</template>
|
|
<script>
|
import mapsdk from "@/components/Screen/mapsdk.vue"
|
import top from "../../components/Screen/top.vue"
|
import left from "@/components/Screen/left.vue"
|
import right from "../../components/Screen/right.vue"
|
import bottom from "../../components/Screen/bottom.vue"
|
|
import axios from "axios"
|
export default {
|
components: { mapsdk, top, left, right, bottom },
|
data() {
|
return {
|
leftWidth: "20%",
|
rightWidth: "20%",
|
}
|
},
|
mounted() {},
|
created() {},
|
methods: {
|
//修改左侧宽度
|
ChangeWidth(parm) {
|
if (parm == "left") {
|
if (this.leftWidth == "20%") {
|
this.leftWidth = "36px"
|
} else {
|
this.leftWidth = "20%"
|
}
|
}
|
if (parm == "right") {
|
if (this.rightWidth == "20%") {
|
this.rightWidth = "36px"
|
} else {
|
this.rightWidth = "20%"
|
}
|
}
|
},
|
},
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.themaic {
|
height: 100%;
|
width: 100%;
|
position: absolute;
|
display: flex;
|
}
|
.title {
|
position: absolute;
|
top: 0;
|
left: 0;
|
height: 86px;
|
width: 100%;
|
z-index: 999;
|
}
|
.mapleft {
|
position: absolute;
|
top: 90px;
|
left: 0px;
|
// width: 20%;
|
height: calc(100% - 180px);
|
z-index: 999;
|
}
|
.mapright {
|
position: absolute;
|
top: 90px;
|
right: 0px;
|
// width: 20%;
|
height: calc(100% - 180px);
|
z-index: 999;
|
}
|
.mapbottom {
|
position: absolute;
|
left: 0;
|
bottom: 0;
|
height: 90px;
|
width: 100%;
|
z-index: 999;
|
}
|
</style>
|
