阿里图标库引入

This commit is contained in:
冯辉
2025-10-20 16:15:29 +08:00
parent d9c1f83693
commit 968e6b4091
29 changed files with 3718 additions and 70 deletions

View File

@@ -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