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:
francis_fh
2025-12-05 17:01:50 +08:00
parent a812c7b1d6
commit b2016378fb
3 changed files with 474 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
pages.json
View File

@@ -143,6 +143,12 @@
"style": {
"navigationBarTitleText": "薪酬信息"
}
},
{
"path": "pages/service/guidance",
"style": {
"navigationBarTitleText": "服务指导"
}
}
],
"subpackages": [

12
pages/index/components/index-one.vue
View File

@@ -95,12 +95,12 @@
</view>
<view class="service-title">服务指导</view>
</view>
<view class="service-item press-button" @click="handleServiceClick('public-recruitment')">
<view class="service-icon service-icon-2">
<IconfontIcon name="zhengfulou" :size="48" color="#FFFFFF" />
</view>
<view class="service-title">事业单位招录</view>
</view>
// <view class="service-item press-button" @click="handleServiceClick('public-recruitment')">
// <view class="service-icon service-icon-2">
// <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">
<IconfontIcon name="jianli" :size="48" color="#FFFFFF" />

456
pages/service/guidance.vue Normal file
View File

@@ -0,0 +1,456 @@
<template>
<view class="service-guidance-container">
<view class="guidance-header">
<text class="header-title">服务指导</text>
<text class="header-subtitle">如何使用喀什智慧就业平台</text>
</view>
<scroll-view class="guidance-content" scroll-y="true">
<!-- 欢迎介绍 -->
<view class="guidance-section">
<view class="section-title">
<uni-icons type="info-filled" size="24" color="#256BFA"></uni-icons>
<text class="title-text">欢迎使用</text>
</view>
<view class="section-content">
<text class="content-text">喀什智慧就业平台是为您提供全方位就业服务的小程序，包括职位搜索、简历创建、职业规划等功能。</text>
</view>
</view>
<!-- 使用步骤 -->
<view class="guidance-section">
<view class="section-title">
<uni-icons type="steps-filled" size="24" color="#256BFA"></uni-icons>
<text class="title-text">使用步骤</text>
</view>
<view class="section-content">
<view class="step-item">
<view class="step-number">1</view>
<view class="step-content">
<text class="step-title">登录/注册</text>
<text class="step-desc">首次使用请先完成登录或注册，完善个人信息以便获取更好的服务。</text>
</view>
</view>
<view class="step-item">
<view class="step-number">2</view>
<view class="step-content">
<text class="step-title">浏览首页</text>
<text class="step-desc">首页展示了推荐职位、附近工作和各种服务功能，您可以根据需求选择。</text>
</view>
</view>
<view class="step-item">
<view class="step-number">3</view>
<view class="step-content">
<text class="step-title">搜索职位</text>
<text class="step-desc">使用顶部搜索框输入职位名称、关键词等，快速找到您感兴趣的职位。</text>
</view>
</view>
<view class="step-item">
<view class="step-number">4</view>
<view class="step-content">
<text class="step-title">查看职位详情</text>
<text class="step-desc">点击职位卡片查看详细信息，包括薪资待遇、工作地点、任职要求等。</text>
</view>
</view>
<view class="step-item">
<view class="step-number">5</view>
<view class="step-content">
<text class="step-title">投递简历</text>
<text class="step-desc">如果您对某个职位感兴趣，可以直接投递简历，等待企业联系。</text>
</view>
</view>
<view class="step-item">
<view class="step-number">6</view>
<view class="step-content">
<text class="step-title">使用服务功能</text>
<text class="step-desc">首页九宫格提供了多种服务，包括简历指导、劳动政策指引、技能培训等，您可以根据需要使用。</text>
</view>
</view>
</view>
</view>
<!-- 功能介绍 -->
<view class="guidance-section">
<view class="section-title">
<uni-icons type="grid-filled" size="24" color="#256BFA"></uni-icons>
<text class="title-text">主要功能</text>
</view>
<view class="section-content">
<view class="feature-grid">
<view class="feature-item">
<view class="feature-icon">
<uni-icons type="search" size="36" color="#256BFA"></uni-icons>
</view>
<text class="feature-title">职位搜索</text>
<text class="feature-desc">智能匹配，精准推荐</text>
</view>
<view class="feature-item">
<view class="feature-icon">
<uni-icons type="person-filled" size="36" color="#256BFA"></uni-icons>
</view>
<text class="feature-title">简历管理</text>
<text class="feature-desc">在线创建，一键投递</text>
</view>
<view class="feature-item">
<view class="feature-icon">
<uni-icons type="map-pin" size="36" color="#256BFA"></uni-icons>
</view>
<text class="feature-title">附近工作</text>
<text class="feature-desc">基于位置，就近推荐</text>
</view>
<view class="feature-item">
<view class="feature-icon">
<uni-icons type="document" size="36" color="#256BFA"></uni-icons>
</view>
<text class="feature-title">简历指导</text>
<text class="feature-desc">专业建议，优化简历</text>
</view>
<view class="feature-item">
<view class="feature-icon">
<uni-icons type="book-filled" size="36" color="#256BFA"></uni-icons>
</view>
<text class="feature-title">政策指引</text>
<text class="feature-desc">最新政策，实时更新</text>
</view>
<view class="feature-item">
<view class="feature-icon">
<uni-icons type="videocam-filled" size="36" color="#256BFA"></uni-icons>
</view>
<text class="feature-title">技能培训</text>
<text class="feature-desc">线上学习，提升技能</text>
</view>
</view>
</view>
</view>
<!-- 常见问题 -->
<view class="guidance-section">
<view class="section-title">
<uni-icons type="help-filled" size="24" color="#256BFA"></uni-icons>
<text class="title-text">常见问题</text>
</view>
<view class="section-content">
<view class="faq-item">
<view class="faq-question">
<uni-icons type="right" size="18" color="#256BFA"></uni-icons>
<text>如何修改个人信息？</text>
</view>
<view class="faq-answer">
<text>在"我的"页面点击个人信息，进入编辑页面即可修改基本信息、求职意向等。</text>
</view>
</view>
<view class="faq-item">
<view class="faq-question">
<uni-icons type="right" size="18" color="#256BFA"></uni-icons>
<text>如何查看投递记录？</text>
</view>
<view class="faq-answer">
<text>在"我的"页面点击"投递记录"，即可查看所有已投递的职位和状态。</text>
</view>
</view>
<view class="faq-item">
<view class="faq-question">
<uni-icons type="right" size="18" color="#256BFA"></uni-icons>
<text>如何收藏职位？</text>
</view>
<view class="faq-answer">
<text>在职位详情页面点击右上角的收藏按钮，即可将职位添加到收藏夹。</text>
</view>
</view>
<view class="faq-item">
<view class="faq-question">
<uni-icons type="right" size="18" color="#256BFA"></uni-icons>
<text>如何联系客服？</text>
</view>
<view class="faq-answer">
<text>如果您在使用过程中遇到问题，可以在"我的"页面找到"联系客服"入口，或拨打客服热线。</text>
</view>
</view>
</view>
</view>
<!-- 温馨提示 -->
<view class="guidance-section">
<view class="section-title">
<uni-icons type="warning-filled" size="24" color="#256BFA"></uni-icons>
<text class="title-text">温馨提示</text>
</view>
<view class="section-content">
<view class="tips-list">
<view class="tip-item">
<uni-icons type="circle" size="12" color="#256BFA" class="tip-icon"></uni-icons>
<text class="tip-text">请确保填写的个人信息真实有效，这有助于企业更好地了解您。</text>
</view>
<view class="tip-item">
<uni-icons type="circle" size="12" color="#256BFA" class="tip-icon"></uni-icons>
<text class="tip-text">定期更新简历，保持简历内容的时效性。</text>
</view>
<view class="tip-item">
<uni-icons type="circle" size="12" color="#256BFA" class="tip-icon"></uni-icons>
<text class="tip-text">多关注"附近工作"和"推荐职位"，不错过好机会。</text>
</view>
<view class="tip-item">
<uni-icons type="circle" size="12" color="#256BFA" class="tip-icon"></uni-icons>
<text class="tip-text">如有任何疑问，欢迎随时联系我们的客服团队。</text>
</view>
</view>
</view>
</view>
<!-- 结尾鼓励 -->
<view class="guidance-section end-section">
<view class="encourage-content">
<uni-icons type="thumbsup-filled" size="48" color="#256BFA"></uni-icons>
<text class="encourage-text">祝您早日找到理想的工作！</text>
<text class="encourage-subtext">喀什智慧就业平台与您同行</text>
</view>
</view>
</scroll-view>
</view>
</template>
<script setup>
import { onLoad } from '@dcloudio/uni-app';
onLoad(() => {
// 页面加载时的逻辑
console.log('服务指导页面加载');
});
</script>
<style lang="stylus" scoped>
.service-guidance-container {
width: 100%;
height: 100vh;
background-color: #F5F7FA;
display: flex;
flex-direction: column;
position: relative;
}
.guidance-header {
padding: 32rpx 24rpx;
background-color: #FFFFFF;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
text-align: center;
box-sizing: border-box;
}
.header-title {
display: block;
font-size: 36rpx;
font-weight: bold;
color: #333333;
margin-bottom: 8rpx;
}
.header-subtitle {
display: block;
font-size: 24rpx;
color: #666666;
}
.guidance-content {
flex: 1;
padding: 24rpx;
overflow-y: scroll;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
.guidance-section {
background-color: #FFFFFF;
border-radius: 16rpx;
padding: 32rpx;
margin-bottom: 24rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}
.section-title {
display: flex;
align-items: center;
margin-bottom: 24rpx;
}
.title-text {
font-size: 28rpx;
font-weight: bold;
color: #333333;
margin-left: 12rpx;
}
.section-content {
font-size: 24rpx;
color: #666666;
line-height: 1.6;
}
/* 步骤样式 */
.step-item {
display: flex;
margin-bottom: 32rpx;
align-items: flex-start;
}
.step-number {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
background-color: #256BFA;
color: #FFFFFF;
font-size: 24rpx;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
flex-shrink: 0;
}
.step-content {
flex: 1;
}
.step-title {
display: block;
font-size: 26rpx;
font-weight: bold;
color: #333333;
margin-bottom: 8rpx;
}
.step-desc {
display: block;
font-size: 24rpx;
color: #666666;
line-height: 1.6;
}
/* 功能网格样式 */
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24rpx;
margin-top: 16rpx;
}
.feature-item {
text-align: center;
padding: 24rpx;
background-color: #F8FAFC;
border-radius: 12rpx;
}
.feature-icon {
margin-bottom: 16rpx;
}
.feature-title {
display: block;
font-size: 24rpx;
font-weight: bold;
color: #333333;
margin-bottom: 8rpx;
}
.feature-desc {
display: block;
font-size: 20rpx;
color: #999999;
}
/* 常见问题样式 */
.faq-item {
margin-bottom: 24rpx;
padding-bottom: 24rpx;
border-bottom: 1rpx solid #F0F0F0;
}
.faq-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.faq-question {
display: flex;
align-items: center;
font-size: 26rpx;
font-weight: bold;
color: #333333;
margin-bottom: 12rpx;
}
.faq-question uni-icons {
margin-right: 12rpx;
}
.faq-answer {
font-size: 24rpx;
color: #666666;
line-height: 1.6;
padding-left: 40rpx;
}
/* 温馨提示样式 */
.tips-list {
margin-top: 16rpx;
}
.tip-item {
display: flex;
align-items: flex-start;
margin-bottom: 16rpx;
font-size: 24rpx;
color: #666666;
line-height: 1.6;
}
.tip-icon {
margin-right: 12rpx;
margin-top: 8rpx;
flex-shrink: 0;
}
.tip-text {
flex: 1;
}
/* 结尾鼓励样式 */
.end-section {
text-align: center;
background: linear-gradient(135deg, #256BFA 0%, #6A8FFF 100%);
color: #FFFFFF;
}
.end-section .section-title {
color: #FFFFFF;
justify-content: center;
}
.end-section .title-text {
color: #FFFFFF;
}
.encourage-content {
text-align: center;
}
.encourage-content uni-icons {
margin-bottom: 16rpx;
}
.encourage-text {
display: block;
font-size: 32rpx;
font-weight: bold;
color: #FFFFFF;
margin-bottom: 8rpx;
}
.encourage-subtext {
display: block;
font-size: 24rpx;
color: rgba(255, 255, 255, 0.9);
}
</style>