Vue+Element实现⽹页版个⼈简历系统（推荐）
这篇⽂章介绍⼀个使⽤Vue+Element实现的个⼈简历系统，主要⽤到的技术有：vue、element、css3、css定位。
作者在window10进⾏开发，⽬前只在chrome上进⾏过测试，没有⼤的⽑病。但是还有很多⼩功能还不完善，代码也未进⾏优化，后续会继续完善功能，优化代码。声明：项⽬相对来说就是⼀个纯静态页⾯，代码都⽐较简单，⼤佬可闭眼绕过，或者看⼀眼留下宝贵意见也可
⼀.项⽬介绍
本项⽬是⼀个⽹页版的个⼈简历系统，主要使⽤的技术为vue2+element进⾏实现。错误script error
个⼈简历系统主要包含六个单⽂件组件：顶部菜单、⾸页、个⼈简介、个⼈技能、⼯作经历和底部页脚。
先来⼀个动图感受⼀下：
项⽬⽬录：
下⾯就来详细介绍⼀下每个组件。
⼆.顶部菜单
顶部菜单组件为: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" >⾸页</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.说明菜单
南阳oj菜单的实现使⽤了element的
菜单整体使⽤了fixed定位，将其固定在浏览器顶部；并且使⽤z-index设置菜单堆叠在最顶层。
图标
图标采⽤了element的组件
菜单跳转
我们点击菜单栏的四个选项，页⾯会⾃动滚动到对应的视图。对应的实现的函数是handleSelect函数，该函数作⽤于提供的select事件的回调函数。
在这⾥，需要关注的参数为index，它是 <el-menu-item>元素设置的index属性值。
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
}
三.⾸页
⾸页组件为：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去实现的。
按照正常的⽂档流，这⼀个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.源代码
<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" >
<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{
php开发招聘padding: 50px 20px;
}
.aboutus .el-timeline-item__wrapper{
top: -8px;
}
.aboutus .title p .el-tag{学生个人网页html代码
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;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论