Vue+Element实现网页版个人简历系统(推荐)


Posted in Javascript onDecember 31, 2019

Vue+Element实现网页版个人简历系统(推荐)

这篇文章介绍一个使用Vue+Element实现的个人简历系统,主要用到的技术有:vue、element、css3、css定位。

作者在window10进行开发,目前只在chrome上进行过测试,没有大的毛病。但是还有很多小功能还不完善,代码也未进行优化,后续会继续完善功能,优化代码。

声明:项目相对来说就是一个纯静态页面,代码都比较简单,大佬可闭眼绕过,或者看一眼留下宝贵意见也可

 Vue+Element实现网页版个人简历系统(推荐)

一.项目介绍

本项目是一个网页版的个人简历系统,主要使用的技术为vue2+element进行实现。

个人简历系统 主要 包含六个单文件组件:顶部菜单、首页、个人简介、个人技能、工作经历和底部页脚。

先来一个动图感受一下:

Vue+Element实现网页版个人简历系统(推荐)

项目目录:

Vue+Element实现网页版个人简历系统(推荐)

下面就来详细介绍一下每个组件。

二.顶部菜单

Vue+Element实现网页版个人简历系统(推荐)

顶部菜单组件为: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">个人简介</el-menu-item>
  <el-menu-item index="3">个人技能</el-menu-item>
  <el-menu-item index="4">工作经历</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.说明 菜单

菜单的实现使用了element的 NavMenu 导航菜单 组件

菜单整体使用了fixed定位,将其固定在浏览器顶部;并且使用z-index设置菜单堆叠在最顶层。

图标

Vue+Element实现网页版个人简历系统(推荐) 

图标采用了element的icon 组件

菜单跳转

我们点击菜单栏的四个选项,页面会自动滚动到对应的视图。对应的实现的函数是handleSelect函数,该函数作用于 NavMenu 导航菜单 提供的select事件的回调函数。

Vue+Element实现网页版个人简历系统(推荐)

在这里,需要关注的参数为index,它是 <el-menu-item>元素设置的index属性值。

Vue+Element实现网页版个人简历系统(推荐)

handleSelect函数根据index参数,可以得知当前激活了那个菜单,然后根据菜单的name值,让滚动条至对应的视图。

//点击菜单栏的选择,自动滚动到对应的视图
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
}

三.首页

Vue+Element实现网页版个人简历系统(推荐)

首页组件为: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前端开发 '
 }
 }
}
</script>

2.说明

首页主要是一个动画和中间的文字布局。

动画

关于背景图片的动画特性使用的就是css3的animation,动画名为bg,在整个动画过程中改变background-size的大小,改变background-position的位置即可。

中间文字和布局

中间的文字和文字周围的局部依靠的是p标签和四个div去实现的。

Vue+Element实现网页版个人简历系统(推荐)

按照正常的文档流,这一个p元素和四个div的布局如下:

Vue+Element实现网页版个人简历系统(推荐)

设置四个div元素为行内块级元素:display:inline-block;(此时p元素依然是块级元素)

Vue+Element实现网页版个人简历系统(推荐)

这个时候布局基本是下面的样子

Vue+Element实现网页版个人简历系统(推荐)

然后在使用相对定位将四个边框的top/bottom/left/right位置进行调整

Vue+Element实现网页版个人简历系统(推荐)

最后就是将对应的border边框进行修改,比如:左上角的div#box1只设置border--top和border-left;左下角的div#box3只设置border-left和border-bottom。

修改完成后的样式:

Vue+Element实现网页版个人简历系统(推荐)

四.个人简介

Vue+Element实现网页版个人简历系统(推荐)

个人简介组件代码:src\components\AboutUs\AboutUs.vue

1.源代码

<template>
 <div class="aboutus">
 <div class="title">
  <el-divider content-position="center">个人简介</el-divider>
  <p><el-tag>xxxx大学</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月毕业于<span class="large">某喵喵喵大学</span>,本科学历。在校专业为xxxxxxx,主修课程为xxxx、xxxx、xx和xxxx等课程。在校期间主要技能为java和php语言,和实验室小伙伴一起完成过内部管理平台(成员在线时长记录、周计划制定和组长评价)、纳新面试系统等。
   </div>
   </el-col>
   <el-col :span="8">
   <div class="grid-content bg-purple">
    毕业后在某某公司做web开发工作,主要的技能为css、javascript、jquery和python。主要参与的产品有xxxxxxx、xxxx。现就职于一家创业公司做web前端岗位,主要的技能为vue全家桶。
   </div>
   </el-col>
   <el-col :span="8">
   <div class="grid-content bg-purple">
    工作中比较自律,对待工作认真负责,喜欢<span class="large">不断学习</span>来提升自己。希望能找到一群志同道合的人一起工作,不断进步和成长。
   </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.说明

个人简介这个组件中,主要包含三个内容:分割线标题、分割线标题下的蓝色标签、内容部分和文字上方半透明圆形/方形阴影

分割线标题

分割线使用了element的 Divider 分割线 组件,并且在分割线上面添加子自定义的文字内容。

分割线的样式为公共的样式,在src\components\Product\Product.vue组件中,可以在浏览器中-右键-查看元素样式,可以看到生效的样式来源于该Product组件。

蓝色标签

蓝色的标签使用了element的 Tag 标签 组件。

内容

内容部分使用了element的 layout24分栏布局 ,总共分为三列,每一栏占据的列数为8列:el-col的span属性设置为8(同一行的span设置数组相加不能超过24,否则会换行)

Vue+Element实现网页版个人简历系统(推荐)

同时三列中间的间隔通过设置el-row的gutter属性来实现。

Vue+Element实现网页版个人简历系统(推荐)

文字上方半透明圆形/方形阴影

文字上方有两个阴影:蓝色方形半透明阴影和橙色圆形半透明阴影

这两个也比较简单,代码位于分栏布局下方,设置了两个div

Vue+Element实现网页版个人简历系统(推荐)

对这两个div都设置为100*100的大小,圆形形状的实现通过设置圆角属性border-radius为50%;菱形形状通过将div进行2d的旋转45度即可实现。

两个阴影的颜色和透明度可以自行修改,两个阴影的位置通过设置两个元素的定位为absolute,并且设置相应的偏移量(top、bottom、left、right)即可。

五.个人技能

Vue+Element实现网页版个人简历系统(推荐)

个人技能组件代码:src\components\SecurityResearch\SecurityResearch.vue

1.源代码

<template>
 <div class="securityresearch">
  <div class="title">
  <el-divider content-position="center">个人技能</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.说明

个人技能组件主要就是技能模块的布局(分割线和蓝色标签在个人简介组件介绍时已经说过,这里不再重复)

技能模块布局

所有的技能模块均使用span元素实现

Vue+Element实现网页版个人简历系统(推荐)

默认的情况下,这七个技能模块并排在一行显示,且没有任何样式

Vue+Element实现网页版个人简历系统(推荐)

然后给这七个模块设置共同的样式:字体颜色白色、圆角50%;在给这七个技能模块设置你想要的元素大小(width/height)、字体大小、背景颜色。

Vue+Element实现网页版个人简历系统(推荐)

然后我们需要设置两个定位:

技能模块的父元素div#skill设置为relative相对定位

将vue技能模块之外的其他六个技能模块进行absolute绝对定位

Vue+Element实现网页版个人简历系统(推荐)

最后一步就是根据自己的喜好设置其他六个技能模块的偏移量(top、bottom、left、right),将不同的技能模块移动到不同的位置。

六.工作经历

Vue+Element实现网页版个人简历系统(推荐)

工作经历组件代码:src\components\SecurityResearch\SecurityResearch.vue

1.源代码

<template>
 <div class="productpage">
 <div class="title">
  <el-divider content-position="center">工作经历</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>
    主要负责某某产品、某某某产品的前端开发和部分后端功能开发<br>
    产品bug修复<br>
    产品前场问题反馈处理<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>项目1</p>
   </div>
  </div>
  <div class="content" @click="drawerHander(2)">
  <img src='../../assets/p1.jpg' class='ifns'>
  <div class='hover'>
  <p>项目2</p>
  </div>
  </div>
  <div class="content" @click="drawerHander(3)">
  <img src='../../assets/p1.jpg' class='ifns'>
  <div class='hover'>
   <p>项目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">
    项目介绍:{{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">
    开发环境:{{projectInfo[currentIndex]['developEnv']}}
    </div>
   </el-col>
   </el-row>
   <el-row>
   <el-col :span="24">
    <div class="grid-content bg-purple-dark">
    职责描述:
    </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: '项目1',
   intro: '这里是项目介绍',
   company: '某司',
   developEnv: '这里是开发环境介绍',
   responsibility: {
   res1: '职责1',
   res2: '职责2',
   res3: '职责3'
   }
  }, {
   title: '项目2',
   intro: '这里是项目2介绍',
   company: '某司',
   developEnv: '这里是开发环境介绍',
   responsibility: {
   res1: '职责1',
   res2: '职责2',
   res3: '职责3'
   }
  }, {
   title: '项目3',
   intro: '这里是项目3介绍',
   company: '某司',
   developEnv: '这里是开发环境介绍',
   responsibility: {
   res1: '职责1',
   res2: '职责2',
   res3: '职责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.说明

工作经历组件主要包含两个部分:时间轴、项目介绍、点击项目打开详情

时间轴

时间轴使用的是element的 Timeline 时间线 组件。

项目介绍

项目介绍这块先说一下三个项目的布局。

Vue+Element实现网页版个人简历系统(推荐)

这三个div包裹在div#project中,div#project采用了flex布局,就可以轻松的实现三个div并排显示,并且根据屏幕大小自适应显示。

点击项目打开详情

点击项目显示的这个详情使用了element的 Drawer 抽屉 组件,在这里有一些逻辑代码,就是div#content的drawerHander函数。在点击项目时,传递了对应项目的编号index,然后设置两个数据:

drawer=true
currentIndex = index-1

drawer数据是控制 Drawer 抽屉 组件是否显示的一个变量,设置为true表示抽屉打开。

currentIndex用于记录当前用户点击打开的是那个项目,假如传递的index是1,表示当前用户点击打开的是项目1,那么currentIndex的值就为0(使用index-1的原因就是因为数组下标是从0开始的,后面需要从projectInfo数组中获取数据)。

此时我们就可以通过这个currentIndex,从保存项目数据的projectInfo中获取下标为0的元素的项目的标题(title)、项目介绍(intro)、开发该项目时所属的公司(company)、项目开发环境(developEnv)和职责(responsibility),并且将这几个数据展示到 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">
    项目介绍:{{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">
    开发环境:{{projectInfo[currentIndex]['developEnv']}}
    </div>
   </el-col>
   </el-row>
   <el-row>
   <el-col :span="24">
    <div class="grid-content bg-purple-dark">
    职责描述:
    </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>

七.底部页脚

Vue+Element实现网页版个人简历系统(推荐)

底部页脚组件: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">联系我</span>
  <br/>
  <br/>
  <span class="copyright">版权所有 JEmbrace</span>
  <el-drawer
  title="联系我"
  :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.说明

底部页脚组件比较简单,三个文字+两个分割线也是使用了element的分割线组件 中的垂直分割线。

点击联系我,可以打开一个抽屉,这个跟工作经历中的抽屉一样,不在重复说明。

八.总结

到此这个简单的简历项目就完成了,其实还有很多细节的小功能没有完善,后期会继续完善。

以上所述是小编给大家介绍的Vue+Element实现网页版个人简历系统,希望对大家有所bang !

Javascript 相关文章推荐
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
基于jQuery的倒计时实现代码
May 30 Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
js+css实现红包雨效果
Jul 12 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
小程序外卖订单界面的示例代码
Dec 30 #Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 #Javascript
JS三级联动代码格式实例详解
Dec 30 #Javascript
JavaScript监听触摸事件代码实例
Dec 30 #Javascript
微信公众号服务器验证Token步骤图解
Dec 30 #Javascript
微信小程序封装多张图片上传api代码实例
Dec 30 #Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 #Javascript
You might like
解析php开发中的中文编码问题
2013/08/08 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
js重写方法的简单实现
2016/07/10 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
Python实现的简单hangman游戏实例
2015/06/28 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
python实现图像外边界跟踪操作
2020/07/13 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
超市开店计划书
2014/04/26 职场文书
2014年党务公开方案
2014/05/08 职场文书
七夕情人节促销方案
2014/06/07 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
匿名信格式范文
2015/05/27 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书