diff --git a/src/components/info/HouseInfo.vue b/src/components/info/HouseInfo.vue
index af50501..eb842c5 100644
--- a/src/components/info/HouseInfo.vue
+++ b/src/components/info/HouseInfo.vue
@@ -1,10 +1,347 @@
 <template>
-    
+    <div class="container">
+        <div class="body">
+            <n-spin :show="isInfoLoading" stroke="#FFFFFF">
+                <template #description><span style="color:#FFFFFF;">正在加载...</span></template>
+                <div class="left">
+                    <div class="group">
+                        <div class="title">
+                            <span>基础信息</span>
+                            <Icon class="go-back" @click="onGoBackClick" title="返回">
+                                <ArrowStepBack16Filled />
+                            </Icon>
+                        </div>
+                        <div class="content">
+                            <n-space class="row">
+                                <n-space class="item" align="center">
+                                    <label class="name">所在社区</label>
+                                    <div class="value">{{ houseInfo.communityName }}</div>
+                                </n-space>
+                                <n-space class="item" align="center">
+                                    <label class="name">所在小区/组</label>
+                                    <div class="value">{{ houseInfo.residentialName }}</div>
+                                </n-space>
+                                <n-space class="item" align="center">
+                                    <label class="name">楼/排名称</label>
+                                    <div class="value">{{ houseInfo.buildingName }}</div>
+                                </n-space>
+                            </n-space>
+                            <n-space class="row">
+                                <n-space class="item" align="center">
+                                    <label class="name">所在单元/列</label>
+                                    <div class="value">{{ houseInfo.affiliationUnit }}</div>
+                                </n-space>
+                                <n-space class="item" align="center">
+                                    <label class="name">所在层/院</label>
+                                    <div class="value">{{ houseInfo.affiliationFloors }}</div>
+                                </n-space>
+                                <n-space class="item" align="center">
+                                    <label class="name">门牌号</label>
+                                    <div class="value">{{ houseInfo.houseNum }}</div>
+                                </n-space>
+                            </n-space>
+                            <n-space class="row">
+                                <n-space class="item" align="center">
+                                    <label class="name">房屋类型</label>
+                                    <div class="value">{{ houseInfo.typeName }}</div>
+                                </n-space>
+                                <n-space class="item" align="center">
+                                    <label class="name">房屋性质</label>
+                                    <div class="value">{{ houseInfo.natureName }}</div>
+                                </n-space>
+                                <n-space class="item" align="center">
+                                    <label class="name">房屋种类</label>
+                                    <div class="value">{{ houseInfo.categoryName }}</div>
+                                </n-space>
+                            </n-space>
+                            <n-space class="row">
+                                <n-space class="item" align="center">
+                                    <label class="name">房屋结构</label>
+                                    <div class="value">{{ houseInfo.structureName }}</div>
+                                </n-space>
+                                <n-space class="item" align="center">
+                                    <label class="name">房屋面积</label>
+                                    <div class="value">{{ houseInfo.roomArea }}</div>
+                                </n-space>
+                                <n-space class="item" align="center">
+                                    <label class="name">建筑用途</label>
+                                    <div class="value">{{ houseInfo.buildingPurposeName }}</div>
+                                </n-space>
+                            </n-space>
+                            <n-space class="row">
+                                <n-space class="item" align="center">
+                                    <label class="name">房屋间数</label>
+                                    <div class="value">{{ houseInfo.roomNum }}</div>
+                                </n-space>
+                                <n-space class="item" align="center">
+                                    <label class="name">产权证号</label>
+                                    <div class="value">{{ houseInfo.certificateNum }}</div>
+                                </n-space>
+                                <n-space class="item" align="center">
+                                    <label class="name">房屋用途</label>
+                                    <div class="value">{{ houseInfo.roomUseName }}</div>
+                                </n-space>
+                            </n-space>
+                            <n-space class="row">
+                                <n-space class="item" align="center">
+                                    <label class="name">是否空置房</label>
+                                    <div class="value">{{ houseInfo.isVacant }}</div>
+                                </n-space>
+                                <n-space class="item" align="center">
+                                    <label class="name">是否出租屋</label>
+                                    <div class="value">{{ houseInfo.isRental }}</div>
+                                </n-space>
+                                <n-space class="item" align="center">
+                                    <label class="name">隐患类型</label>
+                                    <div class="value">{{ houseInfo.dangerName }}</div>
+                                </n-space>
+                            </n-space>
+                            <n-space class="row">
+                                <n-space class="item" align="center">
+                                    <label class="name">登记日期</label>
+                                    <div class="value">{{ houseInfo.registrationDate }}</div>
+                                </n-space>
+                                <n-space class="item" align="center">
+                                    <label class="name">所属单位</label>
+                                    <div class="value">{{ houseInfo.affiliatedUnit }}</div>
+                                </n-space>
+                            </n-space>
+                        </div>
+                    </div>
+                    <div class="group">
+                        <div class="title">租住情况</div>
+                        <div class="content">
+                            <n-space class="row">
+                                <n-space class="item" align="center">
+                                    <label class="name">租住类型</label>
+                                    <div class="value">{{ houseInfo.lodgeTypeName }}</div>
+                                </n-space>
+                            </n-space>
+                        </div>
+                    </div>
+                    <div class="group">
+                        <div class="title">房主</div>
+                        <div class="content">
+                            <n-space class="row">
+                                <n-space class="item" align="center">
+                                    <label class="name">房主姓名</label>
+                                    <div class="value">{{ houseInfo.homeowner }}</div>
+                                </n-space>
+                                <n-space class="item" align="center">
+                                    <label class="name">证件种类</label>
+                                    <div class="value">{{ houseInfo.documentName }}</div>
+                                </n-space>
+                                <n-space class="item" align="center">
+                                    <label class="name">证件号码</label>
+                                    <div class="value">{{ houseInfo.documentNum }}</div>
+                                </n-space>
+                            </n-space>
+                            <n-space class="row">
+                                <n-space class="item" align="center">
+                                    <label class="name">联系电话</label>
+                                    <div class="value">{{ houseInfo.phone }}</div>
+                                </n-space>
+                            </n-space>
+                        </div>
+                    </div>
+                    <div class="group">
+                        <div class="title">托管人</div>
+                        <div class="content">
+                            <n-space class="row">
+                                <n-space class="item" align="center">
+                                    <label class="name">托管人姓名</label>
+                                    <div class="value">{{ houseInfo.custodian }}</div>
+                                </n-space>
+                                <n-space class="item" align="center">
+                                    <label class="name">证件种类</label>
+                                    <div class="value">{{ houseInfo.custodianDocumentName }}</div>
+                                </n-space>
+                                <n-space class="item" align="center">
+                                    <label class="name">证件号码</label>
+                                    <div class="value">{{ houseInfo.custodianDocumentNum }}</div>
+                                </n-space>
+                            </n-space>
+                            <n-space class="row">
+                                <n-space class="item" align="center">
+                                    <label class="name">联系电话</label>
+                                    <div class="value">{{ houseInfo.custodianPhone }}</div>
+                                </n-space>
+                                <n-space class="item" align="center">
+                                    <label class="name">与房主关系</label>
+                                    <div class="value">{{ houseInfo.relationshipHomeowner }}</div>
+                                </n-space>
+                            </n-space>
+                        </div>
+                    </div>
+                </div>
+            </n-spin>
+            <n-spin :show="isPopulationLoading" stroke="#FFFFFF">
+                <template #description><span style="color:#FFFFFF;">正在加载...</span></template>
+                <div class="right">
+                    <div class="title">共{{ populationList.length }}人</div>
+                    <div class="list" v-if="populationList.length > 0">
+                        <div class="card" v-for="item in populationList" :key="item.populationInfoId"
+                            @click="onPopulationClick(item.populationInfoId)">
+                            <div>姓名：{{ item.name }}</div>
+                            <div>年龄：{{ item.age }}</div>
+                            <div>证件类型：{{ item.idcardType }}</div>
+                            <div>证件号码：{{ item.idcard }}</div>
+                            <div>联系方式：{{ item.phone }}</div>
+                        </div>
+                    </div>
+                </div>
+            </n-spin>
+        </div>
+    </div>
 </template>
 
 <script setup>
+import { ref, reactive, inject } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { NSpace, NSpin } from 'naive-ui';
+import { ArrowStepBack16Filled } from '@vicons/fluent';
+import { Icon } from '@vicons/utils';
+
+const route = useRoute();
+const router = useRouter();
+const query = route.query;
+const axios = inject('axios');
+
+const houseInfo = reactive({});
+const populationList = reactive([]);
+
+const isInfoLoading = ref(false);
+const isPopulationLoading = ref(false);
+
+const initHouseInfo = () => {
+    isInfoLoading.value = true;
+    axios.get(`/api/house/get/${query.houseId}`, {}).then(res => {
+        let data = res.data;
+        houseInfo.communityName = data.communityName;
+        houseInfo.residentialName = data.residentialName;
+        houseInfo.buildingName = data.buildingName;
+        houseInfo.affiliationUnit = data.affiliationUnit;
+        houseInfo.affiliationFloors = data.affiliationFloors;
+        houseInfo.houseNum = data.houseNum;
+        houseInfo.typeName = data.typeName;
+        houseInfo.natureName = data.natureName;
+        houseInfo.categoryName = data.categoryName;
+        houseInfo.structureName = data.structureName;
+        houseInfo.roomArea = data.roomArea;
+        houseInfo.buildingPurposeName = data.buildingPurposeName;
+        houseInfo.roomNum = data.roomNum;
+        houseInfo.certificateNum = data.certificateNum;
+        houseInfo.roomUseName = data.roomUseName;
+        houseInfo.isVacant = data.isVacant == 0 ? '否' : '是';
+        houseInfo.isRental = data.isRental == 0 ? '否' : '是';
+        houseInfo.dangerName = data.dangerName;
+        houseInfo.registrationDate = data.registrationDate;
+        houseInfo.affiliatedUnit = data.affiliatedUnit;
+        houseInfo.lodgeTypeName = data.lodgeTypeName;
+        houseInfo.homeowner = data.homeowner;
+        houseInfo.documentName = data.documentName;
+        houseInfo.documentNum = data.documentNum;
+        houseInfo.phone = data.phone;
+        houseInfo.custodian = data.custodian;
+        houseInfo.custodianDocumentName = data.custodianDocumentName;
+        houseInfo.custodianDocumentNum = data.custodianDocumentNum;
+        houseInfo.custodianPhone = data.custodianPhone;
+        houseInfo.relationshipHomeowner = data.relationshipHomeowner;
+    }).catch(err => { console.error(err); }).finally(() => {
+        isInfoLoading.value = false;
+    });
+}
+
+const initPopulationList = () => {
+    isPopulationLoading.value = true;
+    axios.get(`/api/populationinfo/list/house-id/${query.houseId}`).then(res => {
+        let data = res.data;
+        populationList.push(...data);
+    }).catch(err => {
+        console.error(err);
+    }).finally(() => {
+        isPopulationLoading.value = false;
+    });
+}
+
+const onGoBackClick = () => {
+    router.go(-1);
+}
+
+const onPopulationClick = (populationInfoId) => {
+    router.push({
+        path: 'population-info',
+        query: {
+            populationInfoId: populationInfoId
+        }
+    })
+}
+
+initHouseInfo();
+initPopulationList();
+
 </script>
 
 <style lang="stylus" scoped>
-
+.container
+    --var-left-width 600px
+    --var-right-width 230px
+    --var-parents-width 200px
+    --var-label-width 70px
+    --var-value-width 100px
+    .top
+        padding 10px 0
+        font-weight bold
+    .body
+        display flex
+        justify-content space-between
+       .left
+            width var(--var-left-width)
+            .group
+                .title
+                    font-weight bold
+                    padding 10px 0
+                    display flex
+                    align-items center
+                    .go-back
+                        margin-left 10px
+                        cursor pointer
+                .content
+                    .row
+                        margin-bottom 10px
+                        .item
+                            font-size 12px
+                            .name
+                                font-weight bold
+                                display block
+                                width var(--var-label-width)
+                            .value
+                                width var(--var-value-width)
+                                height 20px
+                                line-height 20px
+                                font-weight 400
+                                padding 5px
+                                color #B7B9BB
+                                background-color rgba(239, 239, 239, 0.1)
+                                overflow hidden
+                                text-overflow ellipsis
+                                white-space nowrap
+        .right
+            width var(--var-right-width)
+            font-size 12px
+            margin-top 44px
+            .title
+                background-color rgba(239, 239, 239, 0.1)
+                padding 10px
+            .list
+                margin-top 10px
+                background-color rgba(239, 239, 239, 0.1)
+                padding 10px
+                .card
+                    background-color rgba(255, 255, 255, 0.25)
+                    padding 5px
+                    margin-bottom 5px
+                    cursor pointer
+                    &:last-child
+                        margin-bottom 0
 </style>
\ No newline at end of file
diff --git a/src/components/info/PopulationInfo.vue b/src/components/info/PopulationInfo.vue
index af50501..959c37b 100644
--- a/src/components/info/PopulationInfo.vue
+++ b/src/components/info/PopulationInfo.vue
@@ -1,10 +1,344 @@
 <template>
-    
+    <div class="container">
+        <div class="top">
+            <span>基础信息</span>
+            <Icon class="go-back" @click="onGoBackClick" title="返回">
+                <ArrowStepBack16Filled />
+            </Icon>
+        </div>
+        <div class="body">
+            <n-spin :show="isInfoLoading" stroke="#FFFFFF">
+                <template #description><span style="color:#FFFFFF;">正在加载...</span></template>
+                <div class="left">
+                    <n-space class="row" justify="space-between">
+                        <n-space class="item" align="center">
+                            <label class="name">姓名</label>
+                            <div class="value">{{ populationInfo.name }}</div>
+                        </n-space>
+                        <n-space class="item" align="center">
+                            <label class="name">证件类型</label>
+                            <div class="value">{{ populationInfo.idcardType }}</div>
+                        </n-space>
+                        <n-space class="item" align="center">
+                            <label class="name">证件号码</label>
+                            <div class="value" style="width: 200px;">{{ populationInfo.idcard }}</div>
+                        </n-space>
+                    </n-space>
+                    <n-space class="row" justify="space-between">
+                        <n-space class="item" align="center">
+                            <label class="name">性别</label>
+                            <div class="value">{{ populationInfo.sex }}</div>
+                        </n-space>
+                        <n-space class="item" align="center">
+                            <label class="name">名族</label>
+                            <div class="value" style="width: 120px">{{ populationInfo.nation }}</div>
+                        </n-space>
+                        <n-space class="item" align="center">
+                            <label class="name">文化程度</label>
+                            <div class="value" style="width: 120px">{{ populationInfo.education }}</div>
+                        </n-space>
+                    </n-space>
+                    <n-space class="row" justify="space-between">
+                        <n-space class="text" vertical>
+                            <label class="name">就读院校及专业（需注明学历）</label>
+                            <div class="value">{{ populationInfo.description }}</div>
+                        </n-space>
+                    </n-space>
+                    <n-space class="row" justify="space-between">
+                        <n-space class="item" align="center">
+                            <label class="name">所属党派</label>
+                            <div class="value">{{ populationInfo.organization }}</div>
+                        </n-space>
+                        <n-space class="item" align="center">
+                            <label class="name">宗教信仰</label>
+                            <div class="value">{{ populationInfo.religion }}</div>
+                        </n-space>
+                        <n-space class="item" align="center">
+                            <label class="name">婚姻状况</label>
+                            <div class="value">{{ populationInfo.marriageStatus }}</div>
+                        </n-space>
+                        <n-space class="item" align="center">
+                            <label class="name">婚变日期</label>
+                            <div class="value">{{ populationInfo.marriageChangeTime }}</div>
+                        </n-space>
+                    </n-space>
+                    <n-space class="row" justify="space-between">
+                        <n-space class="item" align="center">
+                            <label class="name">初婚日期</label>
+                            <div class="value">{{ populationInfo.marriageFirstTime }}</div>
+                        </n-space>
+                        <n-space class="item" align="center">
+                            <label class="name">社会保险情况</label>
+                            <div class="value" style="width: 120px">{{ populationInfo.socialSecurity }}</div>
+                        </n-space>
+                        <n-space class="item" align="center">
+                            <label class="name">健康状况</label>
+                            <div class="value">{{ populationInfo.healthStatus }}</div>
+                        </n-space>
+                    </n-space>
+                    <n-space class="row" justify="space-between">
+                        <n-space class="item" align="center">
+                            <label class="name">就业状态</label>
+                            <div class="value">{{ populationInfo.departmentType }}</div>
+                        </n-space>
+                        <n-space class="item" align="center">
+                            <label class="name">工作单位</label>
+                            <div class="value">{{ populationInfo.department }}</div>
+                        </n-space>
+                        <n-space class="item" align="center">
+                            <label class="name">工作职务</label>
+                            <div class="value">{{ populationInfo.pastion }}</div>
+                        </n-space>
+                    </n-space>
+                    <n-space class="row" justify="space-between">
+                        <n-space class="item" align="center">
+                            <label class="name">专业技术职称</label>
+                            <div class="value">{{ populationInfo.pastionTitle }}</div>
+                        </n-space>
+                        <n-space class="item" align="center">
+                            <label class="name">专长</label>
+                            <div class="value">{{ populationInfo.expertise }}</div>
+                        </n-space>
+                        <n-space class="item" align="center">
+                            <label class="name">联系电话</label>
+                            <div class="value" style="width: 120px">{{ populationInfo.phone }}</div>
+                        </n-space>
+                    </n-space>
+                    <n-space class="row" justify="space-between">
+                        <n-space class="item" align="center">
+                            <label class="name">户籍地址</label>
+                            <div class="value" style="width: 530px">{{ populationInfo.domicileAddress }}</div>
+                        </n-space>
+                    </n-space>
+                    <n-space class="row" justify="space-between">
+                        <n-space class="item" align="center">
+                            <label class="name">流动日期</label>
+                            <div class="value">{{ populationInfo.flowTime }}</div>
+                        </n-space>
+                        <n-space class="item" align="center">
+                            <label class="name">流动原因</label>
+                            <div class="value" style="width: 120px">{{ populationInfo.flowReason }}</div>
+                        </n-space>
+                        <n-space class="item" align="center">
+                            <label class="name">流动其他原因</label>
+                            <div class="value" style="width: 120px">{{ populationInfo.flowReasontext }}</div>
+                        </n-space>
+                    </n-space>
+                    <n-space class="row" justify="space-between">
+                        <n-space class="parents" vertical>
+                            <div class="card father">
+                                <div class="title">父亲</div>
+                                <div class="content">
+                                    <div class="name">姓名：{{ populationInfo.fatherName }}</div>
+                                    <div class="id-card">身份证：{{ populationInfo.fatherIdcard }}</div>
+                                    <div class="phone">联系电话：{{ populationInfo.fatherPhone }}</div>
+                                </div>
+                            </div>
+                            <div class="card mother">
+                                <div class="title">母亲</div>
+                                <div class="content">
+                                    <div class="name">姓名：{{ populationInfo.motherName }}</div>
+                                    <div class="id-card">身份证：{{ populationInfo.motherIdcard }}</div>
+                                    <div class="phone">联系电话：{{ populationInfo.motherPhone }}</div>
+                                </div>
+                            </div>
+                        </n-space>
+                        <div class="relationship"></div>
+                    </n-space>
+                </div>
+            </n-spin>
+            <n-spin :show="isHouseLoading" stroke="#FFFFFF">
+                <template #description><span style="color:#FFFFFF;">正在加载...</span></template>
+                <div class="right">
+                    <div class="title">共{{ houseList.length }}套房</div>
+                    <div class="list" v-if="houseList.length > 0">
+                        <div class="card" v-for="house in houseList" :key="house.houseId"
+                            @click="onHouseClick(house.houseId)">
+                            <div>所在社区：{{ house.communityName }}</div>
+                            <div>所在小区/组：{{ house.residentialName }}</div>
+                            <div>楼/排名称：{{ house.buildingName }}</div>
+                            <div>所在单元/列：{{ house.affiliationUnit }}</div>
+                            <div>门牌号：{{ house.houseNum }}</div>
+                        </div>
+                    </div>
+                </div>
+            </n-spin>
+        </div>
+    </div>
 </template>
 
 <script setup>
+import { ref, reactive, inject } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { NSpace, NSpin } from 'naive-ui';
+import { ArrowStepBack16Filled } from '@vicons/fluent';
+import { Icon } from '@vicons/utils';
+
+const route = useRoute();
+const router = useRouter();
+const query = route.query;
+const axios = inject('axios');
+
+const populationInfo = reactive({});
+const houseList = reactive([]);
+const isInfoLoading = ref(false);
+const isHouseLoading = ref(false);
+
+const initPopulationInfo = () => {
+    isInfoLoading.value = true;
+    axios.get(`/api/populationinfo/get/${query.populationInfoId}`, {}).then(res => {
+        let data = res.data;
+        populationInfo.name = data.name;
+        populationInfo.idcardType = data.idcardType;
+        populationInfo.idcard = data.idcard;
+        populationInfo.sex = data.sex;
+        populationInfo.nation = data.nation;
+        populationInfo.education = data.education;
+        populationInfo.organization = data.organization;
+        populationInfo.religion = data.religion;
+        populationInfo.marriageStatus = data.marriageStatus;
+        populationInfo.marriageChangeTime = data.marriageChangeTime;
+        populationInfo.marriageFirstTime = data.marriageFirstTime;
+        populationInfo.socialSecurity = data.socialSecurity;
+        populationInfo.healthStatus = data.healthStatus;
+        populationInfo.departmentType = data.departmentType;
+        populationInfo.department = data.department;
+        populationInfo.pastion = data.pastion;
+        populationInfo.pastionTitle = data.pastionTitle;
+        populationInfo.expertise = data.expertise;
+        populationInfo.phone = data.phone;
+        populationInfo.domicileAddress = data.domicileAddress;
+        populationInfo.flowTime = data.flowTime;
+        populationInfo.flowReason = data.flowReason;
+        populationInfo.flowReasontext = data.flowReasontext;
+        populationInfo.fatherId = data.fatherId;
+        populationInfo.fatherName = data.fatherName;
+        populationInfo.fatherPhone = data.fatherPhone;
+        populationInfo.fatherIdcard = data.fatherIdcard;
+        populationInfo.motherId = data.motherId;
+        populationInfo.motherName = data.motherName;
+        populationInfo.motherPhone = data.motherPhone;
+        populationInfo.motherIdcard = data.motherIdcard;
+    }).catch(res => {
+        console.error(res);
+    }).finally(() => {
+        isInfoLoading.value = false;
+    })
+}
+
+const initHouseList = () => {
+    isHouseLoading.value = true;
+    axios.get(`/api/house/list/population-info-id/${query.populationInfoId}`, {}).then(res => {
+        let data = res.data;
+        houseList.push(...data);
+    }).catch(res => {
+        console.error(res);
+    }).finally(() => {
+        isHouseLoading.value = false;
+    })
+}
+
+const onGoBackClick = () => {
+    router.go(-1);
+}
+
+const onHouseClick = (houseId) => {
+    router.push({
+        path: 'house-info',
+        query: {
+            houseId: houseId
+        }
+    })
+}
+
+initPopulationInfo();
+initHouseList();
+
 </script>
 
 <style lang="stylus" scoped>
-
+.container
+    --var-left-width 600px
+    --var-right-width 230px
+    --var-parents-width 200px
+    .top
+        padding 10px 0
+        font-weight bold
+        display flex
+        align-items center
+        .go-back
+            margin-left 10px
+            cursor pointer
+    .body
+        display flex
+        justify-content space-between
+       .left
+            width var(--var-left-width)
+            .row
+                margin-bottom 10px
+                .item
+                    font-size 12px
+                    .name
+                        font-weight bold
+                    .value
+                        width 70px
+                        height 20px
+                        line-height 20px
+                        font-weight 400
+                        padding 5px
+                        color #B7B9BB
+                        background-color rgba(239, 239, 239, 0.1)
+                        overflow hidden
+                        text-overflow ellipsis
+                        white-space nowrap
+                .text
+                    font-size 12px
+                    .name
+                        font-weight bold
+                    .value
+                        width var(--var-left-width)
+                        min-height 100px
+                        line-height 20px
+                        min-width 100px
+                        padding 5px
+                        color #B7B9BB
+                        background-color rgba(239, 239, 239, 0.1)
+                        box-sizing border-box
+                .parents
+                    font-size 12px
+                    width var(--var-parents-width)
+                    .card
+                        .title
+                            text-align center
+                            padding 2px
+                        .content
+                            background-color rgba(239, 239, 239, 0.1)
+                            padding 6px
+                    .father
+                        .title
+                            background-color #4095E5
+                    .mother 
+                        .title
+                            background-color #E26B60
+                .relationship
+                    width calc(var(--var-left-width) - var(--var-parents-width) - 15px)
+                    height 100%
+                    background-color rgba(239, 239, 239, 0.1)
+        .right
+            width var(--var-right-width)
+            font-size 12px
+            .title
+                background-color rgba(239, 239, 239, 0.1)
+                padding 10px
+            .list
+                margin-top 10px
+                background-color rgba(239, 239, 239, 0.1)
+                padding 10px
+                .card
+                    background-color rgba(255, 255, 255, 0.25)
+                    padding 5px
+                    margin-bottom 5px
+                    cursor pointer
+                    &:last-child
+                        margin-bottom 0
 </style>
\ No newline at end of file
diff --git a/src/components/list/HouseList.vue b/src/components/list/HouseList.vue
index a84aece..7c212a4 100644
--- a/src/components/list/HouseList.vue
+++ b/src/components/list/HouseList.vue
@@ -3,89 +3,104 @@
         <n-space class="title" align="center">
             <label>以人找房</label>
             <div class="search">
-            <input type="text" v-model="keywords" placeholder="请输入人名以查找房">
+                <input type="text" v-model="keywords" placeholder="请输入人名以查找房">
                 <Icon class="search-btn" @click="onSearchClick">
                     <Search24Filled />
                 </Icon>
             </div>
         </n-space>
         <n-space class="body">
-            <div class="no-data" v-if="dataRows.length === 0">暂无数据</div>
-            <n-grid x-gap="30" :y-gap="15" :cols="2" v-if="dataRows.length > 0">
-                <n-grid-item v-for="data in dataRows" :key="data">
-                    <n-space class="card" vertical justify="between">
-                        <div class="top">
-                            <n-image width="60" height="60" src="assets/images/house.png" :preview-disabled="true" />
-                            <div class="info">
-                                <div class="line">
-                                    <span class="title">{{ data.houseDTO.communityName }}</span>
-                                    <span class="type">{{ data.houseDTO.houseType }}</span>
-                                    <span class="housing-estate">{{ data.houseDTO.residentialName }}</span>
-                                    <span class="population">
-                                        <n-image width="15" height="15" src="assets/images/md-person.svg" :preview-disabled="true" />
-                                        <span class="name">{{ data.houseDTO.homeowner }}</span>
-                                    </span>
-                                </div>
-                                <div class="line">
-                                    <span class="building-no">{{ data.houseDTO.buildingName }}楼/排</span>
-                                    <span class="building-unit">{{ data.houseDTO.affiliationUnit }}单元/列</span>
-                                    <span class="floor">{{ data.houseDTO.affiliationFloors }}层</span>
-                                    <span class="room-no">{{ data.houseDTO.houseNum }}号</span>
+            <n-spin :show="isLoading" stroke="#FFFFFF">
+                <template #description><span style="color:#FFFFFF;">正在加载...</span></template>
+                <div class="no-data" v-if="dataRows.length === 0">暂无数据</div>
+                <n-grid x-gap="30" :y-gap="15" :cols="2" v-if="dataRows.length > 0">
+                    <n-grid-item v-for="data in dataRows" :key="data">
+                        <n-space class="card" vertical justify="between" @click="onHouseClick(data.houseDTO.houseId)">
+                            <div class="top">
+                                <n-image width="60" height="60" src="assets/images/house.png" :preview-disabled="true" />
+                                <div class="info">
+                                    <div class="line">
+                                        <span class="title">{{ data.houseDTO.communityName }}</span>
+                                        <span class="type">{{ data.houseDTO.houseType }}</span>
+                                        <span class="housing-estate">{{ data.houseDTO.residentialName }}</span>
+                                        <span class="population">
+                                            <n-image width="15" height="15" src="assets/images/md-person.svg"
+                                                :preview-disabled="true" />
+                                            <span class="name">{{ data.houseDTO.homeowner }}</span>
+                                        </span>
+                                    </div>
+                                    <div class="line">
+                                        <span class="building-no">{{ data.houseDTO.buildingName }}楼/排</span>
+                                        <span class="building-unit">{{ data.houseDTO.affiliationUnit }}单元/列</span>
+                                        <span class="floor">{{ data.houseDTO.affiliationFloors }}层</span>
+                                        <span class="room-no">{{ data.houseDTO.houseNum }}号</span>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                        <n-space class="bottom">
-                            <table>
-                                <thead>
-                                    <tr>
-                                        <th>姓名</th>
-                                        <th>出生日期</th>
-                                        <th>证件类型</th>
-                                        <th>证件号码</th>
-                                        <th>联系方式</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>
-                                            <div class="text" :title="data.populationInfoDTO.name">{{ data.populationInfoDTO.name }}</div>
-                                        </td>
-                                        <td>
-                                            <div class="text" :title="data.populationInfoDTO.birthday">{{ data.populationInfoDTO.birthday }}</div>
-                                        </td>
-                                        <td>
-                                            <div class="text" :title="data.populationInfoDTO.idcardType">{{ data.populationInfoDTO.idcardType }}</div>
-                                        </td>
-                                        <td>
-                                            <div class="text" :title="data.populationInfoDTO.idcard">{{ data.populationInfoDTO.idcard }}</div>
-                                        </td>
-                                        <td>
-                                            <div class="text" :title="data.populationInfoDTO.phone">{{ data.populationInfoDTO.phone }}</div>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
+                            <n-space class="bottom">
+                                <table v-if="data.populationInfoDTO">
+                                    <thead>
+                                        <tr>
+                                            <th>姓名</th>
+                                            <th>出生日期</th>
+                                            <th>证件类型</th>
+                                            <th>证件号码</th>
+                                            <th>联系方式</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <td>
+                                                <div class="text" :title="data.populationInfoDTO.name">
+                                                    {{ data.populationInfoDTO.name }}
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="text" :title="data.populationInfoDTO.birthday">
+                                                    {{ data.populationInfoDTO.birthday }}
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="text" :title="data.populationInfoDTO.idcardType">
+                                                    {{ data.populationInfoDTO.idcardType }}
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="text" :title="data.populationInfoDTO.idcard">
+                                                    {{ data.populationInfoDTO.idcard }}
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="text" :title="data.populationInfoDTO.phone">
+                                                    {{ data.populationInfoDTO.phone }}
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </n-space>
+                            <div class="divider"></div>
                         </n-space>
-                        <div class="divider"></div>
-                    </n-space>
-                </n-grid-item>
-            </n-grid>
+                    </n-grid-item>
+                </n-grid>
+            </n-spin>
         </n-space>
         <n-space class="footer">
-            <Pager :page="currentPage" :rows="rows" :total="total" @change="onPageChange" :key="pagerUpdateIndex"/>
+            <Pager :page="currentPage" :rows="rows" :total="total" @change="onPageChange" :key="pagerUpdateIndex" />
         </n-space>
     </n-space>
 </template>
 
 <script setup>
 import { ref, reactive, inject } from 'vue';
-import { useRoute } from 'vue-router';
-import { NSpace, NInput, NGrid, NGridItem, NImage } from 'naive-ui';
+import { useRoute, useRouter } from 'vue-router';
+import { NSpace, NInput, NGrid, NGridItem, NImage, NModal, NSpin } from 'naive-ui';
 import { Search24Filled } from '@vicons/fluent';
 import { Icon } from '@vicons/utils';
-import Pager from '../pager/Pager.vue'
+import Pager from '../pager/Pager.vue';
 
 const route = useRoute();
+const router = useRouter();
 const axios = inject('axios');
 const keywords = ref(route.query.keywords);
 const currentPage = ref(1);
@@ -93,8 +108,10 @@ const total = ref(0);
 const rows = ref(10);
 const pagerUpdateIndex = ref(0);
 const dataRows = reactive([]);
+const isLoading = ref(false);
 
 const init = () => {
+    isLoading.value = true;
     axios.get('/api/population/findHouse', {
         params: {
             keywords: keywords.value,
@@ -109,7 +126,9 @@ const init = () => {
         dataRows.push(...data.rows);
         pagerUpdateIndex.value++;
     }).catch(resp => {
-        console.log()
+        console.error(resp)
+    }).finally(() => {
+        isLoading.value = false;
     });
 }
 
@@ -124,6 +143,15 @@ const onPageChange = (pager) => {
     init();
 }
 
+const onHouseClick = (houseId) => {
+    router.push({
+        path: '/house-info',
+        query: {
+            houseId: houseId
+        }
+    })
+}
+
 init();
 
 </script>
diff --git a/src/components/list/PopulationList.vue b/src/components/list/PopulationList.vue
index 6ab88b5..db650eb 100644
--- a/src/components/list/PopulationList.vue
+++ b/src/components/list/PopulationList.vue
@@ -5,91 +5,107 @@
             <a href="javascript:void(0)" @click="onReseachClick">重新搜索</a>
         </n-space>
         <n-space class="body">
-            <div class="no-data" v-if="dataRows.length === 0">暂无数据</div>
-            <n-grid x-gap="30" :y-gap="15" :cols="2" v-if="dataRows.length > 0">
-                <n-grid-item v-for="data in dataRows" :key="data">
-                    <n-space class="card" vertical justify="between">
-                        <div class="top">
-                            <n-image width="60" height="60" src="assets/images/women.png" :preview-disabled="true" v-if="data.sex === '女性'"/>
-                            <n-image width="60" height="60" src="assets/images/man.png" :preview-disabled="true" v-else/>
-                            <div class="info">
-                                <div class="line">
-                                    <span class="name">{{ data.populationInfoHouseDTO.name }}</span>
-                                    <span class="sex" :class="{ female: data.populationInfoHouseDTO.sex === '女性' }">{{ data.populationInfoHouseDTO.sex }}</span>
-                                    <span class="age">17</span>
-                                    <span class="id-card">
-                                        <span class="type">{{ data.populationInfoHouseDTO.idcardType }}</span>
-                                        <span class="num">{{ data.populationInfoHouseDTO.idcard }}</span>
-                                    </span>
-                                </div>
-                                <div class="line">
-                                    <span class="birth">{{ data.populationInfoHouseDTO.birthday }}</span>
-                                    <span class="phone">
-                                        <n-image width="15" height="15" src="assets/images/dial-phone.svg"
-                                            :preview-disabled="true" />
-                                        <span class="num">{{ data.populationInfoHouseDTO.phone }}</span>
-                                    </span>
-                                    <span class="nation">{{ data.populationInfoHouseDTO.nation }}</span>
-                                    <span class="education">{{ data.populationInfoHouseDTO.education }}</span>
-                                </div>
-                                <div class="tags">
-                                    <span class="yellow" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isCorrect === '是'">社区矫正</span>
-                                    <span class="yellow" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isRelease === '是'">刑满释放</span>
-                                    <span class="grey" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isDispute === '是'">矛盾纠纷</span>
-                                    <span class="grey" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isSecurity === '是'">社会治安</span>
-                                    <span class="grey" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isDrug === '是'">吸毒人员</span>
-                                    <span class="grey" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isCult === '是'">涉邪人员</span>
-                                    <span class="grey" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isPetition === '是'">重点上访户</span>
-                                    <span class="red" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isSeriousIllness === '是'">重病</span>
-                                    <span class="orange" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isOldage === '是'">老年人</span>
-                                    <span class="blue" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isMinority === '是'">未成年</span>
-                                    <span class="green" v-if="data.populationInfoHouseDTO.isNormal">正常</span>
+            <n-spin :show="isLoading" stroke="#FFFFFF">
+                <template #description><span style="color:#FFFFFF;">正在加载...</span></template>
+                <div class="no-data" v-if="dataRows.length === 0">暂无数据</div>
+                <n-grid x-gap="30" :y-gap="15" :cols="2" v-if="dataRows.length > 0">
+                    <n-grid-item v-for="data in dataRows" :key="data">
+                        <n-space class="card" vertical justify="between" @click="onPopulationClick(data.populationInfoId)">
+                            <div class="top">
+                                <n-image width="60" height="60" src="assets/images/women.png" :preview-disabled="true"
+                                    object-fit="contain" v-if="data.populationInfoBaseDTO.sex === '女性'" />
+                                <n-image width="60" height="60" src="assets/images/man.png" :preview-disabled="true"
+                                    object-fit="contain" v-else />
+                                <div class="info">
+                                    <div class="line">
+                                        <span class="name">{{ data.populationInfoBaseDTO.name }}</span>
+                                        <span class="sex"
+                                            :class="{ female: data.populationInfoBaseDTO.sex === '女性' }">{{ data.populationInfoBaseDTO.sex }}</span>
+                                        <span class="age">17</span>
+                                        <span class="id-card">
+                                            <span class="type">{{ data.populationInfoBaseDTO.idcardType }}</span>
+                                            <span class="num">{{ data.populationInfoBaseDTO.idcard }}</span>
+                                        </span>
+                                    </div>
+                                    <div class="line">
+                                        <span class="birth">{{ data.populationInfoBaseDTO.birthday }}</span>
+                                        <span class="phone">
+                                            <n-image width="15" height="15" src="assets/images/dial-phone.svg"
+                                                :preview-disabled="true" />
+                                            <span class="num">{{ data.populationInfoBaseDTO.phone }}</span>
+                                        </span>
+                                        <span class="nation">{{ data.populationInfoBaseDTO.nation }}</span>
+                                        <span class="education">{{ data.populationInfoBaseDTO.education }}</span>
+                                    </div>
+                                    <div class="tags">
+                                        <span class="yellow"
+                                            v-if="data.populationInfoBaseDTO.isCorrect === '是'">社区矫正</span>
+                                        <span class="yellow"
+                                            v-if="data.populationInfoBaseDTO.isRelease === '是'">刑满释放</span>
+                                        <span class="grey"
+                                            v-if="data.populationInfoBaseDTO.isDispute === '是'">矛盾纠纷</span>
+                                        <span class="grey"
+                                            v-if="data.populationInfoBaseDTO.isSecurity === '是'">社会治安</span>
+                                        <span class="grey"
+                                            v-if="data.populationInfoBaseDTO.isDrug === '是'">吸毒人员</span>
+                                        <span class="grey"
+                                            v-if="data.populationInfoBaseDTO.isCult === '是'">涉邪人员</span>
+                                        <span class="grey"
+                                            v-if="data.populationInfoBaseDTO.isPetition === '是'">重点上访户</span>
+                                        <span class="red"
+                                            v-if="data.populationInfoBaseDTO.isSeriousIllness === '是'">重病</span>
+                                        <span class="orange"
+                                            v-if="data.populationInfoBaseDTO.isOldage === '是'">老年人</span>
+                                        <span class="blue"
+                                            v-if="data.populationInfoBaseDTO.isMinority === '是'">未成年</span>
+                                        <span class="green" v-if="data.populationInfoBaseDTO.isNormal">正常</span>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                        <n-space class="bottom">
-                            <table>
-                                <thead>
-                                    <tr>
-                                        <th>社区</th>
-                                        <th>小区</th>
-                                        <th>楼/排</th>
-                                        <th>单元/列</th>
-                                        <th>院/层</th>
-                                        <th>门牌号</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>
-                                            <div class="text">{{ data.houseDTO.communityName }}</div>
-                                        </td>
-                                        <td>
-                                            <div class="text">{{ data.houseDTO.residentialName }}</div>
-                                        </td>
-                                        <td>
-                                            <div class="text">{{ data.houseDTO.buildingName }}</div>
-                                        </td>
-                                        <td>
-                                            <div class="text">{{ data.houseDTO.affiliationUnit }}</div>
-                                        </td>
-                                        <td>
-                                            <div class="text">{{ data.houseDTO.affiliationFloors }}</div>
-                                        </td>
-                                        <td>
-                                            <div class="text">{{ data.houseDTO.houseNum }}</div>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
+                            <n-space class="bottom">
+                                <table v-if="data.houseDTO">
+                                    <thead>
+                                        <tr>
+                                            <th>社区</th>
+                                            <th>小区</th>
+                                            <th>楼/排</th>
+                                            <th>单元/列</th>
+                                            <th>院/层</th>
+                                            <th>门牌号</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <td>
+                                                <div class="text">{{ data.houseDTO.communityName }}</div>
+                                            </td>
+                                            <td>
+                                                <div class="text">{{ data.houseDTO.residentialName }}</div>
+                                            </td>
+                                            <td>
+                                                <div class="text">{{ data.houseDTO.buildingName }}</div>
+                                            </td>
+                                            <td>
+                                                <div class="text">{{ data.houseDTO.affiliationUnit }}</div>
+                                            </td>
+                                            <td>
+                                                <div class="text">{{ data.houseDTO.affiliationFloors }}</div>
+                                            </td>
+                                            <td>
+                                                <div class="text">{{ data.houseDTO.houseNum }}</div>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </n-space>
+                            <div class="divider"></div>
                         </n-space>
-                        <div class="divider"></div>
-                    </n-space>
-                </n-grid-item>
-            </n-grid>
+                    </n-grid-item>
+                </n-grid>
+            </n-spin>
         </n-space>
         <n-space class="footer">
-            <Pager :page="currentPage" :rows="rows" :total="total" @change="onPageChange" :key="pagerUpdateIndex"/>
+            <Pager :page="currentPage" :rows="rows" :total="total" @change="onPageChange" :key="pagerUpdateIndex" />
         </n-space>
     </n-space>
 </template>
@@ -97,7 +113,7 @@
 <script setup>
 import { ref, reactive, inject } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { NSpace, NInput, NGrid, NGridItem, NImage } from 'naive-ui';
+import { NSpace, NInput, NGrid, NGridItem, NImage, NSpin } from 'naive-ui';
 import Pager from '../pager/Pager.vue'
 
 const route = useRoute();
@@ -109,8 +125,10 @@ const total = ref(0);
 const rows = ref(10);
 const pagerUpdateIndex = ref(0);
 const dataRows = reactive([]);
+const isLoading = ref(false)
 
 const init = () => {
+    isLoading.value = true;
     axios.get('/api/population/findPopulation', {
         params: {
             ...query,
@@ -123,19 +141,21 @@ const init = () => {
         total.value = data.total;
         dataRows.splice(0, dataRows.length);
         data.rows.forEach(item => {
-            item.populationInfoHouseDTO.isNormal = (
-                item.populationInfoHouseDTO.populationInfoBaseDTO.isCorrect === '否' &&
-                item.populationInfoHouseDTO.populationInfoBaseDTO.isRelease === '否' &&
-                item.populationInfoHouseDTO.populationInfoBaseDTO.isDispute === '否' &&
-                item.populationInfoHouseDTO.populationInfoBaseDTO.isSecurity === '否' &&
-                item.populationInfoHouseDTO.populationInfoBaseDTO.isDrug === '否' &&
-                item.populationInfoHouseDTO.populationInfoBaseDTO.isCult === '否' &&
-                item.populationInfoHouseDTO.populationInfoBaseDTO.isPetition === '否'
+            item.isNormal = (
+                item.populationInfoBaseDTO.isCorrect === '否' &&
+                item.populationInfoBaseDTO.isRelease === '否' &&
+                item.populationInfoBaseDTO.isDispute === '否' &&
+                item.populationInfoBaseDTO.isSecurity === '否' &&
+                item.populationInfoBaseDTO.isDrug === '否' &&
+                item.populationInfoBaseDTO.isCult === '否' &&
+                item.populationInfoBaseDTO.isPetition === '否'
             )
             dataRows.push(item);
         });
         pagerUpdateIndex.value++;
     }).catch(resp => {
+    }).finally(() => {
+        isLoading.value = false;
     });
 }
 
@@ -151,6 +171,15 @@ const onReseachClick = () => {
     })
 }
 
+const onPopulationClick = (populationInfoId) => {
+    router.push({
+        path: 'population-info',
+        query: {
+            populationInfoId: populationInfoId
+        }
+    })
+}
+
 init();
 
 </script>
diff --git a/src/main.js b/src/main.js
index e7d3731..10f3d02 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,7 +6,8 @@ import axios from 'axios';
 
 const createAxios = {
     install(app, options) {
-        axios.defaults.baseURL = 'http://192.168.0.9:7023/population';
+        // axios.defaults.baseURL = 'http://192.168.0.9:7023/population';
+        axios.defaults.baseURL = 'http://192.168.0.15:7023/population';
         // axios.defaults.baseURL = '/population';
         axios.defaults.timeout = 20000;
         app.provide('axios', axios);
diff --git a/src/route/route.js b/src/route/route.js
index c5c1edf..5566746 100644
--- a/src/route/route.js
+++ b/src/route/route.js
@@ -17,7 +17,7 @@ const routes = [{
 }, {
     name: '以房找人列表',
     path: '/population-list',
-    component: PopulationList
+    component: PopulationList,
 }, {
     name: '以人找房列表',
     path: '/house-list',
diff --git a/vite.config.js b/vite.config.js
index 4b14147..9c87972 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,5 +4,8 @@ import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig({
   base: './',
+  server: {
+    host: '0.0.0.0',
+  },
   plugins: [vue()],
 })