使用VUE做的个人简历

简单使用vue实现的单页面demo，希望对大家有帮助！

连接查看地址：https://eight1302.github.io/my_resume/my_resume/view/resume.html

html部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/resume.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">
<link rel="shortcut icon" href="free.ico">
<title>FREE履历</title>
</head>
<body>
<div id="resume" class="col-md-12" style="height: 100%;overflow-y: auto;">
<div class="col-md-12 resume" style="padding: 0;height: auto;width: 50%;max-width: 937px;margin-bottom: 40px;">
<section class="col-md-10" style="padding: 0px;padding-bottom: 20px;">
<div class="col-md-2 img" style="padding: 0;">
<img v-bind:src="img" class="one">
</div>
<div class="col-md-10" style="padding: 0;">
<div class="col-md-12 name" style="padding: 0;">
<span style="font-weight: bold;">{{name}}</span>
</div>
<div class="col-md-12 position" style="padding: 0;">
<span class="job">{{job}}</span>
</div>
<div class="col-md-12 " style="padding: 0;">
<ul style="text-align: left;list-style: none;">
<li style="float: left;">
<i class="fa fa-envelope" aria-hidden="true"></i>{{email}}
</li>
<li style="float: left;">
<i class="fa fa-phone" aria-hidden="true"></i> {{phone}}
</li>
<li style="float: left;">
<i class="fa fa-github" aria-hidden="true"></i> <a v-bind:href="github">{{github_name}}</a>
</li>
</ul>
</div>
<div class="col-md-12" style="padding: 0;">

</div>
</div>
</section>
<section class="col-md-12" style="padding: 0;height: auto;">
<div class="education">
<span class="education_ba">
<i class="fa fa-address-card-o fa-1" style="margin-right: 10px;"></i>{{education_ba}}
</span>
<hr / style="border-top: 1px solid #161515;">
</div>
<div class="col-md-12">
<div class="col-md-12" v-for="date in education">
<div class="col-md-6 three"><strong>{{date.school}}</strong>  {{date.region}}</div>
<div class="col-md-6 three" style="text-align: right;">{{date.time}}</div>
<div class="col-md-6 three"><strong>{{date.degree}}</strong>  {{date.professional}}</div>
<div class="col-md-6 three" style="text-align: right;"><strong>{{date.course}}</strong></div>
</div>
</div>
</section>
<section class="col-md-12" style="padding: 0;height: auto;">
<div class="education">
<span class="education_ba"><i class="fa fa-building fa-1" style="margin-right: 10px;"></i>{{work_experience}}</span>
<hr / style="border-top: 1px solid #161515;">
</div>
<div class="col-md-12" v-for="date in work_info">
<div class="col-md-4 three"><strong>{{date.company}}</strong>  {{date.region}}</div>
<div class="col-md-4 three" style="text-align: center;">{{date.job_position}}</div>
<div class="col-md-4 three" style="text-align: right;">{{date.times}}</div>
</div>
</section>
<section class="col-md-12" style="padding: 0;height: auto;">
<div class="education">
<span class="education_ba"><i class="fa fa-users fa-1" style="margin-right: 10px;"></i>{{project_experience}}</span>
<hr style="border-top: 1px solid #161515;" />
</div>
<div class="col-md-12 three" v-for="date in project_info">
<div class="col-md-12 three"><strong>{{date.projuct_name}}</strong></div>
<div class="col-md-6 three"><strong>{{date.name}}</strong>  {{date.job_position}}</div>
<div class="col-md-6 three" style="text-align: right;">{{date.times}}</div>
<div class="col-md-12 three" style="text-align: left;">
<ul class="info" v-for="date in date.values">
<li>{{date.info}}</li>

</ul>
</div>
<div class="col-md-12 three">
<span>{{date.describe}}</span>
</div>
</div>
</section>
<section class="col-md-12" style="padding: 0;height: auto;">
<div class="education">
<span class="user-o education_ba"><i class="fa fa-user-circle-o fa-1" style="margin-right: 10px;"></i>{{person_product}}</span>
<hr / style="border-top: 1px solid #161515;">
</div>
<div class="col-md-12 three" v-for="date in person_info">
<div class="col-md-6 three"><strong>{{date.name}}</strong>  {{date.job_position}}</div>
<div class="col-md-6 three" style="text-align: right;">{{date.times}}</div>
<div class="col-md-12 three" style="text-align: left;">
<ul class="info">
<li>{{date.info}}</li>
</ul>
</div>
</div>
</section>
<section class="col-md-12" style="padding: 0;height: auto;">
<div class="education">
<span class="education_ba"><i class="fa fa-tags fa-1" style="margin-right: 10px;"></i>{{skills}}</span>
<hr / style="border-top: 1px solid #161515;">
</div>
<div class="col-md-12 three">
<div class="col-md-6" v-for="date in skills_info">
<span><strong>{{date.name}} : </strong>{{date.language}}</span>
</div>
</div>
</section>
<section class="col-md-12" style="padding: 0;height: auto;">
<div class="education">
<span class="education_ba"><i class="fa fa-diamond fa-1" style="margin-right: 10px;"></i>其他</span>
<hr / style="border-top: 1px solid #161515;">
</div>
<div class="col-md-12 three" style="text-align: left;">
<ul class="info" v-for="date in other_list">
<li><strong>{{date.name}} : </strong><a href="https://github.com/eight1302/">{{date.language}}</a></li>
</ul>
</div>
</section>
</div>
</div>
</body>
<script src="../js/jquery.min.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/react_resune.js"></script>
</html>

css部分：

html, body {
background: url(../view/timg.jpg) no-repeat center center fixed;
margin: 0;
padding: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
overflow: -webkit-paged-x;

}
.resume{
margin-left: 25%;
margin-top: 20px;
background: #fff;
padding: 0;

}
.header{
height: 100px;
}
.img{
width: 100px;
height: 135px;
padding: 0;
margin: auto;
}
.one{
width: 100px;
height: 135px;
margin-left: 10px;
margin-top: 20px;
}
.two{
padding: 0;
}
.name{
text-align: center;
font-size: 30px;
/* height: 90px; */
margin-top: 57px;
font-family: cursive;
}
.position{
height: 20px;
line-height: 20px;
font-family: cursive;
text-align: right;
}
ul{
width: 500px;
margin: auto;
}
ul>li{
margin-right: 30px;
}
.info{
width: 100%;
}
.job{
margin-right: 150px;
font-size: 17px;
margin-right: 62px;
font-size: 17px;
color: #000;
font-family: serif;
}
.education{

}
.education_ba{
font-size: 19px;
font-family: fantasy;
margin-left: 20px;
font-weight: bold;
color: #666666;
}
.three{
text-align: left;
font-family: "Roboto Condensed", Arial, sans-serif;
background-color: #fff;
font-size: 15px;
line-height: 24px;
color: #666666;
font-weight: 300;

}
.education {
margin-top: 15px;
}

vuejs部分：

new Vue({
el: '#resume',
data: {
img : '',
name: '杨有生',
email: '',
phone: '',
github : '',
github_name : '',
job : '求职意向：C语言高级工程师',
education_ba : '教育背景',
education : [{
school : '',
region : '',
time : '2013-2017',
degree : '学士',
professional : '',
course : '本科',
}],
work_experience : '工作经历',
work_info : [
{
id : '1',
company : '北京创元成业科技有限公司',
region : '北京',
job_position : 'Web前端初级工程师',
times : '2017.10~至今',
},
{
id : '2',
company : '北京匡恩网络科技有限责任公司',
region : '北京',
job_position : 'Web前端初级工程师',
times : '2016.10~2017.4',
},
],
project_experience : '项目经历',
project_info : [
{
id : '1',
projuct_name : '企业项目',
name : '创元生产平台',
job_position : 'Web前端开发',
times : '2017.2~至今',
values : [{
info : '运用BootStrap/JQuery/jsp',
},{
info : '采用前后端分离',
},{
info : '采用JSON/AJAX数据交互',
},{
info : '采用RequreJS前端模块化',
},{
info : '运用echartjs实现数据可视化',
}],
describe : '对客户新增的产品进行专业的维护以及报价、支付凭证审核、对于合同的不同类型的产品进行生产流程分配。',
},
{
id : '2',
projuct_name : '企业项目',
name : '客户下单平台',
job_position : 'Web前端开发',
times : '2017.10~2017.12',
values : [{
info : '运用BootStrap/JQuery',
},{
info : '采用前后端分离',
},{
info : '采用JSON/AJAX数据交互',
},{
info : '运用echartjs实现数据可视化',
}],
describe : '推广公司生产的单片机产品，解决公司传统的接单方式，通过客户注册，添加客户需要的产品详细信息以及生产相关的文件，客户对自己添加的产品进行下单生成合同，创元成业公司接单生产，对客户的合同需生产的产品进行报价、用户上传支付凭证等以及售后服务。',
},
{
id : '3',
projuct_name : '商业项目',
name : '工控安全卫士',
job_position : 'Web前端开发',
times : '2017.1~2017.4',
values : [{
info : '运用BootStrap/JQuery/css3',
},{
info : '自定义组件',
},{
info : '采用前后端分离',
},{
info : '采用JSON/AJAX数据交互',
},{
info : '采用RequreJS前端模块化',
},{
info : '运用echartjs/gojs实现数据可视化',
}],
describe : '类似杀毒软件网络安全管理',
},
{
id : '4',
projuct_name : '商业项目',
name : '工控卫士集中管理平台',
job_position : 'Web前端开发',
times : '2016.10~2017.1',
values : [{
info : '运用angular框架',
},{
info : '自定义组件',
},{
info : '采用前后端分离',
},{
info : '采用JSON/AJAX数据交互',
},{
info : '采用RequreJS/NodeJS前端模块化',
},{
info : '开发过程中解决了很多问题，如跨域问题等',
}],
describe : '针对传统的工业进行网络安全管理',
}
],
person_product : '个人项目',
person_info : [
{
id : '1',
name : '我的个人博客',
job_position : '全站开发',
times : '2017.2~至今',
info : '使用JQuery/Javascript/NodeJS/vue/mongodb',
},
{
id : '2',
name : '终端管理系统(毕业设计)',
job_position : '全站开发',
times : '2017.1~2017.6',
info : '使用JQuery/Javascript/PHP/MySql',
},
{
id : '3',
name : '在线商城 ',
job_position : '全站开发',
times : '2016.4~2016.6',
info : '使用JQuery/Javascript/java/jsp/MySql',
},
{
id : '4',
name : '多用户留言系统',
job_position : '全站开发',
times : '2015.11~2016.4',
info : '使用JQuery/Javascript/PHP/MySql',
},
{
id : '5',
name : 'CMS内容管理系统',
job_position : '全站开发',
times : '2015.5~2015.10',
info : '使用JQuery/Javascript/PHP/MySql',
}
],
skills : '技能',
skills_info : [
{
id : '1',
name : '语言',
language : 'C语言',
},
{
id : '2',
name : '其他',
language : 'HTTP/JSP(技术)',
},
{
id : '3',
name : '框架',
language : 'Jquery/Bootstrap/vue/angular',
},
{
id : '4',
name : '数据库',
language : 'MySql/MongoDB',
},
{
id : '5',
name : '前端工具 ',
language : 'webpack',
},
{
id : '6',
name : '版本管理 ',
language : 'git',
}
],
other : '其他',
other_list : [
{
id : '1',
name : 'github',
language : '',
},
{
id : '2',
name : 'CSDN博客',
language : '',
},
{
id : '3',
name : '个人描述',
language : '性格开朗，喜欢学习专研以及技术总结',
}
]
}
})

使用VUE做的个人简历相关推荐

VUE做一个公共的提示组件，显示两秒自动隐藏，显示的值父组件传递给子组件
需求:VUE做一个公共的提示组件,显示两秒自动隐藏,显示的值由父组件动态传给子组件. 效果图: 实现步骤: 1.创建一个子组件 Toptips.vue (它就是公共提示组件), optips.vue代 ...
哟，2020年了！试着用vue做一个自己的小程序吧~~
Table of Content 前言 1. 生命周期 1. Vue的生命周期 2. 微信小程序页面生命周期 3. uni-app生命周期 1. 应用生命周期 2. 页面生命周期 2. 项目搭建 1. ...
哟，2020 年了，用 Vue 做一个自己的小程序吧！| 原力计划
作者 | End_less_,责编 | 夕颜来源 | CSDN博客头图 | CSDN 下载自视觉中国出品 | CSDN(ID:CSDNnews) 前言今天,我们来学习一下如何使用vue进行微信 ...
用HTML+CSS简单做了张简历表格
这里写自定义目录标题用HTML+CSS简单做了张简历表格效果图: 代码块: 用HTML+CSS简单做了张简历表格效果图: 代码块: <!DOCTYPE html> <html& ...
html倒计时10s,vue做30s倒计时，在最后10s倒数的时候有个放大的效果
题目描述 vue做30s倒计时,在最后10s的时候有个放大的效果题目来源及自己的思路相关代码 // 请把代码文本粘贴到下方(请勿用图片代替代码) {{second}} export default ...
学了HTML，快来试着做一份简历吧
HTML使用案例--简历 HTML使用案例案例一:展示简历信息案例二:填写简历信息实现步骤拆解 HTML使用案例之前我们熟悉了HTML的一些基本操作,今天我们就用这些知识来尝试着做一份简历吧~ ...
使用vue做一个“淘宝“项目——3
做出分类页面前言:做出首页,详细请看前两篇文章 1.使用vue做一个"淘宝"项目(做出首页) 2.使用vue做一个"淘宝"项目(显示商品栏) 目录: 创建项目 ...
百度前端技术学院--零基础--第二天给自己做一个在线简历吧
百度前端技术学院–零基础–第二天给自己做一个在线简历吧课程目标通过简单的实践,更加清楚地了解HTML是什么,HTML5是什么.学习基本的HTML标签,理解HTML语义化概念任务描述用code ...
vue做h5项目横屏
vue做h5项目横屏竖屏切换,主要叙述横屏样式逻辑是旋转页面就可以页面代码结构: <div class="widDiv"><div></div&g ...

使用VUE做的个人简历

使用VUE做的个人简历相关推荐

最新文章

热门文章