From 317e5f03a28c400e3a14317d5a58ce1b61d193ed Mon Sep 17 00:00:00 2001
From: luJianJun <2587063613@qq.com>
Date: Wed, 9 Aug 2023 10:52:58 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E7=9B=91=E5=90=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/selectTabBox/selectTabBox.vue | 116 +++++++++++--------
 src/views/HomeView.vue                       |   1 +
 2 files changed, 70 insertions(+), 47 deletions(-)

diff --git a/src/components/selectTabBox/selectTabBox.vue b/src/components/selectTabBox/selectTabBox.vue
index 3c20594..d219ef8 100644
--- a/src/components/selectTabBox/selectTabBox.vue
+++ b/src/components/selectTabBox/selectTabBox.vue
@@ -1,10 +1,13 @@
 <template>
     <div class="dis-f s-w-100" :style="[routePath === '/seachPage' ? '' : 'border-bottom:1px solid #ebebeb;']">
         <div class="select-box s-w-50">
-            <div class="dis-f" :class="{ 'al-item housing-pd': routePath === '/needHousing'||routeQuery.data && routeQuery.data.houseingPageType === '6' }">
-                <div class="tab-title">{{ routePath === '/needHousing'||routeQuery.data && routeQuery.data.houseingPageType === '6' ? '目标区域' : '地理位置' }}</div>
+            <div class="dis-f"
+                :class="{ 'al-item housing-pd': routePath === '/needHousing' || routeQuery.data && routeQuery.data.houseingPageType === '6' }">
+                <div class="tab-title">{{ routePath === '/needHousing' || routeQuery.data && routeQuery.data.houseingPageType
+                    === '6' ? '目标区域' : '地理位置' }}</div>
                 <!-- 中介/个人房源页面 -->
-                <div class="tab-text" v-if="routePath !== '/needHousing'&&(routeQuery.data && routeQuery.data.houseingPageType !== '6')">
+                <div class="tab-text"
+                    v-if="routePath !== '/needHousing' && (routeQuery.data && routeQuery.data.houseingPageType !== '6')">
                     <div class="dis-f">
                         <div class="btn  jus-x al-item dis-f" :class="{ 'btn-check': selectPosition === 'region' }"
                             @click="setSelectPosition('region')">按区域</div>
@@ -20,19 +23,20 @@
                                 <div class="dis-f al-item">{{ item.name }} <div class="dis-f al-item"
                                         v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp>&nbsp
                                         <div
-                                            :class="{ 'check-data': selectData.data && selectData.data.length > 0 && selectData.data.length !== selectTabCheck.data.length&&selectData.data[0].id }">
+                                            :class="{ 'check-data': selectData.data && selectData.data.length > 0 && selectData.data.length !== selectTabCheck.data.length && selectData.data[0].id }">
                                             {{
                                                 selectData.data && selectData.data.length ===
-                                                0||selectData.data&&selectData.data[0]&&!selectData.data[0].id || selectData.data.length === selectTabCheck.data.length ? '不限' :
+                                                0 || selectData.data && selectData.data[0] && !selectData.data[0].id ||
+                                                selectData.data.length === selectTabCheck.data.length ? '不限' :
                                                 selectData.data && selectData.data.length
                                             }}
                                         </div>
                                     </div>
                                 </div>
                                 <img src="../../assets/homeImage/selectInfoTabIcon.svg"
-                                    v-show="selectTabCheck.id !== item.id&&item.id" class="img" alt="">
-                                <img src="../../assets/homeImage/selectImg.svg" v-show="selectTabCheck.id === item.id&&item.id"
-                                    class="img" alt="">
+                                    v-show="selectTabCheck.id !== item.id && item.id" class="img" alt="">
+                                <img src="../../assets/homeImage/selectImg.svg"
+                                    v-show="selectTabCheck.id === item.id && item.id" class="img" alt="">
                             </div>
                             <div class="hid-box">
                                 <checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach"
@@ -45,18 +49,21 @@
                             <div class="lef-btn" @click="prevSchoolData">
                                 <img :src="schoolPages === 0 ? require('../../assets/homeImage/selectInfoTabIcon.svg') : require('../../assets/homeImage/selectImg.svg')"
                                     class="img" alt="">
+                                <div class="line" style="position: absolute;right:0;top:0;"></div>
                             </div>
                             <div class="right-btn" @click="nextSchoolData">
+                                <div class="line" style="position: absolute;left:0;top:0;"></div>
                                 <img :src="schoolPages === shcoolData.length - 1 ? require('../../assets/homeImage/selectInfoTabIcon.svg') : require('../../assets/homeImage/selectImg.svg')"
                                     class="img" alt="">
                             </div>
                             <el-carousel :autoplay="false" arrow="never" :loop="false" height="50px"
-                                indicator-position="none" class="s-w-100" ref="schoolData" :initial-index="schoolSelectObj.page">
+                                indicator-position="none" class="s-w-100" ref="schoolData"
+                                :initial-index="schoolSelectObj.page">
                                 <el-carousel-item v-for="(item, i) in shcoolData" :key="i">
                                     <div class="school-carousel-box" :class="{ 'jus-sp': item.length === 8 }">
                                         <div v-for="(items, i) in item" :key="items" @click="setSchoolObj(items)"
                                             class="carousel-info-box"
-                                            :class="[{ 'info-box-check': schoolSelectObj.id === items.id }, { 'mg-l-20': i!=0&&(i + 1) % 8 !== 0 && item.length < 8 },{'mg-l-10':i==0&& item.length < 8}]">
+                                            :class="[{ 'info-box-check': schoolSelectObj.id === items.id }, { 'mg-l-20': i != 0 && (i + 1) % 8 !== 0 && item.length < 8 }, { 'mg-l-10': i == 0 && item.length < 8 }]">
                                             {{ items.name }}
                                         </div>
                                     </div>
@@ -66,7 +73,8 @@
                     </div>
                 </div>
                 <!-- 求房源 -->
-                <div class="need-housing-box dis-f al-item" v-if="routePath === '/needHousing'||routeQuery.data && routeQuery.data.houseingPageType === '6'">
+                <div class="need-housing-box dis-f al-item"
+                    v-if="routePath === '/needHousing' || routeQuery.data && routeQuery.data.houseingPageType === '6'">
                     <div class="select-tab-info" style="margin-top:0;">
                         <div class="housing-info-box info-box" v-show="selectPosition === 'region'"
                             style="position: relative;padding: 0;height:30px;width: 420px;">
@@ -75,10 +83,12 @@
                                 @click="setSelectData(item.id, item.data, item.name)" v-for="(item, i) in list" :key="i">
                                 <div class="dis-f al-item">{{ item.name }} <div class="dis-f al-item"
                                         v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp>&nbsp
-                                        <div :class="{ 'select-num': selectData.data && selectData.data.length&&selectData.data&&selectData.data[0]&&selectData.data[0].id }">
+                                        <div
+                                            :class="{ 'select-num': selectData.data && selectData.data.length && selectData.data && selectData.data[0] && selectData.data[0].id }">
                                             {{
                                                 selectData.data && selectData.data.length ===
-                                                0||selectData.data&&selectData.data[0]&&!selectData.data[0].id || selectData.data.length === selectTabCheck.data.length ? '不限' :
+                                                0 || selectData.data && selectData.data[0] && !selectData.data[0].id ||
+                                                selectData.data.length === selectTabCheck.data.length ? '不限' :
                                                 selectData.data && selectData.data.length
                                             }}
                                         </div>
@@ -99,8 +109,10 @@
                 </div>
             </div>
             <div class="bor-b-das"></div>
-            <div class="dis-f pad-t-b-15" :class="{ 'housing-pd pd-t-25': routePath === '/needHousing'||routeQuery.data && routeQuery.data.houseingPageType === '6' }">
-                <div class="tab-title">{{ routePath === '/needHousing'||routeQuery.data && routeQuery.data.houseingPageType === '6' ? '求租方式' : '出租方式' }}</div>
+            <div class="dis-f pad-t-b-15"
+                :class="{ 'housing-pd pd-t-25': routePath === '/needHousing' || routeQuery.data && routeQuery.data.houseingPageType === '6' }">
+                <div class="tab-title">{{ routePath === '/needHousing' || routeQuery.data && routeQuery.data.houseingPageType
+                    === '6' ? '求租方式' : '出租方式' }}</div>
                 <div class="tab-text dis-f al-item" style="padding-bottom:0;">
                     <div class="dis-f" v-for="(item, i) in hireTypeArr" :key="i">
                         <div v-if="item.title !== '不限'">
@@ -134,7 +146,8 @@
             </div>
             <div class="bor-b-das"></div>
             <div class="dis-f al-item" style="padding:30px 0;">
-                <div class="tab-title">{{ routePath === '/needHousing'||routeQuery.data && routeQuery.data.houseingPageType === '6' ? '租金预算' : '租金' }}</div>
+                <div class="tab-title">{{ routePath === '/needHousing' || routeQuery.data && routeQuery.data.houseingPageType
+                    === '6' ? '租金预算' : '租金' }}</div>
                 <div class="dis-f al-item rent-box jus-bet">
                     <div class="dis-f al-item">
                         <input type="number" class="input" v-model="rentObj.min" @blur="setRent">
@@ -166,7 +179,8 @@
             </div>
             <div class="bor-b-das"></div>
             <div class="dis-f pd-t-20">
-                <div class="tab-title">{{ routePath === '/needHousing'||routeQuery.data && routeQuery.data.houseingPageType === '6' ? '求租者性别' : '性别' }}</div>
+                <div class="tab-title">{{ routePath === '/needHousing' || routeQuery.data && routeQuery.data.houseingPageType
+                    === '6' ? '求租者性别' : '性别' }}</div>
                 <div class="select-btn-box">
                     <div class="dis-f">
                         <div class="btn  jus-x al-item dis-f" v-for="(item, i) in genderData" :key="i"
@@ -208,7 +222,8 @@
             共<span class="count">{{ count || 0 }}</span>条{{ routePath === '/personHousing' ?
                 '个人房源' : routePath === '/intermediaryHousing' ?
                     '中介房源' : routePath === '/needHousing' ?
-                        '求房源' : '' }} <span v-show="selectTabCheck.title && selectTabCheck.id" style="color: #aaaaaa;margin:0 15px;">|</span>
+                        '求房源' : '' }} <span v-show="selectTabCheck.title && selectTabCheck.id"
+                style="color: #aaaaaa;margin:0 15px;">|</span>
             <div class="dis-f al-item">
                 <div v-show="selectTabCheck.id && selectTabCheck.title" class="bold-text">{{ selectTabCheck.title }}:</div>
                 <div class="dis-f" style="flex-wrap: wrap;width:800px;">
@@ -228,8 +243,8 @@
                 <template #dropdown>
                     <el-dropdown-menu class="pd-10 el-dropdown-menu">
                         <el-dropdown-item v-for="(items, j) in listSort.type" :key="j" :command="j">
-                            <div class="dropdown-text" :class="{ 'dropdown-check-text': listSort.checkType === items.type }"
-                                >{{
+                            <div class="dropdown-text"
+                                :class="{ 'dropdown-check-text': listSort.checkType === items.type }">{{
                                     items.title
                                 }}
                                 <div class="type-icon" v-show="listSort.checkType === items.type"></div>
@@ -243,7 +258,7 @@
 </template>
   
 <script setup>
-import { reactive, ref, getCurrentInstance, defineProps, watchEffect, inject, shallowReactive, defineExpose, nextTick,watch } from 'vue';
+import { reactive, ref, getCurrentInstance, defineProps, watchEffect, inject, shallowReactive, defineExpose, nextTick, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue";
 import store from '../../store/index';
@@ -265,8 +280,8 @@ const props = defineProps({
     setSeachCondition: {
         type: Function
     },
-    setLocation:{
-        type:Function
+    setLocation: {
+        type: Function
     }
 })
 
@@ -311,7 +326,7 @@ let setRegionList = () => {
         name: '不限',
         id: ''
     })
-    
+
     routerQuerySet()
 }
 
@@ -328,21 +343,21 @@ let selectPosition = ref('region')
 let showSelect = ref(false)
 
 //学校区域状态
-let schoolSelectObj = reactive({ id: '', title: '不限',page:'' })
+let schoolSelectObj = reactive({ id: '', title: '不限', page: '' })
 let schoolPages = ref(0) //页数
 let shcoolData = shallowReactive([])
 let setSchoolData = () => {
     let arr = routePath.value === '/' ? store.state.seachTypeData[0] && store.state.seachTypeData[0].where : store.state.schoolList
-    if(arr[0]&&arr[0].id)arr.unshift({ name: '不限', id: '' })
+    if (arr[0] && arr[0].id) arr.unshift({ name: '不限', id: '' })
     let num = 0
     for (let i = 0; i < arr.length; i++) {
         if (!shcoolData[num]) {
             shcoolData[num] = []
         }
         if (shcoolData[num].length < 8) shcoolData[num].push(arr[i])
-        if(arr[i].id===schoolSelectObj.id){
-           schoolSelectObj['page']=num 
-           schoolPages.value=num
+        if (arr[i].id === schoolSelectObj.id) {
+            schoolSelectObj['page'] = num
+            schoolPages.value = num
         }
         if (shcoolData[num].length === 8) {
             num++
@@ -394,12 +409,12 @@ let setSelectData = (id, data = [], title) => {
     selectTabCheck.id = id;
     selectTabCheck.title = title
     selectTabCheck.data = data;
-    if(id)selectData.data = [{ title: '不限', id: '' }]
+    if (id) selectData.data = [{ title: '不限', id: '' }]
     schoolSelectObj.id = ''
     schoolSelectObj.title = ''
-    setLocation('location',[selectTabCheck.id + ''])
+    setLocation('location', [selectTabCheck.id + ''])
     if (id === '') {
-        selectData.data=[]
+        selectData.data = []
         setSeachCondition('location', [])
     }
 }
@@ -437,7 +452,7 @@ let selectSeach = (data = []) => {
     }
     schoolSelectObj.id = ''
     schoolSelectObj.title = ''
-    
+
     setSeachCondition('location', data)
 }
 
@@ -463,7 +478,7 @@ let deleteSelect = (i, id) => {
 
 //搜索列表排序
 let listSortCheck = (item) => {
-    let obj= listSort.type[item]
+    let obj = listSort.type[item]
     listSort.checkType = obj.type
     listSort.check = obj.title
     setSeachCondition('orderby', obj.type)
@@ -599,7 +614,7 @@ let getAddressListId = (id, type) => {
 
 //查找出租类型
 let getHireType = (data, id) => {
-    
+
     let obj = null
     data.map(res => {
         if (res.id == id) obj = res
@@ -677,7 +692,7 @@ let routerQuerySet = () => {
             selectTabCheck.title = deconstructionSeachData.areaItem.name;
             selectTabCheck.data = deconstructionSeachData.areaItem.data;
             selectData.data = seachAreaId(deconstructionSeachData.selectData)
-            if(selectData.data.length===0)selectData.data = [{ title: '不限', id: '' }]
+            if (selectData.data.length === 0) selectData.data = [{ title: '不限', id: '' }]
 
             if (deconstructionSeachData.cotenancy) {
                 let type = deconstructionSeachData.cotenancyData.id.toString().substring(0, 1)
@@ -803,7 +818,7 @@ img {
     justify-content: space-between;
     width: 100%;
     height: 100%;
-    padding:5px 10px;
+    padding: 5px 10px;
 
     .type-icon {
         width: 6px;
@@ -862,8 +877,8 @@ img {
                 display: flex;
                 align-items: center;
 
-                .mg-l-10{
-                    margin-left:10px;
+                .mg-l-10 {
+                    margin-left: 10px;
                 }
 
                 .mg-l-20 {
@@ -895,7 +910,7 @@ img {
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                border-right: 1px dashed #ebebeb;
+                border-right: 1px dashed transparent;
                 border-left: 1px solid #ebebeb;
                 border-top: 1px solid #ebebeb;
                 border-bottom: 1px solid #ebebeb;
@@ -914,8 +929,16 @@ img {
                 }
             }
 
+            .line {
+                height: 100%;
+                width: 1px;
+                background-image: linear-gradient(to top, #d7d7d7 0%, #d7d7d7 50%, transparent 0%);
+                background-size: 1px 2px;
+                background-repeat: repeat-y;
+            }
+
             .right-btn {
-                border-left: 1px dashed #ebebeb;
+                border-left: 1px dashed transparent;
                 border-right: 1px solid #ebebeb;
                 border-top: 1px solid #ebebeb;
                 border-bottom: 1px solid #ebebeb;
@@ -1175,7 +1198,7 @@ img {
             margin-right: 5px;
             border-radius: 50%;
             position: relative;
-            margin-top:1px;
+            margin-top: 1px;
         }
     }
 
@@ -1263,14 +1286,14 @@ img {
     }
 }
 
-/deep/ .el-checkbox:hover{
-    color:#000;
+/deep/ .el-checkbox:hover {
+    color: #000;
 }
 
 /deep/ .el-dropdown-menu__item {
     --el-dropdown-menuItem-hover-color: #7F7F7F;
     --el-dropdown-menuItem-hover-fill: rgba(246, 246, 246, 1);
-    padding:0;
+    padding: 0;
 }
 
 /deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
@@ -1284,6 +1307,5 @@ img {
 /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
     background: #50e3c2;
     border-color: #50e3c2;
-}
-</style>
+}</style>
   
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index d44b22f..0c97d9e 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -295,6 +295,7 @@ const onPageSrcoll = (e) => {
   let clientHeight = body.clientHeight
   let offsetHeight = body.offsetHeight
   if (scrollTop + clientHeight === offsetHeight) {
+    console.log(scrollTop + clientHeight,offsetHeight)
     if (loadMore.value) {
       loadMore.value = false
       pages.value += 1