diff --git a/src/api/taicangpop/data.js b/src/api/taicangpop/data.js
index 612e991..afd8ac4 100644
--- a/src/api/taicangpop/data.js
+++ b/src/api/taicangpop/data.js
@@ -10,7 +10,7 @@ export function updateHolder(data) {
 
 export function getNum(data) {
   return request({
-    url: `/taicangpop/data/getnum?buildingid=${data.buildingid}`,
+    url: `/taicangpop/data/getnum?buildingid=${data.buildingId}`,
     method: "get",
   });
 }
diff --git a/src/assets/images/ui/img_home@2x.png b/src/assets/images/ui/img_home@2x.png
new file mode 100644
index 0000000..c29cc14
Binary files /dev/null and b/src/assets/images/ui/img_home@2x.png differ
diff --git a/src/assets/images/ui/img_number_bg@2x.png b/src/assets/images/ui/img_number_bg@2x.png
new file mode 100644
index 0000000..10da53e
Binary files /dev/null and b/src/assets/images/ui/img_number_bg@2x.png differ
diff --git a/src/views/components/xiaoqu/ColorCell/index.vue b/src/views/components/xiaoqu/ColorCell/index.vue
new file mode 100644
index 0000000..4c533b4
--- /dev/null
+++ b/src/views/components/xiaoqu/ColorCell/index.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="grid-item-main floor-item">
+    <div class="corlor-grid" :class="size">
+      <div class="left-color" :style="{ background: item.leftColor }"></div>
+      <div class="rigth-color">
+        <div :style="{ background: item.rightTopColor }"></div>
+      </div>
+      <div class="house-number">{{ item.name }}</div>
+      <div class="item-type">
+        <el-tooltip effect="dark" content="党员" placement="top">
+          <img
+            src="@/assets/images/ui/isd.png"
+            alt=""
+            class="typeis"
+            v-show="item.is_d"
+        /></el-tooltip>
+        <el-tooltip effect="dark" content="退伍军人" placement="top">
+          <img
+            src="@/assets/images/ui/isj.png"
+            class="typeis"
+            v-show="item.is_j"
+          />
+        </el-tooltip>
+        <el-tooltip effect="dark" content="帮扶对象" placement="top">
+          <img
+            src="@/assets/images/ui/isk.png"
+            alt=""
+            class="typeis"
+            v-show="item.is_k"
+        /></el-tooltip>
+        <el-tooltip effect="dark" content="重点人群" placement="top">
+          <img
+            src="@/assets/images/ui/isx.png"
+            alt=""
+            class="typeis"
+            v-show="item.is_x"
+        /></el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    item: {
+      type: Object,
+      default: () => {},
+    },
+    size: {
+      type: String,
+      default: "medium",
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.grid-item-main {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .medium {
+    height: 100%;
+    width: 100%;
+  }
+  .small {
+    width: 35px;
+    height: 15px;
+  }
+  .corlor-grid {
+    position: relative;
+    border: 1px solid white;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // overflow: hidden;
+    .left-color {
+      flex: 1;
+      height: 100%;
+    }
+    .rigth-color {
+      flex: 1;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      border-left: 1px solid white;
+      & > div {
+        flex: 1;
+        width: 100%;
+      }
+      .rigth-bottom {
+        background: red;
+        border-top: 1px solid white;
+        // border-left: 1px solid white;
+      }
+    }
+    .house-number {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 18px;
+      color: #000;
+      text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
+      font-family: "DIN-Condensed-Bold-2.ttf";
+    }
+    .grid-islable {
+      position: absolute;
+      top: -50%;
+      left: 0;
+      width: 120%;
+      text-align: left;
+      img {
+        display: inline-block;
+        width: 0.22rem;
+        height: 0.22rem;
+      }
+    }
+    .grid-point {
+      position: absolute;
+      right: -25%;
+      height: 0.09rem;
+      width: 0.09rem;
+      border-radius: 50%;
+      border: 0.03rem solid white;
+    }
+
+    .item-type {
+      position: absolute;
+      top: -10px;
+      left: 0;
+      .typeis {
+        height: 15px;
+        width: 15px;
+        margin-right: 3px;
+      }
+    }
+  }
+}
+.grid-item-main:hover {
+  border: 2px solid orange;
+  transform: scale(1.2); /* 放大1.5倍 */
+}
+</style>
diff --git a/src/views/components/xiaoqu/building.vue b/src/views/components/xiaoqu/building.vue
index 64dc1c1..5be61c3 100644
--- a/src/views/components/xiaoqu/building.vue
+++ b/src/views/components/xiaoqu/building.vue
@@ -1,22 +1,116 @@
 <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>
+    <div class="building-container" v-show="show">
+      <div class="building-floor">
+        <div
+          class="floor-number"
+          v-for="(item, index) in info.floor"
+          :key="item"
+        >
+          {{ info.floor - index }} 层
+        </div>
+      </div>
+      <div class="building-house-container">
+        <div class="building-name">{{ info.deptname }}{{ info.name }}</div>
+        <div class="house" v-for="(item, index) in list" :key="index">
+          <colorCell
+            :item="house"
+            v-for="house in item"
+            :key="house.holder_id"
+          ></colorCell>
+        </div>
+      </div>
+    </div>
   </transition>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
+import { getNum } from "@/api/taicangpop/data";
+import { getBuilding } from "@/api/taicangpop/building";
+import colorCell from "./ColorCell/index.vue";
 export default {
   data() {
-    return {};
+    return {
+      show: true,
+      info: {},
+      list: [],
+    };
   },
   computed: {
-    ...mapGetters(["queryParamsXiaoqu"]),
+    ...mapGetters(["queryParamsXiaoqu", "leftColor", "rightTopColor"]),
+  },
+  components: {
+    colorCell,
+  },
+  watch: {
+    "queryParamsXiaoqu.buildingId"(newValue, oldValue) {
+      if (newValue) {
+        this.getBuildingInfo();
+        this.getBuildingList();
+      } else {
+        this.show = false;
+      }
+    },
+  },
+  created() {},
+  methods: {
+    async getBuildingInfo() {
+      let info = await getBuilding(this.queryParamsXiaoqu.buildingId);
+      this.info = info.data;
+      this.show = true;
+    },
+    async getBuildingList() {
+      let res = await getNum({
+        buildingId: this.queryParamsXiaoqu.buildingId,
+      });
+
+      this.list = this.filterFloor(res.data);
+
+      console.log(this.list);
+    },
+    // 颜色处理
+    handleColor(item) {
+      if (!item.color) {
+        item.leftColor = "#7b75ff";
+        item.rightTopColor = "#7b75ff";
+        return;
+      }
+      for (let key in this.leftColor) {
+        if (item.color == key) {
+          item.leftColor = this.leftColor[key];
+          item.rightTopColor = this.rightTopColor[key];
+        }
+      }
+
+      return item;
+    },
+    filterFloor(list) {
+      const categorizedRooms = {};
+      list.forEach((room) => {
+        room.name = room.name.replace("室", "");
+        const floor = (parseInt(room.name, 10) / 100) | 0;
+        if (!categorizedRooms[floor]) {
+          categorizedRooms[floor] = [];
+        }
+        categorizedRooms[floor].push(this.handleColor(room));
+      });
+
+      // 确定最大楼层
+      const maxFloor = Math.max(...Object.keys(categorizedRooms).map(Number));
+      // 对每层房间号进行从小到大排序
+      const sortedRoomsByFloor = [];
+      for (let floor = 0; floor <= maxFloor; floor++) {
+        const roomsForFloor = categorizedRooms[floor] || [];
+        sortedRoomsByFloor.push(
+          roomsForFloor.sort(
+            (a, b) => parseInt(a.name, 10) - parseInt(b.name, 10)
+          )
+        );
+      }
+
+      return sortedRoomsByFloor.reverse();
+    },
   },
 };
 </script>
@@ -28,7 +122,88 @@ export default {
   top: 80px;
   right: 0;
   height: calc(100% - 80px);
-  width: 500px;
-  background: red;
+  display: flex;
+  overflow-y: auto;
+  background: rgba(3, 22, 48, 1);
+  .building-floor {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 85px;
+    background: linear-gradient(
+      rgba(149, 18, 58, 0.1),
+      #95123a,
+      rgba(149, 18, 58, 0.1)
+    );
+    padding-top: 85px;
+    .floor-number {
+      height: 23px;
+      width: 50px;
+      text-align: center;
+      line-height: 23px;
+      margin-bottom: 6px;
+      font-size: 14px;
+      color: #fff;
+      font-family: "DIN-Regular-2.otf";
+    }
+  }
+  .building-house-container {
+    padding-top: 85px;
+    position: relative;
+
+    height: 100%;
+    background: url("~@/assets/images/ui/img_home@2x.png");
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+    .building-name {
+      position: absolute;
+      left: 130px;
+      top: 25px;
+      min-width: 135px;
+      height: 32px;
+      text-align: center;
+      line-height: 32px;
+      font-size: 18px;
+      color: #f0fffc;
+      font-family: "BY";
+      background: url("~@/assets/images/ui/img_number_bg@2x.png");
+      background-size: 100% 100%;
+      padding: 0 10px;
+    }
+    .house {
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      margin-bottom: 6px;
+
+      .floor-item {
+        cursor: pointer;
+        margin-right: 6px;
+        height: 23px;
+        width: 50px;
+        text-align: center;
+        line-height: 23px;
+        color: #fff;
+        font-size: 14px;
+      }
+      & > .floor-item:first-child {
+        margin-left: 8px;
+      }
+    }
+  }
+  .building-house-container .house:last-child {
+    margin-bottom: 0;
+  }
+}
+
+/* 下面我们会解释这些 class 是做什么的 */
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
 }
 </style>