diff --git a/src/components/biserialListItem/biserialListItem.vue b/src/components/biserialListItem/biserialListItem.vue
index 7de46c6..3caea74 100644
--- a/src/components/biserialListItem/biserialListItem.vue
+++ b/src/components/biserialListItem/biserialListItem.vue
@@ -112,6 +112,7 @@ let props = defineProps({
 let data = reactive({ data: {} })
 watchEffect(() => {
     data.data = props.item
+    console.log(123,data.data)
 })
 
 
diff --git a/src/components/indexWaterfallBox/indexWaterfallBox.vue b/src/components/indexWaterfallBox/indexWaterfallBox.vue
index 703c378..999e8ef 100644
--- a/src/components/indexWaterfallBox/indexWaterfallBox.vue
+++ b/src/components/indexWaterfallBox/indexWaterfallBox.vue
@@ -1,5 +1,4 @@
 <template>
-    <div>
         <div class="waterfall-box" v-if="itemData.type !== 'adv'"
             :class="{ 'waterfall-box-housing': itemData.type === 'housing' }">
             <div class="flexflex pos-r">
@@ -85,7 +84,6 @@
             <!-- 广告 -->
         </div>
         <img :src="itemData.imageLocal || itemData.image" class="live-img" v-if="itemData.type === 'adv'" alt="">
-    </div>
 </template>
   
 <script setup>
diff --git a/src/views/detail.vue b/src/views/detail.vue
index 91c8524..d63c7ec 100644
--- a/src/views/detail.vue
+++ b/src/views/detail.vue
@@ -88,7 +88,9 @@
                                     租期
                                 </div>
                                 <div class="type-text">
-                                    {{ !housingInfo['data']||housingInfo['data'] && housingInfo['data'].info.rentalduration === '0' ?
+                                    {{ !housingInfo['data'] || housingInfo['data'] &&
+                                        housingInfo['data'].info.rentalduration
+                                        === '0' ?
                                         '不限' : `${housingInfo['data'] && housingInfo['data'].info.rentalduration}
                                                                         ${housingInfo['data'] && housingInfo['data'].info.rentalperiod}` }}
                                 </div>
@@ -108,21 +110,24 @@
                         <div class="image-box">
                             <div class="dis-f al-item">
                                 <img src="../assets/img/detail/videoIcon.png" class="img-video" alt="">
-                                <div class="num-box">{{ housingInfo['data'] &&housingInfo['data'].info.video?
-                                housingInfo['data']&&housingInfo['data'].info.video.length:0 }}</div>
+                                <div class="num-box">{{ housingInfo['data'] && housingInfo['data'].info.video ?
+                                    housingInfo['data'] && housingInfo['data'].info.video.length : 0 }}</div>
                                 <img src="../assets/img/detail/imageIcon.png" class="img-icon" alt="">
-                                <div class="num-box">{{housingInfo['data'] &&housingInfo['data'].info.picturegroup.length ||0 }}</div>
+                                <div class="num-box">{{ housingInfo['data'] && housingInfo['data'].info.picturegroup.length
+                                    || 0 }}</div>
                             </div>
-                            <div class="img-list-box dis-f jus-x al-item" @click="imageShow=true">
+                            <div class="img-list-box dis-f jus-x al-item" @click="imageShow = true">
                                 <img src="../assets/img/detail/moreNot.svg" class="icon left-icon" alt=""
-                                    @click.stop="moveImageList('left')" v-show="imgListTab===0">
+                                    @click.stop="moveImageList('left')" v-show="imgListTab === 0">
                                 <img src="../assets/img/detail/moreAllow.svg" class="icon left-icon" alt=""
-                                    style="transform: rotate(180deg);" @click.stop="moveImageList('left')" v-show="imgListTab>0">
+                                    style="transform: rotate(180deg);" @click.stop="moveImageList('left')"
+                                    v-show="imgListTab > 0">
                                 <img src="../assets/img/detail/moreAllow.svg" class="icon right-icon" alt=""
-                                    @click.stop="moveImageList('right')" v-show="imgList.length-1!==imgListTab">
+                                    @click.stop="moveImageList('right')" v-show="imgList.length - 1 !== imgListTab">
                                 <img src="../assets/img/detail/moreNot.svg" class="icon right-icon" alt=""
-                                    style="transform: rotate(180deg);" @click.stop="moveImageList('right')" v-show="imgList.length-1===imgListTab">
-                                <div class="dis-f al-item list-box" ref="imageList" v-if="imgList.length > 0" >
+                                    style="transform: rotate(180deg);" @click.stop="moveImageList('right')"
+                                    v-show="imgList.length - 1 === imgListTab">
+                                <div class="dis-f al-item list-box" ref="imageList" v-if="imgList.length > 0">
                                     <div v-for="(item, i) in imgList" :key="i">
                                         <div class="video" v-if="item && !item.thumbnail">
                                             <div class="icon-box dis-f jus-x al-item">
@@ -132,8 +137,8 @@
                                                 @error="setImageWidth(i)" alt="">
                                         </div>
                                         <div class="img dis-f" v-if="item && item.thumbnail">
-                                            <img class="img" style="margin:0;" ref="imgData" :src="item.thumbnail" @load="setImageWidth(i)"
-                                                @error="setImageWidth(i)" alt="">
+                                            <img class="img" style="margin:0;" ref="imgData" :src="item.thumbnail"
+                                                @load="setImageWidth(i)" @error="setImageWidth(i)" alt="">
                                         </div>
                                     </div>
                                 </div>
@@ -154,8 +159,8 @@
                                     <span class="text">
                                         {{
                                             indexData['data'] &&
-                                            indexData['data']['config']&&
-                                             indexData['data']['config']['property'][housingInfo['data'] &&
+                                            indexData['data']['config'] &&
+                                            indexData['data']['config']['property'][housingInfo['data'] &&
                                             housingInfo['data'].info.property]
                                         }}
                                     </span>
@@ -170,8 +175,8 @@
                                     |
                                     <span class="text" style="margin-left:0;">
                                         {{
-                                            indexData['data'] && 
-                                            indexData['data']['config']&&
+                                            indexData['data'] &&
+                                            indexData['data']['config'] &&
                                             indexData['data']['config']['elevator'][housingInfo['data'] &&
                                             housingInfo['data'].info.elevator]
                                         }}
@@ -183,11 +188,11 @@
                                     </div>
                                     <span class="text">
                                         {{
-                                            indexData['data'] && 
-                                            housingInfo['data'] && 
+                                            indexData['data'] &&
+                                            housingInfo['data'] &&
                                             housingInfo['data'].info.sunshinearea
                                             !== -1 ?
-                                            indexData['data']['config']&&
+                                            indexData['data']['config'] &&
                                             indexData['data']['config']['sunshinearea'][housingInfo['data'] &&
                                             housingInfo['data'].info.sunshinearea] : ''
                                         }}
@@ -210,8 +215,8 @@
                                     </div>
                                     <span class="text">
                                         {{
-                                            indexData['data'] && 
-                                            indexData['data']['config']&&
+                                            indexData['data'] &&
+                                            indexData['data']['config'] &&
                                             indexData['data']['config']['gender'][housingInfo['data'] &&
                                                 housingInfo['data'].info.gender]
                                         }}
@@ -222,11 +227,11 @@
                         <div class="map-box">
                             <div class="dis-f al-item title-box">
                                 <img src="../assets/img/detail/mapIcon.png" class="img" alt="">
-                                <span class="title">{{ 
+                                <!-- <span class="title">{{ 
                                     location[housingInfo['data']&&housingInfo['data']['info'].location.substring(0, 1)]
                                 }} > {{
                                     location[housingInfo['data']&&housingInfo['data']['info'].location]
-                                }}</span>
+                                }}</span> -->
                             </div>
                             <div class="dis-f jus-x" style="margin-top:15px;">
                                 <!-- <div class="map-s">
@@ -265,12 +270,11 @@
                                                     alt="">
                                             </div>
                                             {{ item && item.name }}
-                                            <div v-for="(items,i) in item.point" :key="i">
+                                            <div v-for="(items, i) in item.point" :key="i">
                                                 <span class="address-info">
                                                     {{ items.title }}
                                                 </span>
-                                                <span 
-                                                    v-html="setDistanceList(items &&`${items.distance}`)">
+                                                <span v-html="setDistanceList(items && `${items.distance}`)">
                                                 </span>
                                                 <!-- <span class="distance-text">
                                                     1.1公里
@@ -319,14 +323,17 @@
                                 <img src="../assets/img/detail/moreBoxIcon.png" class="more-icon" alt="">
                                 <span class="title">更多介绍</span>
                             </div>
-                            <div class="introduce-text" v-html="housingInfo['data']&&housingInfo['data'].info.introduction">
+                            <div class="introduce-text"
+                                v-html="housingInfo['data'] && housingInfo['data'].info.introduction">
                             </div>
                         </div>
                         <div class="houseing-info-box dis-f al-item jus-bet">
                             <div class="dis-f al-item houseing-info-box-s">
-                                房源ID: <span class="houseing-id" @click="clone('123456789')">{{ housingInfo['data'] && housingInfo['data'].info.uid }}</span>
+                                房源ID: <span class="houseing-id" @click="clone('123456789')">{{ housingInfo['data'] &&
+                                    housingInfo['data'].info.uid }}</span>
                                 <span class="browse-box">
-                                    浏览: <span class="text">{{ housingInfo['data'] && housingInfo['data'].info.count_view }}</span>
+                                    浏览: <span class="text">{{ housingInfo['data'] && housingInfo['data'].info.count_view
+                                    }}</span>
                                 </span>
                             </div>
                             <div class="dis-f al-item houseing-info-box-s">
@@ -360,12 +367,13 @@
                                 <div>
                                     如房源信息中有内容侵犯了您的合法权益，可点击屏幕右侧的举报或联系寄托方同学（微信号
                                     <el-dropdown>
-                                        <span class="text-line" @click="clone('gternet2')">{{ concatInfo.data&&concatInfo.data.wechat }}</span>
+                                        <span class="text-line" @click="clone('gternet2')">{{
+                                            concatInfo.data && concatInfo.data.wechat }}</span>
                                         <template #dropdown>
                                             <el-dropdown-menu>
                                                 <el-dropdown-item>
                                                     <div class="wx-qrcode-s">
-                                                        <img :src="concatInfo.data&&concatInfo.data.wechatqrcode"
+                                                        <img :src="concatInfo.data && concatInfo.data.wechatqrcode"
                                                             style="width:130px;height:130px" alt="">
                                                     </div>
                                                 </el-dropdown-item>
@@ -391,8 +399,8 @@
                             <div class="dis-f jus-x">
                                 <div class="user-type">
                                     {{
-                                        indexData['data'] && 
-                                        indexData['data']['config']&&
+                                        indexData['data'] &&
+                                        indexData['data']['config'] &&
                                         indexData['data']['config']['intermediary'][housingInfo['data'] &&
                                         housingInfo['data'].info.intermediary]
                                     }}
@@ -401,8 +409,8 @@
                             <div class="dis-f al-item jus-x time-box">
                                 <img src="../assets/img/detail/timeIcon.svg" class="icon" alt="">
                                 <span>
-                                    {{  checkUpdateTime(housingInfo['data'] && housingInfo['data'].info.updatetime)
-                                         }} </span>
+                                    {{ checkUpdateTime(housingInfo['data'] && housingInfo['data'].info.updatetime)
+                                    }} </span>
                             </div>
                             <div class="dis-f jus-x">
                                 <div class="contact-btn" @click="getConcatData">
@@ -434,7 +442,7 @@
                             </div>
                             <div class="dis-f jus-x ">
                                 <div class="crowd-box dis-f jus-x al-item">
-                                    <img :src="concatInfo.data&&concatInfo.data.wechatqrcode" class="img" alt="">
+                                    <img :src="concatInfo.data && concatInfo.data.wechatqrcode" class="img" alt="">
                                 </div>
                             </div>
                             <div class="dis-f jus-x s-w-100">
@@ -449,11 +457,23 @@
                 </div>
             </div>
         </div>
-        <footerTool></footerTool>
+        <!-- 推荐 -->
+        <div class="dis-f jus-x">
+            <div class="body-maxWidth housing-title" style="margin-top:30px;">
+                附近房源
+            </div>
+        </div>
+        <div class="dis-f  jus-x al-item">
+            <div class="body-maxWidth" ref="gridContainer" style="margin-top:15px;">
+                <indexWaterfallBox v-for="(items, i) in recommendListData" :data="items" :key="items.id">
+                </indexWaterfallBox>
+            </div>
+        </div>
+        <!-- <footerTool></footerTool> -->
         <div class="pop-box" v-show="showConcat" @click="showConcat = !showConcat">
             <!-- 两种信息 -->
             <!-- third-concat -->
-            <div class="pop-big-box" v-show="concatData.data&&concatData.data.count>1">
+            <div class="pop-big-box" v-show="concatData.data && concatData.data.count > 1">
                 <div class="pop-info-box dis-f jus-x al-item">
                     <div class="pop-big-bg dis-f jus-x al-item">
                         <div class="user-liner-box dis-f al-item">
@@ -568,16 +588,16 @@
                 <img src="../assets/img/detail/close.png" class="close-img" alt="">
             </div>
             <!-- 一种信息 -->
-            <div class="pop" v-show="concatData.data&&concatData.data.count===1">
+            <div class="pop" v-show="concatData.data && concatData.data.count === 1">
                 <div class="pop-bg-s-box dis-f jus-x al-item">
                     <div class="pop-bg-s">
                         <div class="pos-a pop-bg-s" style="z-index:666;">
                             <div class="title s-w-100">
                                 联系方式
                             </div>
-                            <div class="s-w-100 mg-t-35" v-if="concatData.data&&concatData.data.wechatdata">
+                            <div class="s-w-100 mg-t-35" v-if="concatData.data && concatData.data.wechatdata">
                                 <div class="wx-qrcode s-w-100 dis-f al-item jus-x">
-                                    <img :src="concatData.data&&concatData.data.wechatdata.url" class="img" alt="">
+                                    <img :src="concatData.data && concatData.data.wechatdata.url" class="img" alt="">
                                 </div>
                                 <div style="margin-top:15px">
                                     <div>
@@ -588,7 +608,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="s-w-100" v-if="concatData.data&&concatData.data.whatsapp">
+                            <div class="s-w-100" v-if="concatData.data && concatData.data.whatsapp">
                                 <div class="whatsapp-title">
                                     WhatsApp
                                 </div>
@@ -597,7 +617,8 @@
                                 </div>
                             </div>
                             <div class="s-w-100 dis-f jus-x al-item mg-t-35">
-                                <div class="clone-btn dis-f al-item jus-x" v-if="concatData.data&&concatData.data.whatsapp">
+                                <div class="clone-btn dis-f al-item jus-x"
+                                    v-if="concatData.data && concatData.data.whatsapp">
                                     <img src="../assets/img/detail/cloneIcon.png" class="icon" alt="">
                                     复制
                                 </div>
@@ -611,6 +632,7 @@
                 <img src="../assets/img/detail/popBg.svg" class="img" alt="">
             </div>
         </div>
+
     </div>
     <watchImage :show="imageShow" :close="cloaseImageShow" :list="imgList"></watchImage>
     <!-- 右下角咨询 -->
@@ -627,15 +649,19 @@ import watchImage from '../components/detail/imageWatch.vue'
 import breadcrumb from '../components/detail/breadcrumb.vue'
 import mapInfo from '../components/public/viewMap.vue'
 import { ElMessage } from 'element-plus'
+import indexWaterfallBox from "../components/indexWaterfallBox/indexWaterfallBox.vue";
+import Masonry from 'masonry-layout';
+
 import store from '@/store';
 
-//
+//加载状态
 let loadMore = ref(true)
+//推荐列表页数
 let pages = ref(1)
 //查看图片
-let imageShow= ref(false)
-let cloaseImageShow=()=>{
-    imageShow.value=false
+let imageShow = ref(false)
+let cloaseImageShow = () => {
+    imageShow.value = false
 }
 
 //图片组实例
@@ -644,7 +670,7 @@ let imageList = ref(null)
 let imgList = ref([])
 
 //图片距离
-let imageLIst=ref([])
+let imageLIst = ref([])
 
 let imgListTab = ref(0)
 //计时器
@@ -653,20 +679,20 @@ let interval = ''
 let moveImageList = (type) => {
     if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imageLIst.value.length - 1 && type === 'right')) return
     type === 'left' ? imgListTab.value-- : imgListTab.value++
-    setOffsetWidth(imageLIst.value[imgListTab.value],type)
+    setOffsetWidth(imageLIst.value[imgListTab.value], type)
 }
 //设置滚动
 let setOffsetWidth = (num, type) => {
     let scroll = 0
-    let clientWidth=imageList.value.clientWidth
-    let scrollWidth=imageList.value.scrollWidth
+    let clientWidth = imageList.value.clientWidth
+    let scrollWidth = imageList.value.scrollWidth
     interval = setInterval(() => {
-        if(!imageList.value){
+        if (!imageList.value) {
             clearInterval(interval)
             return
         }
         scroll = type === 'left' ? imageList.value.scrollLeft -= 10 : imageList.value.scrollLeft += 10
-        if ((type === 'left'?num>=scroll:num <= scroll)||scroll+clientWidth>=scrollWidth) {
+        if ((type === 'left' ? num >= scroll : num <= scroll) || scroll + clientWidth >= scrollWidth) {
             clearInterval(interval)
         }
     })
@@ -675,7 +701,7 @@ let setOffsetWidth = (num, type) => {
 let imgData = ref(null)
 //获取图片宽度
 let setImageWidth = (num) => {
-    imageLIst.value[num]=imgData.value[num] && imgData.value[num].offsetLeft-20
+    imageLIst.value[num] = imgData.value[num] && imgData.value[num].offsetLeft - 20
 }
 
 //学校地址数据
@@ -738,11 +764,11 @@ let indexData = reactive({})
 //房源详情
 let housingInfo = reactive({})
 //联系
-let concatInfo= reactive({})
+let concatInfo = reactive({})
 
 let setHousingArr = () => {
     let arr = []
-    arr = housingInfo['data'].info.video?arr.concat(housingInfo['data'] && housingInfo['data'].info.video):[]
+    arr = housingInfo['data'].info.video ? arr.concat(housingInfo['data'] && housingInfo['data'].info.video) : []
     arr = arr.concat(housingInfo['data'] && housingInfo['data'].info.picturegroup)
     imgList.value = imgList.value.concat(arr)
     imgList.value = imgList.value.concat(arr)
@@ -753,7 +779,7 @@ let location = store.state.indexData.config && store.state.indexData.config.loca
 let setNavigation = () => {
     let type = store.state.indexData.config && store.state.indexData.config.type
     indexData['data'] = store.state.indexData
-    if(!location)return
+    if (!location) return
     store.state.routeList['thirdIndex'] = {
         path: "",
         title: `${location[housingInfo['data']['info'].location.substring(0, 1)]}${type[housingInfo['data']['info'].type.substring(0, 1)]}房源`
@@ -780,7 +806,8 @@ let getHousingInfo = () => {
                 address: true,
                 name: housingInfo['data']['info'].address,
             })
-            concatInfo['data']=store.state.indexData.wechat
+            concatInfo['data'] = store.state.indexData.wechat
+            recommendList()
         } else {
             ElMessage({
                 message: res.message
@@ -790,47 +817,47 @@ let getHousingInfo = () => {
 }
 
 //收藏
-let setOperation=()=>{
+let setOperation = () => {
     api.operation({
-        token:housingInfo['data'].token
-    }).then(res=>{
+        token: housingInfo['data'].token
+    }).then(res => {
         console.log(res)
-        if(res.code===200){
-            housingInfo['data'].info.count_fav=res.data.count
-            housingInfo['data'].isfav=res.data.status
-        }else{
+        if (res.code === 200) {
+            housingInfo['data'].info.count_fav = res.data.count
+            housingInfo['data'].isfav = res.data.status
+        } else {
             ElMessage({
-                message:res.message
+                message: res.message
             })
         }
     })
 }
 
 //获取联系方式
-let concatData=reactive({})
-let getConcatData=()=>{
-    showConcat.value=true
-    if(concatData['data'])return
+let concatData = reactive({})
+let getConcatData = () => {
+    showConcat.value = true
+    if (concatData['data']) return
     api.contactData({
-        token:housingInfo['data'].token
-    }).then(res=>{
+        token: housingInfo['data'].token
+    }).then(res => {
         console.log(res)
-        if(res.code===200){
-            concatData['data']=res.data
-            let dataCount=0
-            Object.keys(concatData['data']).map(res=>{
-                if(concatData['data'][res]){
+        if (res.code === 200) {
+            concatData['data'] = res.data
+            let dataCount = 0
+            Object.keys(concatData['data']).map(res => {
+                if (concatData['data'][res]) {
                     dataCount++
                 }
             })
-            concatData['data']['count']=dataCount
+            concatData['data']['count'] = dataCount
             console.log(concatData)
         }
     })
 }
 
 //判断更新时间
-let checkUpdateTime=(Time)=>{
+let checkUpdateTime = (Time) => {
     const now = new Date();
     let time = new Date(Time)
     const diff = now - time;
@@ -860,8 +887,57 @@ const onPageSrcoll = (e) => {
         }
     }
 }
+
+//瀑布流列表
+let recommendListData = ref([])
+//广告参数
+let pagevalue = ref(0)
+//加载提示
+let loadText = ref('加载中......')
+//获取瀑布流数据
+let recommendList = () => {
+    api.recommendList({
+        page: pages.value,
+        limit: 10,
+        type: 'nearby',
+        pagevalue: pagevalue.value,
+        token: housingInfo['data'].token
+    }).then(res => {
+        console.log(res)
+        if (res.code === 200) {
+            if (res.data.pagevalue) {
+                recommendListData.value = recommendListData.value.concat(res.data.data)
+                pagevalue.value = res.data.pagevalue
+            }
+            if (res.data.data.length >= 30) {
+                loadMore.value = true
+            } else {
+                loadMore.value = false
+                loadText.value = '到底了'
+            }
+            nextTick(() => {
+                console.log(recommendListData.value)
+                masonryInstance.reloadItems();
+                masonryInstance.layout();
+            })
+        } else {
+            ElMessage({
+                message: res.message,
+                center: true,
+            })
+        }
+    })
+}
+
+//瀑布流模块
+const gridContainer = ref(null);
+let masonryInstance = null
 onMounted(() => {
     getHousingInfo()
+    masonryInstance = new Masonry(gridContainer.value, {
+        itemSelector: '.item',
+        gutter: 20
+    });
     setTimeout(() => {
         window.addEventListener('scroll', onPageSrcoll, true);
     }, 1000)
@@ -871,10 +947,6 @@ onBeforeUnmount(() => {
     window.removeEventListener('scroll', onPageSrcoll, true);
 })
 
-onMounted(() => {
-
-})
-
 </script>
 <style scoped>
 img {
@@ -924,6 +996,14 @@ img {
     position: absolute;
 }
 
+.housing-title {
+    font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+    font-weight: 650;
+    font-style: normal;
+    font-size: 20px;
+    color: #333;
+}
+
 .clone-btn {
     width: 100px;
     height: 32px;
@@ -1197,9 +1277,10 @@ img {
                 -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
                 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
                 margin: 0 auto;
-                .img{
-                    width:130px;
-                    height:130px;
+
+                .img {
+                    width: 130px;
+                    height: 130px;
                 }
             }