阿里图标库引入
This commit is contained in:
@@ -5,7 +5,10 @@
|
||||
<image class="mp-background" src="/static/icon/background2.png" mode="aspectFill"></image>
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="nav-hidden hidden-animation" :class="{ 'hidden-height': shouldHideTop }">
|
||||
<view
|
||||
class="nav-hidden hidden-animation"
|
||||
:class="{ 'hidden-height': shouldHideTop }"
|
||||
>
|
||||
<view class="container-search">
|
||||
<view class="search-input button-click" @click="navTo('/pages/search/search')">
|
||||
<uni-icons class="iconsearch" color="#666666" type="search" size="18"></uni-icons>
|
||||
@@ -35,49 +38,49 @@
|
||||
</view>
|
||||
<view class="service-item press-button" @click="handleServiceClick('public-recruitment')">
|
||||
<view class="service-icon service-icon-2">
|
||||
<uni-icons type="auth-filled" size="32" color="#FFFFFF"></uni-icons>
|
||||
<IconfontIcon name="zhengfulou" :size="48" color="#FFFFFF" />
|
||||
</view>
|
||||
<view class="service-title">事业单位招录</view>
|
||||
</view>
|
||||
<view class="service-item press-button" @click="handleServiceClick('resume-creation')">
|
||||
<view class="service-icon service-icon-3">
|
||||
<uni-icons type="auth-filled" size="32" color="#FFFFFF"></uni-icons>
|
||||
<IconfontIcon name="jianli" :size="48" color="#FFFFFF" />
|
||||
</view>
|
||||
<view class="service-title">简历制作</view>
|
||||
</view>
|
||||
<view class="service-item press-button" @click="handleServiceClick('labor-policy')">
|
||||
<view class="service-icon service-icon-4">
|
||||
<uni-icons type="auth-filled" size="32" color="#FFFFFF"></uni-icons>
|
||||
<IconfontIcon name="zhengce" :size="48" color="#FFFFFF" />
|
||||
</view>
|
||||
<view class="service-title">劳动政策指引</view>
|
||||
</view>
|
||||
<view class="service-item press-button" @click="handleServiceClick('skill-training')">
|
||||
<view class="service-icon service-icon-5">
|
||||
<uni-icons type="auth-filled" size="32" color="#FFFFFF"></uni-icons>
|
||||
<IconfontIcon name="jinengpeixun" :size="48" color="#FFFFFF" />
|
||||
</view>
|
||||
<view class="service-title">技能培训信息</view>
|
||||
</view>
|
||||
<view class="service-item press-button" @click="handleServiceClick('skill-evaluation')">
|
||||
<view class="service-icon service-icon-6">
|
||||
<uni-icons type="auth-filled" size="32" color="#FFFFFF"></uni-icons>
|
||||
<IconfontIcon name="jinengpingjia" :size="48" color="#FFFFFF" />
|
||||
</view>
|
||||
<view class="service-title">技能评价指引</view>
|
||||
</view>
|
||||
<view class="service-item press-button" @click="handleServiceClick('question-bank')">
|
||||
<view class="service-icon service-icon-7">
|
||||
<uni-icons type="auth-filled" size="32" color="#FFFFFF"></uni-icons>
|
||||
<IconfontIcon name="suzhicepingtiku" :size="48" color="#FFFFFF" />
|
||||
</view>
|
||||
<view class="service-title">题库和考试</view>
|
||||
</view>
|
||||
<view class="service-item press-button" @click="handleServiceClick('quality-assessment')">
|
||||
<view class="service-icon service-icon-8">
|
||||
<uni-icons type="auth-filled" size="32" color="#FFFFFF"></uni-icons>
|
||||
<IconfontIcon name="suzhicepingtiku" :size="48" color="#FFFFFF" />
|
||||
</view>
|
||||
<view class="service-title">素质测评</view>
|
||||
</view>
|
||||
<view class="service-item press-button" @click="handleServiceClick('ai-interview')">
|
||||
<view class="service-icon service-icon-9">
|
||||
<uni-icons type="auth-filled" size="32" color="#FFFFFF"></uni-icons>
|
||||
<IconfontIcon name="ai" :size="68" color="#FFFFFF" />
|
||||
</view>
|
||||
<view class="service-title">AI智能面试</view>
|
||||
</view>
|
||||
@@ -319,7 +322,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, inject, watch, ref, onMounted, watchEffect, nextTick } from 'vue';
|
||||
import { reactive, inject, watch, ref, onMounted, onUnmounted, watchEffect, nextTick } from 'vue';
|
||||
import img from '@/static/icon/filter.png';
|
||||
import dictLabel from '@/components/dict-Label/dict-Label.vue';
|
||||
const { $api, navTo, vacanciesTo, formatTotal, config } = inject('globalFunction');
|
||||
@@ -335,45 +338,50 @@ import { useRecommedIndexedDBStore, jobRecommender } from '@/stores/useRecommedI
|
||||
import { useScrollDirection } from '@/hook/useScrollDirection';
|
||||
import { useColumnCount } from '@/hook/useColumnCount';
|
||||
import WxAuthLogin from '@/components/WxAuthLogin/WxAuthLogin.vue';
|
||||
import IconfontIcon from '@/components/IconfontIcon/IconfontIcon.vue'
|
||||
// 滚动状态管理
|
||||
const shouldHideTop = ref(false);
|
||||
const shouldStickyFilter = ref(false);
|
||||
const isScrollingDown = ref(false);
|
||||
const lastScrollTop = ref(0);
|
||||
const scrollTop = ref(0);
|
||||
// 当用户与筛选/导航交互时,临时锁定头部显示状态,避免因数据刷新导致回弹显示
|
||||
const isInteractingWithFilter = ref(false);
|
||||
|
||||
// 优化的滚动处理函数
|
||||
let scrollTimer = null;
|
||||
// 滚动阈值配置
|
||||
const HIDE_THRESHOLD = 50; // 隐藏顶部区域的滚动阈值(降低阈值,更容易触发)
|
||||
const SHOW_THRESHOLD = 5; // 显示顶部区域的滚动阈值(接近顶部)
|
||||
const STICKY_THRESHOLD = 80; // 筛选区域吸顶的滚动阈值
|
||||
|
||||
// 简化的滚动处理函数
|
||||
function handleScroll(e) {
|
||||
// 节流处理,减少性能消耗
|
||||
if (scrollTimer) return;
|
||||
const currentScrollTop = e.detail.scrollTop || 0;
|
||||
|
||||
scrollTimer = setTimeout(() => {
|
||||
const currentScrollTop = e.detail.scrollTop;
|
||||
|
||||
// 控制顶部区域隐藏
|
||||
if (currentScrollTop > 50) {
|
||||
if (!shouldHideTop.value) {
|
||||
shouldHideTop.value = true;
|
||||
}
|
||||
} else {
|
||||
if (shouldHideTop.value) {
|
||||
shouldHideTop.value = false;
|
||||
}
|
||||
// 简单的滚动逻辑:向下滚动超过阈值就隐藏,滚动到顶部就显示
|
||||
if (currentScrollTop > HIDE_THRESHOLD) {
|
||||
if (!shouldHideTop.value) {
|
||||
shouldHideTop.value = true;
|
||||
}
|
||||
|
||||
// 控制筛选区域吸顶
|
||||
if (currentScrollTop > 100) {
|
||||
if (!shouldStickyFilter.value) {
|
||||
shouldStickyFilter.value = true;
|
||||
}
|
||||
} else {
|
||||
if (shouldStickyFilter.value) {
|
||||
shouldStickyFilter.value = false;
|
||||
}
|
||||
} else if (currentScrollTop <= SHOW_THRESHOLD) {
|
||||
// 仅在非交互期才允许自动显示顶部区域
|
||||
if (shouldHideTop.value && !isInteractingWithFilter.value) {
|
||||
shouldHideTop.value = false;
|
||||
}
|
||||
|
||||
scrollTimer = null;
|
||||
}, 16); // 约60fps
|
||||
}
|
||||
|
||||
// 控制筛选区域吸顶
|
||||
if (currentScrollTop > STICKY_THRESHOLD) {
|
||||
if (!shouldStickyFilter.value) {
|
||||
shouldStickyFilter.value = true;
|
||||
}
|
||||
} else {
|
||||
if (shouldStickyFilter.value) {
|
||||
shouldStickyFilter.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 更新最后的滚动位置
|
||||
lastScrollTop.value = currentScrollTop;
|
||||
scrollTop.value = currentScrollTop;
|
||||
}
|
||||
const recommedIndexDb = useRecommedIndexedDBStore();
|
||||
const emits = defineEmits(['onShowTabbar']);
|
||||
@@ -564,6 +572,7 @@ function navToService(serviceType) {
|
||||
}
|
||||
|
||||
function openFilter() {
|
||||
isInteractingWithFilter.value = true;
|
||||
showFilter.value = true;
|
||||
emits('onShowTabbar', false);
|
||||
selectFilterModel.value?.open({
|
||||
@@ -583,10 +592,13 @@ function openFilter() {
|
||||
}
|
||||
showFilter.value = false;
|
||||
getJobList('refresh');
|
||||
// 短暂延迟后解除交互锁,避免数据刷新导致顶部区域回弹
|
||||
setTimeout(() => { isInteractingWithFilter.value = false; }, 400);
|
||||
},
|
||||
cancel: () => {
|
||||
showFilter.value = false;
|
||||
emits('onShowTabbar', true);
|
||||
setTimeout(() => { isInteractingWithFilter.value = false; }, 200);
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -596,6 +608,7 @@ function handleFilterConfirm(e) {
|
||||
}
|
||||
|
||||
function choosePosition(index) {
|
||||
isInteractingWithFilter.value = true;
|
||||
state.tabIndex = index;
|
||||
list.value = [];
|
||||
if (index === 'all') {
|
||||
@@ -610,9 +623,11 @@ function choosePosition(index) {
|
||||
inputText.value = '';
|
||||
getJobList('refresh');
|
||||
}
|
||||
nextTick(() => { setTimeout(() => { isInteractingWithFilter.value = false; }, 300); });
|
||||
}
|
||||
const isShowJw = ref(0);
|
||||
function handelHostestSearch(val) {
|
||||
isInteractingWithFilter.value = true;
|
||||
isShowJw.value = val.value;
|
||||
pageState.search.order = val.value;
|
||||
pageState.search.jobType = val.value === 3 ? 1 : 0;
|
||||
@@ -621,6 +636,7 @@ function handelHostestSearch(val) {
|
||||
} else {
|
||||
getJobList('refresh');
|
||||
}
|
||||
nextTick(() => { setTimeout(() => { isInteractingWithFilter.value = false; }, 300); });
|
||||
}
|
||||
|
||||
function getJobRecommend(type = 'add') {
|
||||
@@ -841,20 +857,21 @@ defineExpose({ loadData });
|
||||
z-index: 0;
|
||||
/* #endif */
|
||||
.hidden-animation
|
||||
max-height: 1000px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
will-change: max-height, opacity, transform;
|
||||
will-change: transform, opacity;
|
||||
|
||||
.hidden-height
|
||||
opacity: 0 !important;
|
||||
transform: translateY(-100%) !important;
|
||||
pointer-events: none !important;
|
||||
max-height: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
opacity: 0 !important;
|
||||
transform: translateY(-20rpx) !important;
|
||||
will-change: max-height, opacity, transform;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
.container-search
|
||||
padding: 16rpx 24rpx
|
||||
display: flex
|
||||
@@ -1080,17 +1097,21 @@ defineExpose({ loadData });
|
||||
|
||||
// 吸顶筛选区域占位
|
||||
.filter-placeholder
|
||||
height: 120rpx; // 根据筛选区域的实际高度调整
|
||||
height: 140rpx; // 根据筛选区域的实际高度调整(包含padding)
|
||||
width: 100%;
|
||||
/* #ifdef H5 */
|
||||
height: 0; // H5使用sticky,不需要占位
|
||||
/* #endif */
|
||||
/* #ifdef MP-WEIXIN */
|
||||
height: 140rpx; // 小程序需要占位
|
||||
/* #endif */
|
||||
|
||||
.nav-filter
|
||||
padding: 16rpx 28rpx
|
||||
box-sizing: border-box; /* 添加这行 */
|
||||
box-sizing: border-box;
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
transition: all 0.3s ease;
|
||||
transition: box-shadow 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
|
||||
transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
background: #FFFFFF;
|
||||
z-index: 10;
|
||||
|
||||
@@ -1100,10 +1121,11 @@ defineExpose({ loadData });
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
z-index: 100;
|
||||
will-change: transform;
|
||||
transform: translateZ(0); // 启用硬件加速
|
||||
transform: translateZ(0);
|
||||
-webkit-transform: translateZ(0);
|
||||
/* #ifdef H5 */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
@@ -1112,7 +1134,10 @@ defineExpose({ loadData });
|
||||
/* #ifdef MP-WEIXIN */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
padding: env(safe-area-inset-top) calc(28rpx + env(safe-area-inset-right)) 0 calc(28rpx + env(safe-area-inset-left));
|
||||
padding: 16rpx 28rpx;
|
||||
padding-top: calc(16rpx + env(safe-area-inset-top));
|
||||
padding-left: calc(28rpx + env(safe-area-inset-left));
|
||||
padding-right: calc(28rpx + env(safe-area-inset-right));
|
||||
/* #endif */
|
||||
.filter-top
|
||||
display: flex
|
||||
|
Reference in New Issue
Block a user