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