使用VUE做的個人簡歷

阿新 • • 發佈：2019-01-12

簡單使用vue實現的單頁面demo，希望對大家有幫助！

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做的個人簡歷

HTML+CSS做一個個人簡歷

Vue+Element實現網頁版個人簡歷系統

vue開發-個人理解

做個人網站的一些經驗

用vue做app內嵌頁遇到的坑

用vue做一個酷炫的menu

個人簡歷

使用vue做項目如何提高代碼效率

盒子模型折磨人！！！個人簡歷來一份

Vue 做項目經驗

大學生個人簡歷模板

微信小程序|個人簡歷

Vue 做圖片上傳

使用Vue做一個購物車

用html+css寫一下個人簡歷

會計183鄭揚玲個人簡歷

田倩瑜的個人簡歷

會計183李家豔個人簡歷

房歆翊的個人簡歷

使用VUE做的個人簡歷

相關推薦