diff --git a/src/assets/images/ui/btn_1@2x.png b/src/assets/images/ui/btn_1@2x.png
new file mode 100644
index 0000000..3d829ab
Binary files /dev/null and b/src/assets/images/ui/btn_1@2x.png differ
diff --git a/src/assets/images/ui/img_man@2x.png b/src/assets/images/ui/img_man@2x.png
new file mode 100644
index 0000000..0c62912
Binary files /dev/null and b/src/assets/images/ui/img_man@2x.png differ
diff --git a/src/assets/images/ui/img_name_bg@2x.png b/src/assets/images/ui/img_name_bg@2x.png
new file mode 100644
index 0000000..4302699
Binary files /dev/null and b/src/assets/images/ui/img_name_bg@2x.png differ
diff --git a/src/assets/images/ui/img_tag_hz@2x.png b/src/assets/images/ui/img_tag_hz@2x.png
new file mode 100644
index 0000000..6acded4
Binary files /dev/null and b/src/assets/images/ui/img_tag_hz@2x.png differ
diff --git a/src/assets/images/ui/img_woman@2x.png b/src/assets/images/ui/img_woman@2x.png
new file mode 100644
index 0000000..a792db0
Binary files /dev/null and b/src/assets/images/ui/img_woman@2x.png differ
diff --git a/src/assets/images/ui/noData.png b/src/assets/images/ui/noData.png
new file mode 100644
index 0000000..7eb120d
Binary files /dev/null and b/src/assets/images/ui/noData.png differ
diff --git a/src/assets/images/ui/tab1.png b/src/assets/images/ui/tab1.png
new file mode 100644
index 0000000..651b0a0
Binary files /dev/null and b/src/assets/images/ui/tab1.png differ
diff --git a/src/assets/images/ui/三角@2x.png b/src/assets/images/ui/三角@2x.png
new file mode 100644
index 0000000..a723445
Binary files /dev/null and b/src/assets/images/ui/三角@2x.png differ
diff --git a/src/components/ColorCell/index.vue b/src/components/ColorCell/index.vue
index a899b2f..e6a9c67 100644
--- a/src/components/ColorCell/index.vue
+++ b/src/components/ColorCell/index.vue
@@ -10,6 +10,7 @@
         ></div>
       </div>
     </div>
+    <slot></slot>
   </div>
 </template>
 
diff --git a/src/store/getters.js b/src/store/getters.js
index f090b86..0ab66ff 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -29,5 +29,6 @@ const getters = {
   mapParmas: (state) => state.xiaoqu.mapParmas,
   netWorkintroduce: (state) => state.xiaoqu.netWorkintroduce,
   panel: (state) => state.xiaoqu.panel,
+  houseItem: (state) => state.xiaoqu.houseItem,
 };
 export default getters;
diff --git a/src/store/modules/xiaoqu.js b/src/store/modules/xiaoqu.js
index 60e30fd..c92ca03 100644
--- a/src/store/modules/xiaoqu.js
+++ b/src/store/modules/xiaoqu.js
@@ -10,6 +10,7 @@ const xiaoqu = {
     },
     netWorkintroduce: {},
     panel: {},
+    houseItem: {},
   },
   mutations: {
     SET_PANEL: (state, boolean) => {
@@ -17,6 +18,9 @@ const xiaoqu = {
         state.panel[key] = boolean[key];
       }
     },
+    SET_BUILDING_WIDTH: (state, data) => {
+      state.houseItem = data;
+    },
     //参数变化
     CHANGE_QUERY: (state, query) => {
       for (let key in query) {
@@ -27,6 +31,10 @@ const xiaoqu = {
         state.panel.bottomPanel = true;
         return;
       }
+      {
+        state.panel.rightPanel = false;
+      }
+
       if (
         query.color ||
         query.type ||
@@ -70,6 +78,7 @@ const xiaoqu = {
         isx: undefined,
         isj: undefined,
       };
+      state.houseItem = {};
     },
   },
   actions: {
diff --git a/src/utils/myFuntion.js b/src/utils/myFuntion.js
new file mode 100644
index 0000000..74b076c
--- /dev/null
+++ b/src/utils/myFuntion.js
@@ -0,0 +1,56 @@
+import postcss from "../../postcss.config";
+import store from "@/store";
+
+export function pxToVw(size) {
+  return (
+    (100 * size) / postcss.plugins["postcss-px-to-viewport"].viewportWidth +
+    "vw"
+  );
+}
+
+export function handleColor(data) {
+  const leftColor = store.getters && store.getters.leftColor;
+  const rightTopColor = store.getters && store.getters.rightTopColor;
+
+  if (checkType(data) == "array") {
+    data.map((item) => {
+      if (!item.color) {
+        item.leftColor = "#7b75ff";
+        item.rightTopColor = "#7b75ff";
+        return;
+      }
+      for (let key in leftColor) {
+        if (item.color == key) {
+          item.leftColor = leftColor[key];
+          item.rightTopColor = rightTopColor[key];
+        }
+      }
+    });
+    return data;
+  } else if (checkType(data) == "object") {
+    if (!data.color) {
+      data.leftColor = "#7b75ff";
+      data.rightTopColor = "#7b75ff";
+      return;
+    }
+    for (let key in leftColor) {
+      if (data.color == key) {
+        data.leftColor = leftColor[key];
+        data.rightTopColor = rightTopColor[key];
+      }
+    }
+    return data;
+  } else {
+    return data;
+  }
+}
+
+function checkType(value) {
+  if (Array.isArray(value)) {
+    return "array";
+  } else if (value !== null && typeof value === "object") {
+    return "object";
+  } else {
+    return "neither";
+  }
+}
diff --git a/src/views/components/index.js b/src/views/components/index.js
index 0d69539..0efa8e8 100644
--- a/src/views/components/index.js
+++ b/src/views/components/index.js
@@ -15,3 +15,4 @@ 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";
+export { default as house } from "./xiaoqu/house.vue";
diff --git a/src/views/components/xiaoqu/ColorCell/index.vue b/src/views/components/xiaoqu/ColorCell/index.vue
index 4c533b4..706da74 100644
--- a/src/views/components/xiaoqu/ColorCell/index.vue
+++ b/src/views/components/xiaoqu/ColorCell/index.vue
@@ -1,9 +1,13 @@
 <template>
-  <div class="grid-item-main floor-item">
+  <div class="grid-item-main floor-item" @click="handelHouse()">
     <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
+          class="rigth-bottom"
+          v-show="item.color == 'HF' || item.color == 'NF'"
+        ></div>
       </div>
       <div class="house-number">{{ item.name }}</div>
       <div class="item-type">
@@ -55,7 +59,11 @@ export default {
   data() {
     return {};
   },
-  methods: {},
+  methods: {
+    handelHouse() {
+      this.$emit("clickHouse");
+    },
+  },
 };
 </script>
 
@@ -138,8 +146,8 @@ export default {
       top: -10px;
       left: 0;
       .typeis {
-        height: 15px;
-        width: 15px;
+        height: 12px;
+        width: 12px;
         margin-right: 3px;
       }
     }
diff --git a/src/views/components/xiaoqu/building.vue b/src/views/components/xiaoqu/building.vue
index 9964c13..cc99e7b 100644
--- a/src/views/components/xiaoqu/building.vue
+++ b/src/views/components/xiaoqu/building.vue
@@ -1,6 +1,6 @@
 <template>
   <transition>
-    <div class="building-container" v-show="show">
+    <div class="building-container" v-show="show" ref="houseItem">
       <div class="building-floor">
         <div
           class="floor-number"
@@ -15,8 +15,9 @@
         <div class="house" v-for="(item, index) in list" :key="index">
           <colorCell
             :item="house"
-            v-for="house in item"
-            :key="house.holder_id"
+            v-for="(house, houseIndex) in item"
+            :key="index + houseIndex"
+            @clickHouse="clickHouse(house)"
           ></colorCell>
         </div>
       </div>
@@ -32,13 +33,18 @@ import colorCell from "./ColorCell/index.vue";
 export default {
   data() {
     return {
-      show: true,
+      show: false,
       info: {},
       list: [],
     };
   },
   computed: {
-    ...mapGetters(["queryParamsXiaoqu", "leftColor", "rightTopColor"]),
+    ...mapGetters([
+      "queryParamsXiaoqu",
+      "leftColor",
+      "rightTopColor",
+      "houseItem",
+    ]),
   },
   components: {
     colorCell,
@@ -55,6 +61,27 @@ export default {
   },
   created() {},
   methods: {
+    clickHouse(item) {
+      console.log(item);
+      this.$store.commit("SET_BUILDING_WIDTH", {
+        id: item.id,
+        buildingId: item.building_id,
+        deptId: item.dept_id,
+        buildingWidth:
+          this.houseItem.buildingWidth > 0
+            ? this.houseItem.buildingWidth
+            : window.innerWidth - this.$refs.houseItem.offsetWidth,
+        name: item.name,
+        color: item.color,
+        isD: item.is_d,
+        isJ: item.is_j,
+        isK: item.is_k,
+        isx: item.is_x,
+        typename: item.typename,
+        leftColor: item.leftColor,
+        rightTopColor: item.rightTopColor,
+      });
+    },
     async getBuildingInfo() {
       let info = await getBuilding(this.queryParamsXiaoqu.buildingId);
       this.info = info.data;
@@ -65,6 +92,8 @@ export default {
         buildingId: this.queryParamsXiaoqu.buildingId,
       });
 
+      console.log(res.data.filter((item) => item.name == "101室"));
+
       this.list = this.filterFloor(res.data);
 
       console.log(this.list);
@@ -96,17 +125,14 @@ export default {
         categorizedRooms[floor].push(this.handleColor(room));
       });
 
-      // 确定最大楼层
-      const maxFloor = Math.max(...Object.keys(categorizedRooms).map(Number));
-      // 对每层房间号进行从小到大排序
+      const totalFloors = this.info.floor;
       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)
-          )
+      for (let floor = 1; floor <= totalFloors; floor++) {
+        const roomsForFloor = (categorizedRooms[floor] || []).sort(
+          (a, b) => a.name - b.name
         );
+
+        sortedRoomsByFloor.push(roomsForFloor);
       }
 
       return sortedRoomsByFloor.reverse();
@@ -119,9 +145,9 @@ export default {
 .building-container {
   position: absolute;
   z-index: 100;
-  top: 80px;
+  top: 75px;
   right: 0;
-  height: calc(100% - 80px);
+  height: calc(100% - 75px);
   display: flex;
   overflow-y: auto;
   background: #113666;
@@ -151,11 +177,14 @@ export default {
   .building-house-container {
     padding-top: 85px;
     position: relative;
-
+    min-width: 135px;
+    // max-width: 700px;
+    // overflow-x: auto;
+    // overflow-y: hidden;
     height: 100%;
     background: url("~@/assets/images/ui/img_home@2x.png");
     background-repeat: no-repeat;
-    background-size: auto 100%;
+    background-size: cover;
     .building-name {
       position: absolute;
       left: 130px;
@@ -176,12 +205,12 @@ export default {
       align-items: center;
       box-sizing: border-box;
       margin-bottom: 6px;
-
+      height: 23px;
       .floor-item {
         cursor: pointer;
         margin-right: 6px;
-        height: 23px;
-        width: 55px;
+        height: 100%;
+        width: 60px;
         text-align: center;
         line-height: 23px;
         color: #fff;
diff --git a/src/views/components/xiaoqu/house.vue b/src/views/components/xiaoqu/house.vue
new file mode 100644
index 0000000..1dd2748
--- /dev/null
+++ b/src/views/components/xiaoqu/house.vue
@@ -0,0 +1,564 @@
+<template>
+  <transition>
+    <div class="house-container" :style="{ width: handlerWidth }" v-show="show">
+      <div class="house-header">
+        <div class="houser-data">
+          <div class="house-main-row">
+            <div class="house-name">
+              <span class="number-font">{{ houseItem.name }}</span>
+              室（共<span class="number-font"> {{ total }} </span>人）
+            </div>
+            <div class="house-type">{{ houseItem.typename }}</div>
+            <ColorCell :item="houseItem"
+              ><span class="house-color">
+                {{ houseItem.color }}</span
+              ></ColorCell
+            >
+            <div
+              class="house-is"
+              style="border: 1px solid #81204e; color: #e73388"
+              v-show="houseItem.isD == 1"
+            >
+              中共党员
+            </div>
+            <div
+              class="house-is"
+              style="border: 1px solid #734700; color: #e09100"
+              v-show="houseItem.isK == 1"
+            >
+              帮扶对象
+            </div>
+            <div
+              class="house-is"
+              style="border: 1px solid #00694c; color: #00c185"
+              v-show="houseItem.isX == 1"
+            >
+              重点人群
+            </div>
+            <div
+              class="house-is"
+              style="border: 1px solid #006382; color: #02b4e7"
+              v-show="houseItem.isJ == 1"
+            >
+              退伍军人
+            </div>
+          </div>
+          <div class="btn-group">
+            <div class="btn-gather">房屋信息采集</div>
+            <div class="btn-add">添加居民</div>
+            <div class="btn-close" @click="handleClose()">关闭</div>
+          </div>
+        </div>
+        <div class="house-address">公安地址：{{ houseItem.address }}</div>
+      </div>
+      <div class="house-list" v-if="total > 0">
+        <div class="list-item" v-for="item in list" :key="item.id">
+          <div class="person-icon">
+            <img :src="filterIcon(item.credentialNo)" alt="" />
+            <div class="person-name">{{ item.name }}</div>
+          </div>
+          <div class="person-data">
+            <div class="data-row">
+              <div class="row-item">
+                <div class="row-item-lable">
+                  性別：{{ getGender(item.credentialNo) }}
+                </div>
+                <div class="row-item-value"></div>
+              </div>
+              <div class="row-item">
+                <div class="row-item-lable">身份证号：</div>
+                <div class="row-item-value">{{ item.credentialNo }}</div>
+              </div>
+              <div class="row-item">
+                <div class="row-item-lable">户籍：</div>
+                <div
+                  class="row-item-value"
+                  :style="{ color: item.type == 1 ? '#00C185' : '#E73388' }"
+                >
+                  {{ item.typename }}
+                </div>
+              </div>
+            </div>
+            <div class="data-row">
+              <div class="row-item">
+                <div class="row-item-lable">年龄：</div>
+                <div class="row-item-value">
+                  {{ calculateAge(item.credentialNo) }}岁
+                </div>
+              </div>
+              <div class="row-item">
+                <div class="row-item-lable">手机号：</div>
+                <div class="row-item-value">{{ item.phone }}</div>
+              </div>
+              <div class="row-item">
+                <div class="row-item-lable">分色：</div>
+                <div class="row-item-value">
+                  <ColorCell :item="item" size="small"
+                    ><span class="house-color">
+                      {{ item.color }}</span
+                    ></ColorCell
+                  >
+                </div>
+              </div>
+            </div>
+            <div class="data-row">
+              <div class="row-item">
+                <div class="row-item-lable">出生年月：</div>
+                <div class="row-item-value">
+                  {{ extractBirthMonth(item.credentialNo) }}
+                </div>
+              </div>
+              <div class="row-item">
+                <div class="row-item-lable">数据更新时间：</div>
+                <div class="row-item-value" style="color: #ffb82f">
+                  {{ item.updateTime }}
+                </div>
+              </div>
+              <div class="row-item">
+                <div class="row-item-lable">更新人员：</div>
+                <div class="row-item-value" style="color: #ffb82f">
+                  {{ item.updateBy }}
+                </div>
+              </div>
+            </div>
+            <div class="data-row last-row">
+              <div class="is-list">
+                <div
+                  class="house-is"
+                  style="border: 1px solid #81204e; color: #e73388"
+                  v-show="item.isD == 1"
+                >
+                  中共党员
+                </div>
+                <div
+                  class="house-is"
+                  style="border: 1px solid #734700; color: #e09100"
+                  v-show="item.isK == 1"
+                >
+                  帮扶对象
+                </div>
+                <div
+                  class="house-is"
+                  style="border: 1px solid #00694c; color: #00c185"
+                  v-show="item.isX == 1"
+                >
+                  重点人群
+                </div>
+                <div
+                  class="house-is"
+                  style="border: 1px solid #006382; color: #02b4e7"
+                  v-show="item.isJ == 1"
+                >
+                  退伍军人
+                </div>
+              </div>
+              <div class="row-btn">
+                <div>删除</div>
+
+                <div>修改</div>
+                <div>设为户主</div>
+              </div>
+            </div>
+          </div>
+          <div class="item-key" v-show="houseItem.holderId == item.id">
+            <span>户主</span>
+          </div>
+        </div>
+      </div>
+      <div v-else class="no-data">
+        <el-empty
+          :image="require('@/assets/images/ui/noData.png')"
+          description="暂无居民"
+        ></el-empty>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { getHouse } from "@/api/taicangpop/house.js";
+import { listPerson } from "@/api/taicangpop/person.js";
+import { pxToVw, handleColor } from "@/utils/myFuntion.js";
+import ColorCell from "@/components/ColorCell";
+export default {
+  components: { ColorCell },
+  data() {
+    return {
+      show: false,
+      total: 0,
+      list: [],
+    };
+  },
+  watch: {
+    houseItem: {
+      handler(val) {
+        if (!val.id) return;
+        this.getPersonList();
+      },
+      deep: true,
+    },
+  },
+
+  computed: {
+    ...mapGetters(["houseItem", "queryParamsXiaoqu"]),
+    handlerWidth() {
+      return pxToVw(this.houseItem.buildingWidth);
+    },
+  },
+  created() {},
+  methods: {
+    filterIcon(credentialNo) {
+      let sex = this.getGender(credentialNo);
+      if (sex == "男") {
+        return require("@/assets/images/ui/img_man@2x.png");
+      } else {
+        return require("@/assets/images/ui/img_woman@2x.png");
+      }
+    },
+
+    handleClose() {
+      this.show = false;
+      this.$store.commit("SET_BUILDING_WIDTH", {});
+    },
+    async getPersonList() {
+      let result = await getHouse(this.houseItem.id);
+      this.houseItem.holderId = result.data.holderId; //户主
+      this.houseItem.address = result.data.address;
+      let res = await listPerson({
+        buildingId: this.houseItem.buildingId,
+        houseId: this.houseItem.id,
+        deptId: this.houseItem.deptId,
+      });
+
+      this.list = handleColor(res.rows);
+      this.total = res.total;
+      this.show = true;
+    },
+    isValidID(id) {
+      // 校验长度和基本格式
+      if (!/^\d{15}|\d{18}$/.test(id)) return false;
+
+      // 将15位升级为18位
+      if (id.length === 15) {
+        id =
+          id.substr(0, 6) + "19" + id.substr(6) + this.calculateCheckDigit(id);
+      }
+
+      // 验证18位身份证的校验位
+      return this.validateID18(id);
+    },
+
+    validateID18(id) {
+      if (!/^\d{17}[\dXx]$/.test(id)) return false;
+
+      // 校验码计算
+      const checkDigits = "10X98765432";
+      const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
+      let sum = 0;
+
+      for (let i = 0; i < 17; i++) {
+        sum += id[i] * weights[i];
+      }
+
+      const checkDigit = checkDigits[sum % 11];
+      return checkDigit.toUpperCase() === id[17].toUpperCase();
+    },
+
+    calculateCheckDigit(id) {
+      const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
+      const checkDigits = "10X98765432";
+      let sum = 0;
+
+      for (let i = 0; i < id.length; i++) {
+        sum += id[i] * weights[i];
+      }
+
+      return checkDigits[sum % 11];
+    },
+
+    calculateAge(id) {
+      if (!this.isValidID(id)) return "Invalid ID";
+
+      let birthDate;
+      if (id.length === 18) {
+        // 从18位身份证中提取出生日期
+        birthDate = id.substr(6, 8);
+      } else if (id.length === 15) {
+        // 从15位身份证中提取出生日期
+        birthDate = "19" + id.substr(6, 6);
+      } else {
+        return "Invalid ID length";
+      }
+
+      // 格式化出生日期
+      birthDate = birthDate.replace(/(.{4})(.{2})/, "$1-$2-");
+      const birth = new Date(birthDate);
+      const today = new Date();
+      let age = today.getFullYear() - birth.getFullYear();
+
+      // 计算是否已过生日
+      if (
+        today.getMonth() + 1 < birth.getMonth() + 1 ||
+        (today.getMonth() + 1 === birth.getMonth() + 1 &&
+          today.getDate() < birth.getDate())
+      ) {
+        age--;
+      }
+
+      return age;
+    },
+
+    extractBirthMonth(id) {
+      if (!this.isValidID(id)) return "Invalid ID";
+
+      let birthDate;
+      if (id.length === 18) {
+        // 从18位身份证中提取出生日期
+        birthDate = id.substr(6, 8);
+      } else if (id.length === 15) {
+        // 从15位身份证中提取出生日期
+        birthDate = "19" + id.substr(6, 6);
+      } else {
+        return "Invalid ID length";
+      }
+
+      // 格式化出生日期为 YYYY-MM
+      birthDate = birthDate.replace(/(\d{4})(\d{2})(\d{2})/, "$1-$2");
+      return birthDate;
+    },
+
+    getGender(id) {
+      if (!this.isValidID(id)) return "Invalid ID";
+
+      // 在18位身份证中，第17位为性别标识
+      return parseInt(id[16]) % 2 === 0 ? "女" : "男";
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+div {
+  font-family: "Alibaba-PuHuiTi-Regular.otf";
+}
+.house-container {
+  position: absolute;
+  z-index: 100;
+  top: 75px;
+  left: 0;
+  height: calc(100% - 75px);
+  display: flex;
+  overflow-y: auto;
+  background: #113666;
+  border: 1px solid #2d6cad;
+  border-right: 0px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 15px;
+  .house-header {
+    .houser-data {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      & > div {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .house-list {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    .list-item {
+      position: relative;
+      height: calc((100% / 4) - 15px);
+      border: 1px solid #2468c1;
+      margin-bottom: 15px;
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+      .item-key {
+        position: absolute;
+        right: 0;
+        top: 0;
+        height: 66px;
+        width: 66px;
+        background: url("~@/assets/images/ui/img_tag_hz@2x.png");
+        background-size: 100% 100%;
+        font-size: 18px;
+        line-height: 40px;
+        color: #ffffff;
+        text-shadow: 0px 2px 0px rgba(7, 58, 123, 0.5);
+        font-family: "BY";
+        text-align: right;
+        span {
+          display: inline-block;
+          transform: rotate(45deg);
+        }
+      }
+      .person-icon {
+        width: 170px;
+        height: 100%;
+        background: linear-gradient(0deg, #00234e, #003980);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        img {
+          display: block;
+          height: 74px;
+          width: 74px;
+        }
+        .person-name {
+          margin-top: 10px;
+          font-size: 16px;
+          color: #ffffff;
+          background: url("~@/assets/images/ui/img_name_bg@2x.png");
+          background-size: 100% 100%;
+          padding: 3px 20px;
+        }
+      }
+      .person-data {
+        flex: 1;
+        height: 100%;
+        padding: 0 10px;
+        background: #004994;
+        .data-row,
+        .row-item {
+          display: flex;
+          align-items: center;
+        }
+        .data-row {
+          height: calc(100% / 4);
+          font-size: 14px;
+          color: #9acfff;
+          font-weight: 400;
+          //   padding: 10px 0;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+          .row-item-value {
+            color: #fff;
+          }
+        }
+        .data-row > div {
+          flex: 1;
+        }
+      }
+    }
+  }
+
+  .house-main-row > div {
+    margin-right: 10px;
+  }
+
+  .house-name {
+    font-size: 18px;
+    color: #ffffff;
+  }
+  .number-font {
+    font-size: 20px;
+    color: #ffffff;
+    font-style: italic;
+    font-family: "DIN-Medium-2.otf";
+    font-weight: bold;
+  }
+  .last-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: 0px !important;
+    .is-list,
+    .row-btn {
+      display: flex;
+      align-items: center;
+    }
+    .row-btn {
+      flex-direction: row-reverse;
+
+      & > div {
+        cursor: pointer;
+        color: #fff;
+        margin: 0 0 0 10px;
+        font-size: 14px;
+
+        background: url("~@/assets/images/ui/btn_1@2x.png");
+        background-size: 100% 100%;
+        padding: 3px 15px;
+      }
+      & > div:last-child {
+        background: url("~@/assets/images/ui/tab1.png");
+        background-size: 100% 100%;
+      }
+    }
+  }
+  .house-is {
+    font-size: 14px;
+    background: rgba(3, 24, 47, 0.8);
+    padding: 0 6px;
+  }
+  .house-type {
+    font-size: 14px;
+    color: #00c185;
+  }
+  .house-color {
+    display: inline-block;
+    margin-left: 3px;
+    font-size: 14px;
+    color: #fff;
+  }
+  .btn-group > div {
+    cursor: pointer;
+    margin-left: 5px;
+    font-size: 14px;
+    color: #cdfbff;
+    font-weight: 400;
+    padding: 7px 12px 10px 12px;
+    background: url("~@/assets/images/ui/btn_bg.png");
+    background-size: 100% 100%;
+  }
+  .btn-group > div:last-child {
+    background: transparent;
+  }
+  .house-address {
+    font-size: 18px;
+    color: #ffffff;
+    font-family: "Alibaba-PuHuiTi-Regular.otf";
+    margin: 3px 0 6px 0;
+  }
+  .no-data {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+/* 下面我们会解释这些 class 是做什么的 */
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+
+::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  height: 10px;
+  width: 1px;
+  background: rgba(255, 255, 255, 0.5);
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+</style>
diff --git a/src/views/xiaoqu.vue b/src/views/xiaoqu.vue
index 057a6ea..34e3c2d 100644
--- a/src/views/xiaoqu.vue
+++ b/src/views/xiaoqu.vue
@@ -28,6 +28,7 @@
       <bottomList />
     </foldPaneBottom>
     <building />
+    <house />
   </div>
 </template>
 
@@ -46,6 +47,7 @@ import {
   mapSearchBox,
   bottomList,
   building,
+  house,
 } from "@/views/components/index.js";
 export default {
   data() {
@@ -64,6 +66,7 @@ export default {
     mapSearchBox,
     bottomList,
     building,
+    house,
   },
   computed: {
     ...mapGetters(["xiaoquIntroduce", "queryParamsXiaoqu"]),