ks-app-employment-service/pages/resume-guide/resume-guide.vue

<template>
  <AppLayout back-gorund-color="#FFFFFF">
    <view class="resume-guide-container">
      <!-- 页面标题 -->
      <view class="page-header">
        <view class="page-title">简历制作指导</view>
        <view class="page-subtitle">打造专业简历，提升求职成功率</view>
      </view>

      <!-- 简历制作步骤 -->
      <view class="guide-section">
        <view class="section-title">制作步骤</view>
        <view class="steps-list">
          <view class="step-card" v-for="(step, index) in steps" :key="index">
            <view class="step-header">
              <view class="step-number">步骤{{ index + 1 }}</view>
              <view class="step-title">{{ step.title }}</view>
            </view>
            <view class="step-desc">{{ step.desc }}</view>
          </view>
        </view>
      </view>

      <!-- 简历写作技巧 -->
      <view class="guide-section">
        <view class="section-title">写作技巧</view>
        <view class="tips-list">
          <view class="tip-item" v-for="(tip, index) in tips" :key="index">
            <view class="tip-content">
              <view class="tip-title">{{ tip.title }}</view>
              <view class="tip-desc">{{ tip.desc }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 常见错误提醒 -->
      <view class="guide-section">
        <view class="section-title">避坑指南</view>
        <view class="warnings-list">
          <view class="warning-item" v-for="(warning, index) in warnings" :key="index">
            <view class="warning-content">
              <view class="warning-title">{{ warning.title }}</view>
              <view class="warning-desc">{{ warning.desc }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 行动按钮 -->
      <view class="action-buttons">
        <view class="primary-button button-click" @click="startCreateResume">
          开始制作简历
        </view>
        <view class="secondary-button button-click" @click="viewExampleResume">
          查看简历示例
        </view>
      </view>
    </view>
  </AppLayout>
</template>

<script setup>
import { inject, ref } from 'vue';
const { navTo } = inject('globalFunction');

// 制作步骤数据
const steps = ref([
  { title: '基本信息', desc: '填写真实姓名、联系方式、邮箱等基本信息' },
  { title: '教育背景', desc: '按时间倒序填写学历信息，突出最高学历' },
  { title: '技能特长', desc: '列出与目标岗位相关的专业技能' },
  { title: '工作经历', desc: '详细描述工作职责和成就，使用量化数据' },
  { title: '项目经验', desc: '展示参与的重要项目，突出个人贡献' }
]);

// 写作技巧数据
const tips = ref([
  { title: '简洁明了', desc: '简历内容控制在1-2页，重点突出，避免冗长' },
  { title: '目标导向', desc: '根据应聘岗位调整简历内容，突出相关经验' },
  { title: '量化成果', desc: '使用具体数字展示工作成果，如"提升效率30%"' },
  { title: '关键词优化', desc: '包含行业关键词，提高简历被搜索到的概率' },
  { title: '格式规范', desc: '使用标准字体，保持排版整洁，避免错别字' }
]);

// 常见错误数据
const warnings = ref([
  { title: '信息不完整', desc: '确保联系方式、教育经历等重要信息完整' },
  { title: '夸大事实', desc: '如实描述个人能力，避免过度包装' },
  { title: '格式混乱', desc: '保持统一的字体、字号和排版风格' },
  { title: '缺乏针对性', desc: '针对不同岗位调整简历内容' }
]);

// 开始制作简历
const startCreateResume = () => {
  navTo('/packageA/pages/myResume/myResume');
};

// 查看简历示例
const viewExampleResume = () => {
  navTo('/pages/resume-guide/resume-example');
};
</script>

<style lang="scss" scoped>
.resume-guide-container {
  padding: 32rpx;
  background: #FFFFFF;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 28rpx;
  padding: 12rpx 0;
  
  .page-title {
    font-size: 40rpx;
    font-weight: 600;
    color: #1A1A1A;
    margin-bottom: 16rpx;
  }
  
  .page-subtitle {
    font-size: 28rpx;
    color: #666666;
  }
}

.guide-section {
  background: #FFFFFF;
  border-radius: 12rpx;
  padding: 32rpx 0;
  margin-bottom: 24rpx;
  border: 1rpx solid #F0F0F0;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 24rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #F0F0F0;
  padding-left: 20rpx;
}

.steps-list {
  .step-card {
    background: #FFFFFF;
    // border-radius: 8rpx;
    padding: 24rpx;
    border-bottom: 1rpx solid #F0F0F0;
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .step-header {
      display: flex;
      align-items: center;
      margin-bottom: 12rpx;
      
      .step-number {
        font-size: 24rpx;
        font-weight: 600;
        color: #1A1A1A;
        margin-right: 16rpx;
        background: #F5F5F5;
        padding: 4rpx 12rpx;
        border-radius: 4rpx;
      }
      
      .step-title {
        font-size: 28rpx;
        font-weight: 600;
        color: #1A1A1A;
      }
    }
    
    .step-desc {
      font-size: 24rpx;
      color: #666666;
      line-height: 1.4;
    }
  }
}

.tips-list, .warnings-list {
  .tip-item, .warning-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24rpx;
    padding:0 20rpx;
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.tip-item, .warning-item {
  .tip-content, .warning-content {
    flex: 1;
    
    .tip-title, .warning-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #1A1A1A;
      margin-bottom: 8rpx;
    }
    
    .tip-desc, .warning-desc {
      font-size: 24rpx;
      color: #666666;
      line-height: 1.5;
    }
  }
}

.action-buttons {
  margin-top: 40rpx;
  padding: 0 20rpx;
  
  .primary-button, .secondary-button {
    height: 88rpx;
    border-radius: 8rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 30rpx;
    font-weight: 500;
    margin-bottom: 20rpx;
  }
  
  .primary-button {
    background: #1A1A1A;
    color: #FFFFFF;
  }
  
  .secondary-button {
    background: #FFFFFF;
    color: #1A1A1A;
    border: 1rpx solid #D9D9D9;
  }
}

</style>