514 lines
14 KiB
Vue
514 lines
14 KiB
Vue
<template>
|
||
<AppLayout backGorundColor="#FFFFFF">
|
||
<view class="resume-example-container">
|
||
<!-- 职业选择 -->
|
||
<view class="job-selector">
|
||
<view
|
||
class="job-option"
|
||
:class="{ active: selectedJob === job.value }"
|
||
v-for="job in jobTypes"
|
||
:key="job.value"
|
||
@click="selectJob(job.value)"
|
||
>
|
||
{{ job.label }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 简历示例内容 -->
|
||
<view class="resume-content">
|
||
<view class="resume-header">
|
||
<view class="name">{{ resumeData.name }}</view>
|
||
<view class="contact-info">
|
||
<text v-if="resumeData.phone">{{ resumeData.phone }} | </text>
|
||
<text v-if="resumeData.email">{{ resumeData.email }} | </text>
|
||
<text v-if="resumeData.location">{{ resumeData.location }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="resume-section" v-if="resumeData.education && resumeData.education.length > 0">
|
||
<view class="section-title">教育背景</view>
|
||
<view class="section-content">
|
||
<view class="education-item" v-for="(edu, index) in resumeData.education" :key="index">
|
||
<view class="edu-header">
|
||
<text class="school">{{ edu.school }}</text>
|
||
<text class="date">{{ edu.date }}</text>
|
||
</view>
|
||
<view class="degree">{{ edu.degree }} - {{ edu.major }}</view>
|
||
<view class="desc" v-if="edu.desc">{{ edu.desc }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="resume-section" v-if="resumeData.skills && resumeData.skills.length > 0">
|
||
<view class="section-title">技能专长</view>
|
||
<view class="section-content">
|
||
<view class="skills-grid">
|
||
<view class="skill-tag" v-for="(skill, index) in resumeData.skills" :key="index">
|
||
{{ skill }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="resume-section" v-if="resumeData.experience && resumeData.experience.length > 0">
|
||
<view class="section-title">工作经历</view>
|
||
<view class="section-content">
|
||
<view class="experience-item" v-for="(exp, index) in resumeData.experience" :key="index">
|
||
<view class="exp-header">
|
||
<text class="company">{{ exp.company }}</text>
|
||
<text class="date">{{ exp.date }}</text>
|
||
</view>
|
||
<view class="position">{{ exp.position }}</view>
|
||
<view class="responsibilities">
|
||
<view class="resp-item" v-for="(resp, idx) in exp.responsibilities" :key="idx">
|
||
{{ resp }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="resume-section" v-if="resumeData.projects && resumeData.projects.length > 0">
|
||
<view class="section-title">项目经验</view>
|
||
<view class="section-content">
|
||
<view class="project-item" v-for="(project, index) in resumeData.projects" :key="index">
|
||
<view class="project-header">
|
||
<text class="project-name">{{ project.name }}</text>
|
||
<text class="date">{{ project.date }}</text>
|
||
</view>
|
||
<view class="project-role">{{ project.role }}</view>
|
||
<view class="project-desc">{{ project.desc }}</view>
|
||
<view class="achievements">
|
||
<view class="achievement-item" v-for="(ach, idx) in project.achievements" :key="idx">
|
||
● {{ ach }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</AppLayout>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue';
|
||
|
||
// 职业类型选项
|
||
const jobTypes = [
|
||
{ label: '软件工程师', value: 'software-engineer' },
|
||
{ label: '产品经理', value: 'product-manager' },
|
||
{ label: '市场营销', value: 'marketing' },
|
||
{ label: '财务会计', value: 'accountant' },
|
||
{ label: '人力资源', value: 'hr' }
|
||
];
|
||
|
||
// 当前选中的职业
|
||
const selectedJob = ref('software-engineer');
|
||
|
||
// 选择职业
|
||
const selectJob = (jobValue) => {
|
||
selectedJob.value = jobValue;
|
||
};
|
||
|
||
// 不同职业的简历数据
|
||
const resumeSamples = {
|
||
'software-engineer': {
|
||
name: '张伟',
|
||
phone: '138-0000-0000',
|
||
email: 'zhangwei@example.com',
|
||
location: '北京市',
|
||
education: [
|
||
{
|
||
school: '清华大学',
|
||
date: '2016.09 - 2020.06',
|
||
degree: '本科',
|
||
major: '计算机科学与技术',
|
||
desc: '主修课程：数据结构、算法设计、数据库原理、操作系统'
|
||
}
|
||
],
|
||
experience: [
|
||
{
|
||
company: '腾讯科技有限公司',
|
||
date: '2022.07 - 至今',
|
||
position: '高级前端工程师',
|
||
responsibilities: [
|
||
'负责公司核心产品的前端架构设计和开发',
|
||
'主导团队技术选型，推动Vue3 + TypeScript技术栈落地',
|
||
'优化前端性能，页面加载速度提升40%',
|
||
'指导初级工程师，提升团队整体技术水平'
|
||
]
|
||
},
|
||
{
|
||
company: '阿里巴巴集团',
|
||
date: '2020.07 - 2022.06',
|
||
position: '前端工程师',
|
||
responsibilities: [
|
||
'参与电商平台前端开发，使用Vue.js框架',
|
||
'负责商品详情页和购物车模块开发',
|
||
'优化页面响应速度，用户体验评分提升25%',
|
||
'编写技术文档，协助测试团队完成测试用例'
|
||
]
|
||
}
|
||
],
|
||
skills: [
|
||
'Vue.js', 'React', 'JavaScript', 'TypeScript', 'HTML5', 'CSS3',
|
||
'Node.js', 'Webpack', 'Git', '小程序开发', '响应式设计'
|
||
],
|
||
projects: [
|
||
{
|
||
name: '电商平台前端重构项目',
|
||
date: '2023.03 - 2023.09',
|
||
role: '前端技术负责人',
|
||
desc: '主导公司核心电商平台的前端重构工作，提升用户体验和系统性能',
|
||
achievements: [
|
||
'采用微前端架构，实现多团队协同开发',
|
||
'页面加载速度提升40%，用户停留时长增加25%',
|
||
'代码可维护性大幅提升，bug率降低30%'
|
||
]
|
||
}
|
||
]
|
||
},
|
||
'product-manager': {
|
||
name: '李娜',
|
||
phone: '139-0000-0000',
|
||
email: 'lina@example.com',
|
||
location: '上海市',
|
||
education: [
|
||
{
|
||
school: '复旦大学',
|
||
date: '2015.09 - 2019.06',
|
||
degree: '本科',
|
||
major: '工商管理',
|
||
desc: '主修课程：市场营销、消费者行为学、战略管理'
|
||
}
|
||
],
|
||
experience: [
|
||
{
|
||
company: '字节跳动',
|
||
date: '2021.05 - 至今',
|
||
position: '高级产品经理',
|
||
responsibilities: [
|
||
'负责短视频产品功能规划和迭代优化',
|
||
'分析用户行为数据，制定产品策略',
|
||
'协调设计、开发、运营团队推进项目落地',
|
||
'跟踪竞品动态，持续优化产品体验'
|
||
]
|
||
},
|
||
{
|
||
company: '美团',
|
||
date: '2019.07 - 2021.04',
|
||
position: '产品经理',
|
||
responsibilities: [
|
||
'负责外卖商家端产品功能设计',
|
||
'通过数据分析发现业务增长点',
|
||
'推动商户入驻流程优化，提升转化率15%',
|
||
'组织跨部门会议，推进项目进度'
|
||
]
|
||
}
|
||
],
|
||
skills: [
|
||
'产品设计', '数据分析', '用户研究', 'Axure', 'SQL',
|
||
'项目管理', '沟通协调', '市场调研', '竞品分析'
|
||
],
|
||
projects: [
|
||
{
|
||
name: '智能推荐系统优化',
|
||
date: '2023.01 - 2023.06',
|
||
role: '项目经理',
|
||
desc: '优化平台内容推荐算法，提升用户粘性和内容消费时长',
|
||
achievements: [
|
||
'推荐准确率提升20%，用户满意度显著提高',
|
||
'日活跃用户增长12%，内容消费时长增加18%',
|
||
'项目获公司年度创新奖'
|
||
]
|
||
}
|
||
]
|
||
},
|
||
'marketing': {
|
||
name: '王强',
|
||
phone: '136-0000-0000',
|
||
email: 'wangqiang@example.com',
|
||
location: '广州市',
|
||
education: [
|
||
{
|
||
school: '中山大学',
|
||
date: '2017.09 - 2021.06',
|
||
degree: '本科',
|
||
major: '市场营销',
|
||
desc: '主修课程：市场营销学、消费者心理学、品牌管理'
|
||
}
|
||
],
|
||
experience: [
|
||
{
|
||
company: '宝洁公司',
|
||
date: '2021.08 - 至今',
|
||
position: '品牌推广专员',
|
||
responsibilities: [
|
||
'负责洗护用品品牌线上线下推广活动策划',
|
||
'分析市场数据，制定营销策略',
|
||
'协调广告公司和媒体资源',
|
||
'跟踪活动效果，撰写分析报告'
|
||
]
|
||
}
|
||
],
|
||
skills: [
|
||
'品牌推广', '社交媒体营销', '数据分析', '活动策划',
|
||
'广告投放', 'SEO/SEM', '内容营销', '客户关系管理'
|
||
],
|
||
projects: [
|
||
{
|
||
name: '新品上市推广 campaign',
|
||
date: '2023.03 - 2023.05',
|
||
role: '推广负责人',
|
||
desc: '负责公司新款洗发水产品上市的全渠道推广活动',
|
||
achievements: [
|
||
'首月销售额突破500万元，超出预期目标20%',
|
||
'社交媒体话题阅读量超1000万次',
|
||
'成功签约10位知名KOL进行产品推广'
|
||
]
|
||
}
|
||
]
|
||
},
|
||
'accountant': {
|
||
name: '陈丽',
|
||
phone: '137-0000-0000',
|
||
email: 'chenli@example.com',
|
||
location: '深圳市',
|
||
education: [
|
||
{
|
||
school: '厦门大学',
|
||
date: '2018.09 - 2022.06',
|
||
degree: '本科',
|
||
major: '会计学',
|
||
desc: '主修课程：财务会计、成本会计、税法、审计'
|
||
}
|
||
],
|
||
experience: [
|
||
{
|
||
company: '德勤会计师事务所',
|
||
date: '2022.07 - 至今',
|
||
position: '审计员',
|
||
responsibilities: [
|
||
'参与多家上市公司年度财务报表审计',
|
||
'编制审计工作底稿，整理审计证据',
|
||
'协助项目经理完成审计报告',
|
||
'与客户沟通解决审计过程中发现的问题'
|
||
]
|
||
}
|
||
],
|
||
skills: [
|
||
'财务报表分析', '税务筹划', '审计', 'Excel', 'SAP',
|
||
'财务软件', '成本核算', '风险控制', '财务制度设计'
|
||
],
|
||
projects: [
|
||
{
|
||
name: '制造业企业年度审计',
|
||
date: '2023.09 - 2024.01',
|
||
role: '审计小组成员',
|
||
desc: '参与大型制造企业的年度财务报表审计工作',
|
||
achievements: [
|
||
'发现并纠正财务处理错误3处，涉及金额约200万元',
|
||
'优化审计流程，提高工作效率15%',
|
||
'协助企业完善内控制度，获得客户高度评价'
|
||
]
|
||
}
|
||
]
|
||
},
|
||
'hr': {
|
||
name: '赵敏',
|
||
phone: '135-0000-0000',
|
||
email: 'zhaomin@example.com',
|
||
location: '杭州市',
|
||
education: [
|
||
{
|
||
school: '浙江大学',
|
||
date: '2019.09 - 2023.06',
|
||
degree: '本科',
|
||
major: '人力资源管理',
|
||
desc: '主修课程：人力资源管理、组织行为学、薪酬管理'
|
||
}
|
||
],
|
||
experience: [
|
||
{
|
||
company: '华为技术有限公司',
|
||
date: '2023.07 - 至今',
|
||
position: '人力资源专员',
|
||
responsibilities: [
|
||
'负责员工招聘、面试安排和入职培训',
|
||
'协助制定员工绩效考核方案',
|
||
'处理员工关系问题，维护良好工作氛围',
|
||
'管理员工档案和薪酬福利'
|
||
]
|
||
}
|
||
],
|
||
skills: [
|
||
'招聘面试', '员工培训', '绩效管理', '劳动关系',
|
||
'薪酬福利', 'HR系统', '沟通协调', '团队建设'
|
||
],
|
||
projects: [
|
||
{
|
||
name: '新员工培训体系优化',
|
||
date: '2024.01 - 2024.03',
|
||
role: '项目负责人',
|
||
desc: '优化公司新员工培训体系，提升培训效果',
|
||
achievements: [
|
||
'建立标准化培训流程，培训满意度提升25%',
|
||
'开发在线学习平台，节省培训成本30%',
|
||
'新员工试用期通过率提高至95%'
|
||
]
|
||
}
|
||
]
|
||
}
|
||
};
|
||
|
||
// 当前显示的简历数据
|
||
const resumeData = computed(() => {
|
||
return resumeSamples[selectedJob.value] || resumeSamples['software-engineer'];
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.resume-example-container {
|
||
padding: 32rpx;
|
||
background: #FFFFFF;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.job-selector {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
margin-bottom: 32rpx;
|
||
|
||
.job-option {
|
||
padding: 16rpx 24rpx;
|
||
background: #F5F5F5;
|
||
border-radius: 6rpx;
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
cursor: pointer;
|
||
|
||
&.active {
|
||
background: #1A1A1A;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.resume-content {
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
padding: 32rpx;
|
||
border: 1rpx solid #F0F0F0;
|
||
}
|
||
|
||
.resume-header {
|
||
text-align: center;
|
||
margin-bottom: 32rpx;
|
||
padding-bottom: 24rpx;
|
||
border-bottom: 1rpx solid #F0F0F0;
|
||
|
||
.name {
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
color: #1A1A1A;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.contact-info {
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
|
||
.resume-section {
|
||
margin-bottom: 32rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #1A1A1A;
|
||
margin-bottom: 20rpx;
|
||
padding-bottom: 12rpx;
|
||
border-bottom: 1rpx solid #F0F0F0;
|
||
}
|
||
|
||
.section-content {
|
||
padding-left: 0;
|
||
}
|
||
}
|
||
|
||
.education-item, .experience-item, .project-item {
|
||
margin-bottom: 24rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.edu-header, .exp-header, .project-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 8rpx;
|
||
|
||
.school, .company, .project-name {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.date {
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
}
|
||
|
||
.degree, .position, .project-role {
|
||
font-size: 26rpx;
|
||
color: #1A1A1A;
|
||
margin-bottom: 8rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.desc, .project-desc {
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.responsibilities, .achievements {
|
||
margin-top: 8rpx;
|
||
|
||
.resp-item, .achievement-item {
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 1.6;
|
||
margin-bottom: 6rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.skills-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
|
||
.skill-tag {
|
||
padding: 12rpx 20rpx;
|
||
background: #F5F5F5;
|
||
border-radius: 4rpx;
|
||
font-size: 22rpx;
|
||
color: #1A1A1A;
|
||
}
|
||
}
|
||
</style>
|