Vue+Element實(shí)現(xiàn)網(wǎng)頁版?zhèn)€人簡歷系統(tǒng)(推薦)
這篇文章介紹一個(gè)使用Vue+Element實(shí)現(xiàn)的個(gè)人簡歷系統(tǒng)，主要用到的技術(shù)有：vue、element、css3、css定位。
作者在window10進(jìn)行開發(fā)，目前只在chrome上進(jìn)行過測試，沒有大的毛病。但是還有很多小功能還不完善，代碼也未進(jìn)行優(yōu)化，后續(xù)會(huì)繼續(xù)完善功能，優(yōu)化代碼。
聲明：項(xiàng)目相對來說就是一個(gè)純靜態(tài)頁面，代碼都比較簡單，大佬可閉眼繞過，或者看一眼留下寶貴意見也可
一.項(xiàng)目介紹
本項(xiàng)目是一個(gè)網(wǎng)頁版的個(gè)人簡歷系統(tǒng)，主要使用的技術(shù)為vue2+element進(jìn)行實(shí)現(xiàn)。
個(gè)人簡歷系統(tǒng) 主要 包含六個(gè)單文件組件：頂部菜單、首頁、個(gè)人簡介、個(gè)人技能、工作經(jīng)歷和底部頁腳。
先來一個(gè)動(dòng)圖感受一下：
項(xiàng)目目錄：
下面就來詳細(xì)介紹一下每個(gè)組件。
二.頂部菜單
頂部菜單組件為:src\components\menu\TopMenu.vue
1.源代碼
<template>
<!-- components/TopMenu.vue -->
<div class="menupage">
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<p class="logo-title"><i class="el-icon-user"></i>JEmbrace</p>
<el-menu-item index="1" style="margin-left:250px;">首頁</el-menu-item>
<el-menu-item index="2">個(gè)人簡介</el-menu-item>
<el-menu-item index="3">個(gè)人技能</el-menu-item>
<el-menu-item index="4">工作經(jīng)歷</el-menu-item>
</el-menu>
</div>
</template>
<style>
.menupage{
position: fixed;
width: 100%;
top: 0px;
z-index: 100;
}
.menupage .el-menu.el-menu--horizontal{
border-bottom: none;
height: 100px;
line-height: 100px;
}
.menupage .el-menu.el-menu--horizontal>.el-menu-item,.menupage .el-menu--horizontal>.el-submenu .el-submenu__title{
height: 100px;
line-height: 100px;
padding: 0px 50px;
font-size: 16px;
letter-spacing: 4px;
}
.menupage .el-menu--horizontal>.el-menu-item.is-active,.menupage .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
border-bottom-width: 4px;
}
.menupage .logo-title .el-icon-user{
margin-right: 5px;
}
</style>
<style scoped>
.logo-title{
position: absolute;
left: 100px;
top: 0px;
color:#fff;
font-size:26px;
cursor: pointer;
}
.logo-title img{
width: 80px;
outline:none;
vertical-align: middle;
}
</style>
<script>
export default {
name: 'topMenu',
data () {
return {
activeIndex2: '1'
}
},
methods: {
handleSelect (key, keyPath) {
var name = ''
if (key === '1') name = 'homepage'
if (key === '4') name = 'productpage'
if (key === '3') name = 'securityresearch'
if (key === '2') name = 'aboutus'
var targetEle = document.querySelector('.' + name)
var offsetTop = targetEle.offsetTop
document.documentElement.scrollTop = offsetTop - 150
}
}
}
</script>
2.說明 菜單
菜單的實(shí)現(xiàn)使用了element的 NavMenu 導(dǎo)航菜單 組件
菜單整體使用了fixed定位，將其固定在瀏覽器頂部；并且使用z-index設(shè)置菜單堆疊在最頂層。
圖標(biāo)
圖標(biāo)采用了element的icon 組件
菜單跳轉(zhuǎn)
我們點(diǎn)擊菜單欄的四個(gè)選項(xiàng)，頁面會(huì)自動(dòng)滾動(dòng)到對應(yīng)的視圖。對應(yīng)的實(shí)現(xiàn)的函數(shù)是handleSelect函數(shù)，該函數(shù)作用于 NavMenu 導(dǎo)航菜單 提供的select事件的回調(diào)函數(shù)。
在這里，需要關(guān)注的參數(shù)為index，它是 <el-menu-item>元素設(shè)置的index屬性值。
handleSelect函數(shù)根據(jù)index參數(shù)，可以得知當(dāng)前激活了那個(gè)菜單，然后根據(jù)菜單的name值，讓滾動(dòng)條至對應(yīng)的視圖。
//點(diǎn)擊菜單欄的選擇，自動(dòng)滾動(dòng)到對應(yīng)的視圖
handleSelect (index, indexPath) {
var name = ''
if (index === '1') name = 'homepage'
if (index === '4') name = 'productpage'
if (index === '3') name = 'securityresearch'
if (index === '2') name = 'aboutus'
var targetEle = document.querySelector('.' + name)
var offsetTop = targetEle.offsetTop
document.documentElement.scrollTop = offsetTop - 150
}
三.首頁
首頁組件為：src\components\home\HomePage.vue
1. 源代碼
<template>
<div class='homepage'>
<div class="content">
<div class='box' id='box1'></div>
<div class='box' id='box2'> </div>
<p>{{sign}}</p>
<div class='box' id='box3'></div>
<div class='box' id='box4'></div>
</div>
</div>
</template>
<style scoped>
.homepage{
height: 550px;
background: url(../../assets/home_bg.jpg) no-repeat;
background-size: 100% 120%;
color: #fff;
font-size: 28px;
margin-top: 100px;
animation: bg infinite 100s linear alternate;
}
@keyframes bg {
0% {background-size: 110% 130%; }
10% {background-size: 111% 131%; }
20% {background-size: 112% 132%; background-position: bottom;}
30% {background-size: 113% 133%; }
40% {background-size: 114% 134%;}
50% {background-size: 115% 135%;background-position: left;}
60% {background-size: 116% 136%;}
70% {background-size: 117% 137%;}
80% {background-size: 118% 138%;background-position: right;}
90% {background-size: 119% 139%;}
100% {background-size: 120% 140%;}
}
.content{
display: inline-block;
position: relative;
top: 40%;
}
p{
text-shadow: 0px 0px 10px rgba(255,255,255,0.5);
letter-spacing: 10px;
}
.box{
display: inline-block;
width: 100px;
height: 20px;
}
#box1{
border-left:8px solid;
border-top: 8px solid;
position: relative;
right: 150px;
bottom: 20px;
}
#box2{
border-top: 8px solid;
border-right: 8px solid;
position: relative;
left: 150px;
bottom: 20px;
}
#box3{
border-left: 8px solid;
border-bottom: 8px solid;
position: relative;
right: 150px;
top: 20px;
}
#box4{
border-right: 8px solid;
border-bottom: 8px solid;
position: relative;
left: 150px;
top: 20px;
}
</style>
<script>
export default {
name: 'HomePage',
data () {
return {
sign: '專注web前端開發(fā) '
}
}
}
</script>
2.說明
首頁主要是一個(gè)動(dòng)畫和中間的文字布局。
動(dòng)畫
關(guān)于背景圖片的動(dòng)畫特性使用的就是css3的animation，動(dòng)畫名為bg，在整個(gè)動(dòng)畫過程中改變background-size的大小，改變background-position的位置即可。
中間文字和布局
中間的文字和文字周圍的局部依靠的是p標(biāo)簽和四個(gè)div去實(shí)現(xiàn)的。
按照正常的文檔流，這一個(gè)p元素和四個(gè)div的布局如下：
設(shè)置四個(gè)div元素為行內(nèi)塊級元素：display:inline-block;（此時(shí)p元素依然是塊級元素）
這個(gè)時(shí)候布局基本是下面的樣子
然后在使用相對定位將四個(gè)邊框的top/bottom/left/right位置進(jìn)行調(diào)整
最后就是將對應(yīng)的border邊框進(jìn)行修改，比如：左上角的div#box1只設(shè)置border--top和border-left；左下角的div#box3只設(shè)置border-left和border-bottom。
修改完成后的樣式：
四.個(gè)人簡介
個(gè)人簡介組件代碼：src\components\AboutUs\AboutUs.vue
1.源代碼
<template>
<div class="aboutus">
<div class="title">
<el-divider content-position="center">個(gè)人簡介</el-divider>
<p><el-tag>xxxx大學(xué)</el-tag><el-tag>本科</el-tag></p>
</div>
<el-card class="box-card" style="margin-bottom: 20px;">
<div class="text item">
<el-row :gutter="110">
<el-col :span="8">
<div class="grid-content bg-purple">
于2005.07月畢業(yè)于<span class="large">某喵喵喵大學(xué)</span>，本科學(xué)歷。在校專業(yè)為xxxxxxx，主修課程為xxxx、xxxx、xx和xxxx等課程。在校期間主要技能為java和php語言,和實(shí)驗(yàn)室小伙伴一起完成過內(nèi)部管理平臺(tái)(成員在線時(shí)長記錄、周計(jì)劃制定和組長評價(jià))、納新面試系統(tǒng)等。
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
畢業(yè)后在某某公司做web開發(fā)工作,主要的技能為css、javascript、jquery和python。主要參與的產(chǎn)品有xxxxxxx、xxxx?，F(xiàn)就職于一家創(chuàng)業(yè)公司做web前端崗位，主要的技能為vue全家桶。
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
工作中比較自律，對待工作認(rèn)真負(fù)責(zé)，喜歡<span class="large">不斷學(xué)習(xí)</span>來提升自己。希望能找到一群志同道合的人一起工作，不斷進(jìn)步和成長。
</div>
</el-col>
</el-row>
</div>
<div class='topMask square'></div><div class='topMask circular'></div>
</el-card>
</div>
</template>
<script>
export default {
name: 'AboutUs'
}
</script>
<style>
.aboutus .grid-content.line{
border-right: 1px solid #ddd;
height: 150px;
}
.aboutus .el-card__header{
background: #545c64;
}
.aboutus .el-card__body{
padding: 50px 20px;
}
.aboutus .el-timeline-item__wrapper{
top: -8px;
}
.aboutus .title p .el-tag{
margin: 0px 5px;
cursor: pointer;
}
</style>
<style scoped>
.aboutus{
font-size: 14px;
text-align: left;
padding: 0px 100px;
}
.intro{
width: 200px;
border: 1px solid #ddd;
border-radius: 5px;
}
.text {
font-size: 14px;
text-align: left;
line-height: 30px;
text-indent: 2em;
}
.box-card{
position: relative;
}
.item {
display: inline-block;
margin: 30px 50px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.clearfix span{
color: #fff;
font-weight: bold;
}
.title p{
color: #8c8888;
font-size: 15px;
margin-bottom: 80px;
text-align: center;
}
.grid-content .large{
font-size: 16px;
color: #409EFF;
font-weight: bold;
}
.topMask{
width: 100px;
height: 100px;
background-color: rgba(68,138,255,0.2);
transform: rotate(45deg);
position: absolute;
}
.square{
border-radius: 5px;
top: 0px;
}
.circular{
border-radius: 50%;
top:80px;
left: 80%;
background-color: rgba(255, 208, 75,0.2);
}
</style>
2.說明
個(gè)人簡介這個(gè)組件中，主要包含三個(gè)內(nèi)容：分割線標(biāo)題、分割線標(biāo)題下的藍(lán)色標(biāo)簽、內(nèi)容部分和文字上方半透明圓形/方形陰影
分割線標(biāo)題
分割線使用了element的 Divider 分割線 組件，并且在分割線上面添加子自定義的文字內(nèi)容。
分割線的樣式為公共的樣式，在src\components\Product\Product.vue組件中，可以在瀏覽器中-右鍵-查看元素樣式，可以看到生效的樣式來源于該P(yáng)roduct組件。
藍(lán)色標(biāo)簽
藍(lán)色的標(biāo)簽使用了element的 Tag 標(biāo)簽 組件。
內(nèi)容
內(nèi)容部分使用了element的 layout24分欄布局 ，總共分為三列，每一欄占據(jù)的列數(shù)為8列：el-col的span屬性設(shè)置為8（同一行的span設(shè)置數(shù)組相加不能超過24，否則會(huì)換行）
同時(shí)三列中間的間隔通過設(shè)置el-row的gutter屬性來實(shí)現(xiàn)。
文字上方半透明圓形/方形陰影
文字上方有兩個(gè)陰影：藍(lán)色方形半透明陰影和橙色圓形半透明陰影
這兩個(gè)也比較簡單，代碼位于分欄布局下方，設(shè)置了兩個(gè)div
對這兩個(gè)div都設(shè)置為100*100的大小，圓形形狀的實(shí)現(xiàn)通過設(shè)置圓角屬性border-radius為50%；菱形形狀通過將div進(jìn)行2d的旋轉(zhuǎn)45度即可實(shí)現(xiàn)。
兩個(gè)陰影的顏色和透明度可以自行修改，兩個(gè)陰影的位置通過設(shè)置兩個(gè)元素的定位為absolute，并且設(shè)置相應(yīng)的偏移量（top、bottom、left、right）即可。
五.個(gè)人技能
個(gè)人技能組件代碼：src\components\SecurityResearch\SecurityResearch.vue
1.源代碼
<template>
<div class="securityresearch">
<div class="title">
<el-divider content-position="center">個(gè)人技能</el-divider>
<p><el-tag>vue全家桶</el-tag><el-tag >javascript</el-tag><el-tag>css</el-tag></p>
</div>
<div class="skill">
<span class='vue'>Vue</span>
<span class='js'>JS</span>
<span class='css'>CSS</span>
<span class='echarts'>Echarts</span>
<span class='webpack'>webpack</span>
<span class='python'>python</span>
<span class='linux'>linux</span>
</div>
</div>
</template>
<style>
.securityresearch .title p .el-tag{
margin: 0px 5px;
cursor: pointer;
}
.securityresearch .box-card .text{
text-align: left;
}
</style>
<style scoped>
.securityresearch{
font-size: 14px;
padding: 0px 100px;
}
.title p{
color: #8c8888;
font-size: 15px;
margin-bottom: 80px;
text-align: center;
}
.content p{
font-size: 20px;
color: #8c8888;
}
.skill{
margin: 100px 0px;
position: relative;
}
.skill span{
display: inline-block;
color: #fff;
border-radius: 50%;
}
span.vue{
background-color: rgba(102,153,204,1) ;
width: 200px;
height: 200px;
line-height: 200px;
font-size: 28px;
z-index: 100;
}
span.js{
background-color: rgba(255,153,102,0.5);
width: 130px;
height: 130px;
line-height: 130px;
font-size: 26px;
position: absolute;
left: 43%;
bottom: 150px;
z-index: 0;
}
span.css{
background-color: rgba(102,204,204,0.8);
width: 90px;
height: 90px;
font-size: 26px;
line-height: 90px;
font-size: 26px;
position: absolute;
left: 35%;
top: 100px;
z-index: 0;
}
span.echarts{
background-color: rgba(255,153,153,0.7) ;
width: 100px;
height: 100px;
line-height: 100px;
font-size: 24px;
position: absolute;
left: 59%;
bottom: 10px;
z-index: 0;
}
span.webpack{
background-color: rgba(255,204,51,0.8);
width: 70px;
height: 70px;
line-height: 70px;
font-size: 13px;
position: absolute;
left: 30%;
top: 20px;
z-index: 0;
}
span.python{
background-color: rgba(204,102,102,0.5) ;
width: 60px;
height: 60px;
line-height: 60px;
font-size: 14px;
position: absolute;
left: 51%;
bottom: -10px;
z-index: 0;
}
span.linux{
background-color: rgba(153,153,255,0.8) ;
width: 60px;
height: 60px;
line-height: 60px;
font-size: 14px;
position: absolute;
left: 60%;
top: -50px;
z-index: 0;
}
</style>
<script>
export default {
name: 'SecurityResearch'
}
</script>
2.說明
個(gè)人技能組件主要就是技能模塊的布局（分割線和藍(lán)色標(biāo)簽在個(gè)人簡介組件介紹時(shí)已經(jīng)說過，這里不再重復(fù)）
技能模塊布局
所有的技能模塊均使用span元素實(shí)現(xiàn)
默認(rèn)的情況下，這七個(gè)技能模塊并排在一行顯示，且沒有任何樣式
然后給這七個(gè)模塊設(shè)置共同的樣式：字體顏色白色、圓角50%；在給這七個(gè)技能模塊設(shè)置你想要的元素大?。╳idth/height）、字體大小、背景顏色。
然后我們需要設(shè)置兩個(gè)定位：
技能模塊的父元素div#skill設(shè)置為relative相對定位
將vue技能模塊之外的其他六個(gè)技能模塊進(jìn)行absolute絕對定位
最后一步就是根據(jù)自己的喜好設(shè)置其他六個(gè)技能模塊的偏移量（top、bottom、left、right），將不同的技能模塊移動(dòng)到不同的位置。
六.工作經(jīng)歷
工作經(jīng)歷組件代碼：src\components\SecurityResearch\SecurityResearch.vue
1.源代碼
<template>
<div class="productpage">
<div class="title">
<el-divider content-position="center">工作經(jīng)歷</el-divider>
<p><el-tag >某司</el-tag><el-tag>某某司</el-tag></p>
</div>
<div class='experience'>
<el-timeline>
<el-timeline-item timestamp="2010/07/-2014/10" placement="top">
<el-card>
<h4>某司</h4>
<p>
主要負(fù)責(zé)某某產(chǎn)品、某某某產(chǎn)品的前端開發(fā)和部分后端功能開發(fā)<br>
產(chǎn)品bug修復(fù)<br>
產(chǎn)品前場問題反饋處理<br>
</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2014/10-至今" placement="top">
<el-card>
<h4>xxx</h4>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</el-card>
</el-timeline-item>
</el-timeline>
</div>
<div class="project">
<div class="content" @click="drawerHander(1)" >
<img src='../../assets/p1.jpg' class='ifns'>
<div class='hover'>
<p>項(xiàng)目1</p>
</div>
</div>
<div class="content" @click="drawerHander(2)">
<img src='../../assets/p1.jpg' class='ifns'>
<div class='hover'>
<p>項(xiàng)目2</p>
</div>
</div>
<div class="content" @click="drawerHander(3)">
<img src='../../assets/p1.jpg' class='ifns'>
<div class='hover'>
<p>項(xiàng)目3</p>
</div>
</div>
</div>
<el-drawer
:title="projectInfo[currentIndex]['title']"
:visible.sync="drawer"
:direction="direction"
:before-close="handleClose">
<p class='info'>
<el-row>
<el-col :span="24">
<div class="grid-content bg-purple-dark">
項(xiàng)目介紹：{{projectInfo[currentIndex]['intro']}}
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="grid-content bg-purple-dark">
所在公司：{{projectInfo[currentIndex]['company']}}
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="grid-content bg-purple-dark">
開發(fā)環(huán)境：{{projectInfo[currentIndex]['developEnv']}}
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="grid-content bg-purple-dark">
職責(zé)描述:
</div>
<div class="grid-content bg-purple-dark" v-for="(item,key) in projectInfo[currentIndex]['responsibility']" :key="key">
{{projectInfo[currentIndex]['responsibility'][key]}}
</div>
</el-col>
</el-row>
</p>
</el-drawer>
</div>
</template>
<script>
export default {
name: 'Products',
data () {
return {
drawer: false,
direction: 'btt',
currentIndex: 0,
projectInfo: [
{
title: '項(xiàng)目1',
intro: '這里是項(xiàng)目介紹',
company: '某司',
developEnv: '這里是開發(fā)環(huán)境介紹',
responsibility: {
res1: '職責(zé)1',
res2: '職責(zé)2',
res3: '職責(zé)3'
}
}, {
title: '項(xiàng)目2',
intro: '這里是項(xiàng)目2介紹',
company: '某司',
developEnv: '這里是開發(fā)環(huán)境介紹',
responsibility: {
res1: '職責(zé)1',
res2: '職責(zé)2',
res3: '職責(zé)3'
}
}, {
title: '項(xiàng)目3',
intro: '這里是項(xiàng)目3介紹',
company: '某司',
developEnv: '這里是開發(fā)環(huán)境介紹',
responsibility: {
res1: '職責(zé)1',
res2: '職責(zé)2',
res3: '職責(zé)3'
}
}
]
}
},
methods: {
handleClose (done) {
done()
},
drawerHander (index) {
this.drawer = true
this.currentIndex = index - 1
}
}
}
</script>
<style>
div .el-divider--horizontal{
height: 2px;
margin-top:100px;
background-color: rgb(84, 92, 100);
}
div .el-divider__text{
font-size: 26px;
color: #545c64;
}
div .el-drawer__header{
font-size: 20px;
font-weight: blod;
padding-bottom: 20px;
border-bottom: 1px solid;
}
div .el-drawer{
background-color: rgb(61, 67, 72);
color: #ccc;
}
div .el-drawer__body{
padding: 0px 20px 0px 20px;
}
</style>
<style scoped>
.productpage{
padding: 0px 100px 0px 100px;
}
.productpage .project{
display: flex;
justify-content:space-around;
}
.ifns{
width:85%;
display: inline-block;
outline: 1px dashed rgba(84, 92, 100, 0.1);
}
.experience{
text-align: left;
}
.content{
text-align: center;
display: inline;
position: relative;
margin: 20px;
}
.content p{
width: 95%;
color: #fff;
font-size: 14px;
text-align: center;
}
.hover{
position: absolute;
bottom: 5px;
left: 7.5%;
background-color: rgba(84, 92, 100, 0.3);
height: 60px;
width: 85%;
line-height: 60px;
cursor: pointer;
}
.hover:hover{
background-color: rgba(84, 92, 100, 0.6);
}
h1{
border:1px solid #ccc;
height: 0px;
}
.title p{
color: #8c8888;
font-size: 15px;
margin-top: 30px;
margin-bottom: 20px;
}
.title p .el-tag{
margin: 0px 5px;
cursor: pointer;
}
.info{
font-size: 14px;
color: #72767b;
line-height: 25px;
}
</style>
2.說明
工作經(jīng)歷組件主要包含兩個(gè)部分：時(shí)間軸、項(xiàng)目介紹、點(diǎn)擊項(xiàng)目打開詳情
時(shí)間軸
時(shí)間軸使用的是element的 Timeline 時(shí)間線 組件。
項(xiàng)目介紹
項(xiàng)目介紹這塊先說一下三個(gè)項(xiàng)目的布局。
這三個(gè)div包裹在div#project中，div#project采用了flex布局，就可以輕松的實(shí)現(xiàn)三個(gè)div并排顯示，并且根據(jù)屏幕大小自適應(yīng)顯示。
點(diǎn)擊項(xiàng)目打開詳情
點(diǎn)擊項(xiàng)目顯示的這個(gè)詳情使用了element的 Drawer 抽屜 組件，在這里有一些邏輯代碼，就是div#content的drawerHander函數(shù)。在點(diǎn)擊項(xiàng)目時(shí)，傳遞了對應(yīng)項(xiàng)目的編號index，然后設(shè)置兩個(gè)數(shù)據(jù)：
drawer=true currentIndex = index-1
drawer數(shù)據(jù)是控制 Drawer 抽屜 組件是否顯示的一個(gè)變量，設(shè)置為true表示抽屜打開。
currentIndex用于記錄當(dāng)前用戶點(diǎn)擊打開的是那個(gè)項(xiàng)目，假如傳遞的index是1，表示當(dāng)前用戶點(diǎn)擊打開的是項(xiàng)目1，那么currentIndex的值就為0（使用index-1的原因就是因?yàn)閿?shù)組下標(biāo)是從0開始的，后面需要從projectInfo數(shù)組中獲取數(shù)據(jù)）。
此時(shí)我們就可以通過這個(gè)currentIndex，從保存項(xiàng)目數(shù)據(jù)的projectInfo中獲取下標(biāo)為0的元素的項(xiàng)目的標(biāo)題（title）、項(xiàng)目介紹（intro）、開發(fā)該項(xiàng)目時(shí)所屬的公司（company）、項(xiàng)目開發(fā)環(huán)境（developEnv）和職責(zé)（responsibility），并且將這幾個(gè)數(shù)據(jù)展示到 Drawer 抽屜 組件中。
<el-drawer
:title="projectInfo[currentIndex]['title']"
:visible.sync="drawer"
:direction="direction"
:before-close="handleClose">
<p class='info'>
<el-row>
<el-col :span="24">
<div class="grid-content bg-purple-dark">
項(xiàng)目介紹：{{projectInfo[currentIndex]['intro']}}
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="grid-content bg-purple-dark">
所在公司：{{projectInfo[currentIndex]['company']}}
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="grid-content bg-purple-dark">
開發(fā)環(huán)境：{{projectInfo[currentIndex]['developEnv']}}
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="grid-content bg-purple-dark">
職責(zé)描述:
</div>
<div class="grid-content bg-purple-dark" v-for="(item,key) in projectInfo[currentIndex]['responsibility']" :key="key">
{{projectInfo[currentIndex]['responsibility'][key]}}
</div>
</el-col>
</el-row>
</p>
</el-drawer>
七.底部頁腳
底部頁腳組件：src\components\Footer\Footer.vue
1.源代碼
<template>
<div class='footer'>
<span class="scroll"></span>
<el-divider></el-divider>
<span>法律聲明</span>
<el-divider direction="vertical"></el-divider>
<span>友情鏈接</span>
<el-divider direction="vertical"></el-divider>
<span @click="drawer = true">聯(lián)系我</span>
<br/>
<br/>
<span class="copyright">版權(quán)所有 JEmbrace</span>
<el-drawer
title="聯(lián)系我"
:visible.sync="drawer"
:direction="direction"
:before-close="handleClose">
<p class='info'>
<i class="el-icon-phone"></i>電話：18822299999<br/>
<i class="el-icon-message"></i>郵箱：18822299999@163.com<br/>
<i class="el-icon-message"></i>博客：https://www.cnblogs.com/HouJiao/<br/>
<i class="el-icon-message"></i>github：https://github.com/JEmbrace<br/>
</p>
</el-drawer>
</div>
</template>
<style>
.el-divider{
background-color: rgb(84, 92, 100);
}
</style>
<style scoped>
.footer{
height: 250px;
text-align: center;
font-size: 16px;
padding: 0px 100px;
position: relative;
}
.footer{
cursor: pointer;
}
.copyright{
font-size: 12px;
}
.info{
font-size: 14px;
color: #72767b;
line-height: 25px;
}
.footer .scroll{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 5px;
border:1px solid #448aff;
background-color: rgba(68,138,255,0.2);
position: absolute;
left: 5%;
top: -25px;
z-index: 10;
animation: scrollA infinite 20s linear alternate;
}
@keyframes scrollA {
0% {left: 5%;transform: rotate(180deg);};
10% {left: 5%;transform: rotate(270deg);}
20% {left: 5%;transform: rotate(450deg);}
25% {left: 10%;transform: rotate(540deg);}
30% {left: 20%;transform: rotate(720deg);}
35% {left: 30%;transform: rotate(900deg);}
40% {left: 40%;transform: rotate(1080deg);}
45% {left: 50%;transform: rotate(1260deg);}
50% {left: 60%;transform: rotate(1440deg);}
55% {left: 70%;transform: rotate(1620deg);}
60% {left: 80%;transform: rotate(1800deg);}
80% {left: 90%;transform: rotate(2610deg);}
90% {left: 90%;transform: rotate(2340deg);}
100% {left: 90%;transform: rotate(2520deg);}
}
</style>
<script>
export default {
name: 'Footer',
data () {
return {
drawer: false,
direction: 'btt'
}
},
methods: {
handleClose (done) {
done()
}
}
}
</script>
2.說明
底部頁腳組件比較簡單，三個(gè)文字+兩個(gè)分割線也是使用了element的分割線組件 中的垂直分割線。
點(diǎn)擊聯(lián)系我，可以打開一個(gè)抽屜，這個(gè)跟工作經(jīng)歷中的抽屜一樣，不在重復(fù)說明。
八.總結(jié)
到此這個(gè)簡單的簡歷項(xiàng)目就完成了，其實(shí)還有很多細(xì)節(jié)的小功能沒有完善，后期會(huì)繼續(xù)完善。
以上所述是小編給大家介紹的Vue+Element實(shí)現(xiàn)網(wǎng)頁版?zhèn)€人簡歷系統(tǒng)，希望對大家有所bang !
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
使用Vue開發(fā)一個(gè)實(shí)時(shí)性時(shí)間轉(zhuǎn)換指令
我們就來實(shí)現(xiàn)這樣一個(gè)Vue自定義指令v-time，將表達(dá)式傳入的時(shí)間戳實(shí)時(shí)轉(zhuǎn)換為相對時(shí)間。下面小編給大家?guī)砹耸褂肰ue開發(fā)一個(gè)實(shí)時(shí)性時(shí)間轉(zhuǎn)換指令，需要的朋友參考下吧2018-01-01
vue 實(shí)現(xiàn)小程序或商品秒殺倒計(jì)時(shí)
這篇文章主要介紹了vue 實(shí)現(xiàn)倒計(jì)時(shí)秒殺的組件，緊接著通過實(shí)例代碼給大家介紹小程序或者vue商品秒殺倒計(jì)時(shí)功能,需要的朋友可以參考下2019-04-04
Vue輸入框?qū)崟r(shí)驗(yàn)證IP地址合法性并在下方進(jìn)行提示功能實(shí)現(xiàn)
在Vue組件中的IP地址輸入框定義一個(gè)checkIpAddress方法,該方法使用正則表達(dá)式對傳入的IP地址進(jìn)行驗(yàn)證,這篇文章主要介紹了Vue輸入框?qū)崟r(shí)驗(yàn)證IP地址合法性并在下方進(jìn)行提示,需要的朋友可以參考下2024-06-06
Tailwind CSS是一個(gè)流行的前端CSS框架,它基于原子設(shè)計(jì)原則,提供了一套預(yù)構(gòu)建的CSS樣式類,旨在幫助開發(fā)者快速地創(chuàng)建響應(yīng)式、可定制的用戶界面,本文給大家介紹了Vue2中使用tailwindCss的詳細(xì)教程,需要的朋友可以參考下2024-09-09
vue組件中iview的modal組件爬坑問題之modal的顯示與否應(yīng)該是使用v-show
這篇文章主要介紹了vue組件中iview的modal組件爬坑問題之modal的顯示與否應(yīng)該是使用v-show,本文通過實(shí)例圖文相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
vue自定義鍵盤信息、監(jiān)聽數(shù)據(jù)變化的方法示例【基于vm.$watch】
這篇文章主要介紹了vue自定義鍵盤信息、監(jiān)聽數(shù)據(jù)變化的方法,結(jié)合實(shí)例形式分析了vue.js基于vm.$watch進(jìn)行事件監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
Vue3.0動(dòng)態(tài)路由No?match?found?for?location?with?path警告解決辦法
這篇文章主要介紹了Vue3.0動(dòng)態(tài)路由No?match?found?for?location?with?path警告的解決辦法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
這篇文章主要為大家介紹了Vue中$refs和$nextTick的使用方法，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下2022-03-03
這篇文章主要介紹了vue2.0移除或更改的一些東西，vue2.0 移除了index和key，具體內(nèi)容詳情大家參考下本文2017-08-08