楼栋面板

src/views/components/index.js

@@ -13,3 +13,5 @@ export { default as mapSearchBox } from "./xiaoqu/mapSearchBox.vue";
 export { default as bottomList } from "./xiaoqu/bottomList.vue";
 
 export { default as xiaoquRight } from "./xiaoqu/rightData/index.vue";
+
+export { default as building } from "./xiaoqu/building.vue";

src/views/components/xiaoqu/building.vue

@@ -0,0 +1,34 @@
+<template>
+  <transition
+    name="animate__animated animate__bounce"
+    enter-active-class="animate__fadeInRight"
+    leave-active-class="animate__fadeOutRight"
+    appear
+  >
+    <div class="building-container" v-show="queryParamsXiaoqu.buildingId"></div>
+  </transition>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+export default {
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapGetters(["queryParamsXiaoqu"]),
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.building-container {
+  position: absolute;
+  z-index: 100;
+  top: 80px;
+  right: 0;
+  height: calc(100% - 80px);
+  width: 500px;
+  background: red;
+}
+</style>

src/views/xiaoqu.vue

@@ -4,9 +4,7 @@
       :mainTitle="xiaoquIntroduce.deptName + '人口数据管理系统'"
       :showStreet="false"
     ></NavigationBar>
-
     <mapSearchBox />
-
     <mars-map ref="map" :xiaoquId="queryParamsXiaoqu.xiaoquId"></mars-map>
 
     <foldpanelLeft :title="filterTitle()">
@@ -29,6 +27,7 @@
     <foldPaneBottom>
       <bottomList />
     </foldPaneBottom>
+    <building />
   </div>
 </template>
 
@@ -46,6 +45,7 @@ import {
   buildingStatistics,
   mapSearchBox,
   bottomList,
+  building,
 } from "@/views/components/index.js";
 export default {
   data() {
@@ -63,6 +63,7 @@ export default {
     buildingStatistics,
     mapSearchBox,
     bottomList,
+    building,
   },
   computed: {
     ...mapGetters(["xiaoquIntroduce", "queryParamsXiaoqu"]),