详情部分

src/components/detail/breadcrumb.vue

@@ -0,0 +1,180 @@
+<template>
+    <div class="title-top-box">
+        <div class="breadcrumb-box">
+            <el-breadcrumb :separator-icon="ArrowRight">
+                <el-breadcrumb-item v-for="(item, i) in storeData" :key="i" :to="{ path: item.path }">
+                    <span class="breadcrumb-text">
+                        {{ item.title }}
+                    </span>
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="dis-f al-item jus-bet title-box">
+            <div class="detail-title">
+                房东直租 | 中城浸教公大理公，近地铁，新装修，两房一厅，采光通风好，设备齐全拎包入住
+            </div>
+            <div class="tool-btn-box dis-f al-item">
+                <div class="btn-s dis-f al-item jus-x">
+                    <img src="../../assets/img/detail/collect.png" class="img" alt="">
+                    <img src="../../assets/img/detail/collectT.png" v-show="false" class="img" alt="">
+                    <span class="mg-l-5">
+                        {{'收藏'}}
+                    </span>
+                </div>
+                <div class="line">
+
+                </div>
+                <div class="btn-s dis-f al-item jus-x">
+                    <img src="../../assets/img/detail/forward.png" class="img" alt="">
+                    <span class="mg-l-5">
+                        转发
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+  
+<script setup>
+import { ArrowRight } from '@element-plus/icons-vue'
+import { reactive, onMounted, ref, defineProps } from 'vue'
+import store from '@/store'
+
+defineProps({
+    data: {
+        type: Array,
+        default: function () {
+            return []
+        }
+    }
+})
+
+//导航数据
+let storeData = store.state.routeList
+console.log(storeData)
+
+</script>
+<style scoped>
+img {
+    object-fit: contain;
+}
+
+.dis-f {
+    display: flex;
+}
+
+.jus-x {
+    justify-content: center;
+}
+
+.al-item {
+    align-items: center;
+}
+
+.pos-r {
+    position: relative;
+}
+
+.body-maxWidth {
+    width: 1200px;
+    min-width: 1200px;
+}
+
+.s-w-100 {
+    width: 100%;
+}
+
+.jus-bet {
+    justify-content: space-between;
+}
+
+.title-top-box {
+    width: 1200px;
+    height: 186px;
+    background: inherit;
+    background-color: rgba(255, 255, 255, 1);
+    box-sizing: border-box;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(235, 235, 235, 1);
+    border-radius: 16px;
+    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
+    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
+    font-size: 14px;
+    transform: translateY(-38px);
+
+    .breadcrumb-box {
+        padding: 20px;
+        border-bottom: 1px solid #ebebeb;
+
+        .breadcrumb-text {
+            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+            font-weight: 400;
+            font-style: normal;
+            color: #AAAAAA;
+        }
+    }
+
+    .title-box {
+        padding: 20px 20px 25px 20px;
+
+        .detail-title {
+            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+            font-weight: 400;
+            font-style: normal;
+            font-size: 24px;
+            color: #000000;
+            line-height: 35px;
+            width: 820px;
+        }
+
+        .tool-btn-box {
+            width: 244px;
+            height: 48px;
+            background: inherit;
+            background-color: rgba(246, 246, 246, 1);
+            box-sizing: border-box;
+            border-width: 1px;
+            border-style: solid;
+            border-color: rgba(235, 235, 235, 1);
+            border-radius: 9px;
+            -moz-box-shadow: none;
+            -webkit-box-shadow: none;
+            box-shadow: none;
+            font-size: 14px;
+            justify-content: center;
+
+            .mg-l-5{
+                margin-left: 5px;
+            }
+
+            .btn-s {
+                color: #333333;
+                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+                font-weight: 400;
+                font-style: normal;
+                text-align: center;
+                width:80px;
+                height:40px;
+                line-height:40px;
+                cursor: pointer;
+                .img{
+                    width:20px;
+                    height:20px;
+                }
+            }
+
+            .line {
+                width: 1px;
+                height: 21px;
+                background: #d7d7d7;
+                margin:0 15px;
+            }
+        }
+    }
+
+
+}
+</style>
+  

src/components/pageTopBar/pageTopBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="top-bg-img-box pos-r" :style="{ 'height': routePath === '/' ? '568px' : '260px' }">
-    <img src="../../assets/homeImage/indexBg.png" class="bg-img" alt="">
+    <img src="../../assets/img/edit/bj-img1920.png" class="bg-img" alt="">
     <div class="info-box">
       <!-- 顶部导航 -->
       <div class="dis-f jus-x al-item index-top-navigation-box">

src/components/seachModule/seachModule.vue

@@ -143,7 +143,7 @@ let getLocationData = (data) => {
 const route = useRouter()
 let routePath = ref('')
 routePath.value = route.currentRoute.value.path
-console.log(route)
+// console.log(route)
 
 watchEffect(() => {
     seachSchoolBtn.data = store.state.seachTypeData[0] ? store.state.seachTypeData[0].where : []
@@ -159,7 +159,7 @@ historyArr.data = JSON.parse(localStorage.getItem('historyArr')) || []
 
 //搜索数据
 let seachList = (item) => {
-    console.log(123)
+    // console.log(123)
     let string=seachAllType.keyword
     if (!string.replace(/\s/g, "")) return
     if (historyArr.data.indexOf(seachAllType.keyword) === -1) {

src/components/selectTabBox/selectTabBox.vue

@@ -426,6 +426,9 @@ let selectSeach = (data = []) => {
     if (data.length === 0 && selectTabCheck.id) {
         data.push(selectTabCheck.id)
     }
+    // console.log(selectData,selectTabCheck)
+    // store.state.routeList['hireTypeObj']=JSON.parse(JSON.stringify(hireTypeObj))
+    // return
     setSeachCondition('location', data)
 }
 
@@ -478,6 +481,7 @@ let setHireId = (item) => {
 let dropdownCommand = (obj) => {
     hireTypeObj.id = obj.id
     hireTypeObj.title = obj.title
+    store.state.routeList['hireTypeObj']=JSON.parse(JSON.stringify(hireTypeObj))
     setSeachCondition('types', obj.id)
 }
 
@@ -555,7 +559,7 @@ let cleanSelect = () => {
 //根据路由设置参数
 let setRouterQuerySet = ref(true)
 let routerQuerySet = () => {
-    console.log(setRouterQuerySet.value)
+    // console.log(setRouterQuerySet.value)
     if (!setRouterQuerySet.value) return
     //路由参数设置
     if (Object.keys(routeQuery.data).length > 0) {

src/router/index.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import { setSeoTitle } from '@/utils/util.js'
+import store from '@/store'
 
 const routes = [
   {
@@ -97,6 +98,13 @@ const router = createRouter({
 
 
 router.beforeEach((to, from, next) => {
+  //导航数据
+  if(/['seachPage','needHousing','intermediaryHousing','personHousing']/.test(from.path)){
+    store.state.routeList.secondaryIndex.title=from.meta.title
+    store.state.routeList.secondaryIndex.path=from.path
+  }
+
+  //
   next()
   let meta = to['meta'] || {}
   let title = meta['title']

src/store/index.js

@@ -9,7 +9,16 @@ export default createStore({
     wechat: {}, // 微信号 二维码等数据
     nav: [],  // 顶部的导航数据
     apartment: {}, // 公寓筛选的字段
-    routeList:[],//路由列表
+    routeList:{
+      index:{
+        path:'/',
+        title:'港校租房'
+      },
+      secondaryIndex:{
+        path:'',
+        title:'',
+      }
+    },//导航路由列表
   },
   getters: {
 

src/views/detail.vue

@@ -3,17 +3,55 @@
         <pageTopBar></pageTopBar>
         <div class="dis-f jus-x al-item">
             <div class="body-maxWidth mg-t-35">
-                <div class="title-top-box">
+                <breadcrumb></breadcrumb>
-                    <div class="breadcrumb-box">
+                <div class="dis-f jus-bet" style="transform: translateY(-15px);">
-                        <el-breadcrumb :separator-icon="ArrowRight">
+                    <div class="info-box">
-                            <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
+                        <div class="detail-price-box">
-                            <el-breadcrumb-item>promotion management</el-breadcrumb-item>
+                            <span class="unit">HK$</span><span class="rent">123456</span><span>/月</span>
-                            <el-breadcrumb-item>promotion list</el-breadcrumb-item>
+                        </div>
-                            <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
+                        <div class="dis-f al-item detail-condition-box">
-                        </el-breadcrumb>
+                            <div class="condition condition-border">
+                                <div class="dis-f al-item">
+                                    <div class="icon">
+
+                                    </div>
+                                    整租
+                                </div>
+                                <div class="type-text">
+                                    两房
+                                </div>
+                            </div>
+                            <div class="condition condition-border">
+                                <div class="dis-f al-item">
+                                    <div class="icon">
+
+                                    </div>
+                                    租期
+                                </div>
+                                <div class="type-text">
+                                    一年
+                                </div>
+                            </div>
+                            <div class="condition condition-border">
+                                <div class="dis-f al-item">
+                                    <div class="icon">
+
+                                    </div>
+                                    起租日期
+                                </div>
+                                <div class="type-text">
+                                    随时
+                                </div>
+                            </div>
+                        </div>
+                        <div>
+                            
+                        </div>
                     </div>
                     <div>
-
+                        <div></div>
+                        <div></div>
+                        <div></div>
                     </div>
                 </div>
             </div>
@@ -31,6 +69,7 @@ import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
 import circleBtn from '@/components/public/circle-btn.vue'
 import api from "../utils/api";
 import footerTool from '@/components/footer/footer.vue'
+import breadcrumb from '../components/detail/breadcrumb.vue'
 
 
 
@@ -69,9 +108,9 @@ img {
     justify-content: space-between;
 }
 
-.title-top-box {
+.info-box {
-    width: 1200px;
+    width: 876px;
-    height: 186px;
+    height: 1650px;
     background: inherit;
     background-color: rgba(255, 255, 255, 1);
     box-sizing: border-box;
@@ -83,10 +122,68 @@ img {
     -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
     font-size: 14px;
-    transform: translateY(-38px);
+    padding: 30px 20px;
 
-    .breadcrumb-box {
+    .detail-price-box {
-        padding: 20px;
+        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+        font-weight: 400;
+        font-size: 16px;
+        color: #555555;
+
+        .rent {
+            font-family: 'Arial-Black', 'Arial Black', sans-serif;
+            font-weight: 900;
+            font-size: 28px;
+            color: #F95D5D;
+            margin: 0 5px;
+        }
+
+        .unit {
+            font-family: 'Arial-Black', 'Arial Black', sans-serif;
+            font-weight: 900;
+            color: #000000;
+        }
+    }
+
+    .detail-condition-box {
+        width: 816px;
+        height: 80px;
+        background: inherit;
+        background-color: rgba(246, 246, 246, 1);
+        border: none;
+        border-radius: 12px;
+        margin-top: 30px;
+
+        .condition-border {
+            border-right: 1px solid #ebebeb;
+        }
+
+        .condition {
+            padding: 15px 0;
+            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+            font-weight: 400;
+            font-style: normal;
+            color: #7F7F7F;
+            width: 272px;
+
+            .icon {
+                border: 6px solid #61b1fc;
+                border-top: 6px solid transparent;
+                border-right: 6px solid transparent;
+                border-bottom: 6px solid transparent;
+                margin-right: 10px;
+            }
+
+            .type-text {
+                margin-top: 8px;
+                font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+                font-weight: 650;
+                font-style: normal;
+                font-size: 17px;
+                color: #000000;
+                margin-left: 22px;
+            }
+        }
     }
 }
 </style>

src/views/housingView/intermediary.vue

@@ -101,7 +101,7 @@ let getDataList = (data) => {
 //添加数据
 let addListData = () => {
     let num = null
-    if (pageList.tab >= (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
+    if (pageList.tab > (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
         if(dataList.data.length>=20){
             loading.value = true
         }else{

src/views/housingView/needHousing.vue

@@ -102,7 +102,7 @@ let getDataList = (data) => {
 //添加数据
 let addListData = () => {
     let num = null
-    if (pageList.tab >= (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
+    if (pageList.tab > (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
         console.log(dataList.data.length,20,loading.value)
         if(dataList.data.length>=20){
             loading.value = true

src/views/housingView/person.vue

@@ -2,6 +2,9 @@
     <div>
         <pageTopBar></pageTopBar>
         <seachModule :getDataList="setSeachSelectData"></seachModule>
+        <div @click="btns">
+            1
+        </div>
         <div class="dis-f jus-x al-item">
             <div class="body-maxWidth mg-t-35">
                 <div class="dis-f jus-bet" v-show="dataList.data && dataList.data.length > 0">
@@ -107,7 +110,7 @@ let getDataList = (data) => {
 //添加数据
 let addListData = () => {
     let num = null
-    if (pageList.tab >= (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
+    if (pageList.tab > (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
         if(dataList.data.length>=20){
             loading.value = true
         }else{
@@ -139,6 +142,11 @@ let downLoadMore = () => {
         getDataList(seachSelectData.data)
     })
 }
+let btns=()=>{
+    router.push({
+        path:'/detail'
+    })
+}
 
 //listImg
 onMounted(() => {

src/views/seachIndex.vue

@@ -135,7 +135,8 @@ let getDataList = (data) => {
 //添加数据
 let addListData = () => {
     let num = null
-    if (pageList.tab >= (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
+    console.log(pageList.tab , (dataList.count>20?dataList.data.length-2:dataList.count-2))
+    if (pageList.tab > (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
         if(dataList.data.length>=20){
             loading.value = true
         }else{