sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

阿里图标库引入

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/chat/components/ai-paging.vue
View File

@@ -249,8 +249,6 @@ import {
ref,
inject,
nextTick,
defineProps,
defineEmits,
onMounted,
onUnmounted,
toRaw,

2
pages/chat/components/popupbadFeeback.vue
View File

@@ -37,7 +37,7 @@
</template>
<script setup>
import { ref, inject, defineEmits } from 'vue';
import { ref, inject } from 'vue';
const emit = defineEmits(['onSend']);
const { $api } = inject('globalFunction');
const popup = ref(null);

272
pages/demo/iconfont-demo.vue Normal file
View File

@@ -0,0 +1,272 @@
<template>
<view class="demo-page">
<view class="demo-title">阿里图标库使用示例</view>
<!-- 方式一：直接使用 iconfont 类 -->
<view class="demo-section">
<view class="section-title">方式一：直接使用</view>
<view class="icon-list">
<view class="icon-item">
<text class="iconfont icon-home"></text>
<text class="icon-name">icon-home</text>
</view>
<view class="icon-item">
<text class="iconfont icon-user"></text>
<text class="icon-name">icon-user</text>
</view>
<view class="icon-item">
<text class="iconfont icon-search"></text>
<text class="icon-name">icon-search</text>
</view>
</view>
</view>
<!-- 方式二：使用封装的组件 -->
<view class="demo-section">
<view class="section-title">方式二：使用封装组件</view>
<view class="icon-list">
<view class="icon-item">
<IconfontIcon name="home" :size="48" color="#13C57C" />
<text class="icon-name">绿色 48rpx</text>
</view>
<view class="icon-item">
<IconfontIcon name="user" :size="36" color="#256BFA" />
<text class="icon-name">蓝色 36rpx</text>
</view>
<view class="icon-item">
<IconfontIcon name="search" :size="32" color="#FF9800" />
<text class="icon-name">橙色 32rpx</text>
</view>
</view>
</view>
<!-- 方式三：使用配置常量 -->
<view class="demo-section">
<view class="section-title">方式三：使用配置常量</view>
<view class="icon-list">
<view class="icon-item">
<IconfontIcon
:name="ICONS.PHONE"
:size="ICON_SIZES.LARGE"
:color="ICON_COLORS.PRIMARY"
/>
<text class="icon-name">电话</text>
</view>
<view class="icon-item">
<IconfontIcon
:name="ICONS.MESSAGE"
:size="ICON_SIZES.LARGE"
:color="ICON_COLORS.SECONDARY"
/>
<text class="icon-name">消息</text>
</view>
<view class="icon-item">
<IconfontIcon
:name="ICONS.LOCATION"
:size="ICON_SIZES.LARGE"
:color="ICON_COLORS.DANGER"
/>
<text class="icon-name">位置</text>
</view>
</view>
</view>
<!-- 方式四：按钮中使用 -->
<view class="demo-section">
<view class="section-title">方式四：在按钮中使用</view>
<button class="demo-button primary">
<IconfontIcon name="phone" :size="32" color="#FFFFFF" />
<text>手机号登录</text>
</button>
<button class="demo-button secondary">
<IconfontIcon name="user" :size="32" color="#256BFA" />
<text>个人中心</text>
</button>
<button class="demo-button success">
<IconfontIcon name="star" :size="32" color="#FFFFFF" />
<text>收藏职位</text>
</button>
</view>
<!-- 方式五：列表中使用 -->
<view class="demo-section">
<view class="section-title">方式五：在列表中使用</view>
<view class="demo-list">
<view class="list-item" v-for="item in menuList" :key="item.id">
<IconfontIcon :name="item.icon" :size="40" :color="item.color" />
<view class="item-content">
<view class="item-title">{{ item.title }}</view>
<view class="item-desc">{{ item.desc }}</view>
</view>
<IconfontIcon name="arrow-right" :size="28" color="#999" />
</view>
</view>
</view>
<!-- 注意事项 -->
<view class="demo-section">
<view class="section-title">⚠️ 注意事项</view>
<view class="tips-box">
<view class="tip-item">1. 确保已从阿里图标库下载字体文件到 static/iconfont/ 目录</view>
<view class="tip-item">2. 确保已在 App.vue 中引入 iconfont.css</view>
<view class="tip-item">3. 图标名称需要与阿里图标库中的类名保持一致</view>
<view class="tip-item">4. 推荐使用封装的 IconfontIcon 组件，便于统一管理</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
import IconfontIcon from '@/components/IconfontIcon/IconfontIcon.vue'
import { ICONS, ICON_SIZES, ICON_COLORS } from '@/config/icons'
const menuList = ref([
{
id: 1,
icon: 'home',
title: '首页',
desc: '查看推荐职位',
color: '#13C57C'
},
{
id: 2,
icon: 'search',
title: '搜索',
desc: '搜索心仪职位',
color: '#256BFA'
},
{
id: 3,
icon: 'message',
title: '消息',
desc: '查看聊天消息',
color: '#FF9800'
},
{
id: 4,
icon: 'user',
title: '我的',
desc: '个人中心',
color: '#9C27B0'
}
])
</script>
<style lang="stylus" scoped>
.demo-page
padding: 40rpx
background: #F5F5F5
min-height: 100vh
.demo-title
font-size: 48rpx
font-weight: bold
color: #333
text-align: center
margin-bottom: 40rpx
.demo-section
background: #FFFFFF
border-radius: 16rpx
padding: 32rpx
margin-bottom: 32rpx
.section-title
font-size: 32rpx
font-weight: 600
color: #333
margin-bottom: 24rpx
padding-bottom: 16rpx
border-bottom: 2rpx solid #F0F0F0
.icon-list
display: flex
flex-wrap: wrap
gap: 32rpx
.icon-item
display: flex
flex-direction: column
align-items: center
gap: 12rpx
min-width: 120rpx
.iconfont
font-size: 48rpx
color: #333
.icon-name
font-size: 24rpx
color: #666
text-align: center
.demo-button
width: 100%
height: 88rpx
border-radius: 44rpx
display: flex
align-items: center
justify-content: center
gap: 12rpx
font-size: 32rpx
margin-bottom: 20rpx
border: none
&.primary
background: linear-gradient(135deg, #13C57C 0%, #0FA368 100%)
color: #FFFFFF
&.secondary
background: #F7F8FA
color: #256BFA
&.success
background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%)
color: #FFFFFF
.demo-list
display: flex
flex-direction: column
gap: 20rpx
.list-item
display: flex
align-items: center
padding: 24rpx
background: #F7F8FA
border-radius: 12rpx
gap: 20rpx
.item-content
flex: 1
.item-title
font-size: 30rpx
color: #333
font-weight: 500
margin-bottom: 8rpx
.item-desc
font-size: 24rpx
color: #999
.tips-box
padding: 24rpx
background: #FFF3E0
border-radius: 12rpx
.tip-item
font-size: 26rpx
color: #E65100
line-height: 1.8
margin-bottom: 12rpx
&:last-child
margin-bottom: 0
// 按钮重置样式
button::after
border: none
</style>

129
pages/index/components/index-one.vue
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