247 lines
6.2 KiB
Vue
247 lines
6.2 KiB
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>
|