码库记事本

码库记事本

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

小诸哥 0

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

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

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

 

一.项目介绍

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

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

先来一个动图感受一下:

项目目录:

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

二.顶部菜单

顶部菜单组件为:src\components\menu\topmenu.vue

1.源代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<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设置菜单堆叠在最顶层。

图标

 

图标采用了element的icon 组件

菜单跳转

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

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

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

1
2
3
4
5
6
7
8
9
10
11
//点击菜单栏的选择,自动滚动到对应的视图
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. 源代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<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去实现的。

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

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

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

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

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

修改完成后的样式:

四.个人简介

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

1.源代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<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;
 }