You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
366 lines
11 KiB
366 lines
11 KiB
|
|
let textArr = [
|
|
{
|
|
name: 'h2',
|
|
class: 'inten',
|
|
text: '求职意向：前端开发工程师'
|
|
}, {
|
|
name: 'h4',
|
|
class: 'text-title',
|
|
text: '基本信息'
|
|
}, {
|
|
name: 'div',
|
|
class: 'base-info',
|
|
children: [{
|
|
name: 'div',
|
|
children: [{
|
|
name: 'div',
|
|
text: '姓名：xieyaxin'
|
|
},{
|
|
name: 'div',
|
|
text: '年龄：23'
|
|
}]
|
|
}, {
|
|
name: 'div',
|
|
children: [{
|
|
name: 'div',
|
|
text: '毕业院校：中山大学南方学院'
|
|
},{
|
|
name: 'div',
|
|
text: '联系电话：15622749328'
|
|
}]
|
|
}]
|
|
}, {
|
|
name: 'h4',
|
|
class: 'text-title',
|
|
text: '教育背景'
|
|
}, {
|
|
name: 'div',
|
|
class: 'school',
|
|
children: [{
|
|
name: 'span',
|
|
class: 'mr',
|
|
text: '学校：中山大学南方学院'
|
|
}, {
|
|
name: 'span',
|
|
text: '专业：计算机科学与技术'
|
|
}, {
|
|
name: 'div',
|
|
text: '主修课程：HTML、CSS、JavaScript、Vue、JavaEE、MySQL',
|
|
}]
|
|
}, {
|
|
name: 'h4',
|
|
class: 'text-title',
|
|
text: '专业技能'
|
|
}, {
|
|
name: 'ul',
|
|
class: 'ul-list',
|
|
children: [{
|
|
name: 'li',
|
|
text:'熟练掌握',
|
|
children: [{
|
|
name: 'span',
|
|
class: 'tag',
|
|
text: 'H5、CSS3、ES6'
|
|
}]
|
|
}, {
|
|
name: 'li',
|
|
text:'能熟练运用不同主流UI框架ElementUI及多个移动端UI框架'
|
|
}, {
|
|
name: 'li',
|
|
text:'掌握前端主流',
|
|
children: [{
|
|
name: 'span',
|
|
class: 'tag',
|
|
text: 'Vue框架'
|
|
}]
|
|
}, {
|
|
name: 'li',
|
|
text:'熟练掌握',
|
|
children: [{
|
|
name: 'span',
|
|
class: 'tag',
|
|
text: 'H5混合APP开发'
|
|
}, {
|
|
name: 'span',
|
|
text: '，跨多端技术uni-app、apicloud'
|
|
}]
|
|
}, {
|
|
name: 'li',
|
|
text:'了解微信小程序开发'
|
|
}, {
|
|
name: 'li',
|
|
text:'熟悉后端语言Java、node.js'
|
|
}, {
|
|
name: 'li',
|
|
text: '熟悉',
|
|
children: [{
|
|
name: 'span',
|
|
class: 'tag',
|
|
text: 'css预处理器'
|
|
}, {
|
|
name: 'span',
|
|
text: 'sass、stylus以及前端构建工具webpack和npm包管理库'
|
|
}]
|
|
}]
|
|
}, {
|
|
name: 'h4',
|
|
class: 'text-title',
|
|
text: '工作经历'
|
|
}, {
|
|
name: 'div',
|
|
class: 'work',
|
|
children:[{
|
|
name: 'span',
|
|
class: 'mr',
|
|
text: '2018.08 — 2019.06'
|
|
}, {
|
|
name: 'span',
|
|
text: 'web前端开发'
|
|
}]
|
|
}, {
|
|
name: 'ul',
|
|
class: 'ul-list',
|
|
children: [{
|
|
name: 'li',
|
|
text:'担任公司前端技术部主管，负责',
|
|
children: [{
|
|
name: 'span',
|
|
class: 'tag',
|
|
text: '带领新人、项目安排、BUG解决、产品优化、定期开展技术交流会议'
|
|
}]
|
|
}, {
|
|
name: 'li',
|
|
text: '负责公司项目开发（web hybridApp、微信公众号H5），其他公司基础项目开发，如PC端商城，企业响应式网站，APP开发！'
|
|
}]
|
|
}, {
|
|
name: 'h4',
|
|
class: 'text-title',
|
|
text: '项目经验'
|
|
}, {
|
|
name: 'div',
|
|
class: 'item-lv',
|
|
children: [{
|
|
name: 'ul',
|
|
class: 'ul-list',
|
|
children: [{
|
|
name: 'li',
|
|
class: 'project-title',
|
|
text: '项目一：宠物商城（混合APP开发）'
|
|
}, {
|
|
name: 'li',
|
|
text: '使用技术栈：YDUI框架、',
|
|
children: [{
|
|
name: 'span',
|
|
class: 'tag',
|
|
text: 'Vue全家桶、ApiCloud跨多端打包'
|
|
}]
|
|
}, {
|
|
name: 'li',
|
|
text: '项目描述：基于vue-cli搭建的web应用，多用户商城。功能主要包括商家入驻平台上传个人身份信息、发布宠物信息、会员商家一对一聊天、商城买卖、城市筛选。其中包含收货地址、搜索记录、宠物和商家店铺收藏的CRUD操作'
|
|
}]
|
|
}, {
|
|
name: 'ul',
|
|
class: 'ul-list',
|
|
children: [{
|
|
name: 'li',
|
|
class: 'project-title',
|
|
text: '项目二：智慧校园类（混合APP开发）'
|
|
}, {
|
|
name: 'li',
|
|
text: '使用技术栈：',
|
|
children: [{
|
|
name: 'span',
|
|
class: 'tag',
|
|
text: 'Vue全家桶、'
|
|
}, {
|
|
name: 'span',
|
|
text: '滴滴官方'
|
|
}, {
|
|
name: 'span',
|
|
class: 'tag',
|
|
text: 'cube-ui'
|
|
}, {
|
|
name: 'span',
|
|
text: '框架、'
|
|
}, {
|
|
name: 'span',
|
|
class: 'tag',
|
|
text: 'ApiCloud跨多端打包'
|
|
}]
|
|
}, {
|
|
name: 'li',
|
|
text: '项目描述：老师发布作业、考勤点到、发布校园动态...家长接收信息，与老师端进行交互'
|
|
}]
|
|
}, {
|
|
name: 'ul',
|
|
class: 'ul-list',
|
|
children: [{
|
|
name: 'li',
|
|
class: 'project-title',
|
|
text: '项目三：微信公众号，亲子游商城'
|
|
}, {
|
|
name: 'li',
|
|
text: '使用技术栈：',
|
|
children: [{
|
|
name: 'span',
|
|
class: 'tag',
|
|
text: 'Vue、Vue-Router、Axios、Stylus'
|
|
}, {
|
|
name: 'span',
|
|
text: '、YDUI、Vue-awesome-swiper'
|
|
}]
|
|
}, {
|
|
name: 'li',
|
|
text: '项目描述：1. Vue-cli脚手架搭建项目'
|
|
}, {
|
|
name: 'li',
|
|
text: '2. 使用Vue-Router做应用页面跳转，路由导航守卫权限控制,params、query传参'
|
|
}, {
|
|
name: 'li',
|
|
text: '3. Axios用做Ajax数据交互，dev环境下配置代理解决跨域，使用createAPI配置baseURL。'
|
|
}, {
|
|
name: 'li',
|
|
text: '4. 使用CSS预处理器stylus简化CSS代码编写，浏览器兼容前缀，rem函数封装。'
|
|
}, {
|
|
name: 'li',
|
|
text: '5. 使用UI框架YDUI，减少不必要的造轮子，提高代码编写效率，用户体验。'
|
|
}, {
|
|
name: 'li',
|
|
text: '6. 使用vue-awesome-swiper轮播图插件。'
|
|
}]
|
|
}, {
|
|
name: 'ul',
|
|
class: 'ul-list',
|
|
children: [{
|
|
name: 'li',
|
|
class: 'project-title',
|
|
text: '项目四：企业官网（响应式）、商城（PC)兼容IE8以及多端浏览器'
|
|
}, {
|
|
name: 'li',
|
|
text: '使用技术栈：',
|
|
children: [{
|
|
name: 'span',
|
|
class: 'tag',
|
|
text: 'jQuery'
|
|
}]
|
|
}, {
|
|
name: 'li',
|
|
text: 'PC使用兼容写法兼容Ie8、使用渐进增强逐渐增添些许特效，mediaQuery实现网页自适应，移动端样式权重高于PC，完成移动端页面布局。'
|
|
}]
|
|
}]
|
|
}, {
|
|
name: 'h4',
|
|
class: 'text-title',
|
|
text: '自我评价'
|
|
}, {
|
|
name: 'ul',
|
|
class: 'ul-list',
|
|
children: [{
|
|
name: 'li',
|
|
text:'具有',
|
|
children: [{
|
|
name: 'span',
|
|
class: 'tag',
|
|
text: '团队管理经验'
|
|
}, {
|
|
name: 'span',
|
|
text: '，拥有良好的'
|
|
}, {
|
|
name: 'span',
|
|
class: 'tag',
|
|
text: '团队协调能力'
|
|
}, {
|
|
name: 'span',
|
|
text: '，工作当中和同事融洽相处'
|
|
}]
|
|
}, {
|
|
name: 'li',
|
|
text:'常混迹于',
|
|
children: [{
|
|
name: 'span',
|
|
class: 'tag',
|
|
text: '前端主流社区'
|
|
}, {
|
|
name: 'span',
|
|
text: '（github、掘金、知乎、简书），翻阅前端'
|
|
}, {
|
|
name: 'span',
|
|
class: 'tag',
|
|
text: '大咖'
|
|
}, {
|
|
name: 'span',
|
|
text: '博客（张鑫旭、阮一峰、黄轶）'
|
|
}]
|
|
}, {
|
|
name: 'li',
|
|
text:'热爱前端、思维活跃、学习能力强，抗压能力强。'
|
|
}, {
|
|
name: 'li',
|
|
text:'性格随和、诚恳稳重、身体素质较好、能够很快地适应新环境。'
|
|
}]
|
|
}
|
|
]
|
|
let style = `
|
|
/*
|
|
* 面试官你好，我是Edit，广东惠州人
|
|
* 为您精心准备一份不一样的简历来介绍自己
|
|
* 首先准备一些样式
|
|
*/
|
|
*{
|
|
transition: all .8s;
|
|
}
|
|
/* 稍等，在容器上添加点样式 */
|
|
#codeEdit{
|
|
color: #fff;
|
|
background: #1E1E1E;
|
|
}
|
|
#resume{
|
|
box-shadow: -1px 4px 9px 3px rgba(0, 0, 0, .15);
|
|
}
|
|
/* 我需要一点代码高亮 */
|
|
pre#codeEdit{
|
|
color: #CE9e78;
|
|
}
|
|
.token.selector{
|
|
color: rgb(230, 155, 43);
|
|
}
|
|
.token.comment{
|
|
color: #6A9955;
|
|
font-size: 14px;
|
|
}
|
|
.token.property{
|
|
color: #60C8FE;
|
|
}
|
|
.token.function {
|
|
color: #DD4A68;
|
|
}
|
|
/* 接下来请欣赏我的个人简历吧 */
|
|
`
|
|
let balloon = `
|
|
<div class="balloon-wrap">
|
|
<img src="/public/static/images/balloon.png" id="bg-balloon-small">
|
|
<img src="/public/static/images/balloon.png" id="bg-balloon-large">
|
|
<img src="/public/static/images/logo.png" id="bg-balloon-logo">
|
|
</div>
|
|
<div class="connect" style="width: 100%; display: flex;"></div>`
|
|
let line = `
|
|
<div class="line-wrap">
|
|
<div class="line-left"></div>
|
|
<div class="line-right">
|
|
<p class="line-defColor line-item1"></p>
|
|
<p class="line-darkColor line-item2"></p>
|
|
<p class="line-defColor line-item3"></p>
|
|
<p class="line-midColor line-item4"></p>
|
|
<p class="line-darkColor line-item5"></p>
|
|
<p class="line-midColor line-item6"></p>
|
|
<p class="line-darkColor line-item7"></p>
|
|
<p class="line-midColor line-item7"></p>
|
|
</div>
|
|
</div>
|
|
<div class="connect"></div>`
|
|
let text = `
|
|
<div class="text-wrap"></div>
|
|
`
|
|
|
|
|
|
|