Vue+Element实现网页版个人简历系统

Posted 2020-11-25 小土豆的博客世界

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue+Element实现网页版个人简历系统相关的知识，希望对你有一定的参考价值。

作者：小土豆biubiubiu

博客园：www.cnblogs.com/HouJiao/

掘金：https://juejin.im/user/58c61b4361ff4b005d9e894d

简书：https://www.jianshu.com/u/cb1c3884e6d5

微信公众号：不知名宝藏程序媛

(关注"不知名宝藏程序媛"免费领取前端电子书籍。文章公众号首发，关注公众号第一时间获取最新文章。)

码字不易，点赞鼓励哟~

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

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

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

一.项目介绍

　　本项目是一个网页版的个人简历系统，主要使用的技术为vue2+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设置菜单堆叠在最顶层。

　　图标

　　图标采用了element的 icon 组件

　　菜单跳转

　　我们点击菜单栏的四个选项，页面会自动滚动到对应的视图。对应的实现的函数是handleSelect函数，该函数作用于 NavMenu 导航菜单提供的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" 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>，本科学历以上是关于Vue+Element实现网页版个人简历系统的主要内容，如果未能解决你的问题，请参考以下文章 
 webpack从零构建一个vue+element项目
 （免费领取源码）基于Springboot+Vue+Element-ui的精美个人博客系统的设计与实现（附源码）,可做毕业设计
 vite+vue3+ts实战项目，教你实现一个网页版的typora！(前端篇)
 楠橘星简洁版后台管理系统 Vue + Element 后台管理系统
 基于Java+Springmvc+vue+element实现高校心理健康系统详细设计和实现
 基于Java+SpringBoot+vue+element实现前后端分离玩具商城系统