456 lines
16 KiB
Vue
456 lines
16 KiB
Vue
<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> |