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 相关文章推荐
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
微信小程序登录态控制深入分析
Apr 12 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 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 会话(session 时间设定)使用入门代码
2008/06/05 PHP
php实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
php定时执行任务设置详解
2015/02/06 PHP
php去掉文件前几行的方法
2015/07/29 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
php生成与读取excel文件
2016/10/14 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
Prototype Object对象 学习
2009/07/12 Javascript
文本框的字数限制功能jquery插件
2009/11/24 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
Python动态加载模块的3种方法
2014/11/22 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
Python用input输入列表的实例代码
2020/02/07 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
优秀英语专业毕业生求职信
2013/11/23 职场文书
幼师自我鉴定
2014/02/01 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
党支部半年考察意见
2015/06/01 职场文书
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技