From 0fbba1d868679353cad54aa8f44da0eecc4295be Mon Sep 17 00:00:00 2001
From: francis_fh <13935151924@163.com>
Date: Fri, 5 Dec 2025 13:31:15 +0800
Subject: [PATCH] =?UTF-8?q?=E9=99=84=E8=BF=91=E9=A1=B5=E9=9D=A2=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/nearby/components/four.vue  | 124 ++++++++------
 pages/nearby/components/one.vue   | 273 +++++++++++++++++-------------
 pages/nearby/components/three.vue | 231 +++++++++++++------------
 pages/nearby/components/two.vue   | 264 +++++++++++++++++------------
 pages/nearby/nearby.vue           |   1 +
 5 files changed, 503 insertions(+), 390 deletions(-)

diff --git a/pages/nearby/components/four.vue b/pages/nearby/components/four.vue
index 1cf2833..7fd0921 100644
--- a/pages/nearby/components/four.vue
+++ b/pages/nearby/components/four.vue
@@ -1,5 +1,5 @@
 <template>
-    <scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom">
+    <view class="nearby-container">
         <view class="two-head">
             <view
                 class="head-item"
@@ -11,66 +11,68 @@
                 {{ item.commercialAreaName }}
             </view>
         </view>
-        <view class="nearby-list">
-            <view class="nav-filter" @touchmove.stop.prevent>
-                <view class="filter-top">
-                    <scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
-                        <view class="jobs-left">
-                            <view
-                                class="job button-click"
-                                :class="{ active: state.tabIndex === 'all' }"
-                                @click="choosePosition('all')"
-                            >
-                                全部
+        <scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom" lower-threshold="50">
+            <view class="nearby-list">
+                <view class="nav-filter" @touchmove.stop.prevent>
+                    <view class="filter-top">
+                        <scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
+                            <view class="jobs-left">
+                                <view
+                                    class="job button-click"
+                                    :class="{ active: state.tabIndex === 'all' }"
+                                    @click="choosePosition('all')"
+                                >
+                                    全部
+                                </view>
+                                <view
+                                    class="job button-click"
+                                    :class="{ active: state.tabIndex === index }"
+                                    v-for="(item, index) in userInfo.jobTitle"
+                                    :key="index"
+                                    @click="choosePosition(index)"
+                                >
+                                    {{ item }}
+                                </view>
                             </view>
-                            <view
-                                class="job button-click"
-                                :class="{ active: state.tabIndex === index }"
-                                v-for="(item, index) in userInfo.jobTitle"
-                                :key="index"
-                                @click="choosePosition(index)"
-                            >
-                                {{ item }}
-                            </view>
-                        </view>
-                    </scroll-view>
-                    <view class="jobs-add button-click" @click="navTo('/packageA/pages/addPosition/addPosition')">
-                        <uni-icons class="iconsearch" color="#666D7F" type="plusempty" size="18"></uni-icons>
-                        <text>添加</text>
-                    </view>
-                </view>
-                <view class="filter-bottom">
-                    <view class="btm-left">
-                        <view
-                            class="button-click filterbtm"
-                            :class="{ active: pageState.search.order === item.value }"
-                            v-for="item in rangeOptions"
-                            @click="handelHostestSearch(item)"
-                            :key="item.value"
-                        >
-                            {{ item.text }}
+                        </scroll-view>
+                        <view class="jobs-add button-click" @click="navTo('/packageA/pages/addPosition/addPosition')">
+                            <uni-icons class="iconsearch" color="#666D7F" type="plusempty" size="18"></uni-icons>
+                            <text>添加</text>
                         </view>
                     </view>
-                    <view class="btm-right button-click" @click="openFilter">
-                        筛选
-                        <image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image>
+                    <view class="filter-bottom">
+                        <view class="btm-left">
+                            <view
+                                class="button-click filterbtm"
+                                :class="{ active: pageState.search.order === item.value }"
+                                v-for="item in rangeOptions"
+                                @click="handelHostestSearch(item)"
+                                :key="item.value"
+                            >
+                                {{ item.text }}
+                            </view>
+                        </view>
+                        <view class="btm-right button-click" @click="openFilter">
+                            筛选
+                            <image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image>
+                        </view>
                     </view>
                 </view>
+                <view class="one-cards">
+                    <renderJobs
+                        v-if="list.length"
+                        :list="list"
+                        :longitude="longitudeVal"
+                        :latitude="latitudeVal"
+                    ></renderJobs>
+                    <empty v-else pdTop="60"></empty>
+                    <loadmore ref="loadmoreRef"></loadmore>
+                </view>
             </view>
-            <view class="one-cards">
-                <renderJobs
-                    v-if="list.length"
-                    :list="list"
-                    :longitude="longitudeVal"
-                    :latitude="latitudeVal"
-                ></renderJobs>
-                <empty v-else pdTop="60"></empty>
-                <loadmore ref="loadmoreRef"></loadmore>
-            </view>
-        </view>
+        </scroll-view>
         <!-- 筛选 -->
         <select-filter ref="selectFilterModel"></select-filter>
-    </scroll-view>
+    </view>
 </template>
 
 <script setup>
@@ -273,9 +275,20 @@ defineExpose({ loadData, handleFilterConfirm });
 <style lang="stylus" scoped>
 .tabchecked
     color:  #4778EC !important
-.nearby-scroll
+
+.nearby-container
+    // 确保容器占据整个可用视口高度，包括安全区域
+    height: calc(100vh - var(--window-top));
+    display: flex;
+    flex-direction: column;
     overflow: hidden;
-    .two-head
+    
+.nearby-scroll
+    // 使用flex布局让scroll-view自适应高度，占据剩余空间
+    flex: 1;
+    overflow: hidden;
+    
+.two-head
         margin: 22rpx;
         display: flex;
         flex-wrap: wrap
@@ -303,7 +316,6 @@ defineExpose({ loadData, handleFilterConfirm });
             border-radius: 12rpx 12rpx 12rpx 12rpx;
 .nearby-list
     border-top: 2rpx solid #EBEBEB;
-    height: 100%
     .one-cards{
         display: flex;
         flex-direction: column;
diff --git a/pages/nearby/components/one.vue b/pages/nearby/components/one.vue
index c7e8ee8..cc7277c 100644
--- a/pages/nearby/components/one.vue
+++ b/pages/nearby/components/one.vue
@@ -1,6 +1,11 @@
 <template>
-    <scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom">
-        <view class="nearby-map" @touchmove.stop.prevent>
+    <view class="nearby-container">
+        <!-- 地图区域 - 可折叠 -->
+        <view 
+            class="nearby-map" 
+            @touchmove.stop.prevent
+            :class="{ 'map-collapsed': isMapCollapsed }"
+        >
             <map
                 style="width: 100%; height: 400px"
                 :latitude="latitudeVal"
@@ -22,71 +27,79 @@
                         </view>
                     </view>
                 </transition>
-                <!-- <view class="select-list" v-show="!rangeShow">
-                    <view class="list-item" v-for="(item, index) in range">{{ item }}km</view>
-                </view> -->
             </view>
         </view>
-        <view class="nearby-list">
-            <view class="nav-filter" @touchmove.stop.prevent>
-                <view class="filter-top">
-                    <scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
-                        <view class="jobs-left">
-                            <view
-                                class="job button-click"
-                                :class="{ active: state.tabIndex === 'all' }"
-                                @click="choosePosition('all')"
-                            >
-                                全部
-                            </view>
-                            <view
-                                class="job button-click"
-                                :class="{ active: state.tabIndex === index }"
-                                v-for="(item, index) in userInfo.jobTitle"
-                                :key="index"
-                                @click="choosePosition(index)"
-                            >
-                                {{ item }}
-                            </view>
-                        </view>
-                    </scroll-view>
-                    <view class="jobs-add button-click" @click="navTo('/packageA/pages/addPosition/addPosition')">
-                        <uni-icons class="iconsearch" color="#666D7F" type="plusempty" size="18"></uni-icons>
-                        <text>添加</text>
-                    </view>
-                </view>
-                <view class="filter-bottom">
-                    <view class="btm-left">
+        <!-- 筛选条件 - 固定显示 -->
+        <view class="nav-filter" @touchmove.stop.prevent>
+            <view class="filter-top">
+                <scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
+                    <view class="jobs-left">
                         <view
-                            class="button-click filterbtm"
-                            :class="{ active: pageState.search.order === item.value }"
-                            v-for="item in rangeOptions"
-                            @click="handelHostestSearch(item)"
-                            :key="item.value"
+                            class="job button-click"
+                            :class="{ active: state.tabIndex === 'all' }"
+                            @click="choosePosition('all')"
                         >
-                            {{ item.text }}
+                            全部
+                        </view>
+                        <view
+                            class="job button-click"
+                            :class="{ active: state.tabIndex === index }"
+                            v-for="(item, index) in userInfo.jobTitle"
+                            :key="index"
+                            @click="choosePosition(index)"
+                        >
+                            {{ item }}
                         </view>
                     </view>
-                    <view class="btm-right button-click" @click="openFilter">
-                        筛选
-                        <image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image>
-                    </view>
+                </scroll-view>
+                <view class="jobs-add button-click" @click="navTo('/packageA/pages/addPosition/addPosition')">
+                    <uni-icons class="iconsearch" color="#666D7F" type="plusempty" size="18"></uni-icons>
+                    <text>添加</text>
                 </view>
             </view>
-            <view class="one-cards">
-                <renderJobs
-                    v-if="list.length"
-                    :list="list"
-                    :longitude="longitudeVal"
-                    :latitude="latitudeVal"
-                ></renderJobs>
-                <empty v-else pdTop="60"></empty>
-                <loadmore ref="loadmoreRef"></loadmore>
+            <view class="filter-bottom">
+                <view class="btm-left">
+                    <view
+                        class="button-click filterbtm"
+                        :class="{ active: pageState.search.order === item.value }"
+                        v-for="item in rangeOptions"
+                        @click="handelHostestSearch(item)"
+                        :key="item.value"
+                    >
+                        {{ item.text }}
+                    </view>
+                </view>
+                <view class="btm-right button-click" @click="openFilter">
+                    筛选
+                    <image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image>
+                </view>
             </view>
         </view>
+        <!-- 列表滚动区域 -->
+        <scroll-view 
+            :scroll-y="true" 
+            class="nearby-scroll" 
+            @scrolltolower="scrollBottom" 
+            lower-threshold="50"
+            ref="scrollViewRef"
+            @scroll="handleScroll"
+        >
+            <view class="nearby-list">
+                <view class="one-cards">
+                    <renderJobs
+                        v-if="list.length"
+                        :list="list"
+                        :longitude="longitudeVal"
+                        :latitude="latitudeVal"
+                    ></renderJobs>
+                    <empty v-else pdTop="60"></empty>
+                    <loadmore ref="loadmoreRef"></loadmore>
+                </view>
+            </view>
+        </scroll-view>
         <!-- 筛选 -->
         <select-filter ref="selectFilterModel"></select-filter>
-    </scroll-view>
+    </view>
 </template>
 
 <script setup>
@@ -107,6 +120,8 @@ const range = ref([1, 2, 4, 6, 8, 10]);
 const rangeShow = ref(false);
 
 const selectFilterModel = ref(null);
+const scrollViewRef = ref(null);
+const isMapCollapsed = ref(false);
 const tMap = ref();
 const progress = ref();
 const mapCovers = ref([]);
@@ -264,6 +279,13 @@ function progressChange(value) {
     debounceAjax('refresh');
 }
 
+// 处理滚动事件，实现地图折叠
+function handleScroll(e) {
+    const scrollTop = e.detail.scrollTop;
+    // 当滚动超过100rpx时，折叠地图
+    isMapCollapsed.value = scrollTop > 100;
+}
+
 let debounceAjax = debounce(getJobList, 500);
 function getJobList(type = 'add') {
     if (type === 'add' && pageState.page < pageState.maxPage) {
@@ -363,78 +385,97 @@ defineExpose({ loadData, handleFilterConfirm });
         }
     }
 }
-.nearby-scroll
+.nearby-container
+    // 确保容器占据整个可用视口高度，包括安全区域
+    height: calc(100vh - var(--window-top));
+    display: flex;
+    flex-direction: column;
     overflow: hidden;
-    .nearby-map
-        height: 767rpx;
-        background: #e8e8e8;
-        overflow: hidden
+    
+.nearby-map
+    height: 767rpx;
+    background: #e8e8e8;
+    overflow: hidden
+    transition: height 0.3s ease;
+    
+    &.map-collapsed {
+        height: 0;
+        overflow: hidden;
+    }
+    
+.nearby-scroll
+    // 使用flex布局让scroll-view自适应高度，占据剩余空间
+    flex: 1;
+    overflow: hidden;
+    transition: flex 0.3s ease;
 .nearby-list
     .one-cards{
         display: flex;
         flex-direction: column;
         padding: 0 20rpx 20rpx 20rpx;
         background: #f4f4f4
-        height: 100%
     }
-    .nav-filter
-        padding: 16rpx 28rpx 0 28rpx
-        .filter-top
-            display: flex
-            justify-content: space-between;
-            .tab-scroll
-                flex: 1;
-                overflow: hidden;
-                margin-right: 20rpx
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: clip;
-                -webkit-mask-image: linear-gradient(to right, black 60%, transparent);
-                mask-image: linear-gradient(to right, black 60%, transparent);
-                .jobs-left
-                    display: flex
-                    flex-wrap: nowrap
-                    .job
-                        font-weight: 400;
-                        font-size: 36rpx;
-                        color: #666D7F;
-                        margin-right: 32rpx;
-                        white-space: nowrap
-                    .active
-                        font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
-                        font-weight: 500;
-                        font-size: 36rpx;
-                        color: #000000;
-            .jobs-add
+
+// 筛选条件样式 - 顶级选择器
+.nav-filter
+    padding: 16rpx 28rpx 0 28rpx
+    background: #ffffff
+    .filter-top
+        display: flex
+        justify-content: space-between;
+        .tab-scroll
+            flex: 1;
+            overflow: hidden;
+            margin-right: 20rpx
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: clip;
+            -webkit-mask-image: linear-gradient(to right, black 60%, transparent);
+            mask-image: linear-gradient(to right, black 60%, transparent);
+            .jobs-left
                 display: flex
-                align-items: center;
-                justify-content: center;
+                flex-wrap: nowrap
+                .job
+                    font-weight: 400;
+                    font-size: 36rpx;
+                    color: #666D7F;
+                    margin-right: 32rpx;
+                    white-space: nowrap
+                .active
+                    font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
+                    font-weight: 500;
+                    font-size: 36rpx;
+                    color: #000000;
+        .jobs-add
+            display: flex
+            align-items: center;
+            justify-content: center;
+            font-weight: 400;
+            font-size: 32rpx;
+            color: #666D7F;
+            line-height: 38rpx;
+    .filter-bottom
+        display: flex
+        justify-content: space-between
+        padding: 24rpx 0
+        .btm-left
+            display: flex
+            .filterbtm
                 font-weight: 400;
                 font-size: 32rpx;
                 color: #666D7F;
-                line-height: 38rpx;
-        .filter-bottom
-            display: flex
-            justify-content: space-between
-            padding: 24rpx 0
-            .btm-left
-                display: flex
-                .filterbtm
-                    font-weight: 400;
-                    font-size: 32rpx;
-                    color: #666D7F;
-                    margin-right: 40rpx
-                .active
-                    font-weight: 500;
-                    font-size: 32rpx;
-                    color: #256BFA;
-            .btm-right
-                font-weight: 400;
+                margin-right: 40rpx
+            .active
+                font-weight: 500;
                 font-size: 32rpx;
-                color: #6C7282;
-                .right-sx
-                    width: 26rpx;
-                    height: 26rpx;
-                .active
-                    transform: rotate(180deg)
+                color: #256BFA;
+        .btm-right
+            font-weight: 400;
+            font-size: 32rpx;
+            color: #6C7282;
+            .right-sx
+                width: 26rpx;
+                height: 26rpx;
+            .active
+                transform: rotate(180deg)
 </style>
diff --git a/pages/nearby/components/three.vue b/pages/nearby/components/three.vue
index 8355421..1126a62 100644
--- a/pages/nearby/components/three.vue
+++ b/pages/nearby/components/three.vue
@@ -1,5 +1,5 @@
 <template>
-    <scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom">
+    <view class="nearby-container">
         <view class="three-head" @touchmove.stop.prevent>
             <view class="one-picker">
                 <view class="oneleft button-click" @click="openFilterSubway">
@@ -48,66 +48,69 @@
                 </view>
             </scroll-view>
         </view>
-        <view class="nearby-list">
-            <view class="nav-filter" @touchmove.stop.prevent>
-                <view class="filter-top">
-                    <scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
-                        <view class="jobs-left">
-                            <view
-                                class="job button-click"
-                                :class="{ active: state.tabIndex === 'all' }"
-                                @click="choosePosition('all')"
-                            >
-                                全部
-                            </view>
-                            <view
-                                class="job button-click"
-                                :class="{ active: state.tabIndex === index }"
-                                v-for="(item, index) in userInfo.jobTitle"
-                                :key="index"
-                                @click="choosePosition(index)"
-                            >
-                                {{ item }}
-                            </view>
-                        </view>
-                    </scroll-view>
-                    <view class="jobs-add button-click" @click="navTo('/packageA/pages/addPosition/addPosition')">
-                        <uni-icons class="iconsearch" color="#666D7F" type="plusempty" size="18"></uni-icons>
-                        <text>添加</text>
-                    </view>
-                </view>
-                <view class="filter-bottom">
-                    <view class="btm-left">
+        <!-- 筛选项移到scroll-view外面 -->
+        <view class="nav-filter" @touchmove.stop.prevent>
+            <view class="filter-top">
+                <scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
+                    <view class="jobs-left">
                         <view
-                            class="button-click filterbtm"
-                            :class="{ active: pageState.search.order === item.value }"
-                            v-for="item in rangeOptions"
-                            @click="handelHostestSearch(item)"
-                            :key="item.value"
+                            class="job button-click"
+                            :class="{ active: state.tabIndex === 'all' }"
+                            @click="choosePosition('all')"
                         >
-                            {{ item.text }}
+                            全部
+                        </view>
+                        <view
+                            class="job button-click"
+                            :class="{ active: state.tabIndex === index }"
+                            v-for="(item, index) in userInfo.jobTitle"
+                            :key="index"
+                            @click="choosePosition(index)"
+                        >
+                            {{ item }}
                         </view>
                     </view>
-                    <view class="btm-right button-click" @click="openFilter">
-                        筛选
-                        <image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image>
-                    </view>
+                </scroll-view>
+                <view class="jobs-add button-click" @click="navTo('/packageA/pages/addPosition/addPosition')">
+                    <uni-icons class="iconsearch" color="#666D7F" type="plusempty" size="18"></uni-icons>
+                    <text>添加</text>
                 </view>
             </view>
-            <view class="one-cards">
-                <renderJobs
-                    v-if="list.length"
-                    :list="list"
-                    :longitude="longitudeVal"
-                    :latitude="latitudeVal"
-                ></renderJobs>
-                <empty v-else pdTop="60"></empty>
-                <loadmore ref="loadmoreRef"></loadmore>
+            <view class="filter-bottom">
+                <view class="btm-left">
+                    <view
+                        class="button-click filterbtm"
+                        :class="{ active: pageState.search.order === item.value }"
+                        v-for="item in rangeOptions"
+                        @click="handelHostestSearch(item)"
+                        :key="item.value"
+                    >
+                        {{ item.text }}
+                    </view>
+                </view>
+                <view class="btm-right button-click" @click="openFilter">
+                    筛选
+                    <image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image>
+                </view>
             </view>
         </view>
+        <scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom" lower-threshold="50">
+            <view class="nearby-list">
+                <view class="one-cards">
+                    <renderJobs
+                        v-if="list.length"
+                        :list="list"
+                        :longitude="longitudeVal"
+                        :latitude="latitudeVal"
+                    ></renderJobs>
+                    <empty v-else pdTop="60"></empty>
+                    <loadmore ref="loadmoreRef"></loadmore>
+                </view>
+            </view>
+        </scroll-view>
         <!-- 筛选 -->
         <select-filter ref="selectFilterModel"></select-filter>
-    </scroll-view>
+    </view>
 </template>
 
 <script setup>
@@ -358,9 +361,18 @@ defineExpose({ loadData, handleFilterConfirm });
         transform: rotate(180deg)
 .tabchecked
     color:  #4778EC !important;
+
+.nearby-container
+    // 确保容器占据整个可用高度
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    
 .nearby-scroll
-    overflow: hidden;
-    .three-head
+    // 为scroll-view设置明确高度，减去nav-filter的高度
+    height: calc(100vh - var(--window-top) - var(--status-bar-height) - 63rpx - 200rpx - 120rpx);
+    
+.three-head
         margin: 24rpx 0 0 0;
         padding: 26rpx 0 0 0;
         border-radius: 17rpx 17rpx 17rpx 17rpx;
@@ -482,71 +494,72 @@ defineExpose({ loadData, handleFilterConfirm });
                     border-radius: 17rpx 17rpx 17rpx 17rpx;
                     z-index: 1;
 .nearby-list
-    border-top: 2rpx solid #EBEBEB;
     .one-cards{
         display: flex;
         flex-direction: column;
         padding: 0 20rpx 20rpx 20rpx;
         background: #f4f4f4
     }
-    .nav-filter
-        padding: 16rpx 28rpx 0 28rpx
-        .filter-top
-            display: flex
-            justify-content: space-between;
-            .tab-scroll
-                flex: 1;
-                overflow: hidden;
-                margin-right: 20rpx
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: clip;
-                -webkit-mask-image: linear-gradient(to right, black 60%, transparent);
-                mask-image: linear-gradient(to right, black 60%, transparent);
-                .jobs-left
-                    display: flex
-                    flex-wrap: nowrap
-                    .job
-                        font-weight: 400;
-                        font-size: 36rpx;
-                        color: #666D7F;
-                        margin-right: 32rpx;
-                        white-space: nowrap
-                    .active
-                        font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
-                        font-weight: 500;
-                        font-size: 36rpx;
-                        color: #000000;
-            .jobs-add
+.nav-filter
+    border-top: 2rpx solid #EBEBEB;
+    padding: 16rpx 28rpx 0 28rpx;
+    margin-top: 125rpx;
+    .filter-top
+        display: flex
+        justify-content: space-between;
+        .tab-scroll
+            flex: 1;
+            overflow: hidden;
+            margin-right: 20rpx
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: clip;
+            -webkit-mask-image: linear-gradient(to right, black 60%, transparent);
+            mask-image: linear-gradient(to right, black 60%, transparent);
+            .jobs-left
                 display: flex
-                align-items: center;
-                justify-content: center;
+                flex-wrap: nowrap
+                .job
+                    font-weight: 400;
+                    font-size: 36rpx;
+                    color: #666D7F;
+                    margin-right: 32rpx;
+                    white-space: nowrap
+                .active
+                    font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
+                    font-weight: 500;
+                    font-size: 36rpx;
+                    color: #000000;
+        .jobs-add
+            display: flex
+            align-items: center;
+            justify-content: center;
+            font-weight: 400;
+            font-size: 32rpx;
+            color: #666D7F;
+            line-height: 38rpx;
+    .filter-bottom
+        display: flex
+        justify-content: space-between
+        padding: 24rpx 0
+        .btm-left
+            display: flex
+            .filterbtm
                 font-weight: 400;
                 font-size: 32rpx;
                 color: #666D7F;
-                line-height: 38rpx;
-        .filter-bottom
-            display: flex
-            justify-content: space-between
-            padding: 24rpx 0
-            .btm-left
-                display: flex
-                .filterbtm
-                    font-weight: 400;
-                    font-size: 32rpx;
-                    color: #666D7F;
-                    margin-right: 40rpx
-                .active
-                    font-weight: 500;
-                    font-size: 32rpx;
-                    color: #256BFA;
-            .btm-right
-                font-weight: 400;
+                margin-right: 40rpx
+            .active
+                font-weight: 500;
                 font-size: 32rpx;
-                color: #6C7282;
-                .right-sx
-                    width: 26rpx;
-                    height: 26rpx;
-                .active
-                    transform: rotate(180deg)
+                color: #256BFA;
+        .btm-right
+            font-weight: 400;
+            font-size: 32rpx;
+            color: #6C7282;
+            .right-sx
+                width: 26rpx;
+                height: 26rpx;
+            .active
+                transform: rotate(180deg)
 </style>
diff --git a/pages/nearby/components/two.vue b/pages/nearby/components/two.vue
index f544bd0..616c11e 100644
--- a/pages/nearby/components/two.vue
+++ b/pages/nearby/components/two.vue
@@ -1,6 +1,10 @@
 <template>
-    <scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom">
-        <view class="two-head">
+    <view class="nearby-container">
+        <!-- 区县选择区域 - 可折叠 -->
+        <view 
+            class="two-head"
+            :class="{ 'area-collapsed': isAreaCollapsed }"
+        >
             <view
                 class="head-item"
                 :class="{ active: item.value === fromValue.area }"
@@ -18,66 +22,72 @@
                 不限区域
             </view>
         </view>
-        <view class="nearby-list">
-            <view class="nav-filter" @touchmove.stop.prevent>
-                <view class="filter-top">
-                    <scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
-                        <view class="jobs-left">
-                            <view
-                                class="job button-click"
-                                :class="{ active: state.tabIndex === 'all' }"
-                                @click="choosePosition('all')"
-                            >
-                                全部
-                            </view>
-                            <view
-                                class="job button-click"
-                                :class="{ active: state.tabIndex === index }"
-                                v-for="(item, index) in userInfo.jobTitle"
-                                :key="index"
-                                @click="choosePosition(index)"
-                            >
-                                {{ item }}
-                            </view>
-                        </view>
-                    </scroll-view>
-                    <view class="jobs-add button-click" @click="navTo('/packageA/pages/addPosition/addPosition')">
-                        <uni-icons class="iconsearch" color="#666D7F" type="plusempty" size="18"></uni-icons>
-                        <text>添加</text>
-                    </view>
-                </view>
-                <view class="filter-bottom">
-                    <view class="btm-left">
+        <!-- 筛选条件 - 固定显示 -->
+        <view class="nav-filter" @touchmove.stop.prevent>
+            <view class="filter-top">
+                <scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
+                    <view class="jobs-left">
                         <view
-                            class="button-click filterbtm"
-                            :class="{ active: pageState.search.order === item.value }"
-                            v-for="item in rangeOptions"
-                            @click="handelHostestSearch(item)"
-                            :key="item.value"
+                            class="job button-click"
+                            :class="{ active: state.tabIndex === 'all' }"
+                            @click="choosePosition('all')"
                         >
-                            {{ item.text }}
+                            全部
+                        </view>
+                        <view
+                            class="job button-click"
+                            :class="{ active: state.tabIndex === index }"
+                            v-for="(item, index) in userInfo.jobTitle"
+                            :key="index"
+                            @click="choosePosition(index)"
+                        >
+                            {{ item }}
                         </view>
                     </view>
-                    <view class="btm-right button-click" @click="openFilter">
-                        筛选
-                        <image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image>
-                    </view>
+                </scroll-view>
+                <view class="jobs-add button-click" @click="navTo('/packageA/pages/addPosition/addPosition')">
+                    <uni-icons class="iconsearch" color="#666D7F" type="plusempty" size="18"></uni-icons>
+                    <text>添加</text>
                 </view>
             </view>
-            <view class="one-cards">
-                <renderJobs
-                    v-if="list.length"
-                    :list="list"
-                    :longitude="longitudeVal"
-                    :latitude="latitudeVal"
-                ></renderJobs>
-                <empty v-else pdTop="60"></empty>
-                <loadmore ref="loadmoreRef"></loadmore>
+            <view class="filter-bottom">
+                <view class="btm-left">
+                    <view
+                        class="button-click filterbtm"
+                        :class="{ active: pageState.search.order === item.value }"
+                        v-for="item in rangeOptions"
+                        @click="handelHostestSearch(item)"
+                        :key="item.value"
+                    >
+                        {{ item.text }}
+                    </view>
+                </view>
+                <view class="btm-right button-click" @click="openFilter">
+                    筛选
+                    <image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image>
+                </view>
             </view>
         </view>
+        <!-- 列表滚动区域 -->
+        <scroll-view 
+            :scroll-y="true" 
+            class="nearby-scroll" 
+            @scrolltolower="scrollBottom" 
+            lower-threshold="50"
+            ref="scrollViewRef"
+            @scroll="handleScroll"
+        >
+            <view class="nearby-list">
+                <view class="one-cards">
+                    <renderJobs v-if="list.length" :list="list"></renderJobs>
+                    <empty v-else pdTop="60"></empty>
+                    <loadmore ref="loadmoreRef"></loadmore>
+                </view>
+            </view>
+        </scroll-view>
         <!-- 筛选 -->
         <select-filter ref="selectFilterModel"></select-filter>
-    </scroll-view>
+    </view>
 </template>
 
 <script setup>
@@ -103,6 +113,8 @@ const state = reactive({
 const isLoaded = ref(false);
 const showFilter = ref(false);
 const selectFilterModel = ref();
+const scrollViewRef = ref(null);
+const isAreaCollapsed = ref(false);
 const fromValue = reactive({
     area: 0,
 });
@@ -192,8 +204,20 @@ function scrollBottom() {
 // }
 function changeArea(area, item) {
     fromValue.area = area;
+    // 切换区县时列表置顶
+    if (scrollViewRef.value) {
+        scrollViewRef.value.scrollTop = 0;
+    }
     getJobList('refresh');
 }
+
+// 处理滚动事件，实现区县选择区域折叠
+function handleScroll(e) {
+    const scrollTop = e.detail.scrollTop;
+    // 当滚动超过100rpx时，折叠区县选择区域
+    isAreaCollapsed.value = scrollTop > 100;
+    console.log('scrollTop:', scrollTop, 'collapsed:', isAreaCollapsed.value);
+}
 function getJobList(type = 'add') {
     if (type === 'add' && pageState.page < pageState.maxPage) {
         pageState.page += 1;
@@ -254,13 +278,32 @@ defineExpose({ loadData, handleFilterConfirm });
 <style lang="stylus" scoped>
 .tabchecked
     color:  #4778EC !important
-.nearby-scroll
+
+.nearby-container
+    // 确保容器占据整个可用视口高度，包括安全区域
+    height: calc(100vh - var(--window-top));
+    display: flex;
+    flex-direction: column;
     overflow: hidden;
-    .two-head
+    
+.nearby-scroll
+    // 使用flex布局让scroll-view自适应高度，占据剩余空间
+    flex: 1;
+    overflow: hidden;
+    
+.two-head
         margin: 22rpx;
         display: flex;
         flex-wrap: wrap
         // grid-template-columns: repeat(4, 1fr);
+        transition: all 0.3s ease;
+        
+        &.area-collapsed {
+            height: 0;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
         // grid-column-gap: 10rpx;
         // grid-row-gap: 24rpx;
 
@@ -291,64 +334,67 @@ defineExpose({ loadData, handleFilterConfirm });
         padding: 0 20rpx 20rpx 20rpx;
         background: #f4f4f4
     }
-    .nav-filter
-        padding: 16rpx 28rpx 0 28rpx
-        .filter-top
-            display: flex
-            justify-content: space-between;
-            .tab-scroll
-                flex: 1;
-                overflow: hidden;
-                margin-right: 20rpx
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: clip;
-                -webkit-mask-image: linear-gradient(to right, black 60%, transparent);
-                mask-image: linear-gradient(to right, black 60%, transparent);
-                .jobs-left
-                    display: flex
-                    flex-wrap: nowrap
-                    .job
-                        font-weight: 400;
-                        font-size: 36rpx;
-                        color: #666D7F;
-                        margin-right: 32rpx;
-                        white-space: nowrap
-                    .active
-                        font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
-                        font-weight: 500;
-                        font-size: 36rpx;
-                        color: #000000;
-            .jobs-add
+
+// 筛选条件样式 - 顶级选择器
+.nav-filter
+    padding: 16rpx 28rpx 0 28rpx
+    background: #ffffff
+    .filter-top
+        display: flex
+        justify-content: space-between;
+        .tab-scroll
+            flex: 1;
+            overflow: hidden;
+            margin-right: 20rpx
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: clip;
+            -webkit-mask-image: linear-gradient(to right, black 60%, transparent);
+            mask-image: linear-gradient(to right, black 60%, transparent);
+            .jobs-left
                 display: flex
-                align-items: center;
-                justify-content: center;
+                flex-wrap: nowrap
+                .job
+                    font-weight: 400;
+                    font-size: 36rpx;
+                    color: #666D7F;
+                    margin-right: 32rpx;
+                    white-space: nowrap
+                .active
+                    font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
+                    font-weight: 500;
+                    font-size: 36rpx;
+                    color: #000000;
+        .jobs-add
+            display: flex
+            align-items: center;
+            justify-content: center;
+            font-weight: 400;
+            font-size: 32rpx;
+            color: #666D7F;
+            line-height: 38rpx;
+    .filter-bottom
+        display: flex
+        justify-content: space-between
+        padding: 24rpx 0
+        .btm-left
+            display: flex
+            .filterbtm
                 font-weight: 400;
                 font-size: 32rpx;
                 color: #666D7F;
-                line-height: 38rpx;
-        .filter-bottom
-            display: flex
-            justify-content: space-between
-            padding: 24rpx 0
-            .btm-left
-                display: flex
-                .filterbtm
-                    font-weight: 400;
-                    font-size: 32rpx;
-                    color: #666D7F;
-                    margin-right: 40rpx
-                .active
-                    font-weight: 500;
-                    font-size: 32rpx;
-                    color: #256BFA;
-            .btm-right
-                font-weight: 400;
+                margin-right: 40rpx
+            .active
+                font-weight: 500;
                 font-size: 32rpx;
-                color: #6C7282;
-                .right-sx
-                    width: 26rpx;
-                    height: 26rpx;
-                .active
-                    transform: rotate(180deg)
+                color: #256BFA;
+        .btm-right
+            font-weight: 400;
+            font-size: 32rpx;
+            color: #6C7282;
+            .right-sx
+                width: 26rpx;
+                height: 26rpx;
+            .active
+                transform: rotate(180deg)
 </style>
diff --git a/pages/nearby/nearby.vue b/pages/nearby/nearby.vue
index 6216396..f5f1509 100644
--- a/pages/nearby/nearby.vue
+++ b/pages/nearby/nearby.vue
@@ -132,4 +132,5 @@ image {
             .swiper-item
                 display: flex;
                 flex-direction: column;
+                height: 100%;
 </style>